Art
Featured2024
Editorial card
Content cards pair the serif display face with calm neutral surfaces and a single green accent.
A design system that feels effortless to use.
A warm, editorial toolkit built on a cream canvas, a single forest accent, and the pairing of a classic serif with a clean geometric sans — the same quiet confidence as the site it draws from.
- Canvas
- Warm cream
- Accent
- Forest green
- Display
- Rosarivo
- Text
- Red Hat Display
01 / color
Color
A restrained palette: a warm cream field, deep charcoal ink, and a single forest-green accent, supported by soft sand and sage neutrals.
Brand
Cream#F9F5F1--background
Charcoal#2C2C2C--foreground
Forest#437057--primary
Sage#E2EBE4--accent
Neutrals & Support
Card#FFFDFB--card
Secondary#ECE5DB--secondary
Muted#EFE9E1--muted
Border#E4DDD2--border
Terracotta#B4462F--destructive
Sand#C2A878--chart-3
02 / typography
Typography
Rosarivo brings an editorial, literary voice to headlines while Red Hat Display keeps interface text crisp and legible.
Display / Serif
Aa
Rosarivo
A refined old-style serif for headlines and editorial moments.
Text / Sans
Aa
Red Hat Display
A clear, geometric sans for interface and body copy.
DisplayRosarivo · 72px
Effortless
H1Rosarivo · 48px
Enterprise, simplified
H2Rosarivo · 36px
A quiet, editorial system
H3Red Hat Display · 24px · 600
Section heading
LeadRed Hat Display · 20px · 300
A supporting line that introduces the idea.
BodyRed Hat Display · 16px · 400
Currently seven years into designing enterprise software, refining how complex systems feel simple.
SmallRed Hat Display · 14px
Secondary and caption text sits comfortably here.
04 / components
Components
Cards, forms, badges, callouts, and identity elements composed from the same foundations.
Subscribe
Form controls, inputs, and focus rings.
Badges
PrimaryAccentMutedOutlineRated
Callout
Notices reuse the sage accent surface for a soft, non-alarming tone.
MC
Matthew A. Cottrell
Product design & strategy