The pattern

A section and a card, built only from the shared classes. Start every new page here.

Your account

The line under a heading says what the card is for.

Name

Maya Chen

Email

maya.chen@example.com

Why this

One card for one job, with a main action if it has one.

Surfaces

What the page is made of.

The page is stone. Content sits on white cards with a soft stone edge and no shadow.
Clean, not playful: one quiet edge separates a card from the page without stacking tints.
From Home--color-surface--color-surface-raised--color-border.card
Never a card inside a card, and never a stack of boxes for a list. One card holds the list; a hairline splits each item.
Nested or stacked rounded boxes read as bubbly; hairlines and type read as considered. Navigation's suggested questions were four boxes; now they are one card.
From Home, Profile, Navigation.card--reads--color-border-subtle
At most one dark block on a screen, and only for the one thing to do next, or where she is.
Navy is the anchor. Two anchors compete; a settings page like Profile needs none. In the advisor panel the only navy is the destination she is on, so her own messages are light blue.
From Home, Navigation--color-surface-inverse

Colour

Few colour areas, each with one job.

One accent per screen. Before adding a colour, say which colour it replaces.
Several colour areas at once (header tint, card fill, gold, glows, lime) tipped Home towards playful.
From Home
Colour is never the only cue. The words carry the meaning; the page must still read in greyscale.
Accessibility, and the greyscale switch reviewers use. Outcome dots are hidden from screen readers for this reason.
From Home--color-outcome-*
Red is only for destroying something: deleting the account, removing a connection.
Kept rare, so it always means the same thing.
From Profile--color-danger

Type

Kulim Park for headings only; Inter for everything she reads or presses.

Only paragraphs get the airy 1.7 line spacing. A one-line label, date or note uses tight spacing (1.3), so a card that ends in one doesn't look heavier at the bottom than at the top.
Line spacing adds invisible space above and below each line. On a single line it pads the card's edge, so 20px of padding looks like 25.
From Navigation--leading-snug
No text anywhere in the product is cut off with an ellipsis. Titles, headers, previews and placeholders wrap and show every word. An ellipsis written into the words stays: something in progress (Writing your first draft…) and a prompt to type (Ask or go…). One exception: a tool's pinned draft preview stops after two lines, because the card sits over the page and Show draft opens the whole draft.
Cut-off words hide what she needs to read. Keep a navy header short so it rarely needs a second line, but when it does, it wraps (designer, 2026-10-13).
From Home, Onboarding
Whatever is chosen or current steps up a weight: its label turns bold. Each label holds its bold width, so nothing shifts when the choice moves.
The choice is said by the type as well as by colour, which helps when colour alone is hard to see. Rings, chips, the nav, steps, filters.
From Home--weight-bold.u-bold-hold
Kulim Park is for display, title and heading. Labels, eyebrows, subheadings, body and captions are Inter.
Kulim gives the page its voice in a few places; Inter keeps everything else calm and easy to read. This covers the advisor's name, the where-you-are chip and chat replies too.
From Home, Navigation--type-label-font--type-eyebrow-font--type-subheading-font
A section is a heading on the page, an optional line under it, then the card. The heading never goes inside the card.
Every page scans the same way: Home's Progress Tracker and Signal Picture, Profile's Account and Notifications.
From Home, Profile--type-heading-*--type-body-sm-*
A labelled read inside a card is a grey eyebrow, then the words. Blue eyebrows introduce a heading; grey ones label a read.
Why this / Why now / Why you on Home; Name and Email on Profile; Go to and Ask me in the advisor panel. One look for one job.
From Home, Profile, Navigation.read--type-eyebrow-*--color-text-secondary
A label that names a group on the page (a list, a set of links, Why this matters) is a group title: the eyebrow's small capitals, a size up at 14px, in the copy's dark ink. The eyebrow itself stays for a single read or the line above a heading.
A label over a whole group needs a little more weight than one over a single read, without becoming a heading. Titles matter as much as the copy, so none is greyed out.
From Onboarding--type-group-title-*--color-text-primary
The title inside a list card (What to do next, What next?) is a card title: sentence case, Inter semibold, 16px, dark, 20px above the list.
It is the title for every item in the card, not the first, so it sits further from the list than an item's title does from its own line.
From Onboarding--type-card-title-*--space-card-title
A group title sits 12px above its group, more than a line of body copy leaves; a card title 20px. A form field's label, and a question over its answers, sit 12px above them too. Bullets sit 16px apart, a step more than paragraphs. Items split by hairlines get 20px either side of the line.
Each kind of gap is said once and kept: a title belongs to its group, a bullet is its own item, a divider needs room to read as a divider.
From Onboarding--space-group-title--space-list-item--space-divided-item
Lists are indented: numbers or bullets sit inside the text's margin and the lines indent after them. Nothing hangs past the padding.
Hanging numbers in the advisor's answers ran out past the edge every other line respects.
From Navigation
Libre Baskerville italic is only for words that are said: a welcome line, ExecHQ speaking, her own words quoted back, a publication's name. Never a title, a label or interface text, and always clearly smaller than the screen's title.
One clear job keeps the serif meaning the same thing wherever it shows. At 22px under a 28px title it competed with the title on Reflection.
From Onboarding--type-editorial-*
The editorial role has four sizes, each with one job. 28px: the web welcome's statement on its dark panel. 18px: ExecHQ speaking on a guided step. 16px: her words quoted back, and the chat's welcome line. 14px, at the 500 weight: a short line under a heading, a quote inside the chat, a publication's name.
The sizes had grown one per screen (14, 16, 22, 28). Four, each named for its job, make the choice obvious, and 14px italic needs the heavier weight to read.
From Onboarding--type-editorial-size--type-editorial-size-md--type-editorial-size-sm--type-editorial-size-xs--type-editorial-weight-xs
Numbers in circles are one style everywhere: a 16px numeral in a 28px navy circle, the copy starting 16px past it, and 16px between items.
The smallest circle that still holds the numeral comfortably. Larger circles outweighed the copy beside them; smaller numerals were hard to read.
From Onboarding--number-circle-size--number-circle-numeral--number-circle-gap--number-list-gap
No line of copy leaves one word alone on its last line, and no line ends on a single word after a comma: that word drops to the next line.
A lone word reads as a mistake and makes a short paragraph look unfinished; "a result, so" at a line's end hangs the same way. Both are set as the copy renders, never by editing it.
From Onboardingtext-wrap: prettykeepAfterComma()
A set of choices on the page is one card like a numbered list, without the numbers: each choice a title and a line, a hairline between them, a chevron at the right.
Stacked outlined boxes read as a pile of buttons; one card with rows reads as a considered set, and the chevron says each row can be pressed.
From Onboarding.next-steps--space-divided-item
Body copy at 1.7 leading with a 12px gap between paragraphs. Captions are 13px regular.
Text-heavy screens get lighter through rhythm, never by cutting the copy.
From Home--leading-relaxed--space-paragraph--type-caption-*

