Club Hub UI
v0.1

Foundations

Tokens, colour, type, spacing, shape, icons and motion. Everything here comes from packages/ui/css/tokens.css; components never use raw values. Ratios on this page are computed live from the current theme — switch the theme in the top bar.

Principles

One productOne shell, one accent, one icon set, one way to confirm. Modules differ by name and icon, never by colour scheme.
Touch first44 px targets by default; dense 36 px only in desktop tables.
Accessible by defaultReal HTML elements, visible focus, AA contrast verified by test, never colour alone.
Content over chromeFlat cards with borders; elevation only for things that float (menus, sheets, dialogs, toasts).
Club-brandable within limitsClubs set logo and accent (light + dark), checked for contrast. Status colours never change.
No raw valuesNo hex/rgb outside tokens.css, no inline style except setting custom properties.

Colour

Each swatch shows the background token with its intended text token, the resolved hex and the contrast ratio (WCAG AA: 4.5 for text, 3 for large text and UI parts).

Surfaces & text

Aa
--color-bg / --color-text
Aa
--color-bg / --color-text-muted
Aa
--color-surface / --color-text-subtle
Aa
--color-surface-2 / --color-text-muted
▭
--color-surface / --color-border-strong
Aa
--color-inverse-bg / -text

Accent (club-brandable)

Aa
--color-accent / --color-on-accent
Aa
--color-accent-hover
Aa
--color-bg / --color-accent-text
Aa
--color-accent-subtle / -text

Status (fixed for every club)

Erledigt
--color-success / --color-on-status
Wartet
--color-warning / --color-on-status
Fehler
--color-danger / --color-on-status
Info
--color-info / --color-on-status
Erledigt
--color-success-subtle / -text
Wartet
--color-warning-subtle / -text
Fehler
--color-danger-subtle / -text
Info
--color-info-subtle / -text

Belts & stripes (default grading system)

Weiss Gelb Gelb-Grün Grün Blau Rot Schwarz

Typography

System fonts — no downloads. Vazirmatn is loaded only for Persian. Body is 16 px; never go below 12 px.

--text-displayStart ▶
--text-3xl · h1Gurtprüfung Herbst
--text-2xl · h2Offene Anmeldungen
--text-xl · h3Kinder 7–10 · Mo 17:30
--text-lgFokus auf Beinarbeit und Rumpfstabilität.
--text-md · bodyDie Anmeldung ist bis am 31. Oktober offen. Danach meldet sich die Trainerin bei dir.
--text-smZuletzt geändert vor 3 Minuten · Sandra Keller
--text-xsAbschnitt
.u-numericCHF 1'280.00 · 145 Punkte · 07:45

Spacing, shape & elevation

4 px scale. Use layout primitives (.stack, .cluster, .grid) instead of one-off margins.

--space-14
--space-28
--space-312
--space-416
--space-624
--space-832
--space-1248
--radius-sm
inputs inside
--radius-md
controls
--radius-lg
cards, sheets
--shadow-sm
hover
--shadow-md
menus
--shadow-lg
dialogs, toasts

Icons

One SVG sprite, 24 px grid, 2 px stroke. Icons accompany text; icon-only buttons need an aria-label. Emoji are content (e.g. user messages), never UI icons.

Motion

--duration-fast 120 ms (hover, press) · --duration-base 200 ms (toasts, dialogs) · --duration-slow 320 ms (bottom sheets). With reduce motion all durations are 0. Animate feedback and arrivals, never content that people read.