Design tokens
Color, typography, layout. Extracted из wam-online/design/styles-v3.css. Каждый цветовой токен — два variant: dark (default) and light (data-theme="light").
Color
dark
light
--bg
Page background canvas.
dark
light
--elev
Card / hero surface — first elevation tier.
dark
light
--elev-2
Nested / hover surface — second elevation tier.
dark
light
--fg
Primary foreground — headings, body text.
dark
light
--dim
Muted foreground — secondary text, labels.
dark
light
--faint
Faint foreground — disabled, placeholder, eyebrows.
dark
light
--body-sub
Body sub-text — slightly de-emphasized prose.
dark
light
--hair
Subtle hairline — soft separation.
dark
light
--hair-2
Stronger hairline — visible separation.
dark
light
--accent
Magnets blue — primary action accent.
dark
light
--accent-dim
Translucent accent — soft backgrounds.
dark
light
--accent-2
Magnets red — secondary / critical accent.
dark
light
--tag-add
Changelog: added (blue).
dark
light
--tag-chg
Changelog: changed (amber).
dark
light
--tag-fix
Changelog: fixed (red).
dark
light
--status-ok
Status row: OK / healthy.
dark
light
--status-warn
Status row: warning / degraded.
dark
light
--status-down
Status row: down / critical.
dark
light
--nav-bg
Sticky nav background — translucent for backdrop-filter.
Typography — font families
--mono
WAM — Brand & design system. 0123456789.
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace
Monospace — JetBrains Mono. For numerals, code, tag labels.
--sans
WAM — Brand & design system. 0123456789.
"Geist", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif
Workhorse sans — Geist with Inter fallback. Body text.
--grotesk
WAM — Brand & design system. 0123456789.
"Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif
Grotesk for UI labels and chrome — Geist without Inter fallback.
Type sizes
--body
Default body font-size.
15px
--fs-hero
Hero title — responsive clamp 42–72px.
clamp(42px, 6.5vw, 72px)
--fs-section
Section title — responsive clamp 28–48px.
clamp(28px, 3.8vw, 48px)
--fs-sub
Subtitle / lede — responsive clamp 18–22px.
clamp(18px, 1.8vw, 22px)
Layout
--radius.default
Default border-radius. Architectural choice: hard edges + selectively rounded large surfaces.
0px
--radius.sm
Small radius — chips, code blocks.
6px
--radius.md
Medium radius — inner tiles.
12px
--radius.lg
Large radius — hero / card shells (WAM Docs, Pricing, Updates).
60px
--radius.pill
Pill radius — buttons, capsule UI.
999px
--shell-pad
Outer shell padding — page gutters.
28px
--shell-max
Outer shell max-width — content column cap.
1240px
--section-gap
Vertical rhythm — canonical gap between major page sections.
80px