Controls

Only buttons are pills, so the shape means "press me".

Only a card with a chevron is tappable. A card or chip without one is a reference, and its action sits on a button beside it.
The same look must always do the same thing, or people tap what does nothing.
From Navigation
Every prompt the advisor offers is one button style: the raised surface, a thin edge, 20px corners, sized to its words and wrapping so all show.
Suggested questions and reply buttons are the same job, so they look the same. Fixed corners keep a two-line prompt a rounded box, not a stretched pill.
From Navigation--radius-xl--color-border
In a stack of controls about 44px tall (prompts, a shortcut, the message box), every one takes the same 20px corners.
Mixed corners stacked on top of each other read as clutter.
From Navigation--radius-xl
What she said or made always sits in a white card, one line or many. Its action sits at the card's top right, centred on the eyebrow's line, in grey so it stays behind her words, with 8px under the line before her words. Change is a 12px underlined link; Edit is the edit icon alone.
Her input looks the same wherever it is shown, and the way to redo it is always in the same place. A pill there would be one more button competing with the yellow one.
From Onboarding, Profile.read-head.edit-link.card--reads
Change when she picks again from choices; Edit when she types again.
The word says what will happen: Change reopens the question, Edit opens the words or fields.
From Onboarding, Profile
Yellow is the one main action on a screen. Light blue is everything secondary, including the advisor's reply buttons. No white outlined buttons.
One clear next move, and a button looks the same wherever it appears. Still open: whether light blue and yellow are distinct enough side by side.
From Home, Navigation--color-action--radius-button
Hover never carries meaning. Every tap target is at least 44px.
ExecHQ is used on a phone first.
From Home

Chat

The advisor should feel like a chat app on a phone: the conversation, and little else.

No rules, boxes or outlined chips around the conversation. The header is just New chat and close, with no mark or name; on the phone they sit in the top corners, level with the grab bar.
Layers of chrome above the first message made the panel feel clunky next to Claude or ChatGPT on mobile.
From Navigation
One even gap between every message, 28px, the same above and below each of hers. Answers are set like Claude's chat: 1.55 leading, paragraphs and cards 12px apart; numbered steps keep their numbers.
16px and then 24px between turns felt tight, and uneven gaps around her messages made a card look attached to the wrong turn; no gaps inside an answer made it one block.
From Navigation--space-lg--space-2xs--space-sm--leading-normal
The product's places are one row of icon tiles, all six in view, the one she is on in navy. While she chats the row stays put above the conversation.
Destinations stay in reach while chatting. Kate's icon row was kept over text tabs (designer, 2026-10-09).
From Navigation--color-surface-inverse

Spacing

Gaps are named for their job.

Cards run 16px from the phone's edge, 12px apart when one sits straight under another (half the 24px between sections; text without a card keeps the full gap), with 16px inside (20px in a feature card).
Wider cards, steady rhythm.
From Home--space-screen-side--space-between-cards--space-card-padding--space-feature-padding
A card's last thing, a button or a flat link, sits 20px from its bottom edge, the same as its first thing sits from the top.
Every card ends the same way, so a link never looks squeezed against the edge. A tall tap target whose words sit high is the one allowance.
From Home--space-feature-padding
Inside a card, three steps of space, each wider than the last: eyebrow to title 4px, title to copy 8px, copy to button 20px.
The eyebrow and title read as one label, the copy belongs to them, and the button stands apart as the thing to do. Most cards take this; a card that needs otherwise is adjusted on its own.
From Home--space-eyebrow-title--space-title-copy--space-copy-action
Sections sit 32px apart; inside a section, heading, line and card sit 12px apart.
The gap between groups must be clearly bigger than the gaps inside them, or the page reads as one long list.
From Profile--space-xl--space-sm

Pages that shaped it

Each page designed refines the rules above. Add a line when one does.

Home 6 October 2026
- Clean direction: stone page, white outlined cards, one navy anchor.
- Inter for every type role below heading.
- Grey eyebrow reads split by hairlines (the next-step card).
- 13px regular captions; outcome dots as a second cue.
Profile 6 October 2026
- Home's card and read lifted into shared classes: .card, .card--reads, .read.
- The section rule: heading on the page, line, then the card.
- Section rhythm: 32px between sections, 12px inside.
Navigation 7 October 2026
- A list of choices is one card with hairlines, not a stack of boxes.
- Grey eyebrows label groups inside a panel (Go to, Ask me).
- Kulim Park out of the chat: advisor name, reply chips and the where-you-are chip are Inter.
- Reply buttons are the light-blue secondary; her messages are light blue, not navy.
- Chat streamlined: slim header, 28px between messages, full-pill field, replies at the left.
- On the phone, New chat and close sit in the sheet's top corners with no header row.
- Say a thing once: a label is dropped when something above already says it (the advisor's name above each of his messages, under the panel's header).
- The places stay Kate's row of icon tiles, pinned above the chat (2026-10-09); text tabs were tried and set aside.
Onboarding 13 October 2026
- One numbered circle: 16px numeral, 28px navy circle, copy 16px past it, as tokens.
- Her answers in a guided step are her side of a conversation: the raised surface with a thin edge, the one she picks navy and bold, 12px apart.
- Step labels are the blue eyebrow; Why this matters is a grey-eyebrow read with no rule beside it.
- The welcome is navy edge to edge with the light logo at 48px.
- No lone word on a last line.
- A group title role (dark small capitals at 14px) and a card title role (sentence case, 16px, 20px above its list), with their own spacing: 16px between bullets, 20px either side of a divider.
- What next is one card of rows with chevrons, like Done's list without numbers.
- No single word left after a comma at a line's end.
- Form labels and questions sit 12px above their field or answers. The Google and Apple sign-in buttons follow their makers' guidelines exactly: Google's dark theme in Google Sans with the four-colour G, Apple's black.
- Libre italic only for words that are said, in four sizes with one job each.
- Her input always in a card, its action grey at the top right, centred on the label: Change as a 12px link, Edit as the new edit icon (pencil and square). Change to pick again, Edit to type again.
- Flat links sit at the left, 32px apart; Edit carries a pencil.
- An answer drawer's main action is full width, and any second action (Skip, Back, Later) is a secondary button the same size under it, a peer and never a smaller link. Onboarding and the Plan's check-ins share it.
- An example to follow (What good looks like) is the system's card with a grey eyebrow, like First draft.
- Kulim's letters close up: headings keep Kulim's own spacing (0), its text opens 0.01em and its labels 0.02em. The tighter word spacing stays.

