Visual package for the "HL Quiet UI" foundation (PR pushed to claude/peaceful-curie-druubo). All components use the real tokens from globals.css. Hover over elements, open the modal/menu, and toggle light ⇄ dark in the top right.
Wordmark — login screen & header
HL MédiaHaute Fidélité — Home Cinéma
HL MédiaHaute Fidélité — Home Cinéma
HL HL Média"Lockup" variant: existing monogram + wordmark, for the topbar.
HL HL Média
Real Good Times typeface (loaded from public/fonts/good-times.woff2). Wordmark alone (no icon) for the login screen; lockup icon + wordmark for the header. Teal in light mode, lightened teal in dark mode.
Tokens — brand & surfaces
Brand
--brand
Brand strong
--brand-strong
Brand soft
--brand-soft
Surface
--surface
Surface 2
--surface-2
Surface 3
--surface-3
Tokens — states (light + dark)
OK (new)
--ok
OK soft
--ok-soft
Warn (new)
--warn
Warn soft
--warn-soft
Danger
--danger
Danger soft
--danger-soft
Buttons — hierarchy & states
Hover = amplified relief · click = press (:active) · consistent disabled state. Three levels, never more.