Drawer 2: The look

Open it when: you're choosing or fixing type, colour, layout and spacing, images, corners or depth. Decide the direction first (Drawer 1). Most of what makes a page look AI-made is listed in Drawer 6.

What we know

Type

Choosing fonts

Pair a distinctive display font with a refined body font. Avoid generic fonts such as Arial, Inter, Roboto and system fonts. [frontend-design]
On Persuade and Experience pages, these fonts mean you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter as a headline font, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. [impeccable] frontend-design also names Space Grotesk as a choice to stop repeating. [frontend-design]
"Books want a serif, tech wants a mono" is never a reason to pick a font from that list. [impeccable]
The sources clash on system fonts:
- frontend-design: avoid system fonts. [frontend-design]
- impeccable: app screens and docs are well served by system fonts and workhorse UI fonts. [impeccable]
- impeccable also says a system font (Impact, Arial Black, the platform sans) must never be the headline voice of a page with its own look. [impeccable]
How many families:
- Use the fewest families that make the order of importance obvious. A second family needs a job only it can do. [impeccable]
- One family is often right for app screens. [impeccable]
Cream with a serif headline is one of impeccable's four common AI looks. [impeccable]

Weight, spacing and case

Don't go tighter than -0.04em. [impeccable] -0.02 to -0.03em usually reads better. [impeccable, in its notes for Codex] Its rule checker flags spacing so tight the letters lose their shapes. [impeccable]
Body text with letter-spacing above 0.05em is flagged. So is 80 or more characters of body in capitals. [impeccable]

Monospace: the sources clash

awesome-design-md: a monospace font gives a technical voice to labels, small headings or buttons (Vercel, xAI, Bugatti, The Verge). [awesome-design-md]
impeccable: monospace as a costume for "technical" is banned. Use it for code, data or measurements. Never for running text. [impeccable]
Our build didn't test this.

Size, line length and line height

16px is the ordinary floor for body text on the web. [impeccable]
Keep lines of reading text to about 65 to 75 characters. [impeccable]
Body line height 1.5 to 1.7. Below 1.3 is flagged. [impeccable]
Wider lines need more line height. [impeccable]
Headlines top out around 6rem. Steps in size and weight must be obvious. Steps under 1.25 times apart are flagged as flat. [impeccable]
On app screens, use a fixed rem scale with steps 1.125 to 1.2 apart, not fluid headings. [impeccable]
Light text on dark needs a little more line height, a touch more spacing, and sometimes one more weight step. [impeccable]
Use text-wrap: balance on headings and text-wrap: pretty on body copy. [impeccable]
Break a heading by hand only between phrases, and check the break at every width. [impeccable]
Mark paragraphs with space or an indent, not both. [impeccable]

Numbers

Turn on tabular and number font features where the content needs them. [impeccable]

Loading fonts: the sources clash

impeccable: serve fonts from the project's own files with @font-face. Never from a hosted stylesheet such as fonts.googleapis.com. [impeccable]
Astryx: a theme names its font but doesn't load it. You add the web font link yourself. [Astryx]
Load only the weights you use. Use font-display: swap or optional. [impeccable]

Colour

Strategy first

Pick a colour strategy before picking colours. [impeccable]
- Restrained.
- Committed: one strong colour covers 30 to 60% of the page.
- Full palette: three or four named roles.
- Drenched: the page is the colour.
Dominant colours with sharp accents beat timid, evenly spread palettes. Keep colours in CSS variables. [frontend-design]
Build roles, not a bag of swatches: page and raised surfaces, main and secondary text, action, focus and selection, borders, success, warning, error and info. [impeccable]
For a new web palette, prefer OKLCH. Its lightness and strength adjust predictably. Choose the hue from what the product means, not what the category usually uses. [impeccable]

One accent or a field of colour: the sources pull different ways