Dark logo

Gold and navy. Sits on stone and blue 100. Not on light blue (blue 200): the gold falls to 4.2:1 there.

ExecHQ
On stone--brand-stone
ExecHQ
On blue 100--brand-blue-100

Light logo

Bright yellow and light blue. Sits on a dark color, and in most cases on navy or the darkest navy: the logo stays in some form of navy. Dark green is the secondary choice; stone 900 is kept but largely unused for now.

ExecHQ
PrimaryOn navy--brand-navy
ExecHQ
PrimaryOn darkest navy--brand-blue-900
ExecHQ
SecondaryOn dark green--brand-dark-green
ExecHQ
TertiaryOn stone 900--brand-stone-900

Primary

The colors that make a screen ExecHQ.

Navy#002945Blue 800--brand-navy
Bright yellow#f7d500Yellow 400--brand-bright-yellow

Secondary

Supporting colors, used in smaller amounts.

Gold yellow#856300Yellow 700--brand-gold-yellow
Light green#d3f36aGreen 300--brand-light-green
Dark green#014b42Green 800--brand-dark-green
Light blue#d4e0ffBlue 200--brand-light-blue
Orange#fd8143Orange 400--brand-orange

Neutral

One neutral: stone. Its 100 is the page, its 900 the near-black used in place of black.

LightsStone#f7f6f1Stone 100--brand-stone
DarksStone 900#0e0c0aStone 900--brand-stone-900
Cards and fieldsWhite#ffffff--brand-white

Blue

Navy (800) carries links, focus rings, dark panels and the approved badge. Blue 900, the darkest navy, is its deep end: pressed navy and deep backgrounds. Light blue (200) is the soft secondary. Tokens --brand-blue-100 to -900.

Blue 100#eff3ff
- --color-surface-sunken
- --color-surface-hover
- --color-surface-feature
- --color-glow-fade
- --color-text-inverse
- --color-wash-mid
- --color-status-draft-surface
- --color-status-approved-text
- --color-feedback-info-surface
- --color-text-on-selected
- --color-segmented-track
Blue 200#d4e0ffpalette: light blue
- --color-surface-active
- --color-surface-selected
- --color-surface-for-her
- --color-chart-glow-bottom
- --color-eyebrow-on-inverse
- --color-section-title-on-inverse
- --color-glow
- --color-action-secondary
- --color-wash-start
- --color-ring-progress-end
- --color-ring-complete-edge
- --color-sky-dawn
- --color-secondary-soft
- --color-surface-check-in-band
- --color-logo-hq-on-inverse
- --color-status-review-surface
Blue 300#a6beef
- --color-border-on-for-her
- --color-action-on-for-her-hover
- --color-text-inverse-muted
- --color-action-secondary-hover
- --color-ring-lift
- --color-ring-complete-deep
- --color-sky-day
- --color-sky-dusk
- --color-status-draft-border
- --color-pill-edge-on-inverse
Blue 400#789fe0
- --color-action-on-for-her-active
- --color-divider-on-inverse
- --color-action-secondary-active
Blue 500#497fc3
- --color-sky-dusk-edge-top
- --color-sky-night-spark
- --color-sky-night-edge
- --color-feedback-info-dot
Blue 600#22609c
- --color-eyebrow-on-for-her
- --color-stage-4
- --color-sky-dusk-outer
- --color-sky-night-glow
- --color-sky-panel-dusk-mid
- --color-secondary
- --color-eyebrow
- --color-edge-on-inverse
- --color-feedback-info-border
Blue 700#014472
- --color-surface-inverse-hover
- --color-text-on-for-her-muted
- --color-stage-3
- --color-border-inverse
- --color-sky-night-low
- --color-sky-panel-dusk
- --color-selected-hover
Blue 800#002945palette: navy
- --color-surface-inverse
- --color-text-on-for-her
- --color-action-on-for-her
- --color-chart-bar-base
- --color-stage-2
- --color-text-link
- --color-text-link-hover
- --color-text-on-action-secondary
- --color-nav-current-icon
- --color-text-on-wash
- --color-ring-done
- --color-ring-progress-start
- --color-sky-night-top-ring
- --color-sky-night
- --color-sky-panel-dusk-deep
- --color-icon-default
- --color-here-text
- --color-text-on-check-in-band
- --color-logo-hq
- --color-code-digit
- --color-focus
- --color-field-focus
- --color-status-approved-surface
- --color-status-approved-border
- --color-selected
- --color-outline-ink
- --color-text-on-selected-inverse
Blue 900#03151fdarkest navy — pressed navy, deep backgrounds
- --color-surface-inverse-active
- --color-surface-inverse-deep
- --color-stage-1
- --color-sky-night-top-core
- --color-sky-night-top
- --color-surface-quiet-on-inverse

Green

Success. Dark green (800) is its text and border, green 100 its surface. Tokens --brand-green-100 to -900.

Green 100#f1fdd8
- --color-wash-end
- --color-sky-night-fade-end
- --color-feedback-success-surface
Green 200#e3faa6
- --color-text-on-progress-muted
- --color-surface-note
- --color-surface-her-band
- --color-tag-surface
- --color-icon-surface
- --color-headline-on-navy-quiet
Green 300#d3f36apalette: light green
- --color-eyebrow-on-progress
- --color-chart-glow-top
- --color-sky-day-top-ring
- --color-sky-night-horizon
Green 400#a7db58
- --color-chart-bar-tip
Green 500#6ebb5d
- --color-outcome-positive
Green 600#389560
- --color-sky-panel-night-horizon
- --color-feedback-success-dot
Green 700#087158
- --color-border-progress
Green 800#014b42palette: dark green
- --color-surface-progress
- --color-text-on-her-band
- --color-surface-briefing-cover
- --color-tag-text
- --color-icon
- --color-feedback-success-text
- --color-feedback-success-border
Green 900#02302b

