01 · Designed & built
Foxed
One line on the problem, not a description of the screens.
- Product design
- Design system
Living style guide
Warm Studio
Every piece below is the real component this site is built from, reading the same tokens as the brand guide.
01 · Color
Color tokens
Cream
--color-cream · #FBF6EEPage background.
Sand
--color-sand · #F3E6D6Cards, bands, tags.
Ink
--color-ink · #2B2320Body text and headings. About 14:1 on cream.
Ink soft
--color-ink-soft · #5E524CSecondary text. About 7:1 on cream.
Accent
--color-accent · #B04A30Buttons and links on cream. About 5:1.
Accent deep
--color-accent-deep · #8F3A24Accent text on sand, hover, focus ring.
Sage
--color-sage · #6F8F72Decoration only, never text.
Line
--color-line · #E3D5C3Borders and dividers only.
02 · Typography
Type
H1 · Young Serif 400 · --text-h1
I design systems that make software feel human
H2 · --text-h2
Selected work
H3 · --text-h3
Key decisions
Lead · DM Sans 400 · --text-lead
A short intro under a heading, one or two sentences.
Body · DM Sans 400 · --text-body
Most of the site is body text. Keep paragraphs to three or four lines, and keep the reading column narrow so it's easy to skim.
Label · JetBrains Mono 500 · .label
Case study 01 · --color-accent
03 · Spacing
An 8px grid
--space-1 · 4px
--space-2 · 8px
--space-3 · 16px
--space-4 · 24px
--space-5 · 32px
--space-6 · 48px
--space-7 · 64px
--space-8 · 96px
04 · Components
Buttons, tags, cards
Button · primary, secondary, link
Tags
- Design system
- React Native
- Self-initiated
Card
Plain card
A sand surface with a 16px radius.
Project card (whole card is one link)
Decision card
- Decision
- What I chose
- Options
- What I weighed
- Why
- The reason, in one sentence
Case study meta
05 · Layout
Header and footer
The header and footer on this page are the live ones. Resize the window below 720px to see the mobile menu, and tab through to check the focus ring.