Seventeen
web design
aesthetics

An aesthetic is a set of relationships. Brutalism stays brutalism in green; editorial stays editorial in a different serif. Copy the signals on each label, not the hex codes.

Each specimen is a desktop composition, scaled down to fit this screen.

Swiss Minimalism

A strict grid, one neutral sans, and far more empty space than feels comfortable.

01
Raster Zürich Est. 1998 WorkStudioIndexDE

Ordnung
ist alles

Identity systems, signage and printed matter for cultural institutions.

Twelve columns, four weights, one red. Nothing else is needed.

Kunsthalle
Basel
Neue
Grafik
4.9 — 22.11
Fig. 1 — Kunsthalle, 2024
01Wayfinding
02Editorial
03Identity
04Type design
Neue
Ordnung
Vol. 4 — Grid
Typografie
Helvetica 400
Helvetica 700
Raster
12 columns
24px gutter
Palette shown
#FFFFFF
#1A1917
#D92B2B
Type role
Helvetica / Inter / Neue Haas — one family, two weights, tight tracking on headlines.
Signals
border-radius: 0
letter-spacing: -0.03em
box-shadow: none · rules are 1px solid

Minimalism

Reduction as the whole method: very few elements, enormous margins, no accent colour at all.

02
Objekt
ObjectsStudioContact
Table Lamp No. 1 photographed on a plain ground

Table Lamp No. 1

Opal glass, oak, one switch. Forty made a year.

£340
Enquire
Wall Hook
Oak, brass pin
£28
Aa
One family
Two weights, three sizes, nothing else
Add to bag
Free returns for thirty days
Palette shown
#F7F7F5
#FFFFFF
#111110
#8A8A86
Type role
One neutral or geometric sans at a light weight. Size and space carry the hierarchy, so two weights is already generous.
Signals
no accent colour anywhere
no borders, rules or shadows
one centred column, symmetrical
padding measured in whole screens
Watch out
Not a synonym for Swiss. Minimalism removes elements; Swiss organises them on a grid and keeps one loud accent. With nothing to hide behind, every spacing and alignment error is visible, and the style stops working the moment you have twelve things to put on the page.

Brutalism & Neobrutalism

Raw HTML energy: thick black borders, hard offset shadows, loud flat color.

03
SHIP UGLY · v2.4.1 · 4.2KB GZIPPED · NO TRACKERS · SHIP UGLY · v2.4.1 · 4.2KB GZIPPED · NO TRACKERS ·
GRIT.SH Docs Repo Install

A build
tool that
hurts

$ npm i -g grit && grit init
cold start38ms
deps0
config filenone
Ship
it now
Built for people who read stack traces.
Free plan
Unlimited everything, zero polish.
$0
NEW BETA
Palette shown
#000000
#FFE14D
#4D7CFF
#FF5C38
Type role
A heavy grotesque at 700 or above, uppercase headings, big jumps between sizes.
Signals
border: 3px solid #000
box-shadow: 6px 6px 0 #000
border-radius: 0 — never blur a shadow

Editorial

A magazine on the web: serif headlines, narrow measure, pull quotes, muted paper.

04
The Margin
No. 12·August 2026·Essays on Craft
The Feature

What we lost when the page stopped turning

For forty years the measure was fixed and the margin was a decision. Then everything went fluid, and readers quietly stopped finishing things.
By A. Rendell · Photographs by K. Sato
Trays of metal type in a composing room
A composing room in Leipzig, still in use.
Also inside — The last linotypeSubscribe · £48/yr
Longform
The quiet
return of print
by A. Rendell — 12 min read
Type on screen finally caught up with type on paper, and the old rules came back with it: measure, rhythm, and a headline that earns its size.
“Whitespace is not empty. It is the pause between sentences.”
Issue 12
Palette shown
#F7F3EA
#22201C
#B03A2E
Type role
Two families: a display serif (Playfair, Canela) for headlines, a reading serif (Lora) for body.
Signals
max-width: 66ch · line-height: 1.65
column-count for decks and captions
border-left: 2px solid — the pull quote