Yellow

Bright yellow (400) is the primary button, 500 on hover and 600 pressed. Gold yellow (700) is for small accents on light, and is the warning color. Tokens --brand-yellow-100 to -900.

Yellow 100#fdf8da
- --color-accent-soft
- --color-feedback-warning-surface
Yellow 200#fdf0aa
- --color-sky-heart-light
Yellow 300#fce46e
- --color-ring-complete-core
- --color-sky-day-ring
- --color-sky-day-top-core
Yellow 400#f7d500palette: bright yellow
- --color-headline-on-inverse
- --color-action
- --color-nav-current
- --color-sky-day-heart
- --color-accent-on-inverse
- --color-here-surface
- --color-logo-exec-on-inverse
Yellow 500#d3ad04
- --color-action-hover
- --color-action-edge
- --color-outcome-neutral
- --color-feedback-warning-dot
Yellow 600#ac8704
- --color-action-active
Yellow 700#856300palette: gold yellow
- --color-accent
- --color-logo-exec
- --color-feedback-warning-border
Yellow 800#644803
- --color-accent-hover
Yellow 900#432f07

Orange

Orange into red. From 600 the scale turns red for danger (border 600, text 700). The palette orange (400) is too light for text on white. Tokens --brand-orange-100 to -900.

Orange 100#fff0e8
- --color-feedback-danger-surface
Orange 200#ffdac8
- --color-sky-dusk-top-core
- --color-sky-panel-dusk-heart
Orange 300#ffb38f
- --color-ring-complete-mid
- --color-sky-heart-warm
- --color-sky-dusk-ring
- --color-sky-dusk-top-ring
- --color-sky-panel-dusk-ring
Orange 400#fd8143palette: orange
- --color-sky-dusk-heart
Orange 500#eb5520
- --color-nav-dot
- --color-outcome-negative
- --color-feedback-danger-border
- --color-feedback-danger-dot
Orange 600#d72212
Orange 700#b30614
- --color-danger
- --color-feedback-danger-text
Orange 800#8a0e15
- --color-danger-hover
Orange 900#5f0c10
- --color-danger-active

Stone

The one neutral. 100 is the platform's page; 200 and 300 are quiet, hover and pressed surfaces; 400 to 600 are borders and secondary text; 900 is the near-black used in place of black. Tokens --brand-stone-100 to -900.

Stone 100#f7f6f1palette: stone
- --color-card-on-inverse
- --color-drawer-on-inverse
Stone 200#e7e4de
- --color-surface-disabled
- --color-surface-quiet
- --color-surface-reference
- --color-ring-track
- --color-surface-logged
- --color-drawer-on-inverse-hover
Stone 300#c7c4bd
Stone 400#8e8a83
- --color-text-disabled
- --color-border-strong
- --color-status-review-border
Stone 500#68645e
- --color-text-muted
Stone 600#55504b
- --color-text-secondary
- --color-status-draft-text
- --color-device-edge
- --color-device-hardware
Stone 700#3e3a36
- --color-text-on-logged
Stone 800#24211e
- --color-status-review-text
Stone 900#0e0c0anear-black: the ink
- --color-text-on-cover
- --color-text-primary
- --color-text-on-action
- --color-feedback-info-text
- --color-feedback-warning-text
- --color-device-bezel

Brand slots

What the semantic tokens reach for. Swap a slot and every role built on it follows.

--brand-primaryBlue 800 · #002945
--brand-primary-strongBlue 900 · #03151f
--brand-primary-mutedBlue 700 · #014472
--brand-primary-softBlue 100 · #eff3ff
--brand-accentYellow 700 · #856300
--brand-accent-strongYellow 800 · #644803
--brand-accent-softYellow 100 · #fdf8da
--brand-accent-on-inverseYellow 400 · #f7d500
--brand-secondaryBlue 600 · #22609c
--brand-secondary-softBlue 200 · #d4e0ff

Surfaces

What a screen is built on, from the canvas up, and how surfaces respond to the pointer.

--color-canvas#fbfaf7behind the device frame
--color-surface#fbfaf7default page surface
--color-surface-raisedWhite · #ffffffcards and fields above the page
--color-surface-sunkenBlue 100 · #eff3ffwells and inset areas
--color-surface-inverseBlue 800 · #002945
--color-surface-inverse-hoverBlue 700 · #014472
--color-surface-inverse-activeBlue 900 · #03151f
--color-surface-inverse-deepBlue 900 · #03151fdarkest navy, behind a logo on photography
--color-surface-progressGreen 800 · #014b42
--color-surface-noteGreen 200 · #e3faa6
--color-surface-hoverBlue 100 · #eff3ff
--color-surface-activeBlue 200 · #d4e0ff
--color-surface-disabledStone 200 · #e7e4degrey: off, never tappable
--color-surface-quietStone 200 · #e7e4de
--color-surface-quiet-hover#d7d4ce
--color-surface-selectedBlue 200 · #d4e0ffthe item a detail pane is showing: a step stronger than hover
--color-surface-featureBlue 100 · #eff3ffthe card that says what to do next, on trial
--color-surface-her-bandGreen 200 · #e3faa6
--color-surface-for-herBlue 200 · #d4e0ff
--color-surface-briefing-coverGreen 800 · #014b42
--color-surface-referenceStone 200 · #e7e4de
--color-surface-check-in-bandBlue 200 · #d4e0ff
--color-surface-loggedStone 200 · #e7e4de
--color-surface-quiet-on-inverseBlue 900 · #03151f

Action and accent

The primary button, gold accents and the soft secondary.

--color-action-on-for-herBlue 800 · #002945
--color-action-on-for-her-hoverBlue 300 · #a6beef
--color-action-on-for-her-activeBlue 400 · #789fe0
--color-text-on-accentWhite · #ffffff
--color-actionYellow 400 · #f7d500
--color-action-hoverYellow 500 · #d3ad04
--color-action-activeYellow 600 · #ac8704
--color-text-on-actionStone 900 · #0e0c0a
--color-action-edgeYellow 500 · #d3ad04a thin edge on a yellow button over a pale surface; yellow 500, since gold read as navy from a distance (designer, 2026-10-16)
--color-action-secondaryBlue 200 · #d4e0ff
--color-action-secondary-hoverBlue 300 · #a6beef
--color-action-secondary-activeBlue 400 · #789fe0
--color-text-on-action-secondaryBlue 800 · #002945
--color-accentYellow 700 · #856300
--color-accent-hoverYellow 800 · #644803
--color-accent-softYellow 100 · #fdf8da
--color-accent-contrastWhite · #ffffff
--color-accent-on-inverseYellow 400 · #f7d500gold on navy
--color-secondaryBlue 600 · #22609c
--color-secondary-softBlue 200 · #d4e0ff

