A field guide, built with AI

Design systems for one

How a solo non-designer ships work that reads like a seasoned designer made it.

Lavi Sahu · 2026

← → arrow keys to move

01 · The gap

I'm not a designer.

AI lets anyone ship. So everyone ships the same thing.

Same fonts, same gradients, same three cards in a row. The bottleneck was never tools. It's taste.

02 · The reframe

Seasoned designers don't have better taste. They have better constraints.

A design system is bottled taste: decide once, apply it forever.

Which makes it the one design skill a non-designer can actually run.

03 · What it is

Three ingredients, not a department

TokensThe raw values. Twelve of them: seven colors, two fonts, three spacing steps.

RulesWhen each value may appear. The accent stays under ten percent. Display type only for hooks.

ComponentsThe few patterns that repeat: a headline block, a specimen row, a numbered rail.

Not required: a Figma library, a governance meeting, a 200-page brand book.

04 · Color

One hue, chosen for a reason

bg

oklch(0.17 0.008 70)

surface

oklch(0.215 0.01 70)

line

oklch(0.31 0.013 70)

ink

oklch(0.93 0.018 95)

muted

oklch(0.68 0.015 85)

faint

oklch(0.50 0.012 80)

accent

oklch(0.75 0.14 65)

Sixty percent narrator, thirty percent support, ten percent protagonist. The accent stays rare enough to mean something.

Amber, because warm ink beats default tech blue. Specified in OKLCH, where equal steps look equal to the eye.

05 · Type

A scale, not a pile of sizes

step +4Decide once,

step +2apply it forever

step 0Taste is not a talent you are born with. It is a set of decisions you write down once, so every future choice is already made.

step −1Hook / bridge / detail

Every block gets exactly three levels: hook, bridge, detail. Ratio 1.5 between steps. If two sizes look almost alike, one of them is wrong.

06 · Space

Rhythm you can count

u1 · 4px

u4 · 16px

u9 · 36px

4u9 · 144px

Every gap in this deck is a multiple of 4, 16, or 36 pixels. Nothing in between.

Random spacing is the loudest amateur tell there is.

07 · Where AI fits

AI is the intern. You are the constitution.

Infinite energy, no judgment. It drafts a hundred options; the system decides which three are legal.

Prompt the system, not the page. "Using these tokens, build a pricing page" beats "make it pop" every single time.

08 · The workflow

Four steps, in order

01

Brief

Name, audience, job. One sentence each, written before any pixel.

02

Tokens

Pick the twelve values. This is the whole design phase.

03

Components

Build only what repeats at least twice.

04

Audit

Run the smell test before anyone else can.

Skip the brief and everything after it is decoration.

09 · The smell test

Two seconds is all it takes

Show it to a stranger for two seconds. If they say "AI made that", it failed.

×Purple-to-cyan gradients

×Inter, by reflex, everywhere

×Centered hero, three cards, pill buttons

×Copy that starts with "Unlock"

The fix is never a tweak. It is a decision you skipped.

10 · Proof

This deck is the system

--bg: oklch(0.17 0.008 70)

--surface: oklch(0.215 0.01 70)

--line: oklch(0.31 0.013 70)

--ink: oklch(0.93 0.018 95)

--muted: oklch(0.68 0.015 85)

--faint: oklch(0.50 0.012 80)

--accent: oklch(0.75 0.14 65)

--font-display: Fraunces

--font-body: Space Grotesk

--u1: 4px

--u4: 16px

--u9: 36px

Twelve tokens, zero hand-styled slides. The palette, scale, and rhythm you just saw are the same ones rendering this sentence.

11 · Steal this

Write your twelve tokens tonight

Seven colors, two fonts, three spacing steps. Decide once, then let AI draft inside the fence.

More of my work automationdiary.com