Glassmorphism

Frosted panels floating over a colorful background — blur plus a hairline highlight.

05
Halo ProductSecurityPricing Get started
SOC 2 Type II

See every alert
on one surface.

Logs, traces and on-call in one view, so an incident starts on one page instead of six.

Runs in your own VPCNo agent to install
Incidents · last 24hlive
api-gatewayp95 · 212ms
checkout-svcp95 · 88ms
Paged · 00:41
Resolved in 4m
Tonight
9:40 PM
Rain, 11°
Notifications
Privacy
Appearance
Palette shown
#E9486E
#FFB054
#348EC4
white 18–35%
Type role
System UI or a geometric sans, white text, medium weights — never thin over blur.
Signals
backdrop-filter: blur(12px)
background: rgba(255,255,255,0.18)
border: 1px solid rgba(255,255,255,0.4)
Watch out
Contrast fails fast. Only works over a busy or colorful backdrop — on flat gray it disappears.

Neumorphism

Controls extruded from the background using one light shadow and one dark one.

06
Aria

Heating that
follows your
week.

Set the week once. It learns the pattern in about four days.

Living roomAuto
21° heating to 22°
Home
Away
Sleep
Weekday wake
06:40
warm to 20°
Palette shown
#E9E3D9
#FFFFFF
#C3B8A7
Type role
Rounded or geometric sans, text tinted toward the surface, never pure black. Any near-neutral base works; the two shadows do the work.
Signals
box-shadow: 10px 10px 20px #b9ad99,
  -10px -10px 20px #fff
inset on the same shadow = pressed
Watch out
Buttons stop looking clickable and contrast is usually below accessible minimums. Use as accent, not as a system.

Dark OLED Luxury

True black, a single warm metallic accent, thin serif type, enormous margins.

07
Maison Nocturne
Edition of seventeen

The Onyx
Chronograph

CASE39 MM · STEEL
MOVEMENTAUTOMATIC
FINISHEDGENEVA
€ 4,200
The Onyx Chronograph on black silk
AtelierContact
Nº 04 / 17
Maison
Collection
Nº 7
Onyx Chronograph
REF. 0042
€ 4,200
Palette shown
#000000
#C8A45C
#F2ECE1
Type role
Thin high-contrast serif for headlines; wide-tracked uppercase mono or sans for labels.
Signals
background: #000 (true black, not #111)
letter-spacing: 0.22em on labels
border: 1px solid #2a2620 — no fills

Retro-Futuristic / Cyberpunk

Neon on near-black, monospace everything, glow and scan lines as texture.

08
root@nightcity:~/deploy [ESC] disconnect
MESH · KANTO42 UP
> tracing 12 hops3 down
> auth --key ****-9F2A ......... OK > scan mesh --region kanto ..... 42 NODES

RUN YOUR
CODE ON THE
STREET GRID

Edge compute on 12,000 rooftop nodes. No datacenter. No permission. Sub-15ms to any block in the sprawl.

read the spec →
UPTIME 99.98 LAT 12MS THREAT: ELEVATED BUILD 2087.4.1
// SYS.ONLINE
NIGHT
PROTOCOL
uptime .............. 99.98%
latency ............. 12ms
threat level ........ ELEVATED
Palette shown
#05070A
#2FFBE0
#FF2FB9
Type role
Monospace for nearly everything (IBM Plex Mono, Space Mono), uppercase, wide tracking.
Signals
text-shadow: 0 0 12px currentColor
repeating-linear-gradient = scan lines
two neons max — one cool, one hot

Organic / Biomorphic

Earth tones, uneven rounded shapes, warm soft shadows, a serif reading voice.

09
Vallon BlendsRitualsJournalBasket (2)

Loose leaf, three
farms, one valley.

