Fundamentals
Typography & spacing
IBM Plex Sans for text, IBM Plex Mono for technical values (IPs, MACs, IDs, code). A small set of type styles and a 4-px spacing scale.
Type styles
Use the classes in your own markup; components already apply them.
| Class | Size / line · weight | Sample |
|---|
.t-display | 32px / 38px · 600 | 42 Geräte online |
.t-title | 22px / 28px · 600 | Inventar |
.t-heading | 16px / 22px · 600 | Firmware |
.t-body | 14px / 20px · 400 | Das Gerät startet nach dem Reset im AP-Modus. |
.t-body-strong | 14px / 20px · 600 | Shelly Plus 1PM |
.t-small | 13px / 18px · 400 | Zuletzt gesehen vor 3 Min. |
.t-label | 11px / 16px · 600 | ZULETZT GESEHEN |
.t-mono | 13px / 18px · 400 | 192.168.1.42 · C8:2B:96:1A:3F:00 |
.t-metric | 28px / 32px · 500 | 1’284 W |
Spacing
| Token | Value | |
|---|
--space-1 | 4px | |
--space-2 | 8px | |
--space-3 | 12px | |
--space-4 | 16px | |
--space-5 | 24px | |
--space-6 | 32px | |
--space-7 | 48px | |
Radius
| Token | Value | |
|---|
--radius-sm | 4px | |
--radius-md | 6px | |
--radius-lg | 10px | |
--radius-pill | 999px | |
Sizes
Control heights for fields and buttons (size="sm" uses the small one).
| Token | Value | |
|---|
--control-sm | 28px | |
--control-md | 34px | |
--topbar-height | 48px | |
--row-height | 36px | |
Rules
- Technical values in mono:
kern-kv-item mono, kern-input mono, table cells with class mono.
- Numbers in tables right-aligned with tabular figures: cell class
num.
- Unknown values are «–», never empty.