# MezBOX design system > Design system for the self-hosted apps on mezbox.de (Stuttgart): paper #F6F6F3 and graphite #14171C > surfaces, ink #141414, one signal yellow #FFD900 (the lid of the logo), Red Hat Display / Text / Mono. > Logo: the "Lifted Lid" box mark; wordmark always "MezBOX" (Mez 800 + BOX 500 muted), app lockups > "MezBOX / App". Light and dark follow the OS. Start with DESIGN.md (rules + tokens), then USAGE.md (how to apply it). Everything at once: https://design.mezbox.de/llms-full.txt. Machine-readable file list: https://design.mezbox.de/assets.json. ## Docs - [DESIGN.md](https://design.mezbox.de/DESIGN.md): the design system, tokens in YAML front matter + rules (Stitch format) - [USAGE.md](https://design.mezbox.de/USAGE.md): applying it to an app: snippets, component classes, checklist - [Specimen](https://design.mezbox.de/): live page built from the real CSS, logos and icons - [llms-full.txt](https://design.mezbox.de/llms-full.txt): DESIGN.md + USAGE.md + tokens.css + mezbox.css + asset list in one file ## Code - [tokens/tokens.css](https://design.mezbox.de/tokens/tokens.css): Design tokens as CSS custom properties (light + dark) - [tokens/tokens.json](https://design.mezbox.de/tokens/tokens.json): Design tokens (W3C Design Tokens format) - [css/mezbox.css](https://design.mezbox.de/css/mezbox.css): Component CSS (mz-* classes); imports tokens.css ## Logo - [logo/mezbox-logo-adaptive.svg](https://design.mezbox.de/logo/mezbox-logo-adaptive.svg): Horizontal lockup that switches light/dark by itself - [logo/mezbox-logo-mono-black.svg](https://design.mezbox.de/logo/mezbox-logo-mono-black.svg): Lockup, one colour black - [logo/mezbox-logo-mono-white.svg](https://design.mezbox.de/logo/mezbox-logo-mono-white.svg): Lockup, one colour white - [logo/mezbox-logo-on-dark.svg](https://design.mezbox.de/logo/mezbox-logo-on-dark.svg): Horizontal lockup for dark backgrounds - [logo/mezbox-logo.svg](https://design.mezbox.de/logo/mezbox-logo.svg): Horizontal lockup MezBOX, for light backgrounds (outlined text) - [logo/mezbox-mark-mono-black.svg](https://design.mezbox.de/logo/mezbox-mark-mono-black.svg): Mark, one colour black - [logo/mezbox-mark-mono-white.svg](https://design.mezbox.de/logo/mezbox-mark-mono-white.svg): Mark, one colour white - [logo/mezbox-mark-on-dark.svg](https://design.mezbox.de/logo/mezbox-mark-on-dark.svg): Mark for dark backgrounds - [logo/mezbox-mark.svg](https://design.mezbox.de/logo/mezbox-mark.svg): Mark (Lifted Lid), for light backgrounds ## App lockups - [logo/apps/mezbox-auth-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-auth-on-dark.svg): App lockup 'MezBOX / Auth' for dark backgrounds - [logo/apps/mezbox-auth.svg](https://design.mezbox.de/logo/apps/mezbox-auth.svg): App lockup 'MezBOX / Auth' for light backgrounds - [logo/apps/mezbox-cloud-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-cloud-on-dark.svg): App lockup 'MezBOX / Cloud' for dark backgrounds - [logo/apps/mezbox-cloud.svg](https://design.mezbox.de/logo/apps/mezbox-cloud.svg): App lockup 'MezBOX / Cloud' for light backgrounds - [logo/apps/mezbox-design-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-design-on-dark.svg): App lockup 'MezBOX / Design' for dark backgrounds - [logo/apps/mezbox-design.svg](https://design.mezbox.de/logo/apps/mezbox-design.svg): App lockup 'MezBOX / Design' for light backgrounds - [logo/apps/mezbox-gemeinderat-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-gemeinderat-on-dark.svg): App lockup 'MezBOX / Gemeinderat' for dark backgrounds - [logo/apps/mezbox-gemeinderat.svg](https://design.mezbox.de/logo/apps/mezbox-gemeinderat.svg): App lockup 'MezBOX / Gemeinderat' for light backgrounds - [logo/apps/mezbox-intranet-adaptive.svg](https://design.mezbox.de/logo/apps/mezbox-intranet-adaptive.svg): App lockup 'MezBOX / Intranet' that adapts to light and dark - [logo/apps/mezbox-sensor-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-sensor-on-dark.svg): App lockup 'MezBOX / Sensor' for dark backgrounds - [logo/apps/mezbox-sensor.svg](https://design.mezbox.de/logo/apps/mezbox-sensor.svg): App lockup 'MezBOX / Sensor' for light backgrounds - [logo/apps/mezbox-stundenplan-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-stundenplan-on-dark.svg): App lockup 'MezBOX / Stundenplan' for dark backgrounds - [logo/apps/mezbox-stundenplan.svg](https://design.mezbox.de/logo/apps/mezbox-stundenplan.svg): App lockup 'MezBOX / Stundenplan' for light backgrounds - [logo/apps/mezbox-terrace-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-terrace-on-dark.svg): App lockup 'MezBOX / Terrace' for dark backgrounds - [logo/apps/mezbox-terrace.svg](https://design.mezbox.de/logo/apps/mezbox-terrace.svg): App lockup 'MezBOX / Terrace' for light backgrounds - [logo/apps/mezbox-video-on-dark.svg](https://design.mezbox.de/logo/apps/mezbox-video-on-dark.svg): App lockup 'MezBOX / Video' for dark backgrounds - [logo/apps/mezbox-video.svg](https://design.mezbox.de/logo/apps/mezbox-video.svg): App lockup 'MezBOX / Video' for light backgrounds ## Icons - [icons/app-icon-maskable.svg](https://design.mezbox.de/icons/app-icon-maskable.svg): Maskable app icon (full bleed) - [icons/app-icon.svg](https://design.mezbox.de/icons/app-icon.svg): App icon: ink tile with paper body and yellow lid - [icons/apple-touch-icon.png](https://design.mezbox.de/icons/apple-touch-icon.png): Apple touch icon 180 - [icons/apps/authelia.png](https://design.mezbox.de/icons/apps/authelia.png): App tile 'authelia' (256 px PNG) - [icons/apps/authelia.svg](https://design.mezbox.de/icons/apps/authelia.svg): App tile 'authelia' (SVG) - [icons/apps/crowdsec.png](https://design.mezbox.de/icons/apps/crowdsec.png): App tile 'crowdsec' (256 px PNG) - [icons/apps/crowdsec.svg](https://design.mezbox.de/icons/apps/crowdsec.svg): App tile 'crowdsec' (SVG) - [icons/apps/design.png](https://design.mezbox.de/icons/apps/design.png): App tile 'design' (256 px PNG) - [icons/apps/design.svg](https://design.mezbox.de/icons/apps/design.svg): App tile 'design' (SVG) - [icons/apps/gemeinderat.png](https://design.mezbox.de/icons/apps/gemeinderat.png): App tile 'gemeinderat' (256 px PNG) - [icons/apps/gemeinderat.svg](https://design.mezbox.de/icons/apps/gemeinderat.svg): App tile 'gemeinderat' (SVG) - [icons/apps/home-assistant.png](https://design.mezbox.de/icons/apps/home-assistant.png): App tile 'home-assistant' (256 px PNG) - [icons/apps/home-assistant.svg](https://design.mezbox.de/icons/apps/home-assistant.svg): App tile 'home-assistant' (SVG) - [icons/apps/immich.png](https://design.mezbox.de/icons/apps/immich.png): App tile 'immich' (256 px PNG) - [icons/apps/immich.svg](https://design.mezbox.de/icons/apps/immich.svg): App tile 'immich' (SVG) - [icons/apps/l39-world.png](https://design.mezbox.de/icons/apps/l39-world.png): App tile 'l39-world' (256 px PNG) - [icons/apps/l39-world.svg](https://design.mezbox.de/icons/apps/l39-world.svg): App tile 'l39-world' (SVG) - [icons/apps/lldap.png](https://design.mezbox.de/icons/apps/lldap.png): App tile 'lldap' (256 px PNG) - [icons/apps/lldap.svg](https://design.mezbox.de/icons/apps/lldap.svg): App tile 'lldap' (SVG) - [icons/apps/nextcloud.png](https://design.mezbox.de/icons/apps/nextcloud.png): App tile 'nextcloud' (256 px PNG) - [icons/apps/nextcloud.svg](https://design.mezbox.de/icons/apps/nextcloud.svg): App tile 'nextcloud' (SVG) - [icons/apps/ntfy.png](https://design.mezbox.de/icons/apps/ntfy.png): App tile 'ntfy' (256 px PNG) - [icons/apps/ntfy.svg](https://design.mezbox.de/icons/apps/ntfy.svg): App tile 'ntfy' (SVG) - [icons/apps/portainer.png](https://design.mezbox.de/icons/apps/portainer.png): App tile 'portainer' (256 px PNG) - [icons/apps/portainer.svg](https://design.mezbox.de/icons/apps/portainer.svg): App tile 'portainer' (SVG) - [icons/apps/sensor.png](https://design.mezbox.de/icons/apps/sensor.png): App tile 'sensor' (256 px PNG) - [icons/apps/sensor.svg](https://design.mezbox.de/icons/apps/sensor.svg): App tile 'sensor' (SVG) - [icons/apps/skoda.png](https://design.mezbox.de/icons/apps/skoda.png): App tile 'skoda' (256 px PNG) - [icons/apps/skoda.svg](https://design.mezbox.de/icons/apps/skoda.svg): App tile 'skoda' (SVG) - [icons/apps/stirling-pdf.png](https://design.mezbox.de/icons/apps/stirling-pdf.png): App tile 'stirling-pdf' (256 px PNG) - [icons/apps/stirling-pdf.svg](https://design.mezbox.de/icons/apps/stirling-pdf.svg): App tile 'stirling-pdf' (SVG) - [icons/apps/stundenplan.png](https://design.mezbox.de/icons/apps/stundenplan.png): App tile 'stundenplan' (256 px PNG) - [icons/apps/stundenplan.svg](https://design.mezbox.de/icons/apps/stundenplan.svg): App tile 'stundenplan' (SVG) - [icons/apps/sunalyzer.png](https://design.mezbox.de/icons/apps/sunalyzer.png): App tile 'sunalyzer' (256 px PNG) - [icons/apps/sunalyzer.svg](https://design.mezbox.de/icons/apps/sunalyzer.svg): App tile 'sunalyzer' (SVG) - [icons/apps/tandoor.png](https://design.mezbox.de/icons/apps/tandoor.png): App tile 'tandoor' (256 px PNG) - [icons/apps/tandoor.svg](https://design.mezbox.de/icons/apps/tandoor.svg): App tile 'tandoor' (SVG) - [icons/apps/terrace.png](https://design.mezbox.de/icons/apps/terrace.png): App tile 'terrace' (256 px PNG) - [icons/apps/terrace.svg](https://design.mezbox.de/icons/apps/terrace.svg): App tile 'terrace' (SVG) - [icons/apps/teslamate.png](https://design.mezbox.de/icons/apps/teslamate.png): App tile 'teslamate' (256 px PNG) - [icons/apps/teslamate.svg](https://design.mezbox.de/icons/apps/teslamate.svg): App tile 'teslamate' (SVG) - [icons/apps/traefik.png](https://design.mezbox.de/icons/apps/traefik.png): App tile 'traefik' (256 px PNG) - [icons/apps/traefik.svg](https://design.mezbox.de/icons/apps/traefik.svg): App tile 'traefik' (SVG) - [icons/apps/uptime-kuma.png](https://design.mezbox.de/icons/apps/uptime-kuma.png): App tile 'uptime-kuma' (256 px PNG) - [icons/apps/uptime-kuma.svg](https://design.mezbox.de/icons/apps/uptime-kuma.svg): App tile 'uptime-kuma' (SVG) - [icons/apps/video.png](https://design.mezbox.de/icons/apps/video.png): App tile 'video' (256 px PNG) - [icons/apps/video.svg](https://design.mezbox.de/icons/apps/video.svg): App tile 'video' (SVG) - [icons/favicon-256.png](https://design.mezbox.de/icons/favicon-256.png): Mark as 256 px PNG with transparency (source of favicon.ico) - [icons/favicon.ico](https://design.mezbox.de/icons/favicon.ico): Favicon 16/32/48 - [icons/favicon.svg](https://design.mezbox.de/icons/favicon.svg): Favicon (adapts to dark browser UI) - [icons/icon-192.png](https://design.mezbox.de/icons/icon-192.png): PWA icon 192 - [icons/icon-512.png](https://design.mezbox.de/icons/icon-512.png): PWA icon 512 - [icons/icon-maskable-512.png](https://design.mezbox.de/icons/icon-maskable-512.png): PWA maskable icon 512 - [icons/site.webmanifest](https://design.mezbox.de/icons/site.webmanifest): Example web manifest ## Fonts - [fonts/](https://design.mezbox.de/fonts/): Red Hat Display, Text, Mono (variable, woff2 + ttf, SIL OFL 1.1) ## Optional - [assets.json](https://design.mezbox.de/assets.json): every published file with URL and description