▶YIWEN GAO 2026

Hi, I'm Yiwen. I'm an interaction designer who enjoys untangling complex problems and turning them into clear, structured experiences. This is the design system for me — the colors, type, spacing, and language I keep returning to.

A living document. Reverse-engineered from my own work so the next project starts from a known place instead of a blank canvas.

Discipline

Interaction Design

North Star

Clarity · Exploration · Ownership

Primary typefaces

Cardo · Inter · DM Mono

Base palette

Sage · Mint · Cream · Sand

01 — Getting Started

Principles

Three north-star values that frame every decision — in design, in feedback, in how I show up to a problem.

North Star

Clarity

Untangle complexity and make systems understandable. Decoration is the last move, not the first.

Exploration

Try the obvious answer, then keep going. Play and prototyping are how the better idea shows up.

Ownership

Carry ideas from concept to outcome. Finish what you start.

Core Values

CURIOSITY OVER ASSUMPTIONS

Start by listening, not deciding.

IMPACT, NOT JUST AESTHETICS

Clarity matters more than decoration.

FEEDBACK IS PART OF THE PROCESS

Design improves through collaboration.

PLAY FUELS PROGRESS

Exploration leads to better ideas.

02 — Foundations

Color

A palette of greens and earths. Sage, mint, cream, sand — warm enough to feel calm, fresh enough to feel alive. Saturation is reserved; contrast comes from scale and type, not hue.

Primary

Sage Olive

--color-sage

#9A9D88

Hero surfaces, sidebar, closing sections.

Mint Celadon

--color-mint

#C8F0C5

Text on sage, callout backgrounds, badges.

Cream

--color-cream

#F0F3E5

Default background. All reading happens here.

Warm Sand

--color-sand

#DDD4BD

Image mats, case-study backdrops, demo surfaces.

Soft Sage

--color-soft-sage

#B8C7A8

Ghost display type — large text at low contrast.

Deep Brown

--color-brown

#3D2E1F

Logo marks, scale dots, intentional dark weight.

Text

Ink

--color-ink

#3A3A30

Body text on cream.

Muted

--color-muted

#6F6F5C

Secondary text, captions, kickers.

Rule / Line

--color-line

rgba(58 58 48 / 14%)

Dividers, borders, subtle separators.

Usage rules

Never pure black on pure white. The eye should never have to brace. Every text/background pair in this system is slightly tinted.

Mint is an accent, not a base. Use it on sage surfaces or as a subtle highlight on cream. Avoid large mint backgrounds in body content.

03 — Foundations

Typography

Cardo for display and editorial moments; Inter for interface text that needs to disappear. The serif carries warmth and weight — the sans does the working.

Typefaces

Display & Editorial

Cardo

High-contrast classical serif. Used at scale for section titles, hero text, and pull quotes. Italics for ideas-in-motion.

Aa Bb Cc

Regular 400

Bold 700

Italic 400

Interface & Body

Inter

Humanist geometric sans. Captions, UI labels, body copy — anything that must be read quickly and then forgotten.

Aa Bb Cc

Light 300

Regular 400

Medium 500

Semibold 600

Bold 700

Code & Tokens

DM Mono

Used only for hex values, CSS token names, code snippets, and any content that needs to read as a machine-readable reference.

Aa Bb Cc

Regular 400
Medium 500

Type Scale

StepSize / LeadingFamilyPreview

hero 96px / 0.92 Cardo 700 CLARITY

display 64px / 1.0 Cardo 700 North Star

h1 40px / 1.1 Cardo 400 A question worth asking.

h2 26px / 1.2 Inter 600 Section heading

h3 16px / 1.3 Inter 600 ↑track SUBSECTION

body 16px / 1.6 Inter 400 The grain of reading text — calm, even, never demanding.

small 13px / 1.4 Inter 400–500 Caption and supporting detail

kicker 12px / 1.0 Inter 600 ↑track SECTION KICKER

mono 13px / 1.5 DM Mono 400 --color-sage #9A9D88

Usage rules

Cardo Italic is for north-star words and "what if…" moments. Italics signal an idea in motion.
Cardo Roman, all-caps for section titles — often cropped — is the signature move.
Inter 600, tracked loose for kickers and caps labels. Never stretch Inter — tracking is enough.
DM Mono only for hex values, CSS tokens, and code. Never use it for body copy.
No centered body text. The eye needs a left anchor after the first line.

