Design System

CanonicalCore systemOne-offAppears once / legacyExperimentSpecific to an experiment

Design System

CanonicalCore systemOne-offAppears once / legacyExperimentSpecific to an experiment

Color

Zinc

Canonical

The site's neutral backbone (Tailwind zinc-*). Muted zinc-400 (#a1a1aa) is the single most-used color.

zinc-900

#18181btext-zinc-900

★ Darkest canonical — headings, icons, --primary / --secondary-foreground / --accent-foreground / --sidebar-primary

zinc-800

#27272atext-zinc-800

Modal tab labels, testimonial body, film timeline active

zinc-700

#3f3f46text-zinc-700

Hero name, section headings, footer; CMS — Adobe highlightCard headlineColor

zinc-600

#52525btext-zinc-600

Active nav, body copy, metadata, film info, library spinner

zinc-500

#71717atext-zinc-500

Secondary body, tool lists, film loading hint, --muted-foreground; CMS — Adobe muted highlightColor

zinc-400

#a1a1aatext-zinc-400

Muted labels, captions, placeholders, footer tagline (most common); CMS — NASA/Adobe sectionTitle numberColor, Roblox muted highlightColor, stats title default

zinc-300

#d4d4d8text-zinc-300

Focus borders, quote underline, inactive badges, muted icons, scramble glyphs

zinc-200

#e4e4e7bg-zinc-200

Shimmer base, card borders, spinners, film idle marks, lore card image fallback

zinc-100

#f4f4f5bg-zinc-100

Pill borders, hover fills, dividers, modal hero bands

zinc-50

#fafafabg-zinc-50

Button bg, section bg

white

#ffffffbg-white

Page & card surfaces

Blue

Canonical