awesome-design-md: the most common rule is one accent colour, kept for the main call-to-action button (Airbnb, Apple, Tesla, Ferrari, Wise, Binance, Linear, Pinterest). Several files ban a second accent (Cursor, Wise, Binance). [awesome-design-md]
Extra colours are allowed but kept to one context and off buttons. Examples: Starbucks gold for rewards, Al Jazeera red for live coverage only. [awesome-design-md]
impeccable: on a page with its own look, colour should own whole regions, not sit as accents scattered over a neutral page. [impeccable]
impeccable: on app screens, a grey screen with one accent is not restraint. It is the category default without the polish. [impeccable]
impeccable's own quieter command still says neutrals lead and colour is the accent, about 10% of the page. [impeccable]
Our build kept one accent for a single moment, the way Starbucks keeps gold for its rewards. Warmth came from the accent, the photos and the type. [our build]

Cream backgrounds: the sources clash

awesome-design-md: a warm cream page in place of white recurs (Claude, Cursor, Oura, Starbucks, Mastercard, Pinterest). [awesome-design-md]
impeccable: a cream or beige background chosen by reflex is an AI tell. Its rule checker flags it. [impeccable]
Our build treated a cream or beige background as a tell and avoided it. [our build]

Black, grey and meaning

Never put grey text on a coloured surface. Use a darker shade of that colour, or transparency. [impeccable]
impeccable says plain grey is fine when it suits the look, and to tint greys only when the brand colour gives real unity. [impeccable] Its quieter command says to use tinted greys, not pure grey. [impeccable]
Status colours keep their meaning. Don't use them as surfaces or as the brand colour (Binance). [awesome-design-md] Red and amber appear only where they carry meaning. [impeccable]
Colour must never be the only signal. Add text, shape, an icon or position. [impeccable]
Check colour in every state, on text over images, and in both light and dark themes. [impeccable]
Compose dark mode on purpose. Never just invert the light theme. [impeccable]
Theme the browser's own parts from the palette: text selection, the caret, scrollbars, focus rings, link underlines. [impeccable] impeccable says models skip this most reliably (asserted, no evidence shown).

Contrast

Body text needs at least 4.5 to 1 contrast. Large text, controls, icons and focus rings need 3 to 1. [impeccable]
A grey picked for elegance came out at about 2.5 to 1. It needs at least 4.5 to 1. Never lighten it for looks. [our build]

Gradients: the sources clash

frontend-design: build atmosphere with gradient meshes rather than flat colour. It calls purple gradients on white a cliché. [frontend-design]
awesome-design-md: most files ban gradients. A few make one gradient the whole decoration, at hero size only (Vercel, Stripe, Mistral). [awesome-design-md]
impeccable: no gradient text. Its rule checker flags purple or violet gradients and cyan on dark. [impeccable]
Our build treated gradient text as an AI tell. [our build]

Layout and spacing

Structure

frontend-design: reach for asymmetry, overlap, diagonal flow and elements that break the grid. Use either generous empty space or controlled density. [frontend-design]
A split hero, or a centred headline over a row of cards, is still the template, whatever colours paint it. [impeccable]
Start a page from its frame. Pick the shell and budget its regions before writing content. [Astryx]
Ask whether repeated cards, columns or sections are truly equal, or just a framework default. [impeccable]
Skeleton test: strip out the copy. If the bare structure no longer says what the section is, its boldness is only in the text size. [impeccable]
Variation isn't a goal by itself. Repetition helps people recognise things. Break it only when content or priority changes. [impeccable]
On wide screens, cap the width. Don't stretch to 4K. [impeccable]

Cards: the sources agree

Cards are the lazy container. Cards inside cards are always wrong. Same-size cards with an icon, heading and text should not be the page structure. [impeccable]
Card is not the default layout tool. Use it only when items need their own click area or side-by-side comparison. Dense data goes in rows. [Astryx]
Our build treated rows of identical icon cards as an AI tell. [our build]

Spacing

Group by meaning. Use closeness before adding boxes or decoration. [impeccable]
Make rhythm by contrasting tight and generous gaps, not by repeating one value. [impeccable]
Use a written spacing scale. A 4-unit base gives useful middle steps that an 8-only scale misses. [impeccable]
Put more space above a heading than below it. [impeccable]
Keep at least 8px, ideally 12 to 16px, inside bordered or coloured boxes. Keep body text at least 16px from the screen edge. [impeccable]
Squint test: blur your eyes. Can you still find the main element, the second one and the main groups, in order? [impeccable]

