Put Your Design System in the Prompt: Colour, Type, Spacing

August 6, 2026
"Make it look better" carries no information. Give numbers instead — the jump in output quality is bigger than switching models.
design system
prompt engineering
UI

Why "make it look better" does nothing

Because it contains no information.

Given that instruction, the model falls back on the average aesthetic in its training data — roughly the mean SaaS landing page of 2023. That is where the AI look comes from: purple gradient, glassmorphic card, 16px radius, one enormous centred headline. The model isn't tasteless; you gave it no constraints, so it returned the average.

The fix isn't better adjectives. It's numbers.

Three token layers, you only supply two

Design systems usually stack as primitive → semantic → component. In a prompt you only need the first two; let the model derive the third.

Layer 1: palette

Give hex values, not colour names. "Deep blue" has a hundred valid readings.

Primary #0F172A
Accent #22C55E (CTA and success states only)
Background #FFFFFF, secondary surface #F8FAFC
Border #E2E8F0
Body text #334155, muted #64748B

Say where each colour is used. Values without roles means the accent ends up sprinkled everywhere.

Layer 2: type scale

Typeface: Inter (headings 700, body 400)
Scale: h1 48/1.1, h2 32/1.2, h3 24/1.3, body 16/1.7, small 14/1.6
Mobile: h1 drops to 32, others scale proportionally

48/1.1 is size/line-height shorthand; models parse it correctly. Line height affects perceived quality more than size does — most AI-looking pages set body copy at 1.4, which reads cramped.

Layer 3: spacing and radius

Spacing base 4px; use multiples of 4 only
Section padding: 96px desktop, 56px mobile
Card padding 24px
Radius: cards 12px, buttons 8px, inputs 8px
Shadow: exactly one level, 0 1px 3px rgba(0,0,0,.08)

"Exactly one shadow level" is unusually effective. Left alone, AI gives every card a different elevation and the page reads as noise.

A "do not" list beats a "do" list

Positive descriptions get diluted; prohibitions rarely get ignored.

Do not use: purple/pink gradients, glassmorphism, neon glow,
radii above 16px, more than one shadow level,
serif body text, centred long-form paragraphs

Curating prompts for this library, we found the same thing repeatedly: adding a "do not" list changes output more than tuning any positive adjective.

The full block, ready to paste

Design spec:
Palette: primary #0F172A; accent #22C55E (CTA and success only);
background #FFFFFF / #F8FAFC; border #E2E8F0;
body #334155; muted #64748B.
Type: Inter. h1 48/1.1, h2 32/1.2, h3 24/1.3, body 16/1.7.
Mobile h1 32.
Spacing: 4px base; section padding 96 desktop / 56 mobile; card padding 24.
Radius: cards 12, buttons and inputs 8. One shadow: 0 1px 3px rgba(0,0,0,.08).
Do not use: purple gradients, glassmorphism, neon, radii >16px,
multiple shadow levels, serif body text, centred long paragraphs.
Dark mode: provide it by swapping the same semantic tokens —
do not invent a separate palette.

The real payoff: reuse

This block is decoupled from what the page does. Write it once and every prompt you own can include it — that's what a design system means at the prompt layer.

New project? Change two lines (palette and typeface) and keep the rest.


Prompts on MotionSites ship with complete design tokens, so there's nothing to tune.

Every prompt, free for members

One payment, every prompt on the site

  • Every prompt free to download
  • Unlimited downloads, copy anytime

Yearly

$39.00

365 days

Lifetime

$69.00

Never expires

See membership
Put Your Design System in the Prompt: Colour, Type, Spacing | MotionSites