Core
Technology should feel closer to human things — bodies, moods, weather, time, each other. The question isn't how to maximize engagement, but what this helps you feel.
Pro-human, playful, honest. Art history is a real resource — in conversation with Rothko, Constable, Monet, not just last year's Dribbble. Restraint is earned, not assumed. Settling for good enough is not good enough.
Color
Paper, not screen
Warm cream backgrounds (
#f4eae6, #faf8f5), not pure white. Warm ink (#1c1814), not #000. The material register matters.4–6 colors, earned
Terracotta, ochre, sage, soft blue — tones drawn from natural materials and art history. More than 6 and nothing has weight. Contradictory tones create tension that makes palettes memorable.
Dark: deep blacks
#0a0a0a, #131316 — not muddy grays. Liquid glass and iridescent overlays belong here. Warm/cool gradient pairs (orange + blue). Not rainbow.Tokens, not hex
CSS color tokens, not hardcoded values scattered through files. One gray scale. Dark mode must be consistent — a component that breaks in dark mode ships broken.
Type
Display serif
Edict Display, Kalice, EB Garamond for headlines — personality, warmth, humanity. Tighten at large sizes (
letter-spacing: -0.02em or tighter). Not Inter Bold.Small foundries
Schick-Toikka, Klim, independent type foundries — not just Google Fonts. Trial during prototyping; licensed when shipping. The typeface is never neutral.
Technical hygiene
-webkit-font-smoothing: antialiased always. font-variant-numeric: tabular-nums on changing numbers. text-wrap: balance on headlines. Sizes are generous, never apologetic.Motion
120–180ms
Presses, hovers
180–260ms
Small state changes
≤300ms
Larger transitions
400ms
Feels broken
Springs vs. curves
Springs for user-driven motion (drag, flick, press) — they survive interruption. Easing curves for system changes. Ease-out for entrances. Ease-in for exits. Ease-in-out for transitions. Linear only for time itself.
Motion earns its place
Default is no animation. Add one when it clarifies state or causality. Never animate to perform. "You don't need animations" is the starting question.
Physics over flatness
Hover states are elaborate (dim siblings, saturate active). Cards rotate, stack, fan, fling. Drag = momentum. Snap = place. Inertia is information. Never
transition: all.UX
Fitts's Law
Minimum 44×44px touch targets. Expand hit areas with invisible
::before padding. Tiny interactive elements are neglected, not designed.Hick's Law
Every added option raises decision time logarithmically. Progressive disclosure over density. A curated menu is more useful than a full one.
Doherty Threshold
Under 100ms = extension of your hand. Over 400ms = feels broken. When actual speed is slow, use optimistic UI and skeletons to shift perceived speed.
Miller's Law
~7 items in working memory at once. Chunk everything. "415-867-5309" vs "4158675309" — same information, completely different cognitive load.
Content
"Fuck it we ball" in a display serif on cream. Not edgy — accurate. The best content doesn't hedge.
Specific and honest
Write to the specific human moment. Art, weather, mood, time are legitimate subjects. Not every project needs a task or a dashboard.
Banned words
Synergy. Streamline. Seamless. Delightful (noun). Leverage (verb). User-centric. Placeholder text in a final design is a hard failure.
Avoid
Muddy mid-grays
Purple-to-pink gradients
Glow effects on text
transition: allEase-in for entrances
Blur over 20px
Pill buttons by default
Generic two-column hero
Non-concentric border radius
Placeholder copy in finals
Two filled CTAs
Inter Bold for headlines
Lottie animations
Glassmorphism for vibes
Explained interactions
Baked-in drop shadows
Touchstones
Rothko — Color as emotion, mood as data
Early iOS — Physics as information
Constable, Monet — Atmosphere as subject
Teenage Engineering — Tools as objects
Donald Judd — Restraint + material
are.na — Curation as interface
Dieter Rams — Less but better
Linear — Density done right
Müller-Brockmann — Grid as philosophy
Schick-Toikka, Klim — Type with character