A system, with room.
Consistent foundations.
Flexible compositions.
Foundations
Editable starter foundation. Freely adapt text styles and components during concept exploration. After approval, consolidate and expand consistently.
One identity, multiple brand colors
Mint, blue, and clay are examples. Choose the palettes your brand needs; the third is optional. Color choice and action importance are separate decisions.
Primary brand
Main brand expression
--brand-primary
Secondary brand
Complementary brand expression
--brand-secondary
Tertiary brand · optional
Additional expression when needed
--brand-tertiary
Each palette includes solid, hover, pressed, on-color text, two surface tints, readable text, and border roles. The theme selector above updates these examples.
Text with more range
Use a role for the purpose of the text. Placeholders still need labels; disabled tones are reserved for inactive controls.
--fg--fg-secondary--fg-muted--fg-subtle--fg-placeholder--fg-disabled--fg-brand-primary--fg-brand-secondary--fg-brand-tertiary--fg-inverseSurface and status roles
bg
bg-subtle
bg-muted
bg-inverse
Status colors keep their meaning independently of brand colors.
Explore the full palettes · 50–950
These are raw ingredients. Components use semantic roles so colors can adapt to light and dark themes.
Neutral
50
100
200
300
400
500
600
700
800
900
950
Brand primary
50
100
200
300
400
500
600
700
800
900
950
Brand secondary
50
100
200
300
400
500
600
700
800
900
950
Brand tertiary
50
100
200
300
400
500
600
700
800
900
950
Spacing, radius & elevation
Typography
Plus Jakarta Sans. Nine heading sizes, four body sizes, three weights, four line-height options shared across product and review pages.
Line height
1.1 / 1.25 / 1.5 / 1.75
Letter spacing
0 · fixed
Weights
400 / 500 / 700
Combine any size with Regular, Medium, or Bold. Headings use Medium in the current theme; body copy to Regular. Labels and controls use Medium.
Line-height options
Large headings use Tight, smaller headings use Snug, and body text uses Normal. Relaxed is available for longer reading. Compare the same two-line text below.
Heading styles
8XL · 96px
Large display headings
Line height 105.6px · Tight (1.1) · .text-8xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
7XL · 72px
Hero headings
Line height 79.2px · Tight (1.1) · .text-7xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
6XL · 60px
Display headings
Line height 66px · Tight (1.1) · .text-6xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
5XL · 48px
Large page headings
Line height 52.8px · Tight (1.1) · .text-5xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
4XL · 40px
Default page titles (H1)
Line height 44px · Tight (1.1) · .text-4xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
3XL · 36px
Prominent headings
Line height 39.6px · Tight (1.1) · .text-3xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
2XL · 32px
Compact page headings
Line height 35.2px · Tight (1.1) · .text-2xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
XL · 24px
Section headings
Line height 30px · Snug (1.25) · .text-xl
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
LG · 20px
Subheadings
Line height 25px · Snug (1.25) · .text-lg
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
Body styles
BODY-LG · 18px
Large body copy and introductions
Line height 27px · .text-body-lg
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
MD · 16px
Body copy and inputs
Line height 24px · .text-md
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
SM · 14px
Supporting copy and labels
Line height 21px · .text-sm
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
XS · 12px
Captions and metadata
Line height 18px · .text-xs
Regular · 400
Aa
Medium · 500
Aa
Bold · 700
Aa
Label / eyebrow
Core 1.0 / Living reference
Plus Jakarta Sans · XS / 12px · Medium / 500 · Normal / 1.5 · Uppercase · Letter spacing 0. Shared by all-caps labels in product screens and review pages.
Use text-label, or eyebrow for muted introductory labels.
One shared style, wherever it appears
Discovery Design Template
Default page titles use 4XL / Medium. The home hero uses 3XL on mobile, 5XL on tablet, and 6XL on desktop. The smaller design-system card heading uses LG / Medium.
Example: class="text-lg font-medium". Choose a shared line-height option with leading-tight, leading-snug, leading-normal, or leading-relaxed. Letter spacing stays at 0.
Icons
Phosphor is the shared icon library. Choose regular, filled, or duotone to suit the visual concept. The same icons below show how each style changes the visual weight.
Regular
A clear outline for navigation and everyday controls.
Filled
Solid shapes for stronger emphasis or selected states.
Duotone
Two opacity levels for added depth, using the same theme color.
These examples are a starter selection, not the entire library. During concept work, choose one style or define purposeful combinations, such as regular navigation with filled active states. After approval, document and reuse the chosen rules.
01 / Button
One vocabulary for sizes, variants, and interaction states.
Hover and keyboard-focus any enabled button to inspect its state.
Brand palette and action treatment
Palette changes the brand color. Variant controls emphasis. These are separate recipe examples, not a recommended action group.
Primary palette
Secondary palette
Tertiary palette
02 / Field
Input, textarea, and native select share labels, hints, and validation. Selects reserve space for an inset arrow. Help and error text have an additional 2px of top spacing.
Enter a valid email address.
03–05 / Selection controls
Checkboxes and radios use 20px indicators. Checkboxes select options, radios select one option, and switches change a setting.
06 / Surface
A visual treatment with no prescribed content or layout.
A horizontal composition
Identity, a short description, and room to breathe.
24
A compact data composition.
An elevated surface
Use elevation when hierarchy calls for it. A plain section or divider is equally valid.
These compositions are examples, not core card templates. Surface defines treatment only; layout and padding are composed separately.
07 / Badge
Compact labels communicate status with words as well as color.
08 / Tabs
Line and segmented treatments share keyboard and panel behavior.
A clear overview of the current view. Use the arrow keys to change tabs.
Recent activity appears here. Each tab owns its associated panel.
Preferences belong in the settings panel.
A clear overview of the current view. Use the arrow keys to change tabs.
Recent activity appears here. Each tab owns its associated panel.
Preferences belong in the settings panel.
09 / Alert
Persistent feedback belongs near the relevant content.
Use inline feedback near the relevant content.
Your preferences are up to date.
Some information may be out of date.
Check the highlighted fields and try again.
10 / Dialog
Native modal semantics with an accessible title and explicit dismissal.
11 / Avatar
Image, initials, and a neutral fallback. Three sizes.
Use initials or the neutral person icon when a photo is unavailable.
12 / Search field
A field composition with search and clear actions.
Clearing returns focus to the field. Product code owns filtering.
Mobile primitives
App header, bottom navigation, sheet, sticky action bar, and list row. In the framed mobile player, safe-area padding clears the transparent 44px status bar and 28px home indicator overlays. Standalone and canvas screens keep native safe areas only.
A flexible list row
Leading, body, and trailing content.
Sheets share dialog behavior: focus stays inside, Escape closes, and focus returns to the trigger.