Choosing a look

The visual directions, and which suits what.

A style is a position, not a preset. Each one says what to do and what it refuses to do — and the refusals matter more, because they are what stop every site converging on the same centered headline and three feature cards.

Pick by what the site is for, not by which looks nicest here. A restaurant in Technical precision reads as a database; a developer tool in Warm hospitality reads as untrustworthy.

Editorial

Editorial calm

Warm paper

Reads like a well-set magazine page.

Quiet, generous and confident. Long measures of text, wide margins, and almost no ornament. The impression is of something written rather than assembled.

Best for: Consultancies, writers, studios, anything sold on credibility rather than features.
Type: Serif headings at large sizes with tight tracking; sans body at 17–18px with line-height 1.7. Keep body text under 70 characters a line. One weight for headings, two for body.
Motion: Color and opacity transitions under 150ms. Nothing moves position, scales, or fades in on scroll.

Requires

Give headlines room — at least 48px of space above them.
Use a hairline rule to separate sections instead of a background change.
Let one photograph or one pull-quote carry each section.

Forbids

No three-column feature card grid.
No rounded shadow boxes.
No icons beside every heading.
No centered hero with a subtitle and two buttons.

Where it comes from: Print editorial conventions — the kind of restraint a magazine art director applies.

Archive quiet

Ink and cream

A catalog, not a campaign.

Understated and index-like. Small type, dense lists, dates and numbers in the margin. It trusts the visitor to read.

Best for: Portfolios, research, galleries, writing collections, film and music catalogs.
Type: Serif display at modest sizes — 28–36px — with 15px sans or serif body. Dates, numbers and categories set small in monospace or small caps.
Motion: A row may change background on hover. Nothing else.

Requires

Show a real index of work with dates.
Keep metadata visible — year, medium, client, length.
Let the list be long; do not paginate into threes.

Forbids

No image grid of equal squares.
No hero section at all — start with the index.
No hover animations that lift or scale.

Technical

Technical precision

Midnight slate

Built like documentation for people who read it.

Dense, exact and unsentimental. Information is arranged in tables and definition lists rather than paragraphs. Nothing is decorative.

Best for: Developer tools, APIs, infrastructure, anything technical where specifications are the selling point.
Type: Sans for prose, monospace for every figure, version, path, key and label. Headings are small — 20–28px — and do their work through weight, not size. Tabular numerals throughout.
Motion: None beyond instant state changes. No scroll animation of any kind.

Requires

Put real numbers, limits and versions on the page.
Set anything a machine produces in monospace.
Use a specification table where a competitor would use feature cards.

Forbids

No hero illustration.
No gradient, glow or glass.
No vague benefit copy — state what it does and what it costs.
No large rounded corners.

Where it comes from: Technical reference manuals and the documentation sites of infrastructure companies.

Terminal native

High voltage

Monospace everywhere, unapologetically.

A command line that happens to be a website. Everything is monospace, alignment is by character, and the page reads like output.

Best for: CLI tools, open-source projects, developer utilities. Wrong for anything sold to non-technical buyers.
Type: One monospace family at three sizes: 13px body, 15px subheadings, 22px headings. No italics. Emphasis is done with brackets, carets and color.
Motion: A blinking cursor is permitted. Nothing else moves.

Requires

Show a real install command in the first screen.
Align things to a character grid.
Use ASCII markers instead of icons.

Forbids

No proportional font anywhere.
No illustrations, no icons, no photography.
No marketing tone — describe, do not sell.

Warm

Warm hospitality

Terracotta and sand

Feels like somewhere you would actually go.

Generous, tactile and inviting. Photography-led, warm neutrals, soft edges without being childish. The page should feel like an invitation.

Best for: Restaurants, cafés, hotels, salons, studios, clinics — any place a person physically visits.
Type: Soft serif headings with an optical size, sans body at 16–17px and line-height 1.65. Headings sentence case, never all caps.
Motion: Gentle. 200ms ease on hover, images may scale by no more than 2%. Nothing bounces.

Requires

