Design System

Tokens, type, color, and components used across xiaowenmak.com. This page is the single source of truth for every visual decision on the site.

Color Typography Spacing Radii + Shadows Transitions Layout Components
Color

Palette

Light-mode palette. Colors are defined as CSS custom properties on :root. Backgrounds use translucent layers over the base.

Backgrounds
--color-bg-base
#f5f6f9
--color-bg-surface
rgba(255,255,255,0.42)
--color-bg-inset
rgba(28,26,22,0.04)
--color-bg-zen
rgba(28,26,22,0.025)
Text
--color-text-primary
#1C1A16
--color-text-secondary
#5A5750
--color-text-muted
#8A867E
--color-text-inverse
#f5f6f9
Accent
--color-accent
#465569
--color-accent-hover
#3a4759
--color-accent-subtle
rgba(70,85,105,0.09)
--hero-accent
#1D6F5A
Links + Borders + Buttons
--color-link
#1a3657
--color-border
rgba(28,26,22,0.13)
--color-btn-surface
#eceef3
--color-btn-surface-hover
#e3e6ec
Discipline Lenses
--color-lens-research
#0f766e
--color-lens-design
#c2410c
--color-lens-ai-engineering
#3b5bdb
Typography

Typefaces + Scale

Three typefaces, each with a clear job. Newsreader for editorial weight, DM Sans for everything functional, DM Mono for data and code.

Editorial
Newsreader
--font-editorial: 'Newsreader', Georgia, serif
Body
DM Sans
--font-body: 'DM Sans', system-ui, sans-serif
Mono
DM Mono
--font-mono: 'DM Mono', 'Menlo', monospace

Type Scale

--text-4xl
48px / 700
Hero headlines
--text-3xl
40px / 600
Page titles
--text-2xl
32px / 600
Section headers
--text-xl
24px / 500
Card titles
--text-lg
20px / 500
Section subheads
--text-md
18px / 400
Large body, card descriptions
--text-base
16px / 400
Body text, the default
--text-sm
14px / 400
Captions, metadata, chip labels
--text-xs
12px / 400
Fine print, timestamps, eyebrows
Spacing

8px Base Scale

All spacing uses multiples of 8px. --space-1 (4px) is the half-step for sub-component tightness.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
--space-10
128px
Shape

Radii

none
0
sm
4px
md
8px
lg
12px
full
9999px

Shadows

--shadow-sm
Chips, subtle lift
--shadow-md
Cards
--shadow-lg
Featured cards, panels
Motion

Transitions

Hover over the dots to preview timing. Respects prefers-reduced-motion.

--transition-fast
150ms
--transition-base
200ms
--transition-slow
400ms
Layout

Widths + Breakpoints

--content-max-width
1200px -- work section
--content-narrow
760px -- body text wrap
--content-nav
960px -- nav + footer
--grid-gap
24px (--space-5)
--page-padding-x
2.5rem (40px)
--page-padding-x-mobile
16px (--space-4)

Breakpoints

Mobile
max-width: 680px
Tablet
681px -- 900px
Desktop
901px+
Components

Component Gallery

Live renders of the primitives used across the site.

Buttons
Primary (light surface) and dark CTA. radius-md, text-sm/text-xs.
UX Strategy Infrastructure Dovetail
Tags + Chips
Skill tags (border), case tags (accent fill), tech chips (mono, pill radius).
Research Design AI Engineering
Discipline Lenses
Colored dots with label. Used in cards, filters, and related-work modules.

"The platform changed how three teams think about customer data."

Callout
Accent left border, subtle fill. Used for quotes and key insights.
200+
people at conference launch
Stat
Large number + label. Used in stats strips and impact cards.
The problem
Section Eyebrow
Uppercase label with accent dash. Marks case study sections.