FOUNDATION / WEN CHENG
Design System
A compact foundation for color, typography, surfaces, and interface details — built from the tokens you provided and ready to extend as your product language grows.
SYSTEM VERSION
v1 / Foundation
10 color tokens · 6 text styles · 3 font families
10 colors
Figtree / DM Mono / Instrument Serif
52px → 38px hero scale
COLOR TOKENS
A warm neutral foundation with one decisive blue accent.
Background
#FAF9F7
Ink
#1D1D1F
Muted
#666B6C
Line
#E3DFD8
Surface
#EFEDE9
White Surface
#FFFFFF
Accent Blue
#015AE2
Soft Green
#DFE8DF
Soft Blue
#E1EBF6
Soft Rose
#F0DFD7
DARK VARIANT
Dark values keep the same hierarchy, with Accent Blue unchanged.
--bg #161617 · --ink #F5F3EF · --gray #8E9294 · --surface #2A2A2E
SURFACE SAMPLE
Accent stays
Light / Dark token map
THEME VALUES
TOKEN
LIGHT
DARK
Background
#FAF9F7
#161617
Ink
#1D1D1F
#F5F3EF
Muted
#666B6C
#8E9294
Surface
#EFEDE9
#2A2A2E
Accent Blue
#015AE2
#015AE2
TYPOGRAPHY
A clear sans-led scale with mono precision and a serif accent.
SYSTEM TOKEN
Body copy should feel calm, readable, and close to the product voice.
Medium title for cards and compact headings
Section title for page structure
Hero title
Instrument Serif Italic
USAGE
Specimens for buttons, cards, notes, and editorial accents.
PRIMARY ACTION
Continue
Quiet surface, clear hierarchy
Use White Surface for elevated cards, Line for restraint, and soft tokens when a section needs more temperature.
SOFT SUPPORT
Soft Green can hold calm product notes without competing with Accent Blue.
Elegant, but never ornamental.
SERIF ACCENT SAMPLE