Six herbal blends, harvested by three families in the Cévennes and dried in open air.

Single-origin, never blended down
Compostable tin and liner
from £14
Loose leaf blends in glass jars
2011growing
since
Slow
mornings
Chamomile blend
Hand-picked, loose leaf, 60g tin.
Palette shown
#F3ECE1
#C2703F
#8A9A5B
#3C3226
Type role
Soft serif for body and headings (Lora, Source Serif); generous line-height.
Signals
border-radius: 60% 40% 55% 45% / …
box-shadow: 0 12px 28px rgba(120,86,52,.16)
shadows tinted brown, never gray

Bento

Everything is a rounded tile in a tight grid — mixed sizes, almost no empty space.

10
Latch ProductChangelogPricingSign in
v4 · shipping today

Deploys, alerts and
spend on one board.

One screen per team. Nothing hides two clicks deep.

Error budget 72% left
Spend this month
$1,204
Deploys / wk 128
No incident in 18 days last: api-gateway, 04:12
On-call now
Regions 7
18
days green
Uptime
Alerts0
Deploys
128 this week
p95
EU
us-east-1 · healthy
Storage48%
Upgrade
Docs
Palette shown
#F1F1EF
#FFFFFF
#18181B
#CF4B1F
Type role
One neutral sans, two sizes per tile: a big number and a small gray label.
Signals
display: grid; gap: 8–16px
grid-column: span 2 for feature tiles
border-radius: 14–24px on every tile

Flat & Vibrant Maximalist

Big blocks of saturated color, zero depth effects, type doing the shouting.

11
KAE TANAKA · SLOW PULSE · MIRRORHOUSE · BOYS IN TRANSIT · LA FIÈVRE · KAE TANAKA · SLOW PULSE · MIRRORHOUSE ·
FESTIVAL 26 Line-upMapCamping

THREE
DAYS
LOUD

14–16 AUG · ROTTERDAM
40 ACTS
4 STAGES
72 HOURS
BIG
ENERGY
Flat color, flat shapes, no shadows anywhere.
Fast Loud Free
Palette shown
#FF4D3D
#1F4BFF
#FFCC00
#0FBF7F
Type role
One bold grotesque at extreme sizes; body copy stays small and plain.
Signals
box-shadow: none · no gradients
solid background per section
contrast pairs, not tints

Claymorphism

Fat rounded shapes that look pressed out of soft clay: huge radii, a light inner rim, one soft drop shadow.

12
Sprout

Keep every
plant alive.

Watering reminders that adjust to your light, your soil and your holidays.

Monstera · living room Water in 2d
14 plants · next water Thursday
Streak 21 days
Soil Light
Palette shown
#FFF1E4
#FFD9BD
#FF8F5E
#7AD0C0
Type role
Rounded geometric sans, heavy and large. Small text looks wrong on shapes this soft.
Signals
border-radius: 22–38px (never 8px)
box-shadow: 0 12px 22px + two insets
no borders anywhere · pastel on pastel
Watch out
Everything reads as a toy. Great for consumer onboarding, wrong for anything financial or serious.

Aurora Mesh Gradient

The background is the design: several soft radial gradients bleeding into each other, with almost no chrome on top.

13
Longwave SoundsSleepAccount

Nine hours of one empty room.

Recorded overnight in disused buildings, unlooped and uncut.

40 hrs · lossless
Aurora 01 tape hiss · 9h 12m
Same mesh, light base The gradients carry it either way.
Palette shown
#070B12
#00BEA0
#C8E15A
#E25678
Type role
One quiet sans, large and light, keeping out of the gradient's way.
Signals
background-image: 3–4 radial-gradient()
each stop fades to alpha 0 by ~62%
no cards, no borders, no shadows
Watch out
Text contrast changes across the mesh. Keep copy in the darkest or lightest region, never across a hue seam.

Constructivism

Soviet poster logic: red, black and cream, hard diagonals, everything shoved to one axis.

