Designsprache Source on GitHub
Three levels of an interface

Appearance. Interaction. Context.

Choose a design language, examine its interaction and adapt it to its context. Three separate decisions that together make a usable interface.

Reference catalog · Designsprache

Style‑Catalog
37 ways to build the same interface

Every entry shows exactly the same interface — a project list with a header, three rows, a search field and two buttons. The only thing that changes is the design. That makes visible what a style actually decides — and what is merely taste.

37Entries
10Families
1Reference UI
8Parameters

The eight parameters

Style names are interchangeable. What actually constitutes a style are eight quantities — and every one of them is a decision you can write down as a token. Know them, and you can mix styles instead of copying them.

Radius01
From 0 px to fully round. The most underrated carrier of brand identity.0 uncompromising · 6 tool-like · 16+ friendly
Contrast02
The distance between ground and type. Decides whether an interface reads as calm or loud.Check text and controls separately
Depth03
How hierarchy is produced: not at all, through rules, through shadows, through blur, or on a real z‑axis.The most expensive parameter to run cross‑platform
Density04
Information per screen, shaped by row height, spacing and the amount of content visible at once.Bloomberg → Apple marketing
Color05
How much meaning color carries: monochrome plus an accent, flat fills, or gradients.The strongest driver of recognition
Typography06
Grotesque, serif, monospace or display — and in which weight range.The second strongest, usually chosen too timidly
Motion07
Duration and curve. The personality of an interface — and the parameter most often forgotten.0 ms · 120 ms linear · 400 ms spring with overshoot
Texture08
The character of a surface: smooth, grainy, dithered or tactile.No pattern · fine grain · visible halftone

Modernist Schools

The foundation. This is where it was decided that a grid, a primitive shape and a measure of space can carry meaning — everything later either agrees or argues with it.

3 entries
International Typographic Style · Zürich
Grid 12 columns · Base 24 px

Projects

12

NameTimeStatus
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
Column 1–9
Asymmetric type axis · separation by rule and spacing alone
01

1950-today

A modular grid carries the entire hierarchy; order comes from position, size and white space instead of decoration.

Lasting5
Distinct3
Effort3
Density4

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
square · circle · triangle
02

1919-1933, revived from c. 1960 to today

Meaning is carried by primary shape and primary color, not by ornament – circle, square and triangle are vocabulary, not decoration.

Lasting4
Distinct5
Effort4
Density3

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
03

1917-1931, influence continuing to today

The layout itself is the picture: rectangles of unequal size, separated by black bars of varying weight, balanced without symmetry.

Lasting3
Distinct5
Effort4
Density2

Postmodernism & Revolt

The counter-movements. Each one breaks a modernist rule — and needs that rule as its reference point.

3 entries

Projects

Catalog / Memphis
12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
04

1981-1988, revival from c. 2016 to today

Colors and shapes are combined for tension rather than harmony; decoration is allowed to mean nothing and has to justify nothing. The object speaks instead of serving.

Lasting2
Distinct5
Effort4
Density2
Basel → San Diego

Projects

12
  • 01 Nexus 2 hrs ago Active
  • 02 Autowrite Studio yesterday Active
  • 03 Balance Ally 4 days ago Paused
05

1968-1998, quotations and revivals to this day

The grid is not abolished but visibly broken - you have to be able to recognize the order for the violation to mean anything. Typography carries tone and volume, not only content.

Lasting3
Distinct5
Effort5
Density4

Projects

12
Nexus 2 hrs ago Active
Autowrite Studio yesterday Active
Balance Ally 4 days ago Paused

This page uses no font file, no framework, and no image. All information provided as is.

last modified: 2026-08-30   4 KB   text/html; charset=utf-8

Catalog of visual styles — entry 06
06

1993-1998 as a technical necessity, from 2014 as a deliberate stance

Add nothing the task does not need. The structure of the document is the design, and the browser's factory state is a legitimate result.

Lasting5
Distinct4
Effort1
Density4

Digital Eras

The three waves screen interfaces actually went through. They explain why today's expectations look the way they do.

3 entries

Projects

12
  • ◆ Nexus 2 hrs ago Active ›
  • ✎ Autowrite Studio yesterday Active ›
  • ◑ Balance Ally 4 days ago Paused ›
07

1984-2013 (peak 2000-2012), a niche to this day

Every control claims to be a physical object: light falls from above, edges have volume, surfaces have material. Affordance is not signaled, it is simulated.