Text

Primary for reading, secondary for support, muted for metadata. Inverse sits on navy.

--color-text-on-progress-mutedGreen 200 · #e3faa6
--color-text-on-her-bandGreen 800 · #014b42
--color-text-on-for-herBlue 800 · #002945
--color-text-on-for-her-mutedBlue 700 · #014472
--color-text-on-coverStone 900 · #0e0c0alabels on the pale top of the cover photograph: the page's own near-black
--color-text-primaryStone 900 · #0e0c0a
--color-text-secondaryStone 600 · #55504b
--color-text-mutedStone 500 · #68645e
--color-text-disabledStone 400 · #8e8a83inactive: exempt from 1.4.3
--color-text-inverseBlue 100 · #eff3ff
--color-text-inverse-mutedBlue 300 · #a6beef
--color-text-linkBlue 800 · #002945
--color-text-link-hoverBlue 800 · #002945the link's own colour: text never turns gold on hover (designer, 2026-10-11; hover carries no meaning on a phone)
--color-text-on-washBlue 800 · #002945
--color-text-on-dangerWhite · #ffffff
--color-text-on-check-in-bandBlue 800 · #002945
--color-text-on-loggedStone 700 · #3e3a36
--color-text-on-selectedBlue 100 · #eff3ff
--color-text-on-selected-inverseBlue 800 · #002945

Borders

Subtle and default are decorative; strong is the one controls use.

--color-border-progressGreen 700 · #087158
--color-border-on-for-herBlue 300 · #a6beef
--color-border-subtle#d7d4cedividers between rows: grey, the same soft edge as the cards (blue 100 vanished on white)
--color-border#d7d4cecard edges and dividers: soft, so outlined cards sit easily beside unoutlined ones
--color-border-strongStone 400 · #8e8a83
--color-border-inverseBlue 700 · #014472

Focus, overlay and masks

Focus rings, the scrim behind dialogs, the mic's listening pulse, and the mask that fades scrolling content at an edge.

--color-focusBlue 800 · #002945
--color-focus-inverseWhite · #ffffff
--color-maskWhite · #ffffff
--color-overlayrgb(var(--shadow-rgb) / 0.48)
--color-listening-pulsergb(var(--shadow-rgb) / 0.28)
--color-listening-pulse-endrgb(var(--shadow-rgb) / 0)

Feedback

Each tone is a halo dot (a mid-tone centre in a bright ring), drawn here with the real notice and tag. Border and text are the field error; surface is the catalogue's problem box.

Info
An example info notice.
Info tag
- --color-feedback-info-dotBlue 500 · #497fc3
- --color-feedback-info-haloBlue 200 at 75%, softened with white
- --color-feedback-info-borderBlue 600 · #22609c
- --color-feedback-info-textStone 900 · #0e0c0a
- --color-feedback-info-surfaceBlue 100 · #eff3ff
Success
An example success notice.
Success tag
- --color-feedback-success-dotGreen 600 · #389560
- --color-feedback-success-haloGreen 300 at 75%, softened with white
- --color-feedback-success-borderGreen 800 · #014b42
- --color-feedback-success-textGreen 800 · #014b42
- --color-feedback-success-surfaceGreen 100 · #f1fdd8
Warning
An example warning notice.
Warning tag
- --color-feedback-warning-dotYellow 500 · #d3ad04
- --color-feedback-warning-haloYellow 400 at 75%, softened with white
- --color-feedback-warning-borderYellow 700 · #856300
- --color-feedback-warning-textStone 900 · #0e0c0a
- --color-feedback-warning-surfaceYellow 100 · #fdf8da
Danger
An example danger notice.
Danger tag
- --color-feedback-danger-dotOrange 500 · #eb5520
- --color-feedback-danger-haloOrange 300 at 75%, softened with white
- --color-feedback-danger-borderOrange 500 · #eb5520
- --color-feedback-danger-textOrange 700 · #b30614
- --color-feedback-danger-surfaceOrange 100 · #fff0e8

Status badges

The draft, in-review and approved badges on the hub and in the catalogue.

Draft
- --color-status-draft-surfaceBlue 100 · #eff3ff
- --color-status-draft-textStone 600 · #55504b
- --color-status-draft-borderBlue 300 · #a6beef
In review
- --color-status-review-surfaceBlue 200 · #d4e0ff
- --color-status-review-textStone 800 · #24211e
- --color-status-review-borderStone 400 · #8e8a83
Approved
- --color-status-approved-surfaceBlue 800 · #002945
- --color-status-approved-textBlue 100 · #eff3ff
- --color-status-approved-borderBlue 800 · #002945

Device frame

The phone and tablet drawn around the canvas. Prototype chrome, not product.

--color-device-bezelStone 900 · #0e0c0a
--color-device-edgeStone 600 · #55504b
--color-device-screen#fbfaf7
--color-device-hardwareStone 600 · #55504b

Other

Color tokens no group above claims.

