color.*Colors
A restrained palette anchored in near-black and warm cream, with a single signal color for high-impact moments. Content-type colors make format instantly legible.
Brand
Ink
color.brand.ink
#0A0A0A
Primary dark surface. Used for all backgrounds in dark-mode contexts.
Paper
color.brand.paper
#F5F2EC
Warm cream light surface. Used in print, slides, and light-mode contexts.
Signal
color.brand.signal
#FF4725#FF5B3D bright#C4321A deep
The Design Better accent. Use sparingly: active states, CTAs, key accents only.
Text — on dark
Primary
color.text.on-dark.primary
#F2F0EC
Headlines, body copy, interactive labels. Max legibility.
Dim
color.text.on-dark.dim
rgba(242, 240, 236, 0.62)
Secondary text, subtitles, descriptions, captions.
Faint
color.text.on-dark.faint
rgba(242, 240, 236, 0.38)
Token labels, placeholders, disabled states, metadata.
Surfaces & borders
Raised on dark
color.surface.raised-on-dark
rgba(255, 255, 255, 0.04)
Cards, sidebar, elevated panels on the ink background.
Subtle border
color.border.subtle-on-dark
rgba(255, 255, 255, 0.08)
Default card borders, dividers, input outlines.
Strong border
color.border.strong-on-dark
rgba(255, 255, 255, 0.18)
Hover/focus borders, prominent separators.
Signal border
color.border.signal
rgba(255, 71, 37, 0.55)
Active nav items, focus rings, error states.
Content type
Each content format has a foreground/background pair. Used in badges, tags, and filter UI.
Podcast
color.content-type.podcast
fg: #9D90F8
bg: rgba(124, 106, 247, 0.18)
Used on episode, show, and audio content.
Video
color.content-type.video
fg: #E06060
bg: rgba(224, 75, 75, 0.18)
Used on video interviews, tutorials, and recordings.
Newsletter
color.content-type.newsletter
fg: #4DB87A
bg: rgba(59, 158, 106, 0.18)
Used on Substack issues and email campaigns.
Book
color.content-type.book
fg: #C8973A
bg: rgba(200, 151, 58, 0.18)
Used on reading recommendations and book notes.
Extended brand palette
The full Design Better color palette from the brand guidelines. Use these for editorial art direction, episode cover art, campaign graphics, and supporting UI. They are never used as primary surface or text colors in product UI.
Golden
#FBCA3C
Teal
#0D8880
Amber
#D4A800
Black
#000000
Pink
#F9B0CC
Chartreuse
#CCFF00
Silver
#C4C6BE
Sky
#9ED8F2
Deep Teal
#0A4040
Coral
#F03E1C
Cream
#EDE0D4
Crimson
#C4003C
Lavender
#CAC0F4
Peach
#F5C0AA
Orange
#FF7818
Dark Amber
#B07800
Plum
#4E0040
Forest
#086838
Mint
#6AE8D4
Contrast guidance
text.on-dark.primary (#F2F0EC) on brand.ink (#0A0A0A) achieves 19.2:1 — well above WCAG AAA (7:1). The signal color (#FF4725) on ink achieves 4.8:1, meeting WCAG AA for large text and UI components. Never use signal color for body copy.