Lasting2
Distinct5
Effort5
Density4

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
08

2010-today (Flat 1.0 2010-2015, Flat 2.0 from c. 2015)

The screen admits that it is a screen: no simulated depth, only color, typography and white space as the sole carriers of structure and meaning. Flat 2.0 takes back exactly as much depth as usability needs to stay recognizable - one shadow step, not a millimeter more.

Lasting3
Distinct2
Effort1
Density3

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
09

2014-today (M3 2021, M3 Expressive from May 2025)

A single seed color generates the entire color system algorithmically, and depth comes not from shadows but from higher surfaces moving tonally closer to the accent color. Expressive adds a second layer to that: shape and motion carry meaning, not just color.

Lasting3
Distinct4
Effort4
Density2

Soft Materiality

Three attempts to bring depth back without returning to skeuomorphism. One of them is a case study in accessibility failure.

3 entries

Projects

12
  • Nexus
    2 hrs ago
    Active
  • Autowrite Studio
    yesterday
    Active
  • Balance Ally
    4 days ago
    Paused
10

2019-2021 (peak in early 2020), a quotation style ever since

Element and background carry exactly the same color; shape comes solely from a light shadow at the top left and a dark one at the bottom right, as if the surface were extruded out of soft plastic or pressed into it.

Lasting1
Distinct5
Effort2
Density2

Projects

12
  • N
    Nexus
    2 hrs ago
    Active
  • A
    Autowrite Studio
    yesterday
    Active
  • B
    Balance Ally
    4 days ago
    Paused
11

2007 (Windows Aero) - today; web wave 2020/21, platform renaissance from 2025

Control surfaces are not paper but glass: they sit above the content, let it show through blurred and oversaturated, and mark their edge with nothing but a one-pixel refraction.

Lasting3
Distinct4
Effort4
Density2

Projects

12
  • N
    Nexus
    2 hrs ago
    Active
  • A
    Autowrite Studio
    yesterday
    Active
  • B
    Balance Ally
    4 days ago
    Paused
12

2021-2023 (peak 2022), a niche style for onboarding and consumer since then

Interface elements are thick, soft lumps of clay: very large radii, pastel solid colors, a light highlight inside at the top and a shadow inside at the bottom give them volume, and a second soft shadow lifts them off the surface.

Lasting2
Distinct4
Effort2
Density1

Product Aesthetics Today

What actually gets built in 2026. Six languages proven in real products — and the most realistic candidates for a brand of your own.

6 entries
sg / workspace ⌘K

Projects

12 AllActive
Nexus 2 hrs ago Active
Autowrite Studio yesterday Active
Balance Ally 4 days ago Paused
12 projects · 2 active sync 14:02
13

2019-today

Depth comes not from shadow but from minimally lightened layers and 1px hairlines; color is forbidden apart from a single accent, so that state and hierarchy stay readable from brightness steps and monospace metadata alone.

Lasting4
Distinct3
Effort3
Density4
Workbook August 2026

Projects

12 in archive

Three works lie open on the desk, nine rest in the archive. Everything is backed up every morning; notes, history and drafts stay with the entry they belong to.

  • 01 Nexus 2 hrs ago Active
  • 02 Autowrite Studio yesterday Active
  • 03 Balance Ally 4 days ago Paused
Last saved at 14:02
14

2012-today, dominant since ~2020

The interface passes itself off as a printed sheet: warm paper instead of pure white, a serif carries the content layer, and structure comes from white space, rules and typographic hierarchy rather than from boxes and color.

Lasting5
Distinct3
Effort3
Density2
Projects // 2026

Projects

12
N Nexus 2 hrs ago Active
A Autowrite Studio yesterday Active
B Balance Ally 4 days ago Paused
12 results
15

2014-today, commercial breakthrough from 2022

Every element declares itself a physical object: thick black outline, solid fill, one hard drop shadow with no blur - and when pressed it drops audibly into its own shadow.

Lasting2
Distinct5
Effort2
Density3
[-] ~/projects ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── [×]
❯ proj ls --all

Projects

12
├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
01 Nexus ······························································································································ 2 hrs ago Active
02 Autowrite Studio ······························································································································ yesterday Active
03 Balance Ally ······························································································································ 4 days ago Paused
/
NORMAL │ 3/12 visible │ ^N new │ ^I import UTF-8
16

1970-today (as a deliberate design style: c. 2019-today)

The character grid is the layout system: everything sits on whole-number column and row positions, and every separation is built out of text instead of graphics.

