Design System

Slightly warm grays, so the page reads like paper rather than a screen.

• Ink--inkHeadings, nav, the signature#181818
• Text--textBody copy, captions, button labels#2b2b2b
• Muted--mutedSecondary text, project links, footer#6b6b6b
• Subtle--subtleSmall labels, fact titles#767676
• Line strong--line-strongDots, window lights, selected outlines#d6d4ce
• Line--lineHeader and window borders#dfdeda
• Line soft--line-softDividers inside windows, clip borders#e8e7e3
• Soft strong--soft-strongHover on soft surfaces#eae9e4
• Soft--softFAQ questions, media and stage backgrounds#f1f1ee
• Paper--paperPage background#fcfcfb
• Surface--surfaceButtons, windows, open bubbles#ffffff

Pink marks what you can act on or where you are. Cream belongs to paper.

• Pink--pinkThe Bloom, focus rings, active dots, scribbles#DF517A
• Pink deep--pink-deepFooter links, FAQ answers (white text passes AA)#CF3563
• Pink soft--pink-softMarker highlight on the home title#F8C8D6
• Cream--creamPaper labels#f6eedb
• Cream ink--cream-inkHandwriting on paper#4a3826

The site doesn’t need them yet. Each passes AA on white, and red leans orange so it never reads as the brand pink.

• Success--successSaved, sent, available#26784a
• Warning--warningNeeds attention, not blocking#9e5c0b
• Error--errorFailed actions, invalid fields#c8402c

Borders already split the header and windows. These name them so new pages reuse them.

Soft field like the chat bubbles, pink ring on focus.

Brand-first: the Bloom turns, just like it does in the header.

Small for tools, round for anything you tap, 18px when it should feel friendly.

• 2pxBook spines on About
• 4pxFocus outlines on text links
• 6pxSmall icon buttons, the tail of a chat bubble
• 10pxSketch windows, clips, videos
• 14pxCarousels, the ASCII card
• 16pxProject window
• 18pxChat bubbles, the folder
• 999pxPills, dots, avatars

2px pink outline, 2px away from the edge. Media gets it inset so it isn’t clipped.

• 1px lineHeader, sketch windows
• 1px line softInside windows, clips
• 1px black 8%Project window edge
• Torn paperLabels, masked edge

• Fast--dur-fast · exit 90msHover, focus, color changes, the gliding highlight125ms
• Moderate--dur-moderate · exit 150msShort travel: the video crossfade200ms
• Slow--dur-slow · exit 200msLarge surfaces: the project window, photo cards275ms
• SendFAQ answer popping in (Rare UI timing)420ms
• BloomThe logo spin500ms
• DrawMarker sweep, scribble underline700ms

• cubic-bezier(.2,.8,.2,1)Standard (--ease): quick out, soft landing
• cubic-bezier(.4,0,1,1)Exit (--ease-exit): speeds up as it leaves
• cubic-bezier(.34,1.4,.64,1)Overshoot: the Bloom spin
• cubic-bezier(.65,0,.25,1)Draw: marker and scribble
• spring 0.42s, bounce 0.28Send: chat answers

Mostly multiples of 4, with 6 and 14 for tight UI.

• 4
• 6
• 8
• 12
• 16
• 24
• 32
• 48
• 72
• 88

Phones switch to one column at 700px.

• 760Text column: intros, the FAQ
• 880Work projects
• 1024Home
• 1100About collage
• 1180Project window
• 1240Page shell (30px sides, 18px on phones)

• Design SystemDisplay400 44px/1.12 Averia Serif LibrePage titles · 30px on phones
• DaywellTitle400 32px/1.1 Averia Serif LibreProject window, footer links
• WhetherHeading600 22px/1.3 Segoe UIWork project names
• I’m focused on practical, user-centered interfaces.Lead400 18px/1.65 Segoe UIPage intros
• A time-off tool for small teams.Body400 16px/1.6 Segoe UIDescriptions
• What tools do you use?UI400 15px/1.4 Segoe UI, −0.01emBubbles, links, captions
• HOME ABOUT WORKLabel600 13px Segoe UI, 0.06em, uppercaseHeader nav
• roles-permissions.tsxCode400 11px monospace, 0.02emFile names, domains