Michelle Liu
Design System
CanonicalCore systemOne-offAppears once / legacyExperimentSpecific to an experiment
Let's work together!
Built with Next.js & rocky's matcha lattes. ☕︎
CHANGELOG: ...
Let's work together!
Built with Next.js & rocky's matcha lattes. ☕︎
CHANGELOG: ...
The site's neutral backbone (Tailwind zinc-*). Muted zinc-400 (#a1a1aa) is the single most-used color.
#18181btext-zinc-900Project titles, emphasis body
#27272atext-zinc-800Modal tab labels, testimonial body, film timeline active
#3f3f46text-zinc-700Hero name, section headings, footer
#52525btext-zinc-600Active nav, body copy, metadata, film info, library spinner
#71717atext-zinc-500Secondary body, tool lists, film loading hint
#a1a1aatext-zinc-400Muted labels, captions, placeholders (most common)
#d4d4d8text-zinc-300Focus borders, quote underline, inactive badges
#e4e4e7bg-zinc-200Shimmer base, card borders, spinners, film idle marks
#f4f4f5bg-zinc-100Pill borders, hover fills, dividers, modal hero bands
#fafafabg-zinc-50Button bg, section bg
#ffffffbg-whitePage & card surfaces
#000000text-blackPrimary headings, overlays base
Blue-500 (#3b82f6) is the single accent for links, CTAs, active states, and text selection.
#2563ebtext-blue-600Ikigai link hover
#3b82f6bg-blue-500Links, CTAs, active nav, selection
#60a5fabg-blue-400CTA hover fill / border, project links
#93c5fdborder-blue-300CTA hover border
#dbeafeText selection background
Emerald for availability, red for errors, green for the pulse ring.
#10b981Availability dot, submit button
#059669Changelog link hover
#ecfdf5Contact badge expanded bg
#bbf7d0Availability pulse ring
#ef4444Modal error state
#f87171Form error text / border
One-off colors, mostly defaults for CMS-editable fields and brand gradients.
#b5bcc5Footer tagline text
#c4c9d0Footer social icons, community links
#c4c4c4TextScramble interim characters
#7fa2ffStat card number default
#2e5edeHighlight card title default
#fdf2f8Section header default (pink-50)
#ec4899Stat / header accent (pink-500)
#f0f9ffPolaroid project card bg
#eaeaeaLegacy device-mockup shadow color (snapped to shadow-soft)
#e3dff4Lore card image fallback
#030213shadcn token in globals.css only
#717182shadcn token in globals.css
Multi-stop gradients for the animated header, gradient text, and social icon.
#D5E0FFheader-gradient stop
#E2EAFFheader-gradient stop
#F5E2FFheader-gradient stop
#FDE9FAheader-gradient stop
#FFF5FCheader-gradient stop
#FFD2F2gradient-text-animated stop
#ECCBFFgradient-text-animated stop
#AADBFDgradient-text-animated stop
#D79FE8Animated social icon
#4DACEAAnimated social icon
#13B2EBAnimated social icon
The 'Michelle' variable font covers weights 300–900, roman + italic.
'Michelle', sans-serifPrimary site font (Figtree variable, self-hosted, weights 300–900)'SF Pro', -apple-system, sans-serifLibrary UI, add-book modal, 404, Polaroid'Courier New', monospacePolaroid date + caption imprintui-monospace, 'SF Mono', Menlo, monospaceEntire Screentime page (forced monospace)Named Tailwind steps, grouped by role. text-lg is the boundary — used for subtitles, so it reads as supporting body text.
Body
text-xsCanonicalFooter clock, film loading, skip-to-designs link
12pxtext-smCanonicalCaptions, filters, errors, tooltips, contact badge
14pxtext-baseCanonicalDefault body (--font-size), metadata / tool grids
16pxtext-lgCanonicalHero subtitle, section subtitles, nav tab labels
18pxHeading
text-xlCanonicalSection / community titles
20pxtext-2xlCanonicalQuote cards, mission headers
24pxtext-3xlCanonicalSection headings, library title, footer CTA
30pxtext-4xlCanonicalProject hero, large display sizes (base size for Display name)
36pxDisplay nameCanonicalHome hero name, Design System title
36pxtext-5xlCanonicalStats, emoji blocks, 404 display code
48pxThe core site uses only the standard scale above. These pixel-exact sizes remain solely inside experiments (device-accurate / Figma-exported chrome).
text-[17px] / [22px]ExperimentPolaroid / Screentime headings
17–22pxFigma sub-pxExperimentPolaroid share export sizes
10.959–16.949pxfont-normalCanonicalBody default (--font-weight-normal), stats numerals
400font-mediumCanonicalHeadings, labels, nav (--font-weight-medium)
500font-semiboldCanonicalCTAs, filters, ikigai link, footer email arrow reveal
600tracking-[0.005em]CanonicalCore micro-tracking (nav, cards, about)
0.005emtracking-[0.01em]CanonicalMedia cards, library filter, social link labels
0.01emtracking-[0.0125em]CanonicalDisplay name (home hero name, Design System title)
0.0125emtracking-[-0.31px]CanonicalTool grid values
-0.31pxtracking-wideCanonicalSection subtitles, sidebar nav
0.025emtracking-widerOne-offFooter clock
0.05emtracking-[0.15em]ExperimentPolaroid stamp text
0.15emtracking-[0.75px]ExperimentScreentime GENERATE / UPLOAD CTAs
0.75pxleading-noneOne-off404 display
1leading-tightCanonicalCard descriptions, lore dates
1.25leading-snugCanonicalFilm captions, stats
1.375leading-normalCanonicalDefault headings / buttons
1.5leading-relaxedCanonicalAbout prose, book review
1.625leading-[1.4]CanonicalProject card text
1.4leading-5 / 6 / 7CanonicalMetadata, subtitle, quotes
20 / 24 / 28px0 2px 8px rgba(0, 0, 0, 0.06)Hairline lift — locks, pills, segmented thumbs, image rest state0px 4px 16px 0px rgba(212, 212, 216, 0.65)Zinc-tinted cards; pair with .shadow-default-hover on interactive cards0px 4px 16px 0px rgba(161, 161, 170, 0.4)Hover companion for .shadow-default cards0 4px 12px rgba(0, 0, 0, 0.1)Photos, book covers, device frames, Polaroids, community mats0 8px 24px rgba(0, 0, 0, 0.12)Modals, dropdowns, popovers, lightbox, deep floats0 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 controlsgap-1CanonicalNav tabs, tight rows
4pxgap-2CanonicalInline label + value
8pxgap-3CanonicalCard internals
12pxgap-4CanonicalGrid gaps
16pxgap-6CanonicalSection internals
24pxgap-8CanonicalBetween blocks
32pxgap-12CanonicalProject sections
48pxgap-16CanonicalMajor sections
64pxgap-20CanonicalAbout page sections
80pxPage gutters and grid-based widths.
px-16 / max-md:px-6Canonical★ Primary page gutter (desktop → mobile)
64px → 24pxpx-8CanonicalSecondary mobile gutter
32pxpx-[175px] / md:px-[8%]One-offWide project gallery gutters
175px / 8%w-[calc(100%*10/12)]CanonicalProject modal width
10 of 12 colsw-[calc(100%*6/12)]One-offInfo modal width
6 of 12 colsw-[337px] / [402px]ExperimentScreentime phone widths
337 / 402pxborderCanonicalCards, images, modals (hairline)
1px solidborder-[1.5px]One-offAdd-book input ring
1.5pxborder-2CanonicalLoading spinners
2pxborder-zinc-50CanonicalImage hairline overlays
#fafafaborder-zinc-100CanonicalCards, dropdowns, community frames, project card frames
#f4f4f5border-white/50CanonicalGlass nav pill border
rgba(255,255,255,0.5)border-transparentCanonicalDefault / inactive pills & inputs
transparentfocus outlineCanonicalGlobal :focus-visible
2px solid #d4d4d8, offset 2pxGlobal :focus-visible and the interactive focus ring.
outline 2px #d4d4d8, offset 2pxring-2 ring-zinc-400 offset-2When 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.
2pxCommunity photos, book covers, film frames, Polaroid frame (mobile)6pxDropdown items, book covers, Polaroid frame & share export8px → 14px (tooltip) squircleTooltips, dropdowns, quote photos12px → 20px squircleGallery items, project cards16px → 27px squircleLore cards, book modal, video24px → 41px squircleInfo modal, media quote cards16px → 27px squircleVideo / image embeds24px → 41px squircleDevice mockup columns26px → 44px squircle★ Signature project & modal radius28px → 48px squircleLarge surfacesfully roundPills, avatars, CTAs, nav (stays round)Deliberately precise / odd radii from Figma exports and device mockups.
rounded-[7px]ExperimentScreentime daily-tab segment
7pxrounded-[11px] / [12px]ExperimentScreentime app icons (iOS-accurate)
11–12pxrounded-[100px]ExperimentScreentime home indicator, segmented control
100pxMulti-stop lavender→white, animated 8s (.header-gradient)
Page headers
PNG texture at opacity 0.8 over header gradient
Page header texture
bg-zinc-200/60 + backdrop-blur-md + shadow-glass
Active nav tab
backdrop-blur-sm / -md
Nav pill, project TOC overlay
backdrop-filter: blur(16px) saturate(180%) + shadow-glass
Art carousel arrows
Gradient #f4f4f5→#e4e4e7→#fafafa, 2s ease-in-out loop
Image / skeleton loading
violet/pink/blue/zinc stops, animated 6s
Intro accent text
color #3b82f6 on #dbeafe background
Global ::selection
#bbf7d0 ring, pulse-ring 2.3s infinite
Availability dot
#d4d4d8 2px line, 0.6s reveal
Media quote cards
Multi-stop white/#fafafa gradients (up to 11 stops)
Film & Art carousels, top scroll fade
bg-black/20
All modal overlays
filter blur(4px)→blur(0), 0.26s
Film captions focus-pull
Sampled-RGB dust, gravity 0.0012, drag 0.9986
Fading shatter effect
scale-[0.99] cards, scale-[1.005] link cards
Interactive lift
Live loops — the demos below repeat continuously so you can see each curve.
fadeInCanonicalscaleInCanonicalfadeSlideUpCanonicalfadeSlideDownCanonicalmodalScaleInCanonicalmodalSlideInCanonicalshelfItemFadeUpCanonicalprojectCardEnterCanonicalscroll-revealCanonicalshimmerCanonicalpulse-ringCanonicalgradient-bgCanonicalblinkOne-offanimate-spinCanonicalfilm-dot-pulseExperimentduration-150CanonicalMicro-interactions (glass button)
150msduration-200Canonical★ Default hover / color transitions
200msduration-300CanonicalCards, modals, nav slide
300msduration-500CanonicalExperiment modal expand, book cover
500msNavigation, actions, feedback, and form affordances — text-zinc-500 · strokeWidth 1.5.
ArrowUpRight.tsxExternal / meta links, CTAs, email hoverart/ChevronIcons.tsxArt mural & sketchbook carousel arrowslibrary/icons.tsxLibrary / shelf filter triggerFilterDropdown / SystemPageFilter pills & mobile section menuProjectModal / ExperimentModalModal breadcrumb separatorslibrary/icons.tsx · PlusIconAdd book / create actionslibrary/icons.tsx · CloseIconLibrary / book modalsProjectModal / lightboxCentered modal & lightbox dismissInfoButton / ExperimentModalProject & experiment info triggersExpand.svg / ExperimentModalOpen experiment / project full pagelibrary/icons.tsx · SendIconLibrary add-book submitlibrary/icons.tsx · SmileyIconLibrary success statelibrary/icons.tsx · ArrowRightIconFlat horizontal arrow (library)ProtectedContent / ProjectModalPassword field submitLinkIcon.tsxExternal experiment links on homeTouchIcon.tsxInteractive / in-site experiment linksassets/lock.svgPassword-gated project contentProjectModalShow / hide passwordFooterLocal time day / night indicatorlucide-react (shadcn)Checkbox & menu selected statesFooter · svg-2tsxp86msmFooter social row, community cardsFooter / View on X CTAFooter social, experiment CTAsFooter · svg-2tsxp86msmFooter social row
assets/LumaLogo.svgFooter social rowPolaroid • 2024