Projects
12
- Nexus 2 hrs ago Active
- Autowrite Studio yesterday Active
- Balance Ally 4 days ago Paused
Choose a design language, examine its interaction and adapt it to its context. Three separate decisions that together make a usable 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.
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.
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 entries12
The counter-movements. Each one breaks a modernist rule — and needs that rule as its reference point.
3 entriesProjects |
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 06The three waves screen interfaces actually went through. They explain why today's expectations look the way they do.
3 entriesThree attempts to bring depth back without returning to skeuomorphism. One of them is a case study in accessibility failure.
3 entriesWhat actually gets built in 2026. Six languages proven in real products — and the most realistic candidates for a brand of your own.
6 entriesThree 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.
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 entries12
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.
Styles that quote a specific moment. They create belonging instantly — and age fastest for exactly that reason.
3 entriesFrom the soft form through deliberate excess to a visible hand. What unites them is the argument against the anonymity of the grid.
4 entriesFour extremes that are often more useful as an ingredient than as a whole style.
4 entriesThree 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.
| Nexus | Application | 318 | +42 |
|---|---|---|---|
| Autowrite Studio | Tool | 174 | +9 |
| Balance Ally | Draft | 61 | 0 |
| Cardfile | Library | 1,093 | +205 |
| Mileage Log | Application | 27 | -3 |
| Used | 41.2 GB |
|---|---|
| Free | 58.8 GB |
| Files | 12,480 |
| Backup | 06:00 |
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 entriesOpaque content · a separate material layer for navigation and actions
Your workspace
Viewing area on the left · interaction area on the right · authored wide adaptation
Microsoft / Fluent · authored web comparison
GNOME / Adwaita · authored web comparison
KDE / Breeze · authored web comparison
IBM / Carbon · authored web comparison
No entry matches this selection.
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.
The hard parameters side by side. Numeric columns are sortable — click the header. Clicking a name opens the full entry.
| No. | Style | Radius | Contrast | Density | Depth | |||
|---|---|---|---|---|---|---|---|---|
| 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 |
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.
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”.
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.
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.
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.
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.
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 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.
Six small experiments make the effect of a decision visible. All changes stay in this session and reset when you reload.
The same content: spacing and weight change what gets read first.
Frequent inputs stay visible. Further settings appear on demand and retain their values.
Try saving through loading, failure, retry and undo.
Nexus · Draft
Ready to save.
Follow one selection across two navigation patterns: a separate detail view or list and detail side by side.
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.
Enlarge text, increase contrast and enable long labels. Watch content reflow.
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.
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.
Open a project by link and return to its overview.
The demo shows local navigation; it does not load project data.
Possible visual references, not platform approval: Swiss / International Typographic Style · Microsoft / Fluent · IBM / Carbon.
Select a project and inspect its details beside the list.
This demonstrates a split view, not native window management.
Possible visual references, not platform approval: Microsoft / Fluent · GNOME / Adwaita · KDE / Breeze.
Check a project’s status and continue with a clear back action.
The full mobile flows for every style are available on level 1.
Possible visual references, not platform approval: Samsung / One UI · Apple / Liquid Glass · Material Design 3 / Material 3 Expressive.
Switch between a narrow view and list plus detail.
The width toggle is schematic; it does not simulate a hinge or pen pressure.
Possible visual references, not platform approval: Material Design 3 / Material 3 Expressive · Samsung / One UI · GNOME / Adwaita.
Start, pause and resume a focus session.
Start and pause work; elapsed time, crown input and haptics are not simulated.
Possible visual references, not platform approval: Apple / Liquid Glass · Material Design 3 / Material 3 Expressive.
Use arrow keys or the direction buttons to select and open a programme.
The demo models directional input; actual viewing-distance legibility needs testing on a TV.
Possible visual references, not platform approval: Flat Design & Flat 2.0 · Spatial / visionOS Depth.
Switch between driving and parked states and choose an audio favourite.
Schematic web demo without a vehicle connection. Its simplified parked-state restriction does not demonstrate approval for in-car use.
Possible visual references, not platform approval: Flat Design & Flat 2.0 · Material Design 3 / Material 3 Expressive.
Compare a content window and its control layer in two arrangements.
Two-dimensional layer sketch; no simulation of gaze input, depth perception or spatial comfort.
Possible visual references, not platform approval: Spatial / visionOS Depth · Apple / Liquid Glass.