Design System

The system behind this site

This portfolio runs on a small, deliberate design system, and a token-based color palette, a three-role type scale, and a set of reusable React components. I built it the same way I'd build one for a product team: consistent, documented, and easy to extend.

Color tokens

A warm cream base instead of the usual dark developer palette, paired with a single purple accent for hierarchy and focus.

bg-primary

#faf9f6

Page background

bg-secondary

#f5f3ef

Cards, panels

bg-tertiary

#eeeae4

Code blocks, insets

text-primary

#1a1a1a

Headings, body

text-secondary

#555555

Supporting text

text-tertiary

#999999

Captions, labels

accent

#745dac

Links, highlights

accent-dark

#513d82

Hover, emphasis

Typography

Three typefaces, three jobs: Syne for display, Outfit for body, JetBrains Mono for code.

Display / H1

Zoe Meng

Heading / H2

Section heading

Body

The quick brown fox jumps over the lazy dog.

Small / caption

Image caption or supporting label

Mono

const tokens = designSystem;

Motion

Animation is restrained on purpose. Content fades and rises a few pixels on scroll, enough to guide the eye, never enough to distract. Every animation honors prefers-reduced-motion, so the site is calm for anyone who needs it to be.

The principle: motion should explain, not perform. If a transition doesn't help someone understand what changed, it doesn't ship.

Component library

Reusable pieces that keep every page visually consistent.

FadeInScroll-triggered entrance animation, respects reduced-motion

ProjectCardProject preview with image, metrics, tags, and kind badge

ProjectImageCaptioned image with lightbox support

ProjectVideoCaptioned video player with poster frame

LightboxImageClick-to-expand image overlay with keyboard dismiss

MediaGridMulti-image grid with shared captions

B2BArchitectureDiagramCustom SVG system-architecture diagram

SectionHeadingAnchored section titles with scroll-margin

BackToHomePersistent return-to-home navigation

ScrollToTopScroll-to-top button that appears on scroll

Accessibility

I treat this site as my first portfolio piece, so I test it the way I'd test a product. Here's where it stands.

All text meets WCAG AA contrast against the cream background. An audit caught the tertiary gray falling short at 2.7:1, so I darkened the token to clear the 4.5:1 threshold, the kind of fix that only surfaces when you actually measure.

Every interactive element is reachable and operable by keyboard: navigation, links, and project cards all take focus in order, with a visible focus ring, and open on Enter. Built on semantic HTML (landmarks, ordered headings, real buttons and links) rather than click handlers on divs.

♺

Motion respects prefers-reduced-motion, and every image carries descriptive alt text. Lighthouse accessibility scores sit in the mid-90s across pages.