Pace

Pace the scroll. A dense passage earns a quiet one. End on a real close. [impeccable]
Alternating light and dark bands can act as the section divider and set the pace (Apple, Claude, Uber, Oura). [awesome-design-md]

Images

In photo-led systems the photo is the card, with no frame or padding (Nike, Pinterest). [awesome-design-md]
Search for the subject's physical object, not the category. One decisive photo beats five average ones. Check that stock photo links work. [impeccable]
Make the real images. Don't fill the gap with gradients, glass or generic icon tiles. [impeccable]
Anything painted (illustration, photo, texture) ships as an image file, not CSS or a big inline SVG. Icon-sized SVG is fine. [impeccable]
Use real illustration or none. [impeccable, in its notes for Codex]
Draw icons from a real icon set or your own SVG, in one stroke weight. Never emoji. [impeccable]
Don't fake a cut-out with a circle or polygon mask. Make a real cut-out. [impeccable]
Don't bury a photo under a near-solid wash. Let it show or remove it. [impeccable]
Every shipped image should carry the exact prompt that made it, or where it came from. embed-prompt --scan lists images still missing one. [impeccable]
Shrinking and naming image files is in Drawer 6 and Drawer 7.

Shape and corners

Keep card corners at 12 to 16px. Pills are for small controls. [impeccable, in its notes for Codex]
Astryx names corner sizes by role: inner, element, container, page, plus none and full. [Astryx]
A thick coloured border on one side of a card is banned, and so is a thick accent border on a rounded card. [impeccable] Our build treated a coloured stripe down the side of cards as an AI tell. [our build]

Depth

The sources clash on how much

frontend-design: build atmosphere instead of flat colour. Gradient meshes, noise, patterns, layered transparency, dramatic shadows, grain. [frontend-design]
awesome-design-md: depth comes mostly from steps in surface colour and thin lines, not drop shadows (Claude, Raycast, The Verge, Linear, Cursor, Lamborghini). Where shadows exist, they are stacks of faint layers or one reserved shadow (Vercel, Starbucks, Apple). Spotify is the exception: on dark, it wants heavy shadows. [awesome-design-md]
impeccable: no glass or blur as decoration. No hard offset shadows unless the look really is neo-brutalist. Use depth only when it makes state or order clearer. [impeccable]
impeccable says hand-drawn-style SVG scenes and SVG grain read as amateur, and stripes or grid backgrounds need a real map, plan or measuring tool under them. [impeccable, in its notes for Codex]
Our build treated frosted glass for decoration as an AI tell. [our build]

Rules that hold either way

A shadow has an offset and a soft blur. A coloured glow with no offset is decoration. [impeccable]
Pick a border or a shadow, not both. A thin border under a wide soft shadow is the "ghost card". [impeccable, in its notes for Codex]
Astryx has three shadow levels: low, medium, high. Choose by what overlaps what. A surface that overlaps nothing gets none or low. Surfaces stack: page, surface, card, popover. [Astryx]

Tools in this drawer

Fix the type: /impeccable typeset <target>. Pick it when the type looks off but the overall look is right.
Add colour with roles: /impeccable colorize <target>. Pick it when the page is grey or flat, or colours are scattered without purpose.
Fix the structure: /impeccable layout <target>. Pick it when the page is hard to scan or every section looks the same.
Turn it up or down: /impeccable bolder, quieter or distill, then a target. Pick bolder when a part is too timid, quieter when the page is too loud, distill when it's too busy.
Tool: borrow from a brand (awesome-design-md). Pick it to see exact values a known brand uses for type, colour and corners.
Tool: DESIGN.md, the look written down. Pick it to fix the choices in one file every later change reads.
Tool: Astryx theming. Pick it when you build on Astryx and need it to look like you, not like Meta.