Logo

The Lifted Lid with the wordmark MezBOX: always one word, "Mez" in 800 weight, "BOX" in 500. App lockups add "/ App name".

logo/mezbox-logo.svg

logo/mezbox-logo-on-dark.svg

logo/mezbox-logo-mono-black.svg

logo/apps/mezbox-gemeinderat.svg

logo/apps/mezbox-video-on-dark.svg

icons/app-icon.svg · mark 32 / 16

Color

Paper and graphite neutrals with one signal yellow. Warnings are orange so they never look like brand. Switch the theme in the top right to see the dark set.

Type

Red Hat Display for headings and the wordmark, Red Hat Text for reading, Red Hat Mono for hosts, times and labels.

Components

App tiles

Own apps wear the lid. Third-party apps get a neutral tile. SVG and 256 px PNG files for each are in icons/apps/.

gemeinderat

video

stundenplan

sensor

nextcloud

immich

home-assistant

stirling-pdf

ntfy

crowdsec

What's in the kit

• DESIGN.md: rules and tokens (Stitch format)
• tokens/tokens.css: CSS variables, light and dark
• tokens/tokens.json: W3C design tokens
• css/mezbox.css: components (mz-*)
• fonts/: Red Hat Display, Text and Mono (woff2, OFL)
• logo/: mark and lockups, on-dark and mono versions
• logo/apps/: MezBOX / App lockups
• icons/: favicon, PWA icons, manifest
• icons/apps/: app tiles
• themes/: Authelia, Nextcloud, Home Assistant, ntfy
• scripts/build_assets.py: rebuilds the logos and icons

For developers and AI agents

Everything here is plain files at https://design.mezbox.de, with CORS enabled. Read them in this order:

• llms.txt: an index of everything, with links
• llms-full.txt: DESIGN.md, USAGE.md, tokens and CSS in one file
• DESIGN.md: the rules and tokens
• USAGE.md: snippets, component classes and a checklist
• assets.json: every logo, icon and font with its URL
• css/mezbox.css: link it directly; it loads the tokens and the fonts