Design system
33
Color styles
50+
Text styles
3
Core typefaces
28
Reusable components
Color styles
Tokenized colors used across the homepage, case studies, cards, and dark presentation blocks.
CS/Light/Brand/60
rgb(255, 255, 255)
CS/Light/Brand/30
rgb(240, 240, 244)
CS/Light/Brand/10
rgb(207, 69, 0)
Text/Primary light
rgb(40, 39, 56)
Dark
rgb(3, 3, 12)
CTA
rgb(0, 72, 82)
Light 2
rgb(245, 245, 247)
Alert
rgb(180, 35, 24)
Text styles
Core presets shown with realistic copy, including where they are best used across the portfolio and case studies.
Archiver 1
Page titles
Design that feels useful, sharp, and human.
Homepage/H2
Section headings
How I’ll help you or your clients
Case study/Body
Narrative text
Use this style for case-study paragraphs, project context, and explanatory copy that needs a comfortable reading rhythm.
Homepage/Tag
Selected work
Homepage/Quote
“Sharp, clear, and never decorative for its own sake.”
Légende photos
Oregon USA — 2024
UI examples
Small reusable patterns that define the site’s interface feel: compact pills, soft cards, careful shadows, and quiet logo treatment.
Buttons
Primary
Secondary
Use pill-shaped actions with compact padding. Keep the label short and link the parent button frame.
Soft card
Cards use a generous radius, subtle border, and light shadow. Keep content left-aligned and avoid overfilling the surface.
Logo usage
Keep partner and tool marks quiet. Use the Logos set with restrained fill and consistent height.
Radius scale
Use 16–20px for cards, 100px for pills, and smaller radii for nested details.
Icon language
Use Lucide for interface marks and keep strokes simple, usually at 20–24px.
Usage notes
01 · Color
Start with the light case-study palette, then use the orange accent only for emphasis, section labels, and key moments.
02 · Typography
Use BDO Grotesk for large editorial titles and General Sans for structured interface copy. Keep Noto Serif for rare soft contrast.
03 · Spacing
Anchor major sections to the 1072px content width. Use large vertical padding and let cards breathe.
04 · Components
Reuse the existing navigation, CTA, project, testimony, accordion, and footer components before creating new patterns.
Style guide · Axel Meimoun
Updated June 2026