--color-eyebrow-on-progressGreen 300 · #d3f36a
--color-haloWhite · #ffffffa thin white ring that keeps a pale tint (lime 200, blue 100) from shimmering against the stone
--color-her-haloGreen 200 at 25%, softened with white
--color-eyebrow-on-for-herBlue 600 · #22609c
--color-chart-glow-topGreen 300 · #d3f36a
--color-chart-glow-bottomBlue 200 · #d4e0ff
--color-chart-bar-baseBlue 800 · #002945
--color-chart-bar-tipGreen 400 · #a7db58
--color-headline-on-inverseYellow 400 · #f7d500
--color-eyebrow-on-inverseBlue 200 · #d4e0ff
--color-divider-on-inverseBlue 400 · #789fe0a light blue rule on a navy page: blue 400, quiet enough to sit behind the white words (designer, 2026-10-15)
--color-section-title-on-inverseBlue 200 · #d4e0ff
--color-stage-1Blue 900 · #03151f
--color-stage-2Blue 800 · #002945
--color-stage-3Blue 700 · #014472
--color-stage-4Blue 600 · #22609c
--color-cover-lightWhite · #ffffffsoft light drifting over the cover photograph
--color-image-veilrgb(3 21 31 / 0.6)
--color-image-veil-clearrgb(3 21 31 / 0)
--color-glowBlue 200 · #d4e0ffthe soft light behind sign in
--color-glow-fadeBlue 100 · #eff3ff
--color-tag-surfaceGreen 200 · #e3faa6
--color-tag-textGreen 800 · #014b42
--color-nav-currentYellow 400 · #f7d500
--color-nav-current-iconBlue 800 · #002945
--color-nav-dotOrange 500 · #eb5520the palette's red, as errors (designer, 2026-10-11): 3.4:1 against the panel-coloured ring that keeps it clear of the yellow circle
--color-wash-startBlue 200 · #d4e0ff
--color-wash-midBlue 100 · #eff3ff
--color-wash-endGreen 100 · #f1fdd8
--color-ring-doneBlue 800 · #002945
--color-ring-progress-startBlue 800 · #002945
--color-ring-progress-endBlue 200 · #d4e0ff
--color-ring-trackStone 200 · #e7e4de
--color-ring-track-on-skyWhite · #ffffff
--color-ring-liftBlue 300 · #a6beefthe soft glow round the rings not chosen, over Home's sky, every sky (trial, 2026-10-11)
--color-ring-selectedWhite · #ffffff
--color-ring-selected-edge#d7d4ce
--color-ring-complete-coreYellow 300 · #fce46e
--color-ring-complete-midOrange 300 · #ffb38f
--color-ring-complete-edgeBlue 200 · #d4e0ff
--color-ring-complete-deepBlue 300 · #a6beef
--color-ring-complete-lightWhite · #ffffff
--color-sky-heart-lightYellow 200 · #fdf0aa
--color-sky-heart-warmOrange 300 · #ffb38f
--color-sky-day-heartYellow 400 · #f7d500
--color-sky-day-ringYellow 300 · #fce46e
--color-sky-dawnBlue 200 · #d4e0ffday's blue for now (designer, 2026-10-09)
--color-sky-dayBlue 300 · #a6beefdeeper than dawn (designer, 2026-10-09)
--color-sky-duskBlue 300 · #a6beef
--color-sky-dusk-heartOrange 400 · #fd8143
--color-sky-dusk-ringOrange 300 · #ffb38f
--color-sky-dusk-outerBlue 600 · #22609c
--color-sky-dusk-edge-topBlue 500 · #497fc3
--color-sky-day-top-coreYellow 300 · #fce46ea golden centre (designer, 2026-10-10)
--color-sky-day-top-ringGreen 300 · #d3f36alime, so day runs through three hues as dawn and dusk do: yellow, lime, blue (designer, 2026-10-11)
--color-sky-dusk-top-coreOrange 200 · #ffdac8
--color-sky-dusk-top-ringOrange 300 · #ffb38f
--color-sky-night-top-coreBlue 900 · #03151fthe darkest navy where day has its golden centre (designer, 2026-10-11)
--color-sky-night-top-ringBlue 800 · #002945
--color-sky-night-topBlue 900 · #03151f
--color-sky-nightBlue 800 · #002945
--color-sky-night-lowBlue 700 · #014472
--color-sky-night-glowBlue 600 · #22609c
--color-sky-night-sparkBlue 500 · #497fc3
--color-sky-night-horizonGreen 300 · #d3f36a
--color-sky-night-edgeBlue 500 · #497fc3
--color-sky-night-fade-endGreen 100 · #f1fdd8
--color-sky-panel-duskBlue 700 · #014472
--color-sky-panel-dusk-deepBlue 800 · #002945
--color-sky-panel-dusk-midBlue 600 · #22609c
--color-sky-panel-dusk-heartOrange 200 · #ffdac8
--color-sky-panel-dusk-ringOrange 300 · #ffb38f
--color-sky-panel-night-horizonGreen 600 · #389560
--color-dangerOrange 700 · #b30614
--color-danger-hoverOrange 800 · #8a0e15
--color-danger-activeOrange 900 · #5f0c10
--color-outcome-positiveGreen 500 · #6ebb5d
--color-outcome-neutralYellow 500 · #d3ad04
--color-outcome-negativeOrange 500 · #eb5520
--color-eyebrowBlue 600 · #22609c
--color-icon-surfaceGreen 200 · #e3faa6
--color-iconGreen 800 · #014b42
--color-icon-defaultBlue 800 · #002945
--color-here-surfaceYellow 400 · #f7d500
--color-here-textBlue 800 · #002945
--color-logo-execYellow 700 · #856300
--color-logo-hqBlue 800 · #002945
--color-code-digitBlue 800 · #002945
--color-headline-on-navy-quietGreen 200 · #e3faa6
--color-card-on-inverseStone 100 · #f7f6f1a stone card on a navy page: the check-in's What you did (designer, 2026-10-16)
--color-drawer-on-inverseStone 100 · #f7f6f1
--color-drawer-on-inverse-hoverStone 200 · #e7e4de
--color-edge-on-inverseBlue 600 · #22609clime: a navy card's headline when yellow isn't justified, the Plan's moves (designer, 2026-10-15)
--color-logo-exec-on-inverseYellow 400 · #f7d500
--color-logo-hq-on-inverseBlue 200 · #d4e0ff
--color-field-focusBlue 800 · #002945a field you are typing in: navy edge, 15:1 on white
--color-selectedBlue 800 · #002945
--color-selected-hoverBlue 700 · #014472
--color-outline-inkBlue 800 · #002945the outline button's edge and words
--color-segmented-trackBlue 100 · #eff3ffthe track behind segments
--color-pill-edge-on-inverseBlue 300 · #a6beef
--color-selected-on-inverseWhite · #ffffff

Kulim Park `--font-display`

Headings and UI labels. The primary face.

Your career doesn't pause
--text-2xs0.6875rem11px — badges, meta
Your career doesn't pause
--text-xs0.75rem12px
Your career doesn't pause
--text-xs-plus0.8125rem13px — hints and captions, a step up from 12 for reading on a phone
Your career doesn't pause
--text-sm0.875rem14px
Your career doesn't pause
--text-sm-plus0.9375rem15px — Your direction's serif, a touch under body size (designer, 2026-10-16)
Your career doesn't pause
--text-md1rem16px — body default
Your career doesn't pause
--text-lg1.125rem18px
Your career doesn't pause
--text-xl1.375rem22px
Your career doesn't pause
--text-2xl1.75rem28px
Your career doesn't pause
--text-2xl-plus2rem32px — the question in its sky panel, a size up so it breaks evenly (designer, 2026-10-14)
Your career doesn't pause
--text-3xl2.25rem36px
Your career doesn't pause
--text-4xl3rem48px
Your career doesn't pause
--text-icon0.4375rem7px — a date set inside a 20px icon

