# Using the MezBOX design system
How to give an app on mezbox.de the MezBOX look. The rules live in
[DESIGN.md](https://design.mezbox.de/DESIGN.md); this page is the practical how-to.
All files below are served from **https://design.mezbox.de** with CORS enabled, so an app can link them
directly or copy them into its own `static/` folder (preferred for apps that must work offline).
## 1. Own apps (full system)
```html
MezBOXVideoSMNeu…
```
Component classes (all prefixed `mz-`): `mz-appbar`, `mz-lockup` (+ `mz-box`, `mz-app`), `mz-avatar`,
`mz-btn` (`--primary` yellow, `--ink`, `--secondary`, `--ghost`, `--danger`, `--block`), `mz-field`,
`mz-input`, `mz-help`, `mz-error`, `mz-badge` (`--new`, `--soft`, `--success`, `--warning`, `--danger`),
`mz-dot` (`--warning`, `--danger`, `--idle`), `mz-pill[aria-pressed]`, `mz-card` (`--interactive`,
`--unread`), `mz-overlay`, `mz-tabs` / `mz-tab[aria-selected]`, `mz-seg`, `mz-tile` (`--own`, `--third`),
`mz-table`, `mz-detect[data-label]`, `mz-label`, `mz-mono`, `mz-muted`, `mz-h1..3`.
If an app keeps its own CSS, map its variables onto the tokens instead (see `tokens/tokens.css`):
paper `#F6F6F3` / graphite `#14171C`, ink `#141414` / `#E8EBF0`, muted `#6B6F78` / `#8A93A3`,
border `#E2E2DC` / `#2C323C`, yellow `#FFD900` with ink text, radii 10 / 14 / 18 px,
Red Hat Display (headings, wordmark) / Text (UI) / Mono (numbers, times, hosts, labels).
Font files: `fonts/RedHatDisplay[wght].woff2` etc. URL-encode the brackets when linking
(`RedHatDisplay%5Bwght%5D.woff2`) in tools that do not; browsers accept them as they are, and
`css/mezbox.css` loads the fonts for you.
Light and dark follow the OS (`prefers-color-scheme`); `data-theme="light|dark"` on `` overrides.
## 2. Wordmark and logo rules (short)
- Always **MezBOX**, one word: "Mez" weight 800, "BOX" weight 500 in muted grey. App lockup:
`MezBOX / App` (app name 500 muted, slash in border colour).
- Use the SVGs from `logo/` (text is outlined, no font needed). On dark backgrounds use `*-on-dark.svg`;
`mezbox-logo-adaptive.svg` switches by itself.
- Own apps use an **own-app tile** (ink square, tilted yellow lid bar, white initials) from `icons/apps/`.
Third-party apps get a neutral tile; never give them the lid.
### Making an app tile for a new app
Own-app tiles are 64x64 SVGs: an ink square with a tilted yellow lid bar and two initials. The initials
are Red Hat Display 800 in paper; the published tiles use outlined paths, but live text works too:
```svg
```
Third-party tiles: ``
with ink initials, and no lid. Use 3 letters for very short names ("PDF") at a smaller size.
The mark itself on a 64 grid (body ink or `#E8EBF0` on dark, lid always `#FFD900`):
```svg
```
## 3. Yellow budget
Yellow `#FFD900` is a signal, not a fill colour: primary button (one per view), focus ring, link
underline, "new/unread" markers, active tab underline, activity ticks / detection boxes. Text on yellow
is always ink. Warnings are orange `#E5701A`, never yellow.
## 4. Third-party apps
Theme only what the app allows (logo, favicon, primary colour, background). If an app darkens yellow
for contrast (Nextcloud does), use ink `#141414` as its primary colour instead. Ready-made kits for
Authelia, Nextcloud, Home Assistant, Homer and ntfy live in the private repo `smezger/mezbox-design`
under `themes/`.
## 5. Checklist for a new app
1. Favicon + touch icon + `MezBOX / App` lockup in the app bar.
2. Fonts: Red Hat Display / Text / Mono (from `fonts/` or via `css/mezbox.css`).
3. Paper/graphite surfaces, 1 px borders, no card shadows; shadow only for overlays.
4. One yellow primary action per view; everything else ink / secondary / ghost.
5. Times, sizes, hostnames, IDs in Red Hat Mono with tabular numbers.
6. Check light and dark, and phone width.
MezBOXVideo
SM