Suomen johtava
display
Hedvig Letters Serif · 400 · clamp(44px, 6.6vw, 76px)
line-height 1.04 · letter-spacing -0.018em
Design System
Tokens and primitives for the editorial layout established in index.astro. Every page or component built in v6 should pull from these.
Two families. Inter + Hedvig
Hedvig Letters Serif for display headlines. Inter for everything else, with OpenType features cv11 cv05 ss01 always enabled.
Suomen johtava
Yksi alusta. Ei tilkkutäkkiä.
Sub-page hero heading
Section heading
Subsection title
Card heading
Lede text — used for hero subheads and intro paragraphs that read as more substantial than regular body copy.
Default body text. The workhorse for paragraphs throughout the page. Comfortable for sustained reading.
Smaller body text used in dense card UI and tighter contexts.
Caption text for metadata and fine print.
01 — SECTION LABEL
Navigation link
Brand, surface, ink, semantic
Brand
--brand-primary
#0A6B4E
Evergreen — accents, brand mark, links
--brand-primary-hover
#085A41
Primary hover
--brand-primary-soft
rgba(10,107,78,0.1)
Tinted bg (active tab, soft pill)
--brand-primary-soft-fg
#07412F
Text on primary-soft bg
--brand-secondary
#101A16
Forest near-black — primary CTAs, dark sections
--brand-secondary-hover
#1F3329
Secondary hover
--brand-tertiary
#3F4DFA
Cobalt — secondary actions, info
--brand-tertiary-hover
#2D3BE8
Tertiary hover
--brand-deep
#172554
Deep navy — charts only
Surfaces
--canvas
#F7F7FA
Page background — never pure white
--surface
#FFFFFF
Cards, popovers, overlays
--surface-muted
#EDEDEF
Bento card bg, segmented control track
--surface-dark
#101A16
Dark inverted sections
--surface-dark-elevated
#1A261F
Cards inside dark sections
Ink (text)
Aa
--ink
#1F1F1F
Default body and headings
Aa
--ink-muted
#4A4A4A
Lede / subhead text
Aa
--ink-soft
#5C5C5C
Body in cards / lower contrast
Aa
--ink-faint
#8A8A8A
Captions, metadata
Aa
--ink-disabled
#C4C4C8
Disabled controls
Aa
--ink-idle
#D4D4D8
Pre-animation placeholder
Aa
--ink-inverse
#F7F7FA
Text on dark surfaces
Borders
--border
rgba(0, 0, 0, 0.08)
Hairlines, card borders
--border-strong
rgba(0, 0, 0, 0.18)
Ghost button borders
--border-inverse
rgba(255, 255, 255, 0.08)
On dark surfaces
--border-focus
rgba(10, 107, 78, 0.4)
Focus ring
Semantic
success
#0A6B4E
bg / fg pair
Matches brand primary
success-bright
#4ADE80
Saturated — sparingly, live indicators only
warning
#D97706
bg / fg pair
Amber
error
#DC2626
bg / fg pair
Red
info
#3F4DFA
bg / fg pair
Matches brand tertiary
Buttons, pills, status, cards
Buttons
Primary — --brand-secondary bg, used for the page's main action. Ghost — transparent with --border-strong, paired with primary as a secondary option. Tertiary — --brand-tertiary bg, for non-competing actions inside content sections.
Pills & tags
01 — TUOTE Tilitoimistoille suunniteltu Täsmätty Reaaliaikainen Tarkistetaan Virhe
Status indicators
Active Idle Info Working
Cards
Default
Surface white
Elevated card on canvas, with shadow-soft.
Bento
Surface muted
Used in the bento grid pattern, no shadow.
Inverted
Surface dark
For dark sections and brand anchor cards.
Two layered presets
--shadow-soft
0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.05), 0 18px 44px rgba(0,0,0,.1)
Hero orbit cards, bento tiles, elevated content.
--shadow-lift
0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06)
Subtle nav pill, popovers, lighter surfaces.