Lead with one large photograph of the actual place.
Put the address, hours and a phone number where a visitor looks first.
Write in the first person plural — "we", "our kitchen".

Forbids

No stock photography of generic smiling people.
No dark background — this style is light by nature.
No feature grid; a place is described, not specified.

Soft product

Nordic mist

Friendly and rounded, but still disciplined.

Approachable and modern. Rounded geometry, plenty of air, a single cheerful accent. Warmth without whimsy.

Best for: Consumer apps, community projects, education, small SaaS aimed at non-technical users.
Type: Geometric sans throughout. Headings 36–52px at weight 500, body 16–17px at line-height 1.7. Sentence case everywhere.
Motion: 180ms ease on color and border. Buttons may change background, never scale.

Requires

Explain the benefit in plain language before naming the feature.
Alternate the side that images sit on down the page.
Keep to one accent color and one shadow level.

Forbids

No purple-to-blue gradient of any kind.
No glassmorphism or frosted blur.
No three identical feature cards in the first screen.
No pill-shaped buttons everywhere — reserve the pill for one place if at all.

Expressive

Poster bold

High voltage

Oversized type doing all the work.

Loud, flat and graphic. Type is enormous, color blocks are solid, and the layout is closer to a printed poster than a web page.

Best for: Launches, events, music, fashion, portfolios — anything that benefits from being remembered.
Type: Display headlines from 64px to 160px, tracking -0.04em, line-height 0.95. Body text stays small and plain by contrast — 15px. The size gap between heading and body is the whole effect.
Motion: Sharp or nothing. Instant color inversion on hover is in keeping; easing and fading are not.

Requires

Let one headline fill most of the first screen.
Invert colors between adjacent sections.
Set navigation and buttons in uppercase with wide tracking.

Forbids

No rounded corners, anywhere.
No shadows or gradients.
No timid type — if the headline is under 56px this style is not working.

Where it comes from: Swiss poster design and the flat, type-first covers of independent magazines.

Atmospheric dark

Plum dusk

Low light, large images, deliberate mood.

Cinematic and moody. Deep backgrounds, full-bleed imagery, type placed over photography with care. Feels like a title sequence.

Best for: Music, nightlife, film, photography, fashion, premium products.
Type: Large display headings, 48–96px, letter-spacing -0.03em. Body 16px in a muted secondary color. Sparse text — this style carries meaning in images.
Motion: Slow and few. 400ms fades permitted on image reveal. No parallax, no bounce.

Requires

Give one image the full width of the screen.
Keep copy short — a sentence, not a paragraph.
Ensure text over an image has a real contrast scrim behind it.

Forbids

No decorative gradient backgrounds where there is no image.
No glass or frosted panels.
No glowing accent shadows.

Institutional

Clinical trust

Clinical white

Orderly and reassuring, without being cold.

Calm competence. White surfaces, crisp hairlines, one dependable accent. Nothing surprising, which is the point when the subject is money, law or health.

Best for: Clinics, law firms, finance, insurance, education, public services.
Type: Sans throughout. Headings 32–44px at weight 600, body 16px at line-height 1.65. Clear, boring, legible. No display face.
Motion: 150ms color transitions only. Nothing that could read as playful.

Requires

Name the qualifications, registrations or credentials plainly.
Give exactly one obvious next step per section.
Label every form field visibly.

Forbids

No dark theme.
No exclamation marks or urgency copy.
No decorative gradient or glow.

Utility dense

Monochrome

Everything visible, nothing wasted.

Information-first, like a timetable or a price list. Tight rows, small type, high information density. Optimized for people who came to find one specific thing.

Best for: Directories, listings, pricing, schedules, catalogs, local services with many options.
Type: Sans at 14–15px body. Headings 22–30px. Prices, times and quantities in tabular monospace so columns align.
Motion: None except row hover.

Requires

Show real prices and real availability in a table.
Align every number on its decimal point.
Make filtering visible without a click.

Forbids

No big hero image — it pushes the content down.
No card grid where a table would carry more.
No collapsing content behind accordions by default.

Next Color →