Design system

Built with Astro, Tailwind, and React, documented in Google's DESIGN.md format, and adapted to light and dark mode.

Switch the colour mode to see every token change

Colors

Named by role, each with a dark-mode value. Blue marks focus, selection, and the one primary button.

Text

  • Primary text

    --color-ink

  • Secondary text

    --color-muted

  • Labels · disabled

    --color-subtle

Surfaces

  • Page background

    --color-page

  • Cards · menus

    --color-canvas

  • Panels

    --color-surface

  • Floating bars

    --color-glass

Controls

  • Control fill

    --color-fill

  • Hover · pressed

    --color-hover

  • Hover in menus

    --color-hover-subtle

Lines

  • Dividers

    --color-line

  • Outlines

    --color-border

  • Strong outlines

    --color-border-strong

  • Hairline (0.5px)

    --color-hairline

Accent and errors

  • Focus · selection · primary button

    --color-accent

  • Text on accent

    --color-on-accent

  • Selected fill

    --color-accent-soft

  • Errors

    --color-danger

  • Error background

    --color-danger-soft

Media

  • Overlay backdrop (page colour, 88%)

    --color-overlay

  • Behind embedded video

    --color-media-backdrop

Typography

One typeface, TeX Gyre Heros, in ten type tokens. Components set type with these, never with loose sizes.

Display

--type-display · Bold · 2.5–3.625rem · the largest headline

Hi I'm Jane Hou!

Intro

--type-intro · Bold · 1.75–2.5rem · intro line, Brand project titles

I care about people and want to design around them.

Heading

--type-heading · Bold · 1.625–2.375rem · page titles and statements

A design community shouldn’t graduate without a shared experience.

Subheading

--type-subheading · Bold · 1–1.25rem · section and project titles

Intuit Design System

Quote

--type-quote · Regular · 1–1.25rem / 1.35 · pull quotes

“It finally felt like one system.”

Body

--type-body · Regular · 14px / 1.65 · body, metadata, nav

I love when design can bridge the intersection between solving technical and people problems.

Label

--type-label · Medium · 14px / 1.65 · labels above values, the current nav link

Page widths

Compact

--type-compact · Regular · 14px / 1.35 · controls, captions, dense lists

Leave feedback

Tag

--type-tag · Regular · 14px / 1 · tags

Accessibility

Count

--type-count · Medium · 12px / 1 · numbers beside a label

12

Layout

Spacing

Padding, margins, and gaps use this 4px scale, matching Tailwind's spacing classes.

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-10 40px
  • --space-12 48px
  • --space-16 64px
  • --space-20 80px
  • --space-24 96px

Page widths

Breakpoints

Case study

Desktop

Mobile

Comment mode

Desktop

Mobile

Elevation

Mostly flat: depth comes from tone, hairline borders, and two shadow levels.

Borders

  • Hairline

    0.5px · nav bar, comment cards

  • Line

    1px · dividers

  • Border

    1px · inputs, cards

  • Border strong

    1px · higher contrast

Shadows

  • Raised

    Cards that lift slightly

  • Floating

    Menus and popovers

Shapes

One corner radius for everything; a shell adds its padding to it. The pill is only for segmented toggles.

  • None

    0 · full-bleed frames

  • Corner

    0.5rem · everything

  • Menu

    12.5px · menus

  • Panel

    16.5px · nav bar, footer

  • Pill

    Segmented toggles only

Components

Switch to Inspect and hover a component to see the tokens it's built from.

Buttons

Leave feedback is the site's one call to action: the accent fill with on-accent text.

Default

Hover

Active

Focus

Disabled

For lower-emphasis actions like Back: secondary over content, tertiary in the page flow.

Secondary

Default

Hover

Active

Focus

Tertiary

Default

Hover

Active

Focus

Icon control

For compact actions where the icon speaks for itself. Dismiss closes, primary is the main action, destructive deletes.

Standard

Default

Hover

Active

Focus

Selected

Dismiss

Default

Hover

Active

Focus

Primary

Default

Hover

Active

Focus

Disabled

Destructive

Default

Hover

Active

Focus

Segmented toggle

Switches between two views of the same thing, like light and dark. Use glass over media.

Default

First selected

Hover

Second selected

Focus

Glass, over media

Tag

A value that can't be changed, like a comment's category. Count shows a number beside a label.

Tag

Accessibility

Count

6

Media overlay and carousel

Opens an image larger, growing from its spot on the page over a see-through backdrop. Arrows and slide dots sit below the image.

Example slide

A caption describing the work, in secondary text.

Section nav

The sidebar list of links to a page's sections. A dot marks the section you're reading.

Default

Colors

Hover

Colors

Focus

Colors

Current

Colors

Comments

A comment's category, the element it's about, and the text. Your own comments can be recategorised, edited, and deleted; everyone else's are read-only.

Your comment

Default

Hero image

The contrast on this caption is a little low.

Hover

Hero image

The contrast on this caption is a little low.

Text hover

Hero image

The contrast on this caption is a little low.

Active

Hero image

The contrast on this caption is a little low.

Editing

Hero image

Error

Hero image

Could not update comment.

Read-only

Default

Visual design

Hero image

The contrast on this caption is a little low.

Hover

Visual design

Hero image

The contrast on this caption is a little low.

Active

Visual design

Hero image

The contrast on this caption is a little low.

Admin review

Visual design

Hero image

The contrast on this caption is a little low.

Oct 12, 2026, 9:30 a.m. · Desktop · macOS · 1440px

Motion

Quick and physical: things press in and slide.

Press
Controls shrink slightly when pressed.
Hover
Colours change over 0.15s.
Menus
Fade in, with a highlight that slides between options.
Reveal
Sections rise and fade in as they scroll into view.
Nav bar
Links fold away as you scroll down, narrowing the bar, and return as you scroll up.
Media overlay
The image grows from its spot on the page to the centre.
Reduced motion
Animations become instant changes.