04 — Foundations

Spacing

A 4px base, but I think in 8s. Whitespace isn't leftover — it's a deliberate component of every composition.

Scale

TokenValueNameVisual

--space-14pxHairline

--space-28pxTight

--space-316pxDefault

--space-424pxComfortable

--space-540pxSectional

--space-680pxBreathing room

--space-7120pxBetween worlds

05 — Foundations

Layout

Generous whitespace. One idea per section. Grids as structure, not decoration.

Principles

01

Left-aligned, never centered for reading.

Centered text loses rhythm by line three. The eye needs an anchor.

02

One idea per section.

If a canvas is doing two things it's two canvases pretending to be one.

03

Whitespace as a component.

Budget margins deliberately. They're part of the composition.

04

Break the grid for emphasis.

The cropped oversized header only works because everything else is well-behaved.

Breakpoints

NameWidthBehavior

mobile< 640pxSingle column, hidden sidebars

tablet640–900pxSingle column, hamburger nav

desktop> 900pxSidebar + content + TOC

06 — Foundations

Design Tokens

All decisions exposed as CSS custom properties. Copy any token into your project.

Color tokens

TokenValueRole

--color-sage#9A9D88Primary surface

--color-mint#C8F0C5Accent / on-sage text

--color-cream#F0F3E5Background

--color-cream-warm#F5F6EBElevated surface

--color-sand#DDD4BDSecondary surface

--color-soft-sage#B8C7A8Ghost display type

--color-brown#3D2E1FLogo / strong accent

--color-ink#3A3A30Body text

--color-muted#6F6F5CSecondary text

--color-linergba(58 58 48 / 14%)Borders / dividers

Typography tokens

TokenValueUse

--font-serif'Cardo', Georgia, serifDisplay & editorial

--font-sans'Inter', sans-serifInterface & body

--font-mono'DM Mono', monospaceCode & tokens

Spacing tokens

TokenValueName

--space-14pxHairline

--space-28pxTight

--space-316pxDefault

--space-424pxComfortable

--space-540pxSectional

--space-680pxBreathing room

--space-7120pxBetween worlds

Border radius tokens

TokenValueUse

--radius-sm4pxCards, code blocks

--radius-md8pxModals, panels

--radius-pill999pxButtons, badges

07 — Components

Button

Trigger actions. Never more than one primary button per view — it's a signal, not wallpaper.

By color

By shape

By size

Animated states

Hover each button to see the motion. Animations are short, easeable, and never bouncy — they should feel like the page noticing you, not performing for you.

Props

ModifierClassEffect

Color: sage.btn-primaryThe one important action per view

Color: mint.btn-mintSoft positive cue, badges

Color: sand.btn-sandWarm neutral, on sage surfaces

Color: brown.btn-brownMaximum weight — use sparingly

Color: ghost.btn-ghostSecondary actions alongside primary

Color: outline.btn-outlineQuiet secondary, sage border only

Shape: pill.btn-pillDefault rounded form

Shape: rounded.btn-roundedSoft corners, 8px radius

Shape: square.btn-squareSharp edges, structural feel

Shape: circle.btn-circleIcon-only actions

Size: small.btn-smDense UI, inline actions

Size: large.btn-lgHero CTAs, marketing

Animation: lift.btn-liftTranslate up on hover

Animation: arrow.btn-arrowArrow slides forward

Animation: shimmer.btn-shimmerLight sweep across surface

Animation: fill.btn-fillBackground fills from left

Animation: press.btn-pressSoft 3D depress

Animation: underline.btn-underlineUnderline grows from center

Code

<!-- color + shape + animation can combine -->
<button class="btn btn-primary btn-lift" type="button">Lift on hover</button>
<button class="btn btn-outline btn-arrow" type="button">
  Slide arrow <span class="btn-arrow-icon">→</span>
</button>
<button class="btn btn-primary btn-circle" type="button" aria-label="Add">
  <svg>…</svg>
</button>

Accessibility

Always use type="button" on <button> to prevent accidental form submission.
Icon-only buttons need a visible aria-label. Never rely on the icon alone.
Loading state needs aria-busy="true" and visible feedback.
Respect prefers-reduced-motion — all animation hooks disable when set.

08 — Components

Pull Quote

Elevate a single voice. Quotes get the most whitespace on the page — they're the point, not the texture.

Example

