Colors
Kit
- Platinum
#e5e4e2 · --platinumText, letters, primary actions - Champagne
#f2e3c3 · --champagneHover and focus only - Obsidian
#08090d · --obsidianPage background - Graphite
#13151b · --graphiteCards and containers - Slate
#8e9aba · --slateLabels, borders, neutral dot - Body gray
#b8b9bf · --body-grayBody text on Obsidian - Muted gray
#a9a9af · --muted-grayCaptions on Graphite - Royal
#2f55e8 · --royalFocus ring. Never text - Purple
#6a47e0 · --purpleHighlight. Never text - Green
#1f9d6b · --greenSuccess - Danger
#e5484d · --dangerErrors, destructive - Danger text
#ff8a8e · --danger-textDanger as text - Cream
#f6eedb · --creamLight background - Ink navy
#0b1b4d · --ink-navyText on cream - Deep slate
#5c6785 · --deep-slateMuted text on cream
Channels (which product you are in)
- hub
#b4bfce - support
#6fb3d6 - blog
#dc9a52 - play
#66b88a - admin
#8c9bb0 - shop
#d4838f - dev
#a091d9
Staff roles
- admin
#e6c687 - moderator
#a78bfa - content manager
#34d399 - content editor
#2dd4bf - marketing manager
#fb7185 - marketing editor
#f4a578 - support manager
#38bdf8 - support agent
#818cf8 - user
#a3a3a3
Type
Display: Jah and Co
Outfit 48 / 600Heading: Jah and Co
Outfit 30 / 600Subheading: Jah and Co
Outfit 20 / 500Body: Jah and Co
Outfit 16 / 400Caption: Jah and Co
Outfit 14 / 400Outfit weights
Aa Bb Cc 123 300
Aa Bb Cc 123 400
Aa Bb Cc 123 500
Aa Bb Cc 123 600
Aa Bb Cc 123 700
Roboto Slab (serif)
Journal headline
Long-form reading uses the serif so articles feel different from the product UI.
Marks
Wordmark: compact and full, by channel
hubplayshopdevsupportblogadminhubplayshopdevsupportblogadminMonogram
Suite bar and footer
Components
DefaultLiveNewFailed
We never share it.
Name is too short.
Plain card
Body text on Graphite.Linked card
The whole card is one link.Profile panel.
Billing panel.
Security panel.
| Order | Customer | Status | Total |
|---|---|---|---|
| #1042 | Ada Lovelace | Paid | $48.00 |
| #1041 | Grace Hopper | Pending | $32.00 |
| #1040 | Alan Turing | Failed | $64.00 |
Seasons
Seasons only swap the palette variables. Channel colors never change. Toggling sets data-theme on this page.
- brand
- brandDeep
- brandSoft
- surface
- canvas