Lasting4
Distinct5
Effort2
Density4
LIVE BUILDS14 ERRORS2 P95118ms QUEUE0 UPTIME99.96% SYNC

Projects

12
Active
8+2
Paused
3±0
Archived
1−1
⌕
# Name Last Status Trend 7d Δ
01 Nexus 2 hrs ago Active +12%
02 Autowrite Studio yesterday Active +3%
03 Balance Ally 4 days ago Paused −8%
Commits / 24 h max 41
00:0006:0012:0018:0024:00
Runtime
Build avg4.2 s
Bundle218 kB
Tests312/312
Deploys27
Open2
12 ROWS │ 3 VISIBLE │ SORT: LAST ↓ │ CONNECTED REFRESH 5 s │ 14:02:37 CET
17

1982-today

Screen area is the scarcest resource, so every row of pixels has to work: values sit side by side instead of one after another, and color means direction or state and nothing else.

Lasting5
Distinct4
Effort4
Density5

Projects

12
Nexus 2 hrs ago Active
Autowrite Studio yesterday Active
Balance Ally 4 days ago Paused
18

2023-today (precursors from 2007)

Hierarchy is not colored but stacked: what matters comes closer, what does not recedes, and every surface is a light-transmitting material instead of a color.

Lasting3
Distinct4
Effort5
Density2

Norm & Constraint

Styles whose values were not chosen by a designer but set by a compliance standard, a display convention, or the physics of a screen. Here, nothing was taste.

2 entries
Beta This is a new service. Your feedback helps us improve it.

Projects

12

Select a project to change its settings.

Every measurement comes from the audit spec, not from the design: body text 19px, line heights in 5px steps, radius 0px, base 2px, focus #ffdd00 with a 4px black bottom edge.

19

2012-present

Every value in the interface is derived from an accessibility and comprehension audit rather than from composition; the one conspicuous color is not a brand mark but the keyboard focus.

Lasting5
Distinct4
Effort2
Density2
E-Ink 4-bit 16 levels No alpha 82%

Projects

Recently opened 12
Nexus 2 hrs ago Active
Autowrite Studio yesterday Active
Balance Ally 4 days ago Paused
Full text
Full refresh 480 ms Page 1 / 4
Gray wedge 16
20

2004-today

Contrast is not a design device but a capped resource: when ink never goes black and ground never goes white, and there is no color, no transparency and no motion, the whole hierarchy has to come out of size, weight, shape, fill level and inversion - and every halftone out of a dither grid instead of an alpha value.

Lasting4
Distinct3
Effort2
Density2

Nostalgia & Subculture

Styles that quote a specific moment. They create belonging instantly — and age fastest for exactly that reason.

3 entries

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
21

1998-2013 (Y2K 1998-2004, Frutiger Aero 2004-2013), revival since 2022

Technology humanized by nature and light: every surface is a wet, lit object you want to touch. Gloss is not decoration but the claim that the future will be friendly.

Lasting1
Distinct5
Effort5
Density3

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
22

2010-today (core phase 2011-2018), models 1982-1989

Nostalgia for a future that never arrived: a neon horizon with a vanishing point you drive toward forever, plus the visible faults of the medium carrying it.

Lasting2
Distinct5
Effort4
Density3
SYS 04 CH-7 REC 0032

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
23

1968-1982 (models), revived as a design language since about 2012

The future as used industrial equipment: an interface is a labeled machine with a housing, a channel number and hazard stripes -- not a floating surface but a thing somebody works on.

Lasting4
Distinct4
Effort3
Density4

Expression & Gesture

From the soft form through deliberate excess to a visible hand. What unites them is the argument against the anonymity of the grid.

4 entries

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
24

2017-today (peak 2019-2021), precursors from the 1930s

Nothing in the layout is right-angled or symmetrical: every surface gets a slightly different, irregular radius so the interface reads as grown rather than constructed. Color and form simulate nature - earth, leaf, stone - to translate digital rigor into calm.

Lasting2
Distinct4
Effort3
Density2

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
25

Roots 1954-1996, digital wave 2020-today

Overload as a stance: instead of taking elements away, they are layered, rotated, framed and allowed to collide until the surface has a personality. Order does not come from white space but from managing contrast inside the chaos.

Lasting2
Distinct5
Effort5
Density5

Projects

12
  • Nexus 2 hrs ago Active
  • Autowrite Studio yesterday Active
  • Balance Ally 4 days ago Paused
26