Tour is not only monologue but conversation. I'd adjust content based on their reactions. — Practitioner interview, Axiz research

Code

<blockquote class="pull-quote">
  <span class="pq-mark" aria-hidden="true">"</span>
  The quote text goes here.
  <cite>— Source name</cite>
</blockquote>

Usage rules

One pull quote per section maximum. They're interruptions — good ones, but interruptions.
The <cite> element is required. A quote without attribution is just assertion.
Never use for self-authored text. Pull quotes are reserved for other voices.

09 — Components

Value Card

The vertical-bar + label pattern for surfacing values, principles, or structured lists. The bar is the only ornament — that's the deal.

Example

CLARITY MATTERS

Decoration is the last move, not the first.

PLAY FUELS PROGRESS

Exploration leads to better ideas.

Code

<div class="value-card">
  <div class="vc-title">CLARITY MATTERS</div>
  <p>Decoration is the last move, not the first.</p>
</div>

Usage rules

Works best in even grids: 2×2 or 3×2. Odd numbers feel incomplete.
Title should be 3–5 words in all-caps. Anything longer loses the punch.
One sentence of supporting copy. Not a paragraph.

10 — Signature Patterns

Cropped Header

The section title scales so large it spills off the top of the canvas. The page admits the title doesn't fit — which is the joke and the welcome.

Demo

Usage rules

One per artifact — never two cropped headers on the same canvas or page.
Always single-word or very-short all-caps. Long phrases lose the effect.
Color should match or be slightly lighter than the surface text — never high-contrast.

11 — Signature Patterns

Triangle Byline

A small filled triangle, a single space, my name in tracked caps. Used once per artifact — it's a signature, not a logo.

Demo

▶ YIWEN GAO

Code

<div class="byline">
  <span class="tri" aria-hidden="true">▶</span> YIWEN GAO
</div>

12 — Signature Patterns

What If Prompt

A small italic prelude, then a single bold question. Every research deck and pitch I've made has one. It frames the work before any answer exists.

Demo

What if…

We could experience history through time?

Code

<div class="what-if">
  <div class="wi-pre">What if…</div>
  <div class="wi-q">We could experience history through time?</div>
</div>

13 — Visual

Visual Components

A small library of abstract geometric shapes used as decoration, dividers, and visual punctuation. Calm forms, single-color, never competing with the type.

Primary shapes

Disc

shape/disc

A solid presence. Anchors a corner or marks a section start.

Ring

shape/ring

An open container. Suggests waiting, listening, possibility.

Wedge

shape/wedge

Direction without arrowheads. Cousin of the byline triangle.

Slab

shape/slab

Structural neutral. Used as image mat or section backdrop.

Diamond

shape/diamond

The slab on its corner. Adds tension without violence.

Arch

shape/arch

Curved authority. Holds something inside it visually.

Composite & organic

Eclipse

shape/eclipse

Two discs overlapping. Conversation between sage and mint.

Pebble

shape/pebble

An organic blob. Softens a geometric layout when needed.

Dot Grid

shape/dot-grid

Texture without weight. Backgrounds and scale references.

Bars

shape/bars

Rhythm, comparison, progress. A chart that's really a feeling.

Wave

shape/wave

The only place I let curves repeat. Marks endings and section breaks.

Cross

shape/cross

Coordinates, intersections, alignment marks. Quiet structure.

In motion

Decorative shapes can move — slowly. Animation is a whisper, not a wave. Hover the cards below.

Slow Rotate

animation/rotate

40-second full rotation. Persistent but never urgent.

Breathing

animation/breathe

Soft scale up and down. Suggests presence, attention.

Float

animation/float

Vertical drift, 6 seconds. Like a slow tide.

Usage rules

Shapes are decoration, not content. They should never carry meaning that the text doesn't.
One shape style per composition. Mixing diamonds and pebbles in the same view feels noisy.
Always single-color. Gradients break the system's flat sensibility.
Animation respects prefers-reduced-motion and pauses entirely.

14 — Meta

Colophon

About the document itself — fonts, hosting, lineage.

Set in Cardo and Inter. Hand-coded HTML and CSS — no framework, no build step. Deployed to Cloudflare Pages. Reverse-engineered from my Axiz case-study deck, 2026.

This document changes. The point isn't the version — it's the practice of naming what you keep doing on purpose.

Back to top ↑

▶ YIWEN GAO · 2026