Design System

liumichelle.com

The colors, type, space, motion, and components behind liumichelle.com. Specimens are built in React with Tailwind CSS.

CanonicalCore systemOne-offAppears once / legacyExperimentSpecific to an experiment

Color

Primary

Canonical

The site's neutral backbone (Tailwind zinc-*).

zinc-900

Headings, icons, --primary / --foreground tokens

#18181b

zinc-800

Modal tabs, testimonial body, film timeline

#27272a

zinc-700

Hero name, section headings, footer

#3f3f46

zinc-600

Active nav, body copy, metadata, film info

#52525b

zinc-500

Secondary body, tool lists, --muted-foreground

#71717a

zinc-400

Muted labels, captions, placeholders, footer

#a1a1aa

zinc-300

Focus borders, quote underline, muted icons

#d4d4d8

zinc-200

Shimmer, card borders, spinners, film marks

#e4e4e7

zinc-100

Pill borders, hover fills, dividers

#f4f4f5

zinc-50

Button bg, section bg

#fafafa

white

Page & card surfaces

#ffffff

Accent

Canonical

Blue-500 is the single accent for links, CTAs, active states, and text selection.

blue-600

Ikigai link hover, CMS title default

#2563eb

blue-500

Links, CTAs, active nav, selection

#3b82f6

blue-400

CTA hover, project links, CMS numbers

#60a5fa

blue-300

CTA hover border

#93c5fd

blue-100

Text selection background

#dbeafe

blue-50

Polaroid project card bg

#eff6ff

Case studies

Canonical

Project accent hues from Sanity case studies, plus CMS pink defaults.

pink-500

CMS default — TOC, headers, stats accent

#ec4899

pink-50

CMS section header bar default

#fdf2f8

Adobe pink

Highlight & Express headline

#F63768

Adobe pink deep

Section title & highlight

#DE3C82

Adobe pink soft

Section title number / title

#F777B0

Adobe blush

Express — card highlight

#FF8EAB

Adobe orange

Express — card headline

#FD9A00

Adobe orange soft

Express — card highlight

#FFB748

Adobe sky

Express — card headline

#32A7F9

Adobe sky soft

Express — card highlight

#88CEFF

Adobe cyan

Two-column / feature highlight

#34A9F3

Status

Emerald for availability, red for errors.

emerald-500Canonical

Availability dot, submit button

#10b981

emerald-600One-off

Changelog link hover

#059669

emerald-50One-off

Contact badge expanded bg

#ecfdf5

green-200One-off

Availability pulse ring

#bbf7d0

red-500Canonical

Modal error state

#ef4444

red-400Canonical

Form error text / border

#f87171

Components

Buttons

Solid

Primary

sm

md

lg

Secondary

sm

md

lg

Tertiary

sm

md

lg

Ghost

sm

md

lg

Solid button variants by size
	sm	md	lg
Primary
Secondary
Tertiary
Ghost

Glass

Primary

sm

md

lg

Secondary

sm

md

lg

Tertiary

sm

md

lg

Glass button variants by size
	sm	md	lg
Primary
Secondary
Tertiary

Playground

Surface

Variant

Size

Content

Cards

Quote card

Book cover

Dividers

1px zinc-100 hairline.

Above

Below

HorizontalLine · Default

Inputs

Text

Default

Focus

Filled

Disabled

Error

Leading icon

Default

Focus

Filled

Disabled

Error

Trailing icon

Default

Focus

Filled

Disabled

Error

Muted

Default

Focus

Filled

Disabled

Error

Text

Leading icon

Trailing icon

Muted

Default

Focus

Filled

Disabled

Error

Loaders

Spinner

Shimmer skeleton

Loading...

Loading dots

Sidebar nav

Nav tabs

Breadcrumb

Tooltip

Working on something cool? Get in touch!md · About

Working on something cool? Get in touch!lg · Header

Availability badge

Pills

Polaroid • 2024

Default

Polaroid • Try It Out!

Hover

Project title pill

CanonicalOne-offExperiment

Tag badges

Filter pill

Filter dropdown

Iconography

Size

xs12px

sm16px

md20px

lg24px

xl32px

Filled

Academic cap

Apple

Circle

Coffee

★

Favorites star

Grid

Heart fill

Lock

Map pin

Moon

Pause

Play

Squircle

Sun

Stroke

Arrow

Arrow up right

Check

Chevron

Close

Code

Expand

Eye

Eye off

Grid

Info

Link

Plus

Search

Send

Smiley

Touch

X

Instagram

Luma

GitHub

Borders

Radius

Round

Squircle

Supporting browsers get corner-shape: squircle globally. Radius is bumped ~1.7× so corners don’t look tighter. Circles and pills stay round.

Radius scale

Canonical

rounded-smCommunity photos, book covers, film frames, Polaroid frame (mobile)