14
Werkplaats Rotterdam · 14—28 Sept

Form
follows
force

Two weeks of workshops, lectures and printing on the machines that started it.

Drukkerij
Nº 03
Free entry
Print
shop
Constructed,
not decorated
Palette shown
#F0E9DC
#171412
#C8102E
Type role
One heavy grotesque, uppercase, wide tracking on labels and none on headlines. No serifs, ever.
Signals
transform: rotate(-24deg) on a band
clip-path: polygon() for hard diagonals
three colors, flat — no tints between
Watch out
Diagonals eat legibility. Rotate blocks and rules, never body copy.

Hand-drawn

Deliberate wobble: uneven borders, sketch marks, handwriting, and nothing quite aligned.

15
Field Notes — a workshop

Think on paper,
ship on Friday.

Two days of sketching, taping and arguing in front of a wall. Laptops stay shut until hour nine.

6 spots left!
day one maybe? start here ↗
Bring: pens,
bad ideas
Nov 14–15 · Lisbon
Day one Fill three walls, keep two ideas.
or just email us
Sketch first
Then argue
Open the laptop
Palette shown
#FDFAF1
#2F2A24
#FFE8A3
#C05621
Type role
A handwriting face for headings and labels, a plain reading face for anything longer than a line.
Signals
border-radius: 255px 15px 225px 15px /
  15px 225px 15px 255px — the wobble
transform: rotate(-2deg) on each element
Watch out
Handwriting fails at small sizes and in other languages. Keep it for headings, buttons and asides.

Retro Tech

Late-80s computing nostalgia: warm cream plastic, beveled edges, rainbow stripes, grain.

16
MICRO/CLUB EST. 1986

THE HOME
COMPUTER
IS BACK

A monthly club for people who still solder. Tapes, listings and one very loud dot-matrix printer.

£4 / MONTH
*** READY ***
10 PRINT "HELLO"
20 GOTO 10
RUN
A beige home computer on an office desk
TAPE 2 · SIDE A
MEETING 042 SAT 19:00
> LOAD "CLUB",8,1
> SEARCHING...
> FOUND CLUB PRESS PLAY ON TAPE
Palette shown
#E8DCC2
#3B2F1E
#E5C02E
#C8452F
Type role
Monospace for body and labels, a heavy grotesque for headlines.
Signals
border-top/left lighter = fake bevel
box-shadow: 4px 4px 0 (hard, warm)
repeating-linear-gradient at 4–5% = grain
Watch out
Nostalgia ages fast. Anchor it to a real era (a machine, a tape, a magazine) or it just looks dusty.

Elevated / Material

Ink on stacked paper: every surface sits at a height, one accent tints everything, and touch leaves a mark.

17
Ledger
This month
Spent this month £1,284.40
62% of your budget
By category
Groceries£212.40
Transport£84.10
Home£840.00
All Bills Food
Recent
Tram passToday£34.00
Grocerpressed · state layer 8%£62.10
Rent2 Aug£840.00
+
Level 0 — flat, no shadow
Level 1 — resting card
Level 3 — lifted / dragged
Amount £62.10
Round up savings
Palette shown
#EEF2EE
#2E6B5E
#CFE4DC
#F0A03C
Type role
One neutral grotesque throughout, separated by size and weight. Hierarchy comes from elevation, not type.
Signals
two-layer shadows = one elevation step
accent at 8–12% alpha = hover / pressed
tonal container = accent mixed into surface
8px spacing grid · 12–18px radius
Watch out
Borrow the elevation and state-layer logic, then pick your own accent. A vendor's palette and icon set makes your product look like their demo.

How to choose

Pick the aesthetic your content can survive. Dense, information-heavy products want Swiss, Bento or Flat. Reading-heavy products want Editorial or Organic. Glass, neon and extruded shadow carry a landing page and wear thin over a working day. Whichever you pick, commit to its whole rule set; mixing two is what makes a page look accidental.

Index ↑