2018-today (peak from 2023)

A dark, near-black ground carries two to five large, heavily blurred color fields that read like light behind frosted glass; on top sits deliberately minimal typography and a fine system of hairline rules. The mood comes entirely from the background, not from the components.

Lasting3
Distinct1
Effort2
Density1
Draft Test the idea, not pixels

Projects

12
01 Nexus 2 hrs ago Active
02 Autowrite Studio yesterday Active
03 Balance Ally 4 days ago Paused
27

2008-present

Edge geometry is generated per element instead of declared, and area coverage comes from line spacing instead of opacity; the visible unfinishedness is no defect but an invitation to argue about the idea instead of the pixels.

Lasting4
Distinct5
Effort3
Density2

Further Poles

Four extremes that are often more useful as an ingredient than as a whole style.

4 entries
Catalog of works Issue II  ·  Page 1

Projects

Entries 12

Three works are currently in composition. Two of them are running and one rests — the catalog lists them in the order of their last revision and records where the week stands.

  • I Nexus 2 hrs ago
    ■Active
  • II Autowrite Studio yesterday
    ■Active
  • III Balance Ally 4 days ago
    □Paused
Index
❧
28

1920s (print) - web adaptation from c. 2010, current

Hierarchy comes out of typeface, tracking and white space -- not out of boxes, shadows or color fields. The screen is treated as a paper page with a type area.

Lasting5
Distinct4
Effort3
Density3

Projects

12 _ □ X
  • Nexus 2 hrs ago
    Active
  • Autowrite Studio yesterday
    Active
  • Balance Ally 4 days ago
    Paused
>
READY 3 / 12 v0.8
29

1983-1995 (origin) - revival from c. 2008, current

Everything snaps to a visible pixel grid: hard edges, integer sizes, a limited palette. Softness of any kind -- gradient, blur, antialiasing, in-between values -- breaks the style.

Lasting3
Distinct5
Effort3
Density4

Projects

★12
Weekly goal8 / 12
  • ● Nexus 2 hrs ago Active
  • ✎ Autowrite Studio yesterday Active
  • ☰ Balance Ally 4 days ago Paused
30

c. 2015-today, peak from 2019

Every control is a physical object with thickness: it has a visible bottom edge, can be pressed in and springs back. Color and rounding say 'harmless, keep going'.

Lasting2
Distinct4
Effort2
Density2
Project IndexDirectory of all working states
HomeWorkspaceProjects

Projects

12 NEW by activity
1 Nexus 2 hrs ago Active
2 Autowrite Studio yesterday Active
3 Balance Ally 4 days ago Paused
Import from a folder, an archive or an outside system.
Last import on 08/24/2026.
Activity 7 days
NexusApplication318+42
Autowrite StudioTool174+9
Balance AllyDraft610
CardfileLibrary1,093+205
Mileage LogApplication27-3
Open tasks 23
Notices
Most opened
Storage
Used41.2 GB
Free58.8 GB
Files12,480
Backup06:00
Recently opened
Project Index — internal working state, as of 08/30/2026
31

1996-present

Color encodes taxonomy instead of semantics: a numbered chain of equal-rank category colors sits on the boxes as a 3px top bar, none of them is a lead color and none means a state - hierarchy comes solely from bold, 1px rules and one jump in type size.

Lasting4
Distinct4
Effort3
Density5

Platform Languages

Design shaped by platforms and design systems: Apple, Samsung, Microsoft, GNOME, KDE and IBM. The demos apply their hierarchies to the same project list.

6 entries
Workspace

Projects

12
  • Nexus2 hrs agoActive
  • Autowrite StudioyesterdayActive
  • Balance Ally4 days agoPaused

Opaque content · a separate material layer for navigation and actions

32

2025–present; introduced June 9, 2025

Controls occupy a distinct material layer above content. Glass identifies navigation and actions; the project list remains a quiet, opaque reading surface.

Lasting3
Distinct4
Effort4
Density2

Your workspace

Projects

12
  • Nexus2 hrs agoActive
  • Autowrite StudioyesterdayActive
  • Balance Ally4 days agoPaused

Viewing area on the left · interaction area on the right · authored wide adaptation

33

2018–present; focused here on viewing and interaction areas

Read first, then act comfortably: a quiet viewing area gives the title space, while related tasks sit in reachable focus blocks.

Lasting4
Distinct3
Effort3
Density2

Projects

12
  • Nexus2 hrs agoActive
  • Autowrite StudioyesterdayActive
  • Balance Ally4 days agoPaused

