Design Craft / Web Taste Atlas / candidate rev 4 · 7 Sep 2026

A website has more than a style.

This revision treats design taste as a composition of visual world, graphic grammar, interaction metaphor and cultural mood. That explains why pixel can be brutalist, a game can be editorial, and a scientific instrument can still feel luxurious.

12major visual worlds
52named taste families
4 axesworld × grammar × interaction × mood
Rev 3 intactbaseline left untouched for comparison
00 / COMPOSITION

Build a taste, don’t pick a trend

The same site can legitimately belong to several families. This matrix separates the decisions so hybrids become intentional instead of accidental.

1. Visual world

WHAT PLACE DOES IT FEEL LIKE?

raw webmagazinearcadeold OSinstrumenttoyliving 3D world

2. Graphic grammar

HOW IS IT DRAWN?

pixelbrutalistSwiss gridcollageglasshand-drawndither

3. Interaction metaphor

HOW DOES IT BEHAVE?

documentgamedesktopdashboardscroll storycanvasphysical control

4. Cultural mood

WHAT MEMORY / CULTURE?

punkY2KNordicmangaluxurysolarpunksci-fi
Example: Digital nostalgia + pixel/bitmap + game-native navigation + playful ≠ simply “retro”. It becomes a concrete design brief.
01 / RAW WEB

Web-native and unapologetic

Structure is exposed instead of disguised. The range goes from raw HTML through product brutalism to deliberate anti-polish.
original brutalismneo-brutalismproduct brutalismraw HTMLdocs-first utility
BuiltOnRails
Product brutalism

BuiltOnRails

open ↗

Dense utility, terse actions and little ornamental framing. A useful example of brutalist grammar inside a real product.

MA Studio
Brutalist × typographic

MA Studio

archive ↗

A current award example that combines brutalism with a typographic research-school identity.

Craigslist
Raw HTML utility

Craigslist

open ↗

Information architecture itself becomes the visual system.

02 / EDITORIAL

Print logic on a screen

Type, grids, art direction and pacing lead. Editorial can be rational, quiet, luxurious, newspaper-like or poster-like.
Swiss / InternationalNordic minimalluxury editorialnewspaperposter webbook-like
Siteinspire typography
Typography-first archive

Siteinspire Typography

2,100+ ↗

A large evidence pool showing typography as a recurring design grammar rather than a niche style.

Muuto
Nordic minimal

Quiet whitespace, product photography and restrained hierarchy.

Kinfolk
Luxury magazine

Kinfolk

open ↗

Editorial pacing and photography create perceived value before UI chrome does.

03 / DIGITAL NOSTALGIA

The computer remembers itself

Old screen languages become deliberate design material: pixels, CRT glow, terminal text, classic desktop windows and shiny early-internet chrome.
pixel / bitmap1-bit / ditherCRTterminalretro OSWeb 1.0Y2Kvaporwave
Pixel art archive
Pixel / bitmap

Pixel Art archive

open ↗

Pixel is its own grammar: bitmap fonts, hard edges, sprite logic and constrained palettes.

Poolsuite
Retro OS

Poolsuite

open ↗

Classic desktop interaction is not decoration here; it is the product metaphor.

ASCII portfolio
ASCII × brutalism

Matt Bierman

archive ↗

Hover-sensitive ASCII painting demonstrates how terminal grammar can hybridise with brutalism.

04 / GAME WORLDS

The website becomes something you play

Navigation may become movement, inventory, a map, cards, a HUD or a world. Game-native design is an interaction metaphor, not merely animation.
arcade cabinetRPG / inventory UIcard / board UIvisual novelisometric world3D playable navigationesports HUD
Bruno Simon
Playable 3D navigation

Bruno Simon

play ↗

The visitor drives through the portfolio. Navigation itself is a game world.

Atishay Tuli
Minimal × pixel

Atishay Tuli

archive ↗

A useful hybrid showing that pixel grammar can coexist with a restrained modern layout.

SuperHi Plus
Playful physics UI

SuperHi Plus

archive ↗

Interactive falling objects turn a brutalist landing page into a small toy-like system.

05 / SUBCULTURE & ILLUSTRATION

Visual culture leaks into interface

