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.
Research rule. A taste becomes first-class when it produces a materially different visual or interaction experience and appears repeatedly across curated archives or inspectable sites. Labels may overlap. Overlap is useful.12 major visual worlds
52 named taste families
4 axes world × grammar × interaction × mood
Rev 3 intact baseline 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 web magazine arcade old OS instrument toy living 3D world
2. Graphic grammar HOW IS IT DRAWN?
pixel brutalist Swiss grid collage glass hand-drawn dither
3. Interaction metaphor HOW DOES IT BEHAVE?
document game desktop dashboard scroll story canvas physical control
4. Cultural mood WHAT MEMORY / CULTURE?
punk Y2K Nordic manga luxury solarpunk sci-fi
Example: Digital nostalgia + pixel/bitmap + game-native navigation + playful ≠ simply “retro”. It becomes a concrete design brief.
All worlds Raw Editorial Nostalgia Game Culture Material Immersive Instrument Futurisms
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 brutalism neo-brutalism product brutalism raw HTML docs-first utility
Product brutalism
Dense utility, terse actions and little ornamental framing. A useful example of brutalist grammar inside a real product.
Brutalist × typographic
A current award example that combines brutalism with a typographic research-school identity.
Raw HTML utility
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 / International Nordic minimal luxury editorial newspaper poster web book-like
Typography-first archive
A large evidence pool showing typography as a recurring design grammar rather than a niche style.
Nordic minimal
Quiet whitespace, product photography and restrained hierarchy.
Luxury magazine
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 / bitmap 1-bit / dither CRT terminal retro OS Web 1.0 Y2K vaporwave
Pixel / bitmap
Pixel is its own grammar: bitmap fonts, hard edges, sprite logic and constrained palettes.
Retro OS
Classic desktop interaction is not decoration here; it is the product metaphor.
ASCII × brutalism
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 cabinet RPG / inventory UI card / board UI visual novel isometric world 3D playable navigation esports HUD
Playable 3D navigation
The visitor drives through the portfolio. Navigation itself is a game world.
Minimal × pixel
A useful hybrid showing that pixel grammar can coexist with a restrained modern layout.
Playful physics UI
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 / zine punk grunge acid / rave collage sticker-bomb comic manga / anime hand-drawn watercolour
Illustrative archive
Evidence that illustration is a recurring web grammar with many stylistic branches.
Anti-grid / culture-led
A strong research pool for anti-grid, collage and art-direction-led work.
Brand illustration × brutalism
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.
skeuomorphism glass / liquid glass neumorphism clay / soft 3D chrome / metal paper toy plastic
Glass × brutalism
A good proof that material treatment and structural style are independent axes.
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 world shader art generative particle systems kinetic type scrollytelling horizontal narrative cursor-reactive
3D × brutalism
A current example combining a rotating 3D project cube with brutalist structure and scroll effects.
Unusual × interactive × typographic
Triangulated across unusual layout, typography, technology and interactive design categories.
Interactive archive
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 editor terminal console scientific instrument oscilloscope industrial control cockpit / HUD data-viz native
Data-viz native
Data and computation are not illustrations added later; they are the primary interface material.
Precision SaaS
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.
Bauhaus Constructivist Memphis Art Deco mid-century cyberpunk retro-futurism solarpunk biotech / organic future
Art direction pool
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 Layout 650+ examples; useful for anti-grid and composition research. open ↗ Siteinspire · Typography 2,100+ examples; evidence for type-led grammar. open ↗ Siteinspire · Interactive 900+ examples; interaction as a separate axis. open ↗ One Page Love Strong metadata around style, features, typefaces and hybrid examples. open ↗ Awwwards · trend critique A useful reminder not to turn award-site repetition into a design strategy. open ↗ Baseline rev 3 Kept intact so we can compare flat taxonomy versus compositional atlas. compare ↗ candidate rev 4 · design-craft/atlas/web-taste-atlas-rev4.html · baseline not modified · Nodepad page tokens + explicit font loading · reveal-on-scroll adapted from Kuickr rich-page recipe