Libre Baskerville `--font-serif`

Pull quotes and editorial moments. Used sparingly.

Your career doesn't pause
--text-2xs0.6875rem11px — badges, meta
Your career doesn't pause
--text-xs0.75rem12px
Your career doesn't pause
--text-xs-plus0.8125rem13px — hints and captions, a step up from 12 for reading on a phone
Your career doesn't pause
--text-sm0.875rem14px
Your career doesn't pause
--text-sm-plus0.9375rem15px — Your direction's serif, a touch under body size (designer, 2026-10-16)
Your career doesn't pause
--text-md1rem16px — body default
Your career doesn't pause
--text-lg1.125rem18px
Your career doesn't pause
--text-xl1.375rem22px
Your career doesn't pause
--text-2xl1.75rem28px
Your career doesn't pause
--text-2xl-plus2rem32px — the question in its sky panel, a size up so it breaks evenly (designer, 2026-10-14)
Your career doesn't pause
--text-3xl2.25rem36px
Your career doesn't pause
--text-4xl3rem48px
Your career doesn't pause
--text-icon0.4375rem7px — a date set inside a 20px icon

Inter `--font-body`

Body copy and interface text.

Your career doesn't pause
--text-2xs0.6875rem11px — badges, meta
Your career doesn't pause
--text-xs0.75rem12px
Your career doesn't pause
--text-xs-plus0.8125rem13px — hints and captions, a step up from 12 for reading on a phone
Your career doesn't pause
--text-sm0.875rem14px
Your career doesn't pause
--text-sm-plus0.9375rem15px — Your direction's serif, a touch under body size (designer, 2026-10-16)
Your career doesn't pause
--text-md1rem16px — body default
Your career doesn't pause
--text-lg1.125rem18px
Your career doesn't pause
--text-xl1.375rem22px
Your career doesn't pause
--text-2xl1.75rem28px
Your career doesn't pause
--text-2xl-plus2rem32px — the question in its sky panel, a size up so it breaks evenly (designer, 2026-10-14)
Your career doesn't pause
--text-3xl2.25rem36px
Your career doesn't pause
--text-4xl3rem48px
Your career doesn't pause
--text-icon0.4375rem7px — a date set inside a 20px icon

Type roles, adjustable for this preview
Role	Face	Size	Weight	Line height	Letters	Words
DisplayWelcome, privacy
TitleOne per screen
HeadingSections, card titles
SubheadingRows, links, reads
BodyReading text
Body smallSupporting text
LabelButtons, field labels
CaptionDates, hints, status
EyebrowCapitals above a heading
FigureNumbers shown as data
EditorialQuotes, welcome lines

No changes. Pick a setting to try it on every component at once.

WelcomeSplit

ExecHQ

Somewhere to work on what comes next.

Welcome to ExecHQ

A private career advisor that takes you from “I’d like to be” to “I’m going to be”. It doesn’t just show you the way. It works for you to get you there.

Email

StepHeader

Your direction

What would you like to move toward?

A role, a scope, an aspiration or a challenge. A precise title is optional.

NextStepCard

Your next step

Brief your manager before Thursday’s check-in

Why this: A one-page brief turns a check-in into a conversation about scope.
Why now: The check-in is on Thursday.
Why you: You’re in the Show the proof stage of your plan.

Start in the Toolbox

EntryLink

Today’s Briefing · 3 readsHow planning season decides who gets new workRelevant to your Q1 planning review.

EntryLink

Pick up where you left offBrief for your manager check-inEdited 19 Oct

ProfileHeader

SettingsGroup

Settings

Notice

Saved

Your draft is saved. You can come back to it.

Input

Personal email

Button

The line