These tastes borrow from print production, street culture, comics and hand-made media rather than software history.
Xerox / zinepunkgrungeacid / ravecollagesticker-bombcomicmanga / animehand-drawnwatercolour
Illustrative websites
Illustrative archive

Siteinspire Illustrative

browse ↗

Evidence that illustration is a recurring web grammar with many stylistic branches.

Unusual layouts
Anti-grid / culture-led

Unusual Layout archive

650+ ↗

A strong research pool for anti-grid, collage and art-direction-led work.

Dropbox Design
Brand illustration × brutalism

Dropbox Design

open ↗

Shows how illustration, bold brand colour and rigid editorial blocks can coexist.

06 / MATERIAL UI

The screen pretends to have substance

Light, depth, texture and physical metaphors make interface elements feel manufactured rather than merely drawn.
skeuomorphismglass / liquid glassneumorphismclay / soft 3Dchrome / metalpapertoy plastic
Glassmorphism brutalism
Glass × brutalism

Maciej Zadykowicz

archive ↗

A good proof that material treatment and structural style are independent axes.

Apple
Premium spatial material

Product imagery, translucency and precise depth cues create a polished material language.

research branch
Clay / toy / soft-3D

Next evidence pass

Needs a dedicated archive pass because “claymorphism” is often used loosely. Keep as candidate until references triangulate.

07 / IMMERSIVE & GENERATIVE

The page behaves like a scene

Rendering and motion become the identity: 3D, WebGL, particles, shaders, canvas systems and long-form scroll narratives.
WebGL worldshader artgenerativeparticle systemskinetic typescrollytellinghorizontal narrativecursor-reactive
3D brutalist
3D × brutalism

Belen Jones

archive ↗

A current example combining a rotating 3D project cube with brutalist structure and scroll effects.

DVTK
Unusual × interactive × typographic

Triangulated across unusual layout, typography, technology and interactive design categories.

Interactive archive
Interactive archive

Siteinspire Interactive

900+ ↗

A large pool for interaction-first research rather than visual styling alone.

08 / INSTRUMENT & TECHNICAL

Precision becomes the aesthetic

Interfaces borrow from software tools, laboratories and control systems. Density is useful when it communicates capability.
IDE / code editorterminal consolescientific instrumentoscilloscopeindustrial controlcockpit / HUDdata-viz native
Observable
Data-viz native

Observable

open ↗

Data and computation are not illustrations added later; they are the primary interface material.

Linear
Precision SaaS

Linear

open ↗

Dense professional software made visually calm through strict hierarchy and microinteraction discipline.

research branch
Industrial / cockpit UI

Next evidence pass

We should separately research aviation HUD, laboratory UI and industrial-control references rather than collapsing them into “dark dashboard”.

09 / FUTURISMS & HISTORICAL WORLDS

Borrow a worldview, not just a palette

Some tastes come from movements and imagined futures: Bauhaus, Memphis, Art Deco, cyberpunk, solarpunk and retro-futurism carry cultural assumptions as well as visual motifs.
BauhausConstructivistMemphisArt Decomid-centurycyberpunkretro-futurismsolarpunkbiotech / organic future
Art direction archive
Art direction pool

Siteinspire Art Direction

browse ↗

Useful for tracing historical and cultural visual languages that don’t fit software-centric labels.

research branch
Anime / manga / comic

Needs dedicated pass

Separate manga panel grammar, anime visual language and comic-book UI rather than using “illustration” as a catch-all.

research branch
Solarpunk / organic future

Needs dedicated pass

A worldview-driven taste combining ecological optimism, organic form and technology. It needs careful evidence rather than trend-blog naming.

10 / EVIDENCE

Research pools behind rev 4

This candidate intentionally separates confirmed families from branches that still need triangulation.
Siteinspire · Unusual Layout650+ examples; useful for anti-grid and composition research.open ↗
Siteinspire · Typography2,100+ examples; evidence for type-led grammar.open ↗
Siteinspire · Interactive900+ examples; interaction as a separate axis.open ↗
One Page LoveStrong metadata around style, features, typefaces and hybrid examples.open ↗
Awwwards · trend critiqueA useful reminder not to turn award-site repetition into a design strategy.open ↗
Baseline rev 3Kept intact so we can compare flat taxonomy versus compositional atlas.compare ↗