tokens v0.4.0

Design tokens

@lisacorp/wam-tokenscanonical · magnets.tg

Color · Surfaces

Page canvas + elevation tiers + hover state.

D
L

--bg

#09090b
#f2f2f4

Page background canvas.

D
L

--elev

#17171c
#ffffff

Card / hero surface — first elevation tier.

D
L

--elev-2

#22222a
#fafafb

Nested / hover surface — second elevation tier.

D
L

--card-hover

#22222a
#fafafb

Card hover state — alias of elev-2 in dark, lighter shade in light.

Color · Foreground

Headings, body, dim labels, faint captions.

D
L

--fg

#f4f4f6
#0b0b0d

Primary foreground — headings, body text.

D
L

--body-sub

#cacacd
#45454d

Body sub-text — slightly de-emphasized prose.

D
L

--dim

#8a8a92
#6a6a72

Muted foreground — secondary text, labels.

D
L

--faint

#55555d
#a8a8b0

Faint foreground — disabled, placeholder, eyebrows.

Color · Hairlines & rules

Subtle separation (hair) → strong rule (rule-strong).

D
L

--hair

rgba(255, 255, 255, 0.06)
rgba(11, 11, 13, 0.08)

Subtle hairline — soft separation.

D
L

--hair-2

rgba(255, 255, 255, 0.14)
rgba(11, 11, 13, 0.18)

Stronger hairline — visible separation.

D
L

--rule-strong

#f4f4f6
#0b0b0d

Strongest rule — solid borders for changelog dividers, strong sections.

Color · Accents

Primary CTA + translucent overlay + critical secondary.

D
L

--accent

#3564E7
#3564E7

Magnets blue — primary action accent.

D
L

--accent-dim

rgba(53, 100, 231, 0.15)
rgba(53, 100, 231, 0.10)

Translucent accent — soft backgrounds.

D
L

--accent-2

#EE5353
#EE5353

Magnets red — secondary / critical accent.

Color · Tag colors

Changelog dot tags — added / changed / fixed.

D
L

--tag-add

#3564E7
#1f4bc9

Changelog: added (blue).

D
L

--tag-chg

#E0A93A
#a8761a

Changelog: changed (amber).

D
L

--tag-fix

#EE5353
#c93838

Changelog: fixed (red).

Color · Status

Health indicators — ok / warn / down.

D
L

--status-ok

#3FD16F
#1c9b4a

Status row: OK / healthy.

D
L

--status-warn

#E0A93A
#a8761a

Status row: warning / degraded.

D
L

--status-down

#EE5353
#c93838

Status row: down / critical.

Hairline rules · in context

Translucent values работают над любым background. Реальное применение — borders, dividers.

--hair subtle separator (rgba alpha 0.06)
--hair-2 visible separator (rgba alpha 0.14)
--rule-strong strong rule for changelog dividers (solid fg)

Typography · font families

--mono

WAM — Brand & design system. 0123456789.

Monospace — JetBrains Mono. For numerals, code, tag labels.

--sans

WAM — Brand & design system. 0123456789.

Workhorse sans — Geist with Inter fallback. Body text.

--grotesk

WAM — Brand & design system. 0123456789.

Grotesk for UI labels and chrome — Geist without Inter fallback.

Type sizes · rendered samples

Hero title
--fs-hero clamp(42px, 6.5vw, 72px) Hero title — responsive clamp 42–72px.
Section heading
--fs-section clamp(28px, 3.8vw, 48px) Section title — responsive clamp 28–48px.
Subtitle / lede paragraph that wraps onto multiple lines for reading rhythm reference.
--fs-sub clamp(18px, 1.8vw, 22px) Subtitle / lede — responsive clamp 18–22px.
Body text (default 15px, line-height 1.55) — reading default applied to body directly. Не объявлен как `--body` token.
type.size.body 15px Default body font-size.

Border radius · visual scale

--radius

0px

Default border-radius. Architectural choice: hard edges + selectively rounded large surfaces.

Layout · spacing tokens

--shell-pad
28px Outer shell padding — page gutters.
--shell-max
1240px Outer shell max-width — content column cap.
--section-gap
80px gap
80px Vertical rhythm — canonical gap between major page sections.

Source: packages/wam-tokens/tokens.json · canonical: magnets.tg/styles.css · v0.4.0