Hand-drawn on a 20 × 20 grid, scaled to size.
One 1.5 line, round ends and corners, no fills except where a fill carries meaning (the dock's color switch).
Stroked in currentColor: an icon takes the color of what it sits in.
Never on its own: every icon has a visible label, or a hidden one that screen readers read. The icon itself is hidden from them.
No icon libraries. The library below is drawn ahead of need; a new icon is added here first, drawn to match, before any screen uses it.
Names say what an icon is, not what it is for (trash, not delete-draft), lowercase with hyphens, direction last (arrow-left).

Navigation

Getting around, opening and closing.

homeIn use
menuIn use
closeIn use
chevronIn use
chevron-leftLibrary
chevron-upLibrary
chevron-downLibrary
arrow-rightLibrary
arrow-leftLibrary
arrow-upLibrary
arrow-downLibrary
external-linkLibrary
more-horizontalLibrary
more-verticalLibrary
searchLibrary
filterLibrary

Actions

Doing something to the user's own work.

plusLibrary
minusLibrary
checkIn use
editIn use
pencilIn use
trashIn use
copyLibrary
shareLibrary
downloadIn use
uploadLibrary
refreshLibrary
undoLibrary
sendIn use
attachIn use
linkIn use
bookmarkLibrary
starLibrary
settingsLibrary
slidersLibrary
eyeLibrary
eye-offLibrary
sign-inLibrary
sign-outIn use

Communication

Messages, calls and alerts.

mailIn use
messageLibrary
bellIn use
phoneLibrary
micIn use
videoLibrary

People and places

Who and where.

personIn use
peopleLibrary
person-addLibrary
briefcaseLibrary
buildingLibrary
pinLibrary
globeIn use
compassLibrary

Time and content

What a row or card is about.

calendarIn use
clockLibrary
documentIn use
folderLibrary
imageLibrary
briefingIn use
bookLibrary
flagIn use
targetLibrary
chart-barLibrary
trend-upLibrary
lightbulbLibrary

Status

Feedback. Always with words beside it: an icon alone never carries the message.

infoLibrary
warningLibrary
errorLibrary
successLibrary
helpLibrary

Security

Privacy and access.

lockIn use
unlockLibrary
shieldLibrary
keyLibrary

Brand

LinkedIn, and ExecHQ's own marks: the advisor's spark and the open draft (the pencil, writing a line).

linkedinIn use
sparkIn use
draftIn use

Sizes

Three sizes, and nothing between them.

16pxInside buttons and links, and beside small text.
20pxIn rows, cards, icon chips and navigation.
24pxStanding alone: the tab bar and header controls.

Color

Where an icon sits decides its color. In a button it takes the label's color.

On its own--color-icon-default
In an icon chip--color-icon on --color-icon-surface
On navy--color-text-inverse

Prototype only

The review dock and hub. Not part of the product, so not for dev.

mobile
tablet
web
hub
contrast
reset
sidebar

--space-3xs0.125rem2px
--space-2xs0.25rem4px
--space-xs0.5rem8px
--space-sm0.75rem12px
--space-md1rem16px
--space-md-lg1.25rem20px — half step, for balance: feature cards
--space-lg1.5rem24px
--space-xl2rem32px
--space-2xl3rem48px
--space-3xl4rem64px
--space-4xl6rem96px
--space-paragraphvar(--space-sm)
--space-screen-sidevar(--space-md)left and right of a phone screen: 16, the common standard (designer, 2026-10-15; was 12)
--space-screen-topvar(--space-lg)above the first thing on a screen
--space-between-cardsvar(--space-sm)the gap between cards stacked on a screen: 12, half the gap between sections (designer, 2026-10-11)
--space-card-paddingvar(--space-md)inside a list card: a row, a link, a read
--space-feature-paddingvar(--space-md-lg)inside a feature card, which holds more
--space-eyebrow-titlevar(--space-2xs)an eyebrow to the title under it
--space-title-copyvar(--space-xs)a title to the copy under it
--space-copy-cardvar(--space-md)16px
--space-group-titlevar(--space-sm)12px
--space-card-titlevar(--space-md-lg)20px
--space-list-itemvar(--space-md)16px
--space-divided-itemvar(--space-md-lg)20px
--space-copy-actionvar(--space-md-lg)the copy to the button under it: the widest of the three, as wide as the card's padding
--space-drawer-groupsvar(--space-lg)24px
--space-drawer-innervar(--space-sm)12px
--space-between-pillsvar(--space-xs)8px, across and down
--space-between-answersvar(--space-sm)12px

Your next role, planned
--color-canvasBehind the device frame.
Your next role, planned
--color-surfaceThe default page: stone, the platform's own color.
Your next role, planned
--color-surface-raisedCards and fields above the page, in white.
Your next role, planned
--color-surface-sunkenWells and inset areas.
Your next role, planned
--color-surface-featureThe head of a two-tone feature card.
Your next role, planned
--color-surface-hoverUnder a mouse, on web only. Never carries meaning.
Your next role, planned
--color-surface-activePressed: a row or button while it is tapped.
Your next role, planned
--color-surface-selectedThe item a panel is showing. A step stronger than hover.
Your next role, planned
--color-surface-disabledA control you can't use: warm stone, so it never looks tappable.
Your next role, planned
--color-surface-inverseThe one dark moment on a screen.
Your next role, planned
--color-surface-inverse-deepThe darkest navy, behind the logo on photography.
Your next role, planned
--color-surface-progressDark green: you've moved. Never an action.
Your next role, planned
--color-surface-noteLime: a small note that something moved.

--radius-xs0.1875rem3px
--radius-sm0.375rem6px
--radius-md0.625rem10px
--radius-lg1rem16px
--radius-xl1.25rem20px
--radius-pill999px
--radius-buttonvar(--radius-pill)only buttons are pills, so the shape means "press me"
--radius-cardvar(--radius-lg)cards: 16, calm next to 10px fields, never rounder than needed
--radius-fieldvar(--radius-md)text fields: squared at 10, so they never read as buttons
--radius-tagvar(--radius-sm)labels that aren't buttons: tags, matching the icon chips
--radius-device-mobile2.75rem44px
--radius-device-tablet1.375rem22px

--shadow-xs0 1px 2px rgb(var(--shadow-rgb) / 0.06)
--shadow-sm0 1px 3px rgb(var(--shadow-rgb) / 0.08), 0 1px 2px rgb(var(--shadow-rgb) / 0.04)
--shadow-md0 4px 12px rgb(var(--shadow-rgb) / 0.1), 0 1px 3px rgb(var(--shadow-rgb) / 0.06)
--shadow-lg0 12px 32px rgb(var(--shadow-rgb) / 0.14), 0 2px 8px rgb(var(--shadow-rgb) / 0.06)
--shadow-panel8px 0 40px rgb(var(--shadow-rgb) / 0.18)
--shadow-drawer0 -8px 24px rgb(var(--shadow-rgb) / 0.12)
--shadow-device0 14px 34px rgb(var(--shadow-rgb) / 0.16)

--border-width-thin1px
--border-width-medium2px
--border-width-thick3px

--border-thinvar(--border-width-thin) solid var(--color-border)
--border-strongvar(--border-width-thin) solid var(--color-border-strong)
--border-subtlevar(--border-width-thin) solid var(--color-border-subtle)

Button

Primary action control. Primary carries the single most important action on a surface; secondary and ghost step back from it. Danger is kept for confirming something that cannot be undone.

Primary — default
Primary — hover
Primary — focus
Primary — active
Primary — disabled
Primary — loading
Secondary — default
Secondary — hover
Secondary — disabled
Outline — default, for a surface yellow can't go on
Ghost — default
Ghost — hover
Ghost — disabled
Danger — default
Danger — hover
Danger — active
Danger — disabled
Small
Full width

TextLink

Link. Underlined by default so it is identifiable without color; `quiet` drops the underline for dense lists where the surrounding structure already reads as navigation.

Default
Open the Plan
Default — hover
Open the Plan
Default — focus
Open the Plan
Quiet
Toolbox
Standalone
Read today's briefing

The pattern

Surfaces

Colour

Type

Controls

Chat

Spacing

Pages that shaped it

Dark logo

Light logo

Primary

Secondary

Neutral

Blue

Green

Yellow

Orange

Stone

Brand slots

Surfaces

Action and accent

Text

Borders

Focus, overlay and masks

Feedback

Status badges

Device frame

Other

Kulim Park --font-display

Libre Baskerville --font-serif

Inter --font-body

Brief your manager before Thursday’s check-in

Settings

The line

Navigation

Actions

Communication

People and places

Time and content

Status

Security

Brand

Sizes

Color

Prototype only

Button

TextLink

Input

ChipGroup

ToggleGroup

Kulim Park `--font-display`

Libre Baskerville `--font-serif`

Inter `--font-body`