How AI changes the roles of both the designer and the developer — not whether it will, but how fast, and whether either discipline is ready for it. And the question nobody is answering well yet: how do you actually measure whether an AI implementation is working?

Updated periodically. Last updated March 2026.

Design System

Stephen Chiang

Personal site — design tokens and principles

Color Palette

Background

#131313 · --color-bg

Surface

#1a1a1a · --color-surface

Card

#1a1a1a · --color-card

Accent

#FFB77D · --color-accent

Accent Deep

#D97707 · --color-accent-deep

Text Primary

#E5E2E1 · --color-text-primary

Text Muted

#737371 · --color-text-muted

Border

#222220 · --color-border

Invert Background

#D97707 · --color-invert-bg

Typography Scale

Engineering

Display · Space Grotesk · 64px / 700

Engineering

Display Light · Space Grotesk · 48px / 300

Section Title

H1 · Space Grotesk · 40px / 700

Article Heading

H2 · Space Grotesk · 32px / 700

Body copy at reading size, comfortable for long-form

Body Large · Manrope · 18px / 400

Standard body text and UI copy

Body · Manrope · 16px / 400

UPPERCASE LABEL · LETTER SPACED

Label · Manrope · 14px / 500

ENTERPRISE · DATA STRATEGY

Tag · Manrope · 12px / 500

Spacing System

Base unit8px

Card padding40px

Row padding32px

Side margins80px desktop / 24px mobile

Section padding120px desktop / 72px mobile

Container max1280px

Motion Principles

Load sequence

Staggered fade + slide up, 0.6s ease-out

Scroll reveals

translateY(30px) → 0, opacity 0 → 1

Hover transitions

0.2s ease — color, background

Drawer open

0.45s cubic-bezier(0.16,1,0.3,1)

Cursor follower

8px dot, 60ms lag, expands on hover

Portrait parallax

0.6x scroll rate via GSAP ScrollTrigger

About strip reveal

Color wipe left → right, 0.6s

React Router v7 · Tailwind v4 · GSAP · Space Grotesk · Manrope · Vercel