Microsoft / Fluent · authored web comparison

34

Contemporary design system · authored web adaptation

Quiet material layers and a clear command bar distinguish navigation, content and actions.

Lasting4
Distinct3
Effort3
Density4

Projects

12
  • Nexus2 hrs agoActive
  • Autowrite StudioyesterdayActive
  • Balance Ally4 days agoPaused

GNOME / Adwaita · authored web comparison

35

Contemporary design system · authored web adaptation

A focused window gathers a few main actions in its header and related content in a quiet list.

Lasting4
Distinct3
Effort2
Density3
Workspace / Projects

Projects

12
  • Nexus2 hrs agoActive
  • Autowrite StudioyesterdayActive
  • Balance Ally4 days agoPaused

KDE / Breeze · authored web comparison

36

Contemporary design system · authored web adaptation

A simple initial view leads to powerful tools while retaining orientation and adaptable workspaces.

Lasting4
Distinct3
Effort3
Density5
Workspace

Projects

12
  • NameUpdatedStatus
  • Nexus2 hrs agoActive
  • Autowrite StudioyesterdayActive
  • Balance Ally4 days agoPaused

IBM / Carbon · authored web comparison

37

Contemporary design system · authored web adaptation

A strict grid and precise typography make substantial workflows manageable and data easy to compare.

Lasting4
Distinct3
Effort3
Density5
Decision grid

Longevity versus recognisability

The two pull against each other: what is instantly recognisable usually ages faster. All values are integers from 1 to 5, so this is a grid rather than a scatter plot — entries sharing a position do not hide each other here.

All 37 compared

The hard parameters side by side. Numeric columns are sortable — click the header. Clicking a name opens the full entry.