Blue-500 (#3b82f6) is the single accent for links, CTAs, active states, and text selection.

blue-600

#2563ebtext-blue-600

Ikigai link hover, CMS section title default

blue-500

#3b82f6bg-blue-500

Links, CTAs, active nav, selection

blue-400

#60a5fabg-blue-400

CTA hover fill / border, project links, CMS number default

blue-300

#93c5fdborder-blue-300

CTA hover border

blue-100

#dbeafe

Text selection background

blue-50

#eff6ffbg-blue-50

Polaroid project card bg

CMS & case study

Hexes from Sanity project content (published NASA, Adobe, Roblox, Apple) plus code defaults for CMS sections. Brand/project hues are one-offs; pink-50/500 stay canonical defaults. Surface neutrals already in Zinc are omitted.

pink-500Canonical

#ec4899text-pink-500

CMS default — TOC accent, section header text, stats, two-column highlight initial

pink-50Canonical

#fdf2f8bg-pink-50

CMS section header bar background default

blue-500Canonical

#3b82f6text-blue-500

CMS highlightColor default (mission / text / feature) — also under Blue

Adobe pinkOne-off

#F63768

Adobe — highlightColor, Express card headlineColor

Adobe pink deepOne-off

#DE3C82

Adobe — sectionTitle titleColor, highlightColor

Adobe pink softOne-off

#F777B0

Adobe — sectionTitle numberColor / titleColor

Adobe blushOne-off

#FF8EAB

Adobe Express — highlightCard highlightColor

Adobe orangeOne-off

#FD9A00

Adobe Express — highlightCard headlineColor

Adobe orange softOne-off

#FFB748

Adobe Express — highlightCard highlightColor

Adobe skyOne-off

#32A7F9

Adobe Express — highlightCard headlineColor

Adobe sky softOne-off

#88CEFF

Adobe Express — highlightCard highlightColor

Adobe cyanOne-off

#34A9F3

Adobe — two-column / feature highlightColor

NASA periwinkleOne-off

#828EE4

NASA — sectionTitle numberColor

NASA indigoOne-off

#5365DE

NASA — sectionTitle titleColor, highlightCard headlineColor

Roblox blueOne-off

#335FFF

Roblox — highlightColor

Roblox blue midOne-off

#7FA2FF

Roblox — sectionTitle numberColor

Roblox blue deepOne-off

#2E5EDE

Roblox — sectionTitle titleColor, highlightColor

Roblox teal softOne-off

#6FD8D2

Roblox — sectionTitle numberColor

Roblox tealOne-off

#38C4BC

Roblox — sectionTitle titleColor

Roblox purple softOne-off

#B378DB

Roblox — sectionTitle numberColor

Roblox purpleOne-off

#842CBF

Roblox — sectionTitle titleColor

Status

Emerald for availability, red for errors, green for the pulse ring.

emerald-500Canonical

#10b981

Availability dot, submit button

emerald-600One-off

#059669

Changelog link hover

emerald-50One-off

#ecfdf5

Contact badge expanded bg

green-200One-off

#bbf7d0

Availability pulse ring

red-500Canonical

#ef4444

Modal error state

red-400Canonical

#f87171

Form error text / border

Gradient stops

Multi-stop gradients for the animated header, gradient text, and social icon.

Header · lavenderCanonical

#D5E0FF

header-gradient stop

Header · blueCanonical

#E2EAFF

header-gradient stop

Header · violetCanonical

#F5E2FF

header-gradient stop

Header · pinkCanonical

#FDE9FA

header-gradient stop

Header · blushCanonical

#FFF5FC

header-gradient stop

Text · pinkOne-off

#FFD2F2

gradient-text-animated stop

Text · violetOne-off

#ECCBFF

gradient-text-animated stop

Text · skyOne-off

#AADBFD

gradient-text-animated stop

Social · magentaOne-off

#D79FE8

Animated social icon

Social · blueOne-off

#4DACEA

Animated social icon

Social · cyanOne-off

#13B2EB

Animated social icon

Typography

Families

The 'Michelle' variable font covers weights 300–900, roman + italic.

Michelle — The quick brown foxCanonical

'Michelle', sans-serifPrimary site font (Figtree variable, self-hosted, weights 300–900)

SF Pro — The quick brown foxExperiment

'SF Pro', -apple-system, sans-serifLibrary UI, add-book modal, 404, Polaroid

Courier New — The quick brown foxExperiment

'Courier New', monospacePolaroid date + caption imprint

SF Mono — The quick brown foxExperiment

ui-monospace, 'SF Mono', Menlo, monospaceEntire Screentime page (forced monospace)

Scale

Canonical

Named Tailwind steps, grouped by role. text-lg is the boundary — used for subtitles, so it reads as supporting body text.

Body

Michelle

text-xs

Footer clock, film loading, skip-to-designs link

12px

Michelle

text-sm

Captions, filters, errors, tooltips, contact badge

14px

Michelle

text-base

Default body (--font-size), metadata / tool grids

16px

Michelle

text-lg

Hero subtitle, section subtitles, nav tab labels

18px

Heading

Michelle

text-xl

Section / community titles

20px

Michelle

text-2xl

Quote cards, mission headers

24px

Michelle

text-3xl

Section headings, library title, footer CTA

30px

Michelle

text-4xl

Project hero, large display sizes (base size for Display name)

36px

michelle liu

Display name

Home hero name, Design System title

36px

Michelle

text-5xl

Stats, emoji blocks, 404 display code

48px

Experiments

Experiment

The core site uses only the standard scale above. These pixel-exact sizes remain solely inside experiments (device-accurate / Figma-exported chrome).

text-[17px] / [22px]

Polaroid / Screentime headings

17–22px

Figma sub-px

Polaroid share export sizes

10.959–16.949px

Weights

Canonical

Michelle

font-normal

Body default (--font-weight-normal), stats numerals

400

Michelle

font-medium

Headings, labels, nav (--font-weight-medium)

500

Michelle

font-semibold

CTAs, filters, ikigai link, footer email arrow reveal

600

Tracking

tracking-[0.005em]Canonical

Core micro-tracking (nav, cards, about)

0.005em

tracking-[0.01em]Canonical

Media cards, library filter, social link labels

0.01em

tracking-[0.0125em]Canonical

Display name (home hero name, Design System title)

0.0125em

tracking-[-0.31px]Canonical

Tool grid values

-0.31px

tracking-wideCanonical

Section subtitles, sidebar nav

0.025em

tracking-widerOne-off

Footer clock

0.05em

tracking-[0.15em]Experiment

Polaroid stamp text

0.15em

tracking-[0.75px]Experiment

Screentime GENERATE / UPLOAD CTAs

0.75px

Leading

leading-noneOne-off

404 display

1

leading-tightCanonical

Card descriptions, lore dates

1.25

leading-snugCanonical

Film captions, stats

1.375

leading-normalCanonical

Default headings / buttons

1.5

leading-relaxedCanonical

About prose, book review

1.625

leading-[1.4]Canonical

Project card text

1.4

leading-5 / 6 / 7Canonical

Metadata, subtitle, quotes

20 / 24 / 28px

Shadows

Canonical

shadow-soft

0 2px 8px rgba(0, 0, 0, 0.06)Hairline lift — locks, pills, segmented thumbs, image rest state

shadow-default

0px 4px 16px 0px rgba(212, 212, 216, 0.65)Zinc-tinted cards; pair with .shadow-default-hover on interactive cards

shadow-default-hover

0px 4px 16px 0px rgba(161, 161, 170, 0.4)Hover companion for .shadow-default cards

shadow-media

0 4px 12px rgba(0, 0, 0, 0.1)Photos, book covers, device frames, Polaroids, community mats

shadow-elevated

0 8px 24px rgba(0, 0, 0, 0.12)Modals, dropdowns, popovers, lightbox, deep floats

shadow-glass

0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(0, 0, 0, 0.02)Frosted nav pill + liquid-glass controls

Spacing

Gap scale

Canonical

gap-1

Nav tabs, tight rows

4px

gap-2

Inline label + value

8px

gap-3

Card internals

12px

gap-4

Grid gaps

16px

gap-6

Section internals

24px

gap-8

Between blocks

32px

gap-12

Project sections

48px

gap-16

Major sections

64px

gap-20

About page sections

80px

Layout widths

Page gutters and grid-based widths.

px-16 / max-md:px-6Canonical

★ Primary page gutter (desktop → mobile)

64px → 24px

px-8Canonical

Secondary mobile gutter

32px

px-[175px] / md:px-[8%]One-off

Wide project gallery gutters

175px / 8%

w-[calc(100%*10/12)]Canonical

Project modal width

10 of 12 cols

w-[calc(100%*6/12)]One-off

Info modal width

6 of 12 cols

w-[337px] / [402px]Experiment

Screentime phone widths

337 / 402px

Borders

Canonical

Width and color tokens used across cards, inputs, overlays, and chrome.

border

1px solidCards, images, modals (hairline)

border-2

2pxLoading spinners

border-zinc-50

#fafafaImage hairline overlays

border-zinc-100

#f4f4f5Cards, dropdowns, community frames, project card frames

border-white/50

rgba(255,255,255,0.5)Glass nav pill border

Inactive

border-transparent

transparentDefault / inactive pills & inputs

Focus states

Global :focus-visible and the interactive focus ring.

outline 2px #d4d4d8, offset 2px

ring-2 ring-zinc-400 offset-2

Border Radius

Squircle corner-shape

When a browser supports corner-shape: squircle, index.css applies it globally and compensates the border-radius ~1.7× so the perceived roundness stays constant (a full squircle visually shrinks corners). Circles and pills opt back into corner-shape: round. The samples below are squircled in supporting browsers.

Radius scale

rounded-smCanonical

2pxCommunity photos, book covers, film frames, Polaroid frame (mobile)

rounded-mdCanonical

6pxDropdown items, book covers, Polaroid frame & share export

rounded-lgCanonical

8px → 14px (tooltip) squircleTooltips, dropdowns, quote photos

rounded-xlCanonical

12px → 20px squircleGallery items, project cards

rounded-2xlCanonical

16px → 27px squircleLore cards, book modal, video

rounded-3xlCanonical

24px → 41px squircleInfo modal, media quote cards

rounded-[16px]Canonical

16px → 27px squircleVideo / image embeds

rounded-[24px]Canonical

24px → 41px squircleDevice mockup columns

rounded-[26px]Canonical

26px → 44px squircle★ Signature project & modal radius

rounded-[28px]One-off

28px → 48px squircleLarge surfaces

rounded-fullCanonical

fully roundPills, avatars, CTAs, nav (stays round)

Experiment radii

Experiment

Deliberately precise / odd radii from Figma exports and device mockups.

rounded-[7px]

Screentime daily-tab segment

7px

rounded-[11px] / [12px]

Screentime app icons (iOS-accurate)

11–12px

rounded-[100px]

Screentime home indicator, segmented control

100px

Motion

Animations

Live loops — the demos below repeat continuously so you can see each curve.

fadeInCanonical

200ms·ease-out

Lightbox overlays

scaleInCanonical

300ms·ease-out

Lightbox content

fadeSlideUpCanonical

300ms·ease-out

Lightbox captions

fadeSlideDownCanonical

300ms·ease-out

Close buttons

modalScaleInCanonical

280ms·cubic-bezier(0.16,1,0.3,1)

Centered modals

modalSlideInCanonical

250ms·cubic-bezier(0.16,1,0.3,1)

Dropdown modals

shelfItemFadeUpCanonical

400ms·ease-out

Shelf items

projectCardEnterCanonical

450ms·cubic-bezier(0.25,0.46,0.45,0.94)

Project cards, hero

scroll-revealCanonical

500ms·ease-out

On-scroll section reveal

shimmerCanonical

2s·ease-in-out ∞

Loading skeletons

pulse-ringCanonical

2.3s·ease-out ∞

Availability dot

gradient-bgCanonical

8s·ease ∞

Header gradient drift

blinkOne-off

1.2s·ease-in-out ∞

Footer clock colon

animate-spinCanonical

1s·linear ∞

Loading spinners

film-dot-pulseExperiment

1.4s·ease-in-out ∞

Film loading ellipsis

Duration scale

Canonical

duration-150

Micro-interactions (glass button)

150ms

duration-200

★ Default hover / color transitions

200ms

duration-300

Cards, modals, nav slide

300ms

duration-500

Experiment modal expand, book cover

500ms

Iconography

Size

Size ramp (iconSizes) — 12 meta · 16 inline · 20 toolbar/chevrons · 24 touch/Close · 32 hero. Chevrons sit one step below the paired Close.

Stroke icons

Stroke affordances — text-zinc-500 · strokeWidth 1.5 · vector-effect non-scaling-stroke. Prefer size={iconSize(...)} over CSS size-*.

ArrowUpRightArrowUpRight.tsxExternal / meta links, CTAs, email hover — stroke stays 1.5px at any size

ChevronChevron.tsxNav, filters, breadcrumbs, carousels — one path, size prop; direction via rotate (right/down/left/up)

Pluslibrary/icons.tsx · PlusIconAdd book / create actions

CloseClose.tsxModals, lightboxes, menus — one path, size prop; stroke stays 1.5px at any size

ExpandExpand.svg / ExperimentModalOpen experiment / project full page

Sendlibrary/icons.tsx · SendIconLibrary add-book submit

Smileylibrary/icons.tsx · SmileyIconLibrary success state

ArrowArrow.tsxLibrary date ranges, password submit — one path, size prop; direction via rotate (right/down/left/up)

LinkLinkIcon.tsxExternal experiment links on home

Eye / eye-offProjectModalShow / hide password

Checklucide-react (shadcn)Checkbox & menu selected states

InfoInfoButton / ExperimentModalProject & experiment info triggers

TouchTouchIcon.tsxInteractive / in-site experiment links

Filled icons

Solid glyphs — stay filled (no strokeWidth rules). Same zinc-500 specimen color.

Heart fillassets/HeartFill.svgAbout · communities subtitle accent

Academic capassets/academic-cap.svgAbout · education meta row

Map pinassets/map-pin.svgAbout · location meta row

★

Favorites starunicode ★Shelf section titles (★ Books) & book ratings

Lockassets/lock.svgPassword-gated project content

Sun / moonFooterLocal time day / night indicator

Play / pause / rewindFilmPageFilm page media controls

AppleHomePageClientHome hero · “Previously at” mark

InstagramFooter · svg-2tsxp86msmFooter social row, community cards

XFooter / View on X CTAFooter social, experiment CTAs

LinkedInFooter · svg-2tsxp86msmFooter social row

Lumaassets/LumaLogo.svgFooter social row

Components

Sidebar nav

Nav tabs

Polaroid • 2024

Default

Polaroid • Try It Out!

Hover

Project title pill

CanonicalOne-offExperiment

Tag badges

Filter pill

Filter dropdown

Always open

On hover

Tooltip

Availability badge

Social / meta link

Inputs

Pill field shared by password gates, library modal, and mobile Filter. Leading/trailing icons use FieldLeadingIcon / FieldTrailingIcon (size-5) with FieldInput h-5 / leading-5 / p-0.

Text

Search · leading icon

Password

Focused

Muted (library)

Disabled

Error

Buttons

Axes: variant · size · icon · glass · color. Specimens encode site class patterns (not a shared Button API).

Primary CTA · blue

Secondary CTA · zinc

Tertiary · quiet fill

Ghost · transparent + wash

Sizes · sm / md / lg

Icon + text · primary

Icon + text · secondary

Icon · primary

Icon · secondary

Icon · tertiary

Icon · ghost

Glass · carousel arrow (in use)

In use (not shown): Contact CTA · View on X · Skip link · Breadcrumb · Info · Modal close. Colors stay minimal (blue primary, zinc secondary); no destructive CTA on site.

Loaders

Spinner

Shimmer skeleton

Film loading dots

Cards

Card

Book cover

Quote card

Materials

Header gradient

Header gradientCanonical

Multi-stop lavender→white, animated 8s (.header-gradient)

Page headers

Grain

Grain overlayCanonical

PNG texture at opacity 0.8 over header gradient

Page header texture

Glass pill

Glass nav pillCanonical

bg-zinc-200/60 + backdrop-blur-md + shadow-glass

Active nav tab

Blur

Backdrop blurCanonical

backdrop-blur-sm / -md

Nav pill, project TOC overlay

Liquid

Liquid glassExperiment

backdrop-filter: blur(16px) saturate(180%) + shadow-glass

Art carousel arrows

ShimmerCanonical

Gradient #f4f4f5→#e4e4e7→#fafafa, 2s ease-in-out loop

Image / skeleton loading

Accent text

Gradient textOne-off

violet/pink/blue/zinc stops, animated 6s

Intro accent text

Selected text

Text selectionCanonical

color #3b82f6 on #dbeafe background

Global ::selection

Green pulse ringCanonical

#bbf7d0 ring, pulse-ring 2.3s infinite

Availability dot

Quote line

Quote underlineCanonical

#d4d4d8 2px line, 0.6s reveal

Media quote cards

Edge fade

Edge fadesCanonical

Multi-stop white/#fafafa gradients (up to 11 stops)

Film & Art carousels, top scroll fade

Modal

Modal scrimCanonical

bg-zinc-900/20

All modal overlays

Blurred→Clear

Blur-reveal textExperiment

filter blur(4px)→blur(0), 0.26s

Film captions focus-pull

Dust

Canvas particlesExperiment

Sampled-RGB dust, gravity 0.0012, drag 0.9986

Fading shatter effect

Hover scaleCanonical

scale-[0.99] cards, scale-[1.005] link cards

Interactive lift

Design System

Design System

Design System

Color

Zinc

Blue

CMS & case study

Status

Gradient stops

Typography

Families

Scale

Experiments

Weights

Tracking

Leading

Shadows

Spacing

Gap scale

Layout widths

Borders

Borders

Focus states

Border Radius

Squircle corner-shape

Radius scale

Experiment radii

Motion

Animations

Duration scale

Iconography

Size

Stroke icons

Filled icons

Social

Components

Navigation & pills

Inputs

Buttons

Loaders

Cards

Materials

Color

Zinc

Blue

CMS & case study

Status

Gradient stops

Typography

Families

Scale

Experiments

Weights

Tracking

Leading

Shadows

Spacing

Gap scale

Layout widths

Borders

Borders

Focus states

Border Radius

Squircle corner-shape

Radius scale

Experiment radii

Motion

Animations

Duration scale

Iconography

Size

Stroke icons

Filled icons

Social

Components

Navigation & pills

Inputs

Buttons

Loaders

Cards