A Field Guide to Digital Design Languages
Fifty aesthetic specimens, each inhabited as a living artifact — one HTML page per movement, system, or effect.
Preface
Design languages are like dialects. They carry history, tone, assumptions about who is speaking and to whom. A button drawn in Bauhaus is not the same button drawn in Skeuomorphism — the geometry is different, but so is the worldview.
This collection treats each language as an occasion. Every page is rendered in the idiom it names: the Swiss page is set on a twelve-column grid; the Brutalist page is Times New Roman on a default white canvas; the Wabi-sabi page leaves its own margins uneven. The goal is to feel them, not describe them.
§ 01
Design Systems
17 specimens
- 01 Material DesignGoogle, 2014 — paper and ink as metaphor; the birth of Z-depth on the web. Google · 2014
- 02 Material You (MD3)Dynamic tonal palettes extracted from the user's own wallpaper. Google · 2021
- 03 Apple Human Interface GuidelinesClarity, deference, depth — the pre-Liquid doctrine of iOS. Apple · 2013–24
- 04 Liquid GlassApple 2025 — translucent panels that refract what they stand in front of. Apple · 2025
- 05 visionOSGlass windows floating in ambient dark — spatial UI for Vision Pro. Apple · 2023
- 06 Fluent DesignLight, depth, motion, material, scale — Microsoft's five axes. Microsoft · 2017
- 07 MetroTypography-first, flat-color tiles; the un-skeuomorphic phone OS. Microsoft · 2010
- 08 CarbonIBM's open design system — dense, engineered, serious. IBM
- 09 PolarisShopify's language of commerce — friendly density. Shopify
- 10 LightningSalesforce's B2B dialect — the chevron, the tab stack, the related list. Salesforce
- 11 Ant DesignThe default grammar of Chinese enterprise software. Alibaba · 蚂蚁
- 12 Atlassian DesignThe visual register of ticketing, sprints, and shared context. Atlassian
- 13 SpectrumAdobe's creator-tool register — sliders, swatches, dark canvases. Adobe
- 14 PrimerGitHub's vocabulary — diffs, reviews, green and red hunks. GitHub
- 15 Base WebUber's global scale — minimum ornament, maximum clarity. Uber
- 16 Audi UIThe luxury automotive dialect — hairlines, silence, a single red. Audi
- 17 Workday CanvasThe register of HR and payroll — trustworthy, warm, dense. Workday
§ 02
Surfaces & Shadows
8 specimens
- 18 SkeuomorphismLeather, wood grain, chrome bevels — pixels pretending to be matter. –2013
- 19 Flat DesigniOS 7 and after — every shadow and gradient purged. 2013–
- 20 Flat 2.0The return of the shadow — flat with modest depth cues. ~2016
- 21 Neumorphism (Soft UI)Monochrome embossing — every element the colour of its surround. 2019
- 22 GlassmorphismFrosted cards over saturated bloom — Big Sur's aftertaste. 2020
- 23 ClaymorphismRounded, saturated, chunky — UI as a bowl of gummy candy. 2021
- 24 Web BrutalismHTML, unadorned — Times New Roman and default blue links. ~2014
- 25 NeobrutalismBlack borders, hard shadows, primary blocks — 90s confidence. 2022–
§ 03
Movements & Eras
15 specimens
- 26 MemphisSottsass, Milano 1981 — terrazzo, squiggles, primary joy. 1981
- 27 BauhausThree primaries, three shapes, one philosophy. Weimar, 1919. 1919–33
- 28 Swiss StyleMüller-Brockmann's grid — objective, rational, flush-left. ~1950s
- 29 MinimalismThe luxury of silence — one font, one object, ninety-percent air. —
- 30 MaximalismMore fonts. More patterns. More clash. Exuberance as method. —
- 31 Y2KChrome gloss, translucent plastic, the turn-of-the-century internet. 1999–2003
- 32 VaporwaveIronic 80s nostalgia — Greek busts and ヴェイパー-pink. ~2011
- 33 CyberpunkNeon + katakana + scanlines — the rain-soaked dystopian HUD. Blade Runner
- 34 RetrofuturismWhat yesterday imagined tomorrow would look like. Pan Am. Space Age
- 35 Art DecoGold on black, sunbursts, stepped geometry — the Chrysler Building in CSS. 1920s–30s
- 36 Art NouveauMucha's vines and arches — organic ornament as structure. 1890–1910
- 37 Mid-Century ModernEames, Saarinen — mustard, teal, organic curves. 1945–65
- 38 ScandinavianNordic calm — pale wood, candlelight, and unadorned grammar. Hygge
- 39 Wabi-Sabi (侘び寂び)Asymmetry, patina, the beauty of the imperfect. 日本
- 40 EditorialDrop caps, pull quotes, column breaks — the magazine spread. —
§ 04
Patterns & Effects
10 specimens
- 41 Kinetic TypographyWords that move — type as the carrier of both meaning and motion. Motion
- 42 IsometricThirty degrees of lie — 3D rendered as flat stackable cubes. ~2018
- 43 Dark Mode UINot the inverse of light — a design discipline of its own. —
- 44 Bento UIApple keynote grids — varied cards packed like a lunchbox. 弁当
- 45 Corporate Memphis (Alegria)Long-limbed abstract humans — the house style of every SaaS landing. ~2017
- 46 Anti-DesignIntentional misalignment — rebellion against the polished grid. —
- 47 Dieter Rams 10 Principles"Less but better" — Braun's doctrine, ported to pixels. Braun
- 48 Atomic DesignBrad Frost — atoms, molecules, organisms, templates, pages. Method
- 49 GlitchBroken signals as ornament — RGB offset, scanlines, corruption. —
- 50 Holographic / IridescentConic rainbows that shift with viewing angle — sneaker-drop sheen. Foil