No.StyleRadiusContrastDensityDepth
01 Modernist Schools 0px very high airy none; separation exclusively through 1px rules, spacing and alignment 5 3 3
02 Modernist Schools 0px or 50% very high medium no real depth; layering through overlapping fills and hard offset shadows (5px, 0 blur) 4 5 4
03 Modernist Schools 0px very high medium none; order comes exclusively from the weight of the black bars 3 5 4
04 Postmodernism & Revolt deliberately mixed: 0px, 999px and asymmetric combinations side by side high medium no real depth; layers come from hard offset shadows (0 blur) and rotation, not from light 2 5 4
05 Postmodernism & Revolt 0px, without exception very high dense no shadows; depth comes from overlay, transparent echoes and cropping at the edge 3 5 5
06 Postmodernism & Revolt 0px very high (black on white, 21:1) - apart from the system grays of the widgets dense none; separation comes solely from 1px rules, table grids and blank lines 5 4 1
07 Digital Eras 6-12px (buttons 5-6px, icon tiles 9-10px, search field as a 15px pill) medium dense simulated to the maximum: bevel + emboss, inset and drop shadow at once, 3-5 box-shadow layers per element 2 5 5
08 Digital Eras 0px (1.0) or 4-6px (2.0) high medium to airy - large type, large color fields, few elements per screen none; separation via color fill, 4px gaps and 1px rules. Flat 2.0 adds exactly one shadow step plus a 1px border as the container marker 3 2 1
09 Digital Eras 4 / 8 / 12 / 16 / 28 / full - and in Expressive animated between those steps high medium to airy - large radii and 48dp targets force air tonal: every level is its own surface-container step. Shadows only on the FAB and floating elements 3 4 4
10 Soft Materiality 20-34px on surfaces and cards, 999px on pills and input fields low airy Pseudo-relief from two opposing shadows on the same base color; extruded (outset) vs. pressed in (inset), nothing in between 1 5 2
11 Soft Materiality 18-30px on surfaces, 999px on pills, fields and action bars low to medium, and above all: not constant airy Real layering: every layer blurs the one below; plus a wide, deep drop shadow and a light inner edge as a bevel 3 4 4
12 Soft Materiality 26-46px on surfaces, 999px on pills and fields, 20px on small tiles medium very airy Volume from an inset highlight at the top plus an inset shadow at the bottom; lift from two soft, colored outer shadows -- unlike neumorphism, real stackable layers 2 4 2
13 Product Aesthetics Today 6-8px controls, 10-12px containers high dense Layer ladder of minimally lighter surfaces plus 1px hairlines; glow only on primary actions 4 3 3
14 Product Aesthetics Today 8-14px on surfaces, 0px on fields and dividers high airy barely present: one soft warm drop shadow lifts the sheet off the ground, inside it only rules separate 5 3 3
15 Product Aesthetics Today 0-4px, exceptions only 50% and 9999px very high medium Exclusively hard offset shadows with no blur; depth is asserted as distance, not simulated as light 2 5 2
16 Product Aesthetics Today 0px, without exception very high dense none; separation exclusively through 1px hairlines and box-drawing characters 4 5 2
17 Product Aesthetics Today 0-1px high very dense no z-depth; layers come from background tones 2-4% apart and from hairline grids 5 4 4
18 Product Aesthetics Today 22px cards, 44px windows, 999px pills medium airy Real z-order: backplate, window layer, cards, ornament in front - carried by blur, rim light and a three-stage ambient shadow 3 4 5
19 Norm & Constraint 0px throughout - buttons, fields, tags, status bars; not one component gets an exception very high - #0b0c0c on #ffffff is roughly 19.6:1; gray is ruled out as a body-text color and admitted only for rules airy - one decision per screen as a layout law; a 19px base and the 5px grid force large block spacing 2px solid base under controls plus 5px/10px solid bars on blocks and the page head; depth is proof of affordance, not atmosphere 5 4 2
20 Norm & Constraint 0px without exception, 2px at most on buttons Demo palette: #2B2B2B on #E4E2DD gives about 10.9:1; physical panel contrast depends on the device and lighting airy and latency-driven: 68px rows, 22px insets, pagination instead of scrolling none in this demo; 2px rules separate content on one plane, with alpha and shadows deliberately avoided 4 3 2
21 Nostalgia & Subculture 12-20px on containers, 999px on buttons/pills, 18px on the window frame medium medium very strong: bevel (inset highlight above, inset shadow below) + drop shadow + backdrop blur + reflection; three layers at once 1 5 5
22 Nostalgia & Subculture 0-4px on panels and buttons, 50% only on the sun high for neon on black (cyan #01CDFE on #0B0121 approx. 11:1), low for anything running through aberration or scanlines medium no shadows but glow: offsetless box-shadows and inset glows; depth additionally comes from the perspective of the floor grid 2 5 4
23 Nostalgia & Subculture 0-3px on surfaces, 12px only on keys; corners are chamfered by 20px instead high dense no soft shadows: depth comes from housing-within-housing staging, 1px chamfer edges, inset black on the screen and hard plinth shadows on the keys 4 4 3
24 Expression & Gesture irregular, in percent: 34-66% per corner, re-rolled for every element medium airy very soft, color-tinted shadows plus overlapping blob layers; no hard edges 2 4 3
25 Expression & Gesture 0px on surfaces; only stickers and the counter are round (50%) very high very dense hard offset shadows without blur plus real overlap via z-index - depth as collage, not as light 2 5 5
26 Expression & Gesture 10-12px on surfaces, 999px on pills high on text, very low on anything structural very airy no drop shadows; depth comes from blur layers, glass fills and colored glows 3 1 2
27 Expression & Gesture Irregular, different per corner and per axis; Bootswatch quartets such as 255px 25px 225px 25px / 25px 225px 25px 255px, varied slightly per element high medium - 20-24px of air between two outlines, because the outline itself already claims space none - the sheet is flat, the card does not float above the paper, it is drawn onto the paper 4 5 3
28 Further Poles 0px, without exception very high medium to dense none; order through rules, indents and column edges 5 4 3
29 Further Poles 0px, without exception high dense hard bevel edges (2px light/dark) plus an offset solid drop shadow -- depth as drawing, not as light 3 5 3
30 Further Poles 15-24px on surfaces, 999px on pills and bars medium airy a hard color base under every object (0 4-6px 0, blur 0) plus inner shadows in filled tiles -- depth as material thickness, not as a light source 2 4 2
31 Further Poles 0-4px, dominant 2-3px; 5px only on the search bar medium, deliberately not maximized - #333 on #fff and #f5f5f5, rules in #ddd very dense; fixed centered column of 950-1220px, rows with padding:3-4px 8px and line-height 1.4-1.5 sparing and hard: one or two 1px inner shadows on the input field, a flat vertical gradient on the button, otherwise 1px rules do the separating - nothing grades softly 4 4 3
32 Platform Languages Demo: 28px window, 22px mobile content group, 999px action surfaces; not Apple token specifications. Opaque reading surfaces; material contrast depends on the backdrop and needs separate testing. Airy: one clear content focus, separated rows and few simultaneous actions. Content beneath a distinct control layer; the demo uses optional blur, inner highlights and soft shadows. 3 4 4
33 Platform Languages Demo: 24px outer list-group corners and 999px search/action corners; not a Samsung token specification. Dark text on opaque light surfaces; status and focus require separate testing. Airy in the viewing area, grouped and more compact in the interaction area. Surfaces group content; this demo does not require shadows to establish hierarchy. 4 3 3
34 Platform Languages Demo: 4px; see markers for component variations. Dark text on opaque light surfaces; focus and states are separate roles. Compact navigation, roomier content; desktop rows at least 64px. Grouping through surfaces and 1px boundaries. 4 3 3
35 Platform Languages Demo: 12px; see markers for component variations. Dark text on opaque light surfaces; focus and states are separate roles. Bounded reading width, few actions and desktop rows at least 64px high. Grouping through surfaces and 1px boundaries. 4 3 2
36 Platform Languages Demo: 3px; see markers for component variations. Dark text on opaque light surfaces; focus and states are separate roles. Tool-oriented density with desktop rows at least 48px and actions at least 36px high. Grouping through surfaces and 1px boundaries. 4 3 3
37 Platform Languages Demo: 0; see markers for component variations. Dark text on opaque light surfaces; focus and states are separate roles. Compact table; desktop rows at least 48px, names 16px, metadata 14px. Grouping through surfaces and 1px boundaries. 4 3 3
Where to go from here

From catalog to a language of your own

A catalog is not a decision. Three things are more useful while browsing than the question “which one do I like” — because you will answer that differently in five years.

Brands are hybrids

No strong product wears a pure style. Linear is a Swiss grid plus dark mode plus terminal density. Notion is warm editorial plus flat. Stripe is Swiss plus aurora. A pure style reads as a costume; a blend of two families with one clear dominant voice reads as a position. Every entry lists the workable pairings under “Combines with”.

Longevity beats impact

For a kit meant to carry many apps over years, longevity is worth more than shock value. A style scoring 5 on recognisability and 1 on longevity may need a redesign sooner, potentially across several projects at once. The grid above makes that trade visible.

The style sets your costs

Flat fills, radius and typography generate cleanly from tokens into CSS, Compose and SwiftUI. Blur, layered gradients and materials need platform-specific renderers and fallbacks, though tokens can describe parts of them too. The extra work depends on target platforms and existing components; Tauri reuses the web implementation.

All 37 desktop style demos are hand-built HTML and CSS — no images, no scripts, no libraries. Each shows the same thirteen pieces of text. Type comes from Google Fonts or, where the style demands it, from the system stack; style names and families are editorial categories. Fact sheets describe both influences and concrete demo choices; their values are not permanent product specifications. Linked sources support the named topic, not the entire fact sheet. The four scores are editorial judgments, not measurements.

In practice

From a style to a usable interface

The desktop demos are fixed comparisons designed at 780 px in HTML and CSS. Smartphone adaptations reflow up to 390 px wide and show a list, detail and form. Controls stay inactive in the cards; open a fact sheet to try the mobile flow. A finished product also needs its actual content and states.

One main voice, explicit roles

Choose a base style and at most one supporting influence. Define roles for background, text, accent, border and focus first. Then document the eight parameters. A color value alone does not tell you which surfaces it will be readable on.

Design the difficult state

Check long names, empty lists, loading, errors and disabled actions. Test narrow windows and enlarged text. Scaling the whole demo helps compare styles; in a product, text, reading order and controls need to reflow to fit the available space.

Check accessibility in context

Check keyboard operation, visible focus and status messages with text. WCAG 2.2 AA requires at least 4.5:1 for normal text and 3:1 for large text. Small metadata is not exempt. Test translucent surfaces against their least favorable background and offer an opaque variant.

Further reading: Text contrast · Text resizing · Target sizes and exceptions. Style and finder scores are editorial judgments, not a WCAG audit. The finder percentage describes the match against answered preferences only; “no preference” is not scored.

02 · Interaction

Principles to try

Six small experiments make the effect of a decision visible. All changes stay in this session and reset when you reload.

01 / 06

Hierarchy & grouping

The same content: spacing and weight change what gets read first.

Project overview

NexusActiveLast updated: today
Balance AllyPausedLast updated: yesterday

Carbon · Typography

02 / 06

Progressive disclosure

Frequent inputs stay visible. Further settings appear on demand and retain their values.

Advanced settings

Changes apply only to this example.

KDE · Simple by default

03 / 06

Feedback & recovery

Try saving through loading, failure, retry and undo.

Nexus · Draft

Ready to save.

Nielsen · Usability heuristics

04 / 06

Orientation & navigation

Follow one selection across two navigation patterns: a separate detail view or list and detail side by side.

Android · List-detail

05 / 06

Adaptation & input

Change layout width and control size independently. The task and selection remain intact.

Every variant supports keyboard and touch. The toggle changes presentation, not available input.

GNOME · Pointer & touch

06 / 06

Inclusive presentation

Enlarge text, increase contrast and enable long labels. Watch content reflow.

Nexus

A shared home for projects.

The system’s reduced-motion preference takes priority. These controls illustrate individual requirements and do not replace a full accessibility audit.

W3C · Resize text

03 · Use

Context changes the task

Device form, attention and input determine how much an interface should do at once. Each example shows a suitable task in a neutral visual language.

01 / 08 · Links, history, changing windows

Web

Open a project by link and return to its overview.

  • URLs and back navigation establish orientation.
  • Layouts reflow with available width.
  • Keyboard and touch remain usable alternatives.

The demo shows local navigation; it does not load project data.

Connections to the other levels

Possible visual references, not platform approval: Swiss / International Typographic Style · Microsoft / Fluent · IBM / Carbon.

Try the related interaction principle

MDN: History API

03 / 08 · Touch, limited space, interruptions

Smartphone

Check a project’s status and continue with a clear back action.

  • One main task per view supports short sessions.
  • Important actions stay labeled and reachable.
  • On-screen keyboards, large text and landscape need space.

The full mobile flows for every style are available on level 1.

Connections to the other levels

Possible visual references, not platform approval: Samsung / One UI · Apple / Liquid Glass · Material Design 3 / Material 3 Expressive.

Try the related interaction principle

Samsung: Layout

04 / 08 · Touch meets multiple panes

Tablet & foldable

Switch between a narrow view and list plus detail.

  • Available window width determines the number of panes.
  • Selection survives a layout change.
  • Check folds, pen input and external keyboards separately.

The width toggle is schematic; it does not simulate a hinge or pen pressure.

Connections to the other levels

Possible visual references, not platform approval: Material Design 3 / Material 3 Expressive · Samsung / One UI · GNOME / Adwaita.

Try the related interaction principle

Android: List-detail layouts

05 / 08 · One glance, one brief action

Smartwatch

Start, pause and resume a focus session.

  • Show one essential piece of information first.
  • Brief actions replace lengthy forms.
  • Crown, voice and haptics complement touch on supported devices.

Start and pause work; elapsed time, crown input and haptics are not simulated.

Connections to the other levels

Possible visual references, not platform approval: Apple / Liquid Glass · Material Design 3 / Material 3 Expressive.

Try the related interaction principle

Apple: Designing for watchOS

06 / 08 · Distance and visible focus

TV & remote

Use arrow keys or the direction buttons to select and open a programme.

  • Focus must be clear from a distance.
  • Directional navigation follows a predictable order.
  • A visible back action exits details.

The demo models directional input; actual viewing-distance legibility needs testing on a TV.

Connections to the other levels

Possible visual references, not platform approval: Flat Design & Flat 2.0 · Spatial / visionOS Depth.

Try the related interaction principle

Android TV: Navigation

07 / 08 · Brief glances, interruptible tasks

Car

Switch between driving and parked states and choose an audio favourite.

  • Driving determines the available attention.
  • Interactions must remain interruptible.
  • Approved platform templates determine product scope.

Schematic web demo without a vehicle connection. Its simplified parked-state restriction does not demonstrate approval for in-car use.

Connections to the other levels

Possible visual references, not platform approval: Flat Design & Flat 2.0 · Material Design 3 / Material 3 Expressive.

Try the related interaction principle

Google: Driving interaction principles

08 / 08 · Space, comfort, gaze and hands

Spatial applications / XR

Compare a content window and its control layer in two arrangements.

  • Comfort and the real environment guide placement.
  • Content and controls occupy recognizable layers.
  • Gaze, hands and alternative inputs need dedicated tests.

Two-dimensional layer sketch; no simulation of gaze input, depth perception or spatial comfort.

Connections to the other levels

Possible visual references, not platform approval: Spatial / visionOS Depth · Apple / Liquid Glass.

Try the related interaction principle

Apple: Design great visionOS apps