rounded-mdDropdown items, book covers, Polaroid frame & share export

rounded-lgTooltips, dropdowns, quote photos

rounded-xlGallery items, project cards

rounded-2xlLore cards, book modal, video

rounded-3xlInfo modal, media quote cards

rounded-[26px]★ Signature project & modal radius

rounded-fullPills, avatars, CTAs, nav (stays round)

Focus states

Canonical

Focus outlineGlobal :focus-visible

Focus ringCards & interactive tiles

Styles

Canonical

borderCards, images, modals

border-2Loading spinners

border-zinc-50Image hairline overlays

border-zinc-100Cards, dropdowns, community frames, project card frames

border-white/50Glass nav pill border

Inactive

border-transparentDefault / inactive pills & inputs

Motion

Animations

Canonical

fadeInLightbox overlays

Canonical

scaleInLightbox content

Canonical

fadeSlideUpLightbox captions

Canonical

fadeSlideDownClose buttons

Canonical

modalScaleInCentered modals

Canonical

modalSlideInDropdown modals

Canonical

shelfItemFadeUpShelf items

Canonical

projectCardEnterProject cards, hero

Canonical

scroll-revealOn-scroll section reveal

Canonical

shimmerLoading skeletons

Canonical

pulse-ringAvailability dot

Canonical

gradient-bgHeader gradient drift

One-off

blinkFooter clock colon

Canonical

animate-spinLoading spinners

...

Experiment

film-dot-pulseFilm 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

Shadows

Canonical

shadow-softHairline lift — locks, pills, segmented thumbs, image rest state

shadow-defaultZinc-tinted cards; pair with .shadow-default-hover on interactive cards

shadow-default-hoverHover companion for .shadow-default cards

shadow-mediaPhotos, book covers, device frames, Polaroids, community mats

shadow-elevatedModals, dropdowns, popovers, lightbox, deep floats

shadow-glassFrosted 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

Canonical

Primary page gutter64px / 24px

Canonical

Secondary mobile gutter32px

xl · 175px

md · 8%

One-off

Wide project gallery gutters175px / 8%

Canonical

Project modal width10 of 12 cols

One-off

Info modal width6 of 12 cols

Typography

Families

Figtree

Canonical

Figtree

SF Pro

Experiment

SF Pro

Courier New

Experiment

Courier New

SF Mono

Experiment

SF Mono

Properties

Canonical

Body

Text

text-xs

Footer clock, film loading, skip-to-designs link, Polaroid stamp / share chrome

12px

Text

text-sm

Captions, filters, errors, tooltips, contact badge, Polaroid / Screentime labels

14px

Text

text-base

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

16px

Text

text-lg

Hero subtitle, section subtitles, nav tab labels, Polaroid / Screentime headings

18px

Heading

Text

text-xl

Section / community titles, Polaroid dialog titles

20px

Text

text-2xl

Quote cards, mission headers

24px

Text

text-3xl

Section headings, library title, footer CTA

30px

Text

text-4xl

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

36px

Text

Display name

Home hero name, Design System title

36px

Text

text-5xl

Stats, emoji blocks, 404 display code

48px

Materials

Header gradient

Canonical

Header gradientPage headers

Grain

Canonical

Grain overlayPage header texture

Glass pill

Canonical

Glass nav pillActive nav tab

Blur

Canonical

Backdrop blurNav pill, project TOC overlay

Liquid

Experiment

Liquid glassArt carousel arrows

Canonical

ShimmerImage / skeleton loading

Selected text

Canonical

Text selectionGlobal ::selection

Canonical

Green pulse ringAvailability dot

Quote line

Canonical

Quote underlineMedia quote cards

Edge fade

Canonical

Edge fadesFilm & Art carousels, top scroll fade

Modal

Canonical

Modal scrimAll modal overlays

Blurred→Clear

Experiment

Blur-reveal textFilm captions focus-pull

Dust

Experiment

Canvas particlesFading shatter effect

Canonical

Hover scaleInteractive lift

Design System

Color

Primary

Accent

Case studies

Status

Borders

Radius

Radius scale

Focus states

Styles

Shadows

Spacing

Gap scale

Layout widths

Typography

Families

Properties

Design System

Design System

Color

Primary

Accent

Case studies

Status

Components

Buttons

Cards

Dividers

Inputs

Loaders

Navigation

Pills

Iconography

Size

Filled

Stroke

Social

Borders

Radius

Radius scale

Focus states

Styles

Motion

Animations

Duration scale

Shadows

Spacing

Gap scale

Layout widths

Typography

Families

Properties

Materials

Components

Buttons

Cards

Dividers

Inputs

Loaders

Navigation

Pills

Iconography

Size

Filled

Stroke

Social

Motion

Animations

Duration scale

Materials