A searchable catalog of aesthetic visual directions for web interfaces, each documented with a live specimen, a copyable agent prompt, and a copyable Markdown specification.
MinimalistStart free
Reduction, then amplification
Reduces an interface to what is functionally necessary, then amplifies what survives: dramatic typography and wide negative space carry the hierarchy on a flat, near-monochrome surface.
Start freeRead the docs
01
Reduction, then amplification
An element is removed only if the interface reads better without it — and whatever remains must grow to carry the load, because nothing else is left to carry it.
02
Typography as the primary instrument
Type is the main expressive surface. Restraint governs how many typographic decisions are made, never how forceful they are.
03
Negative space as structure
Space separates and groups content in place of borders, boxes, and dividers. It is an active component, not leftover margin — the Japanese sense of ma, where the interval between elements is itself part of the composition.
Team
$18/ month
Dramatic typography: a display size several times the body size, set with real weight, doing the hierarchical work that colour and ornament are not permitted to do.
19:00Structure over polishGrid lines, boundaries, and containers are shown, not hidden.HALL A
20:30Honest materialsDefault or near-default browser affordances are used deliberately rather than smoothed away, and the interface behaves the way the browser already behaves.ANNEXE
22:00Confrontational hierarchyContrast — in scale, weight, and colour — is dramatic rather than subtle.HALL A
23:30Deliberate rawnessEvery rough edge is a considered decision, not an omission.YARD
Catalog entry 02
Brutalist
expressive
Tags: brutalism · raw · monospace · high-contrast
Editorial
editorial
Typographic hierarchy as structure
Type contrast, not colour or containers, is the primary organizing device.
Marguerite Sandoval14 March 20269 min read
Fig. 1 — A column grid holding its measure across a spread.Plate: the author
Editorial is a web-interface design style modelled on print-publication design. It builds a clear typographic hierarchy from a serif-and-sans (or comparably contrasting) type pairing, structures content on a considered reading grid, treats imagery as narrative content rather than decoration, and paces dense and open sections deliberately, producing an interface that reads as authored rather than assembled.
A serif (or otherwise distinctive) display typeface for headlines, paired with a clearly contrasting sans-serif for body and interface text.
A defined column grid with controlled line length for body copy, and a vertical rhythm derived from the body line-height.
The furniture of a published article: a kicker above the headline, a deck below it set one size down and often italic or lighter, and a byline naming the author.
Captions or credit lines set visually apart from body copy, adjacent to their images.
More from this series
02Grid-based compositionContent is set on a considered column and measure system borrowed from print layout, with a baseline rhythm holding it vertically.
03Imagery as contentImages are captioned, art-directed, and integrated into the narrative, not used as generic decoration.
04Restrained colour in service of legibilityColour supports reading; it does not compete with it.
A visible underlying modular structure, with content blocks starting and ending on both column edges and row lines.
ZeitLinieRichtungGleis
06:12S4The grid precedes the compositionColumns, rows, gutters, and a baseline unit are defined before any element is placed, and everything resolves to them.3
06:18S9The designer is absentPresentation is objective and impersonal; nothing on the page is a signature, and the structure is what the reader perceives rather than a personality.7
06:24IC1One typographic voiceA single neutral sans-serif family expresses every level of hierarchy; contrast comes from scale, weight, and position, not from a second family.1
06:31S12Hierarchy without colourReading order survives in grayscale because size and position, not hue, establish emphasis.3
06:40RE7Asymmetry as structureBalance is achieved through deliberate unequal distribution across the grid rather than through centering.11
Catalog entry 04
Swiss
reductive
Tags: grid · typography · sans-serif · system · asymmetric
Atelier MaximalistFW26
MOREISMORE
Lookbook
Five or more saturated colors present simultaneously.
01
Abundance is designed, not accumulated
The palette, the layers, and the typographic range are decided in advance rather than arrived at by addition.
02
Ordered chaos
Density is deliberate and so is the path through it: first, second, and third are decided by the designer, not left to the viewer.
03
Depth through overlap
Elements cross one another; proximity alone produces crowding, not layering.
04
Extreme typographic range
Contrast between the largest and smallest text is dramatic, and multiple families with distinct character coexist.
Translucent panels with a visibly blurred background showing through.
Total balance$12,480.55SendRequest
The background is the materialThe effect is produced by what shows through the glass, so the background carries as much design weight as the panels.+ 1,204.00
Translucency carries context, not just orderA front surface reveals a blurred version of what sits behind it, so the reader learns both the depth of the stack and what the panel is covering. This is the functional property that distinguishes the style from an imitated material.− 86.40
Light defines the edgeA single thin bright border reads as the cut of the glass and keeps the panel from dissolving into its surroundings.+ 320.15
Catalog entry 06
Glassmorphism
material
Tags: glassmorphism · translucency · blur · depth
MAKE / NeubrutalismPublish projectCreative workspace
Make work visible.
Thick dark outlines on every distinct object, including images and inputs.
Start a board →01
Outline defines the object
A thick dark border, not a background change, is what makes a block read as a distinct shape.
02
Shadow is structure, not light
Offsets are hard and unblurred, describing displacement rather than illumination.
03
Flat saturated color
Variety comes from adding colors, never from softening them into gradients or tints.
04
Deliberate imbalance
Small, intentional misalignments make the composition read as hand-placed.
Technical Blueprint is a web-interface design style that presents an interface as an engineering document. Hairline guides, uppercase monospaced micro-labels, a visible coordinate or tick system, line-drawn illustration, and a palette of two neutrals plus one accent combine to produce a register of precision and measurement. Because the style is built from labels and figures, it carries a specific obligation: ornament must never present itself as data.
concept view — not a specification
The drawing is the metaphor
Guides, ticks, and labels behave like annotation on a technical drawing rather than like interface chrome.
Ornament is quiet, information is loud
Structural marks sit below text in contrast; anything readable is meant to be read.
Measurement is visible
A coordinate system, index, or scale establishes the register more than any other single element.
Catalog entry 12
Technical Blueprint
reductive
Tags: blueprint · monospace · diagrammatic · technical grid · line art
FIELD NOTES / HandcraftedROUTE 07 · NORTH LOOP
A hand-drawn route journal
Follow the quiet line.
Handcrafted is a web-interface style that makes human authorship visible through purposeful hand-drawn marks, tactile material cues, and small authored irregularities over a disciplined structure. A route, annotation, or signature can feel placed by a person; essential information and interaction mechanisms remain regular and dependable.
illustrative route
START / 08:10RIDGE / 12:40↗
Stops along the line5 marks · 18.4 km sample
01
Authored imperfection
Irregularity is a deliberate visual decision, not a rendering error.
02
A mark has a job
A stroke, note, or texture clarifies a route, identity, or emphasis.
03
Structure before deviation
A grid makes the breaks feel intentional.
Catalog entry 13
Handcrafted
expressive
Tags: hand-drawn · handmade · analog · illustration · human-touch
LUMA / Dark Modeworkspace / runs / 042LC
COMMAND PALETTEAnalyze selected run⌘ K
RUN 042 / SAMPLE TELEMETRY
Signal health is stable.
Dark Mode is a complete interface appearance built on a dark neutral ground. It uses a stepped luminance system for elevation, softened text, mode-aware accents, and intact content imagery. It is not a light interface with colors inverted.
All services nominalupdated 18s ago
LATENCY / MS42 ms p95
01
Darkness is a surface system
Base, workbench, elevated, and focused surfaces have deliberate relationships.
READY02
Elevation is luminance
Raised layers become lighter; shadow is supporting detail, not the separator.
99.8%03
Color is semantic
Accents and states are rebuilt for the dark ground and named by role.
Barely-There UI is a low-chrome interface style that reduces visual weight rather than useful content. Light typography, generous whitespace, a restrained hue family, and low-emphasis static boundaries give real data the lead. It is not invisibility: controls, labels, status, and focus remain discoverable.
Run analysis↗
SYNTHESIS / 04 AUG — 11 AUGsample result
The signal is holding steady while two quiet changes gather underneath.
Quiet the treatment, not the meaning+12.4%week over week
Retrowave is a web-interface design style that renders the future as imagined in the 1980s. A perspective grid recedes toward a horizon, a sunset gradient runs through magenta and orange, neon glow radiates against a near-black ground, and display typography is chromed, extruded, or outlined. The style depends structurally on darkness, since neon is emitted light, and it confines its glow to headlines and ornament so that reading text remains legible.
Listen to the releaseView tracklist
NIGHT DRIVE / 04:20
NEON HORIZON
RELEASE 042OUTRUN / 198X
01
A synthetic landscape
The composition depicts a place — grid, horizon, sun — rather than arranging abstract shapes.
04:2002
Emitted light, not cast shadow
Glow radiates evenly from the element; nothing falls to one side.
03:4803
Darkness is structural
The direction ceases to function on a pale background.
05:12
Catalog entry 16
Retrowave
retro
Tags: retrowave · neon · retro-futurism
CUT / CollageIssue 08ArchiveContributorsFREEFORM INDEX
VISUAL CULTURE / FIELD NOTE
Make room for the fragments.
Collage is a web-interface design style that assembles a composition from visibly heterogeneous fragments — photographic cutouts, illustration, treated type, texture — layered at clashing scales and angles with their seams left exposed. Nothing is blended between materials. Because fragment surfaces are visually unpredictable, running text is placed on its own clean ground rather than over the assembly.
Open the current issue ↗
SUN / 01LOOK AGAINCUTTHE SEAMFOUND / REFRAMED
THIS ISSUE / THREE WAYS INASSEMBLY ORDER →
01
The seam is the subject
Boundaries between materials are shown, never smoothed.
CUT / IMAGE02
Scale is dislocated deliberately
Mismatched proportions produce the surreal quality that defines the style.
CUT / TYPE03
Layering is ordered
Fragments cross one another in a stated front-to-back sequence.
CUT / OBJECT
Catalog entry 17
Collage
expressive
Tags: collage · cut-paper · layering
ARCHIVE / ConstructivistPostersPeopleMethodsK-26
EXHIBITION 04 / GRAPHIC CONSTRUCTION
Build the message.
Constructivist is a web-interface design style organized around a strong diagonal axis, in which primitive geometric shapes act as structural mass, the palette is restricted to black, white, and one saturated primary, and visual weight is deliberately loaded to one side. Elements bleed past the frame rather than being contained by it. The resulting register is urgent and assertive rather than neutral.
Enter the archive ↗
FORM / FORCE / FUNCTION
SELECTED WORKSTHE POSTER AS DEVICE
01
The diagonal is the structure
A steep axis organizes the composition; everything else relates to it.
02
Geometry carries mass
Circles, triangles, and bars are structural elements, not accents.
03
Severity of palette
Three colors, one of which is a single saturated primary.
READ / 04
One dominant diagonal between roughly fifteen and forty-five degrees.
→
Catalog entry 18
Constructivist
expressive
Tags: constructivism · diagonal · geometric
AE / Vaporwavearchivesignalsaboutonline / 1994
A SYNTHETIC RELEASE ARCHIVE
sounds from a softer future
Vaporwave is a web-interface style assembled from discarded consumer-digital material: washed magenta and cyan, obsolete interface chrome, classical forms, and visible image artifacts. In this specimen it becomes a synthetic electronic release archive whose calm, centered structure makes the memory layer useful rather than noisy.
ARCHIVE.EXE / RELEASE FIELD_ □ ×
CURRENT SIGNALAE / 1994—95The catalogue is illustrative.
A small memory system for copied tapes, soft machines, and the places between one signal and the next.
ROOMS DINING VISITA BOUTIQUE HOUSE FOR THE MACHINE AGE
Stay in good form.
Art Deco is a web-interface style built on strict axial symmetry and exact geometry: stepped and radiating motifs, restrained metallic accents over a deep ground, formal display capitals, and grouped rules. In this specimen it frames a synthetic boutique-hotel experience so ornament and hospitality information share one precise hierarchy.
ARRIVE14 OCT 2026
DEPART17 OCT 2026
ROOMS01 / TWO GUESTS
VIEW THE HOUSE →
THE ROOMSTHREE WAYS TO STAY
I
The Meridian Suite
A high room for slow mornings, brass light, and a view across the imagined city.
KING / 48 M²II
The Radio Room
A compact retreat with lacquered surfaces and a listening alcove.
QUEEN / 32 M²III
The Palm Salon
A generous corner room for late dinners and long geometric shadows.
Anti-Design is a web-interface style that deliberately subverts polished interface conventions: colors clash, secondary typography becomes uncomfortable, hierarchy is inverted, and alignment is refused. In this specimen it becomes an experimental creative-studio portfolio. The stance is legible because the studio’s identity, project index, and contact path remain intact; access conditions are never treated as decoration.
NOBRIEFTHE CAPTION IS BIGGER BECAUSE IT SAID SO
SELECTED WORK / 03CONVENTION REFUSED: SHARED COLUMNS
A—01
LOUD QUIET
A visual identity that refuses the neat launch story.
CAPTION > TITLEA—02
ROOM TONE
An editorial object built from misregistered voices.
SHARED COLUMN REFUSEDA—03
NO NORMAL
A poster system for a festival that has not happened.
ORDER / REARRANGEDCALM ZONE / CONTACT PATH
Tell us the strange part.
Studio conversations, commissions, and useful misreadings all begin here.
MEMPHIS / MemphisSYNTHETIC ARCHIVE · OBJECTS IN PLAY
Design exhibition / visual index
Form as argument.
Scatters flat primitive shapes, squiggles, and confetti pattern in colors that refuse to harmonize, producing cheerful, weightless visual noise.
read the marks / keep the order
OBJECT FIELD / 01FLAT / LOUD / CLEAR
Archive indexThree principles / synthetic entries
01
Symbolic geometry
Primitive shapes behave like authored marks and objects, not generic decoration.
INDEXED / OPEN
02
Deliberate disharmony
Saturated colors meet without being softened into a harmonious palette.
INDEXED / OPEN
03
Flat material logic
Color fields, paper-like blocks, and linework stay graphic rather than simulated with depth.
INDEXED / OPEN
Catalog entry 22
Memphis
expressive
Tags: memphis · playful · pattern
AETHER / EtherealVIEWING ROOM · INDEX · NOTES
Contemporary gallery / synthetic exhibition
Light holds the work.
Holds the interface in high, even light — soft low-saturation gradients, diffuse boundaries, thin large type, and mostly empty space — to read as calm and weightless.
ROOM 01OPEN VIEW / STILL FIELD
UNTITLED ATMOSPHERE / 01
Works in the roomsynthetic index / three views
01
High-key atmosphere
Light and low saturation define the room before any object appears.
NOW VIEWING
02
Dissolved boundaries
Tonal drift and soft masks separate regions instead of visible rules.
ENTER ROOM
03
Artwork in negative space
A focal object gets room, scale, and quiet around it.
ENTER ROOM
Viewing note
The still field is the invitation.Softness belongs to the room; clarity belongs to the label.
Catalog entry 23
Ethereal
reductive
Tags: ethereal · airy · soft-gradient
No styles match “”
Search covers style names, visible tags, and authored aliases. It does not search inside the prompt or the specification text.
Applying a Minimalist visual direction
You are being asked to apply a Minimalist visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Minimalist” means here
Minimalist is not “plain” or “unfinished”, and it is not simply the absence of things. It is reduction followed by amplification: you remove elements, and then the elements that survive have to grow, because there is nothing else left to carry the hierarchy. Take away colour, ornament, shadow, and decoration and only two instruments remain — typography and space — so both are used at full strength.
The doctrine is Dieter Rams’s less, but better, which he put forward specifically against less is more. That distinction is the whole discipline. Removal is not the goal; it is only justified when what remains reads better for it. An interface stripped until it says nothing has not become minimal, it has become empty — and that is this style’s characteristic failure, not its ideal.
The most common misreading is that minimalist means typographically timid. It is the reverse. Restraint governs the number of typographic decisions you make — one or two families, three sizes at most — never their force. A minimalist page is expected to have a headline several times the size of its body text.
Minimalist is also defined against its neighbours, and drifting into one of them is the usual way it goes wrong. If you find yourself exhibiting the grid as a visible structural system, you have moved to Swiss. If colour starts carrying the structure, that is Flat. If type gets lighter and thinner and data gets denser, that is Barely-There UI. If you add a soft gradient for atmosphere, that is Ethereal; if you add a soft shadow for tactility, that is Neumorphism. Minimalist is the functional-reductive core: heavy, large type on a flat, near-monochrome, low-density surface.
Recommendations
Start by listing every element you intend to add, then remove anything that does not serve comprehension, navigation, or the primary action. Then go back and make what is left bigger, heavier, or more spaced than felt comfortable — reduction without amplification produces a weak page, not a minimal one.
Set your display type at three times the body size or more. Decide the ratio explicitly rather than nudging sizes until they look acceptable, and hold that ratio at every breakpoint by scaling both ends together.
Limit yourself to one neutral base (near-white or near-black, plus a small range of grays) and either one accent colour or none at all. A completely monochromatic result is fully canonical here — roughly half of minimalist interfaces have no accent whatsoever.
Let spacing do the work that borders and boxes would otherwise do. Prefer a generous gap between two sections to a divider line; prefer a divider line to a filled container. Keep at least one body line-height between sections.
Keep the surface entirely flat. No gradient, no texture, no shadow used for interest. If you find yourself wanting shadow for depth, the layout needs restructuring rather than a new effect.
Make interactive elements look interactive while at rest. This is where minimalism most often breaks: stripping away signifiers leaves users unable to tell what is clickable. Give every control at least two resting cues — a hairline border, a fill distinct from the page, the accent colour, an underline. Hover can stay quiet precisely because the resting state is already doing the work.
Favour a single clear call to action per screen or section. If a screen seems to need several equally prominent actions, that usually means the content should be split or re-prioritised, not that you should add visual noise to separate them.
Resist the instinct to fill empty space. An area with nothing in it is doing its job if the surrounding content reads more clearly because of it.
Large photography or full-bleed video is allowed and common — a majority of minimalist interfaces use it. What is excluded is imagery used as decoration. If the image is the content, keep it; if it is filling a gap, remove it.
Avoid
Timid typography: a headline close in size to the body text, leaving nothing to carry hierarchy.
Multiple competing accent colours, gradients, or decorative background textures.
Drop shadows, glows, or blur effects used for visual interest rather than a specific, necessary purpose (such as a modal that must visually separate from a busy background).
Controls that are indistinguishable from static text until hovered — and note that on touch platforms there is no hover at all, so those controls are simply unmarked.
Exhibiting the layout grid as a visible structural device, which belongs to a different direction.
Icons or illustrations added for decoration where text or spacing already communicates the meaning.
More than one font pairing, or more than a small number of distinct type sizes on a single screen.
Hiding navigation or task-critical controls behind a disclosure in the name of cleanliness.
Dense information layouts that rely on visual crowding rather than clear grouping and whitespace.
How to check your own work
Before considering the result finished, look at it and ask:
Divide the largest font size on the screen by the body font size. Is the result at least 3? If it is closer to 1.5, the page is under-designed rather than minimal.
Could I remove any single element without losing information or function? If yes, remove it — and then check whether what remains needs to grow to fill the role.
Can a first-time visitor say what this product does and what the next step is, reading only the first screen? If not, reduction has eaten the content rather than the decoration.
Point at each interactive element and ask what marks it as interactive without hovering it. If the answer is “nothing”, or “it is hover-only”, that is a blocking problem, not a stylistic choice.
Is there more than one colour competing for attention besides the neutral base? If yes, reduce it.
If I removed all colour, would the hierarchy still be legible through spacing and type alone? If not, the hierarchy is relying on decoration instead of structure, and that is the part to fix.
Minimalist — Specification
Definition
Minimalist is a web-interface design style defined by reduction to what is functionally necessary, where the elements that survive are amplified to carry the work the removed ones were doing. With colour, ornament, depth, and decoration withdrawn, typography and negative space become the only instruments of hierarchy left, so both are used at full strength rather than timidly.
Its doctrine is Dieter Rams’s “Weniger, aber besser” — less, but better — which he advanced in deliberate distinction to “less is more”. The difference is operative, not academic: removal is not the goal, and is justified only when what remains is improved by it. Minimalism that removes until nothing is left has failed on its own terms.
Minimalist is not the general category its reductive neighbours belong to; it is one of them, and is defined against them. It is not Swiss, which is grid-first, exhibits its modular system, and may be extremely dense. It is not Flat, which uses colour as its primary structural device and removes depth without removing content. It is not Barely-There UI, which is built on light type weights, boundaries at the threshold of perception, and dense data. It is not Ethereal, whose soft gradients and diffuse boundaries Rule 3 forbids outright, and it is not Neumorphism, whose soft shadow Rule 3 forbids for the same reason. Minimalist is the functional-reductive core: heavy, large type on a flat, near-monochrome, low-density surface.
Core principles
Reduction, then amplification. An element is removed only if the interface reads better without it — and whatever remains must grow to carry the load, because nothing else is left to carry it.
Typography as the primary instrument. Type is the main expressive surface. Restraint governs how many typographic decisions are made, never how forceful they are.
Negative space as structure. Space separates and groups content in place of borders, boxes, and dividers. It is an active component, not leftover margin — the Japanese sense of ma, where the interval between elements is itself part of the composition.
Restraint as hierarchy. Emphasis is expressed through scale, weight, and position rather than colour or decoration.
Necessary is the floor, not the ceiling. Every element the user’s task requires must be present. A design that is visually spare but withholds what the user needs has not achieved minimalism; it has only achieved emptiness.
Visual characteristics
Dramatic typography: a display size several times the body size, set with real weight, doing the hierarchical work that colour and ornament are not permitted to do.
A near-monochrome palette: one neutral base, with either no accent colour at all or exactly one.
Abundant, deliberate negative space between and within sections.
A completely flat surface: no shadow, no gradient, no texture, no simulated depth.
Thin or absent borders; dividers used only where space alone cannot separate.
Few typographic decisions: one or two families, and a small number of sizes deployed at wide intervals.
Interactive elements that remain recognisably interactive at rest, without relying on hover to reveal themselves.
Rules
Palette restraint. The interface uses one neutral base (a near-white or near-black plus its supporting grays) and either no accent hue or exactly one, across the entire surface. A fully monochromatic result is as canonical as an accented one.
Acceptance criterion: Inspecting the rendered page’s computed background, text, and border colors yields at most one hue beyond pure black, white, and gray.
Minimum section spacing. Negative space between primary content sections is at least one line-height of the body text.
Acceptance criterion: The measured margin or padding between adjacent content sections is greater than or equal to the body text’s line-height (e.g., at least 24px for 16px/1.5 body text).
Total flatness. The interface contains no decorative box-shadow, gradient background, or background texture.
Acceptance criterion: Inspecting computed CSS across the page finds no gradient background-image and no box-shadow other than a functionally necessary one (such as a modal that must separate from background content), and any such exception is documented.
Amplified typographic contrast on a perceptible scale. No more than two font families and no more than five distinct font sizes appear on a single screen. Every adjacent pair in that size scale is separated enough to read as a different level — at least 1.5x, or a difference in case or weight that does the same work — and the largest size is at least three times the body size.
Acceptance criterion: Counting distinct computed font-family values on a rendered screen yields at most 2; sorting the distinct font-size values yields at most 5, each adjacent pair either differing by a factor of 1.5 or more or differing in text-transform or font-weight; and dividing the largest by the body font-size returns 3.0 or greater.
Quiet interaction states. Interactive elements signal hover and focus through color, weight, or underline changes only, not through shape, size, or shadow changes.
Acceptance criterion: Comparing computed styles between the resting and hover/focus states of an interactive element shows no change to border-radius, box-shadow, or element dimensions greater than 2px.
Interactivity legible at rest. Every interactive element is identifiable as interactive without hovering it, carrying at least two of: a visible border, a fill distinct from the page background, the accent colour, or an underline.
Acceptance criterion: For each interactive element, inspecting the resting computed style finds two or more of a non-transparent border, a background-color differing from its parent, the accent hue applied to text or border, or a text-decoration of underline.
Hairline borders only. Any border present in the interface is no more than 1px wide.
Acceptance criterion: Inspecting computed border-width on every visible bordered element returns a value of 1px or less.
Single primary action per section. Each screen section presents exactly one visually dominant call to action.
Acceptance criterion: Counting elements within a section that use the accent color and largest interactive size together yields exactly one.
Nothing necessary removed. The interface states what it is and what it does, and exposes every control the user’s primary task requires, without that information being reached through hover, scroll, or a hidden menu.
Acceptance criterion: A first-time viewer reading only the initial viewport can state what the product does and identify the primary action, and no control required for the primary task exists solely behind a disclosure.
Avoid
Timid typography — a display size close to the body size, leaving no element able to carry hierarchy.
Multiple competing accent colours, or decorative background textures.
Drop shadows, glows, gradients, or blur used for visual interest rather than a documented functional need. Reaching for shadow to create depth produces Neumorphism; reaching for gradient to create atmosphere produces Ethereal.
Controls that are indistinguishable from static text until hovered — and note that on touch platforms there is no hover at all, so those controls are simply unmarked.
More than one font pairing, or more than a small number of distinct type sizes on one screen.
Decorative icons or illustration where text or spacing already communicates meaning.
Exhibiting the layout grid as a visible structural device, which is Swiss rather than Minimalist.
Dense layouts that rely on visual crowding rather than grouping and whitespace.
Hiding primary navigation or task-critical controls behind a disclosure in the name of cleanliness.
Photography and full-bleed background imagery are not on this list. Minimalism restricts ornament, not content: a large image or video that is the subject of the page is consistent with the style, and is used by a majority of minimalist interfaces. What is excluded is imagery applied as decoration.
Acceptance criteria
Rule 1: At most one accent hue is present beyond black, white, and gray.
Rule 2: Inter-section spacing is at least one body line-height.
Rule 3: No shadow, gradient, or texture is present without documented functional necessity.
Rule 4: At most 2 font families and 5 font sizes, every adjacent step perceptibly separated, display at least 3× the body size.
Rule 5: Hover/focus states change only colour, weight, or underline — not shape or size.
Rule 6: Every interactive element carries at least two resting-state signals of interactivity.
Rule 7: All borders are 1px or thinner.
Rule 8: Exactly one dominant call to action exists per section.
Rule 9: Purpose and primary action are stated in the initial viewport; no task-critical control is hidden.
Blocking failures
More than one accent colour is used for non-semantic decoration anywhere on the page.
A decorative shadow, gradient, or texture is present with no documented functional purpose.
A single section presents two or more equally prominent, competing calls to action, so a visitor cannot identify the intended next step.
The interface is visually minimal but does not communicate what it is or what it does. Reduction has been applied to necessary content rather than to decoration; the result is empty rather than minimal.
Interactive elements cannot be distinguished from static ones without hovering. Removing signifiers has made the interface unusable, which is a failure of the style rather than an expression of it.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Negative space may compress proportionally on narrower viewports but must never fall below a defined minimum (for example, 16px between sections). It is the characteristic doing the most structural work and is the first thing wrongly sacrificed.
Typographic contrast is preserved as a ratio, not as an absolute size. A display size that is dramatic on a desktop viewport is broken at 375px, so the display size scales down with the viewport while the 3× relationship to body text (Rule 4) is maintained at every breakpoint.
Rule 4’s count limits are evaluated per breakpoint independently, since responsive type scales may legitimately introduce a different, still-limited, set of sizes.
Layouts collapse to a single column before spacing or type would become illegible; content is never truncated to preserve whitespace.
On touch platforms, Rule 6 carries more weight rather than less: hover does not exist, so an element that only reveals its interactivity on hover is simply unmarked. Resting-state signifiers are the only ones a touch user ever receives.
Collapsing navigation behind a menu is an accepted mobile convention, but on desktop viewports it is reduction at the cost of discoverability and falls under Rule 9.
The hairline-border rule and the single-dominant-action-per-section rule hold at every breakpoint and on every platform.
MinimalistStart free
Reduction, then amplification
Reduces an interface to what is functionally necessary, then amplifies what survives: dramatic typography and wide negative space carry the hierarchy on a flat, near-monochrome surface.
Start freeRead the docs
01
Reduction, then amplification
An element is removed only if the interface reads better without it — and whatever remains must grow to carry the load, because nothing else is left to carry it.
02
Typography as the primary instrument
Type is the main expressive surface. Restraint governs how many typographic decisions are made, never how forceful they are.
03
Negative space as structure
Space separates and groups content in place of borders, boxes, and dividers. It is an active component, not leftover margin — the Japanese sense of ma, where the interval between elements is itself part of the composition.
Team
$18/ month
Dramatic typography: a display size several times the body size, set with real weight, doing the hierarchical work that colour and ornament are not permitted to do.
Start free
reductive
Reduces an interface to what is functionally necessary, then amplifies what survives: dramatic typography and wide negative space carry the hierarchy on a flat, near-monochrome surface.
Archetype
surface
Density
sparse
Parts
masthead · hero · reading · panel
Palette
minimalism · whitespace · typography · restraint
Applying a Brutalist visual direction
You are being asked to apply a Brutalist visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Brutalist” means here
Brutalist web design borrows its name and attitude from brutalist architecture: the name is béton brut, raw concrete, left unfinished and load-bearing on the outside of the building. Structure is exposed rather than hidden, materials are shown honestly rather than smoothed over, and the result reads as direct and confrontational rather than polished. In an interface this means visible grid seams, unrounded geometric shapes, hard-edged typography, and a rejection of the soft, softly-shadowed conventions of most contemporary UI.
It became a named digital style through Pascal Deville’s BrutalistWebsites.com in 2014, as a reaction against the lightness and frivolity of template-builder web design — pages that all look the same because none of them were built. Knowing that motive matters, because it is what separates the style from carelessness: it is a deliberate, controlled raw look, not an unfinished or default one. Every rough edge should be an intentional decision, not neglect.
Rawness applies to behaviour as much as to surface. A page that looks raw but hides what is clickable, or breaks the browser’s back button, has thrown away the honesty that produced the look in the first place.
The word covers more than one style, so be clear which one you are producing. This is the strain that references the architecture — confrontational, heavily bordered, saturated. It is not the plain-semantic-HTML tradition of Craigslist or Wikipedia, which shares the motive but arrives at a quiet surface. It is not Anti-Design, which subverts convention as art and lets usability suffer; here the interface stays entirely usable. And it is not Neubrutalism, which takes this geometry and makes it playful with hard offset shadows and bright cheerful blocks — if you find yourself adding a shadow, even a hard one, you have crossed into it.
Recommendations
Use square corners everywhere. Do not round containers, buttons, inputs, or images.
Build visible structure: thick, high-contrast borders around distinct content blocks, and visible boundaries at grid or column divisions instead of hiding them behind whitespace alone.
Push typographic scale hard. Headlines should be dramatically larger than body text, and the jump between the largest and smallest text on a screen should be obvious at a glance, not subtle.
Restrict colour to true black, true white, and a small number of flat, fully saturated colours used as blocks rather than tints or gradients. Let colour feel like a structural material (a coloured block, a coloured border) rather than a decorative wash.
Choose type that looks unchosen. Monospace families, system stacks, or the browser default. A fashionable display face will satisfy every geometric rule here and still produce something that is not brutalist — the type should read as raw information, not as branding.
Let interactive elements look like what they are: a button should read as a hard-edged, bordered box, not a soft rounded pill. Default or near-default form control styling is acceptable and often correct here.
Underline your links and let buttons look like buttons, and make sure nothing that is neither responds to a click. Deceiving a visitor about what is interactive contradicts the whole position of the style.
Leave the browser alone. The back button must work, and content should be reached by scrolling rather than by artificial pagination or click-driven reveals.
Keep the page fast. A deliberately plain interface that arrives slowly has failed on its own terms — performance is part of the honesty, not a separate concern.
Let asymmetry and density coexist deliberately: a very large headline next to a dense block of small text is a valid and expected composition in this direction.
Avoid
Rounded corners of any kind, on any element.
Soft box shadows, blur, glow, or any effect whose purpose is to simulate depth or softness. A hard, unblurred offset shadow is not a loophole — that is Neubrutalism.
Gradients, pastel tints, or more than two or three flat accent colours.
Display or brand typefaces chosen for personality.
Elements that look clickable but are not, or that are clickable without looking it.
Breaking the back button, hijacking scroll, or paginating what should simply be scrolled.
Smooth, springy, or decorative motion. Transitions, where used at all, should be abrupt rather than eased.
Hiding the grid: do not let column gutters, section boundaries, or structural divisions disappear into undifferentiated whitespace.
Pushing subversion so far that the primary task cannot be completed. That is Anti-Design, and it is a different entry.
How to check your own work
Before considering the result finished, look at it and ask:
Does any element have a rounded corner? If yes, square it off.
Does any element have a soft shadow, blur, or gradient used for depth or polish? If yes, replace it with a hard border or a flat colour block, or remove it.
What typeface is actually rendering? If it is a display or brand face, replace it with a monospace or system stack — geometry alone will not carry this style.
Point at every clickable thing. Is each one a link that is underlined or a button that looks like a button? Is anything else clickable? Fix both directions.
Press the back button. Does it do what a visitor would expect?
If I squint at the layout, can I still see where the structural divisions are — the grid, the sections, the boundaries between blocks? If the structure disappears, add a visible border or contrasting block to make it explicit again.
Is the type scale dramatic enough that the largest and smallest text on the screen are obviously, not subtly, different in size?
Brutalist — Specification
Definition
Brutalist is a web-interface design style that foregrounds raw, unornamented structure. It exposes grid seams, uses unrounded geometric shapes, sets hard-edged typography at dramatic scale contrast, and rejects the soft, shadowed conventions of contemporary interface polish in favour of a direct, controlled, deliberately raw appearance.
The name comes from béton brut — raw concrete — and from the 1950s architecture that left it unfinished and load-bearing on the outside of the building. That architecture was rooted in function, resource efficiency, and a rejection of empty ornament. The digital style takes the same position toward the browser: the structure of a page is not something to be hidden behind a smooth surface, it is the surface.
The style became a named digital movement through Pascal Deville’s BrutalistWebsites.com in 2014, as a reaction against what he called the lightness, optimism, and frivolity of contemporary web design — and specifically against the interchangeable output of drag-and-drop template builders. Rawness is a stance, which is why the rawness must be deliberate: an interface that is merely unfinished is not brutalist, it is unfinished.
The word carries more than one style, and this entry is the strain that references the architecture. It is not the honest-materials tradition of unstyled semantic HTML — light background, black text, blue underlined links, minimal CSS, in the manner of Craigslist or Wikipedia — which shares brutalism’s motives but reaches a plain surface rather than a confrontational one. It is not Anti-Design, which breaks convention as artistic subversion and treats usability as secondary, where this style is controlled and remains fully usable. And it is not Neubrutalism, which takes this geometry and makes it playful with hard-edged shadows, bright saturated blocks and cheerful imbalance; this entry has no shadow at all and is confrontational rather than friendly.
Core principles
Structure over polish. Grid lines, boundaries, and containers are shown, not hidden.
Honest materials. Default or near-default browser affordances are used deliberately rather than smoothed away, and the interface behaves the way the browser already behaves.
Confrontational hierarchy. Contrast — in scale, weight, and colour — is dramatic rather than subtle.
Deliberate rawness. Every rough edge is a considered decision, not an omission.
Rawness without deception. Directness extends to behaviour: a page that is visually raw but hides what is clickable, or breaks the browser’s own controls, has abandoned the principle that produced the look.
Visual characteristics
Thick, high-contrast borders around distinct content blocks.
Square, unrounded corners on every container, button, and image.
A restricted palette of true black, true white, and a small number of flat, fully saturated colours used as blocks, not tints or gradients.
Oversized, dramatic typographic scale contrast between headline and body text.
Typefaces that read as unchosen — monospace, system stacks, or browser defaults — rather than a fashionable display face.
Visible grid seams and section boundaries rather than boundaries implied by whitespace alone.
Default or near-default form control styling in place of custom-styled soft controls.
Links that are underlined and buttons that look like buttons, with nothing else appearing clickable.
Rules
No rounded corners. No container, card, button, input, or image has a border-radius greater than 0.
Acceptance criterion: Inspecting computed border-radius across every container and interactive element on the page returns 0px.
Visible block borders. Every distinct content block has a border of at least 2px, at high contrast against its adjacent surface.
Acceptance criterion: Measuring border-width on each block-level container returns at least 2px, with a measured contrast ratio of at least 7:1 against the adjacent background.
Dramatic type scale. The ratio between the largest and smallest rendered text on a given screen is at least 4:1.
Acceptance criterion: Measuring the largest and smallest computed font-size values present on a rendered screen yields a ratio of 4:1 or greater.
Flat, restricted palette. All colour on the page is true black, true white, or one of a documented set of at most two additional flat, fully saturated colours; no gradients or tints are used for depth.
Acceptance criterion: Inspecting rendered colour swatches finds every colour present matches black, white, or a declared saturated colour, and no linear-gradient, radial-gradient, or box-shadow with nonzero blur is present.
Structural interactive controls. Buttons and inputs are visually box-like, with square corners and a border of at least 2px, distinguishable from body content at a glance.
Acceptance criterion: A rendered screenshot review confirms every button and input has square corners and a border-width of at least 2px.
Exposed grid seams. Every major grid or section division has a visible boundary — a rule line or a contrasting colour block — rather than being implied by whitespace alone.
Acceptance criterion: Inspecting the rendered layout confirms a visible border or background-colour change exists at each documented major grid division.
No smoothing effects. No blur, soft shadow, or eased opacity transition is used to simulate depth or softness.
Acceptance criterion: Inspecting computed CSS finds no filter: blur, no box-shadow with a blur radius greater than 0, and no opacity transition longer than an abrupt (near-instant) duration used for polish.
Honest affordances. Hyperlinks are underlined, buttons look like buttons, and nothing that is neither responds to a click.
Acceptance criterion: Every anchor has a computed text-decoration of underline; every button carries a visible border and background distinguishing it from body text; and no element that is not an anchor or a button has a click handler that navigates or submits.
Unstyled-looking typography. Type is set in a monospace family, a system stack, or the browser default, rather than in a display or brand typeface.
Acceptance criterion: Every computed font-family on the page resolves to a monospace family, a system-UI stack, or a generic default, with no webfont loaded for display purposes.
Native browser behaviour preserved. The back button returns to the previous view, and content is reached by scrolling rather than by artificial pagination or click-driven reveals.
Acceptance criterion: After navigating within the interface, pressing the browser’s back control returns to the prior view without script interception, and primary content is reachable by scrolling alone.
Domain fit. The style is applied where a confrontational surface serves the work: personal portfolios, creative studios and agencies, niche publications, music and underground culture, and one-off or seasonal event pages. Applied to a conversion-driven commercial interface, or to finance, healthcare, or government, it is moderated rather than adopted whole, and the departure is documented.
Acceptance criterion: The interface’s domain falls within the list above, or a written justification records why the full treatment is being applied outside it and which rules were moderated as a result.
Avoid
Rounded corners on any element.
Soft box shadows, glow, or blur used to simulate elevation or softness — a hard, unblurred offset shadow belongs to Neubrutalism rather than here.
Gradients, pastel tints, or more than two flat accent colours beyond black and white.
Display or brand typefaces chosen for personality; the type should look like it was never chosen.
Elements that look clickable but are not, or that are clickable without looking it.
Breaking the back button, hijacking scroll, or replacing scrolling with click-driven pagination.
Heavy assets and script that make a deliberately plain page slow to arrive; performance is part of the style’s honesty, not a separate concern.
Subverting the interface to the point where the primary task cannot be completed, which is Anti-Design rather than Brutalist.
Smooth, springy, or decorative motion; eased transitions used for polish rather than function.
Grid gutters or section boundaries that disappear into undifferentiated whitespace.
Acceptance criteria
Rule 1: border-radius is 0px on every container and interactive element.
Rule 2: Every content block has a border of at least 2px at 7:1+ contrast.
Rule 3: The largest-to-smallest font-size ratio on a screen is at least 4:1.
Rule 4: All colours are black, white, or one of at most two declared saturated colours, with no gradients.
Rule 5: Buttons and inputs are square-cornered with borders of at least 2px.
Rule 6: Every major grid division has a visible border or colour-block boundary.
Rule 7: No blur, soft shadow, or eased polish transition is present.
Rule 8: Links are underlined, buttons look like buttons, and nothing else is clickable.
Rule 9: Every typeface is monospace, a system stack, or a browser default.
Rule 10: The back button works and content is reachable by scrolling.
Rule 11: The domain fits the style, or the departure and its moderations are documented.
Blocking failures
Any container or interactive element has a border-radius greater than 0.
A soft box-shadow, blur, or gradient is used for depth or polish anywhere on the page.
The colour palette includes a gradient fill or more than two non-black/white saturated colours.
An element that is not a link or a button is made clickable, or a link or button is disguised as ordinary content, so a visitor cannot tell what will respond to a click.
The back button is intercepted or broken, leaving a visitor no way to undo an errant click.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Grid seams remain visible at every viewport width; borders never collapse to a hairline that reads as invisible.
The minimum 4:1 type-scale ratio (Rule 3) may compress to no less than 2.5:1 on narrow viewports, documented as an explicit exception rather than a silent drift.
Border widths may reduce on narrow viewports but never below 2px (Rule 2 and Rule 5 continue to apply).
Square corners (Rule 1) and the restricted flat palette (Rule 4) hold unchanged at every breakpoint.
Rules 8 and 10 hold on every platform, and matter most on touch, where there is no hover to disambiguate what is interactive and where hijacked scrolling is most disruptive.
Because unstyled semantic HTML is already readable at any width and on assistive technology, a brutalist layout should reach small viewports by removing layout rather than by adding breakpoint-specific machinery.
Page weight is held low enough that the interface arrives quickly on a slow mobile connection; a deliberately plain page that loads slowly has failed on its own terms.
BRUTALISTED. 07
BRUTALIST FEST
02—04 MAY 2026KRAFTWERK, BERLINTICKETS €40
RUNNING ORDERSAT 03
19:00Structure over polishGrid lines, boundaries, and containers are shown, not hidden.HALL A
20:30Honest materialsDefault or near-default browser affordances are used deliberately rather than smoothed away, and the interface behaves the way the browser already behaves.ANNEXE
22:00Confrontational hierarchyContrast — in scale, weight, and colour — is dramatic rather than subtle.HALL A
23:30Deliberate rawnessEvery rough edge is a considered decision, not an omission.YARD
expressive
Foregrounds raw, unornamented structure — thick borders, square corners, stark colour blocking and unstyled-looking type — and carries that directness into behaviour, refusing decorative smoothing anywhere.
Archetype
system
Density
dense
Parts
masthead · hero · grid · panel
Palette
brutalism · raw · monospace · high-contrast
Applying an Editorial visual direction
You are being asked to apply an Editorial visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Editorial” means here
Editorial design borrows the conventions of print publications — magazines, newspapers, and printed journals — and applies them to a screen. The defining move is treating typography and layout as the primary structuring devices, the way a print art director would, rather than treating them as a neutral container for content. Text is set on a considered grid, imagery is integrated as part of the story rather than as generic decoration, and the whole composition should feel authored: like someone made deliberate editorial choices about what is emphasised, what is quiet, and how the reader’s eye should move.
“Authored” is the operative word, and it is more literal than it sounds. A published article carries furniture — a kicker above the headline, a deck summarising it below, a byline naming who wrote it, captions crediting the images. Those parts are most of what separates a page that reads as written and edited from one that reads as a template someone filled. Well-set text without them still feels assembled.
The style is quiet by discipline. The craft’s own formulation is that typography should disappear so the words can do their job. That is what separates Editorial from directions where type is the spectacle: if a reader finishes and remembers the typeface, it was probably Art Deco or Maximalist, not this. It is also what separates it from Swiss, its closest neighbour — Swiss uses a single neutral sans where you pair two contrasting families, shows off its grid where you merely use one, and is deliberately anonymous where your page is signed.
Recommendations
Pair a distinctive display or serif typeface for headlines with a clean, functional sans-serif (or a second serif with a clearly different character) for body text and interface labels. The contrast between the two should be legible at a glance.
Control line length, and match it to the column count. A single column of body text reads best between 45 and 75 characters per line, with 66 as the target — roughly a 33em column. If you set multiple columns, tighten each to 40–50 characters: a narrow column running at a wide measure is harder to read than either extreme alone.
Build a real column grid for long-form content, and give it a vertical counterpart: derive your spacing from the body line-height so type aligns across columns and down the page, rather than picking margins by eye.
Include the article furniture. A kicker or a deck, and a byline. Set each distinctly from both the headline and the body — a deck is conventionally one size down from the headline, often italic or lighter; a byline sits below the headline or deck. This is the cheapest, highest-leverage thing on this list.
Treat images as content: give them intentional placement (full-bleed, art-directed crops, or a defined position within the grid) and pair them with a caption or credit line set in a visually distinct style from body text.
Break long passages with subheads. They give the reader a way to navigate and to re-enter after looking away.
Use thin rules and generous, purposeful spacing to separate sections — a masthead from an article, one article from another — the way a printed page uses margins and rules rather than boxes.
Keep colour restrained: let typography, imagery, and layout carry the visual interest, and use no more than one accent colour for links, emphasis, or interactive states.
Vary pacing deliberately. A large pull quote, a wide image, or a section break can serve the same purpose a print spread uses to give the reader’s eye a place to rest.
Avoid
Sans-only or serif-only pairings that erase the contrast between headline and body voice.
A page with no kicker, deck, or byline. However well the text is set, it will read as assembled rather than authored.
Multi-column layouts that keep a single-column measure, running each column too long for its width.
Unbroken walls of text with no typographic pacing, section breaks, subheads, or pull quotes.
Treating images as generic background decoration rather than captioned, art-directed content.
More than one accent colour competing with the reading experience.
Styling captions identically to body text, which erases the distinction between narrative copy and supporting material.
Display typography that asks to be looked at rather than read through.
Showing off the grid as a visible structural device — use it, do not exhibit it.
Vertical spacing picked by eye rather than derived from the body line-height.
A working order
Editorial layout is a process before it is a result, and the order matters more than any single decision. This is the sequence a working editorial designer follows.
Gather every asset first — images, logo, the real text — into one file before making a single layout decision. Composition on placeholder content is composition you will redo.
Read the content and digest it. Do not pour paragraphs into a fixed column. Find the one phrase or figure that deserves to become a hero-scale typographic element, and pull it out of the sentence it is buried in.
State the page’s goal — the one action it should drive — before you place anything. That goal decides what gets visual priority.
Collect references from more than one medium. A print poster among the web references is what stops the result from resembling any single source.
Restrict the toolkit to five things: one or two type families, one or two accent colours plus neutrals, one grid, images in bounded containers, and white space. Nothing else.
Declare a closed spacing scale and a grid, then never deviate. A working scale is 10 / 20 / 40 / 80 / 160px, with a 12-column grid and fixed 40px side margins. Every gap, margin, and padding is a member of that scale — no arbitrary values.
Check both axes. Each new element is aligned against its neighbours vertically and horizontally, not just against the grid. Anything off by a pixel gets corrected.
Add depth with placement, not effects. One image behind the text, one in front, and a locked palette — rather than a shadow.
Place compound blocks as single units. A paragraph plus its CTA moves together, positioned by one of three strategies: a fixed internal proportion, alignment to another element, or a fixed distance from a structural element such as the nav.
Cut before you accommodate. If a composition is overloaded, remove elements rather than shrink everything to fit.
Then, and only then, translate downward to mobile — never design mobile first and scale up, because it is far easier to simplify a rich layout than to enrich a sparse one.
Collapse navigation into a menu control.
Invert orientation: what runs horizontally on desktop runs vertically on mobile.
Shrink headlines, but hold body text at a 16px floor, and let CTAs stay the same size or grow rather than shrink.
Rebuild the grid with at least six columns, specifically so a 2/3–1/3 asymmetry survives. Four columns collapse every block to the same edge and the composition goes symmetrical without you deciding it.
How to check your own work
Before considering the result finished, look at it and ask:
Do headlines and body text clearly read as two different typographic voices?
If I measure a line of body text, does it fall roughly within a comfortable reading length? And if I set columns, did I tighten the measure to suit them, or leave it at the single-column width?
Can I point at a kicker or deck, and at a byline? If not, the page is not yet editorial, whatever else is right about it.
Does every image have a caption or credit treated as distinct from body copy?
Do the vertical gaps resolve to multiples of the body line-height, or did I pick them by eye?
Does the page have a clear rhythm — passages of dense reading broken up by rules, spacing, images, subheads, or pull quotes — rather than one undifferentiated block of content?
Editorial — Specification
Definition
Editorial is a web-interface design style modelled on print-publication design. It builds a clear typographic hierarchy from a serif-and-sans (or comparably contrasting) type pairing, structures content on a considered reading grid, treats imagery as narrative content rather than decoration, and paces dense and open sections deliberately, producing an interface that reads as authored rather than assembled.
Authorship is the operative word. The style is not simply well-set text: it carries the furniture of a published article — a kicker, a deck, a byline, captions and credits — because those are what make a page read as something a person wrote and an editor placed, rather than a template that was filled.
Editorial is quiet by discipline. The craft’s own formulation is that typography should disappear so the words can do their job, which separates it from styles where type is the spectacle: it is not Art Deco and not Maximalist, both of which ask the reader to look at the type rather than through it. It is also not Swiss, its closest neighbour — Swiss uses one neutral sans where this style pairs two contrasting families, exhibits the grid where this style merely uses one, and is deliberately anonymous where this style is signed. A Swiss page succeeds when its structure is legible; an Editorial page succeeds when a reader moves through long-form content to the end.
Core principles
Typographic hierarchy as structure. Type contrast, not colour or containers, is the primary organizing device.
Grid-based composition. Content is set on a considered column and measure system borrowed from print layout, with a baseline rhythm holding it vertically.
Imagery as content. Images are captioned, art-directed, and integrated into the narrative, not used as generic decoration.
Restrained colour in service of legibility. Colour supports reading; it does not compete with it.
Deliberate pacing. Dense reading passages are broken up intentionally, the way a print spread uses rules, images, and pull quotes.
Typography that disappears. Consistency over novelty and rhythm over surprise; the reader should finish the article without having noticed the type.
Visual characteristics
A serif (or otherwise distinctive) display typeface for headlines, paired with a clearly contrasting sans-serif for body and interface text.
A defined column grid with controlled line length for body copy, and a vertical rhythm derived from the body line-height.
The furniture of a published article: a kicker above the headline, a deck below it set one size down and often italic or lighter, and a byline naming the author.
Captions or credit lines set visually apart from body copy, adjacent to their images.
Full-bleed or art-directed imagery integrated into the layout rather than treated as background filler.
Thin rules and generous, purposeful spacing separating sections, in place of heavy containers.
Subheads breaking long passages into navigable sections.
A restrained, mostly neutral palette with a single accent colour for links and emphasis.
Rules
Controlled measure. Body copy in a single column stays between 45 and 75 characters per line at the primary reading viewport, targeting 66 — roughly a 33em column.
Acceptance criterion: Measuring the average characters-per-line of rendered single-column body paragraphs at the primary reading viewport falls between 45 and 75.
Distinct headline voice. Headline elements (h1, h2) use a typeface family visibly different from the body-text family.
Acceptance criterion: Inspecting computed font-family for headline elements shows a different value than the computed font-family used for body paragraph text.
Captioned imagery. Every content image is accompanied by a caption or credit line set in a visually distinct style from body copy.
Acceptance criterion: For each content image or figure, an adjacent caption element exists whose computed font-size or font-weight differs from the surrounding body paragraph’s computed value.
Marked section breaks. Section boundaries are marked by either a visible thin rule or vertical spacing of at least twice the body line-height.
Acceptance criterion: Measuring the gap between two consecutive sections confirms either a visible rule element or a spacing value of at least 2x the body text’s line-height.
Single accent colour. No more than one accent colour is used for links, emphasis, or interactive states outside the near-black/neutral text palette.
Acceptance criterion: Inspecting rendered colour swatches for links and emphasized text finds exactly one non-neutral hue in use across the page.
Long-form layout at a column-appropriate measure. At desktop width, body content exceeding 400 words is laid out either in a single column satisfying Rule 1, or in two or more columns each measuring 40 to 50 characters per line.
Acceptance criterion: For a body section exceeding 400 words at desktop width, inspecting the rendered layout shows either a single-column container measuring 45–75 characters per line, or a column-count of 2 or more with each column measuring 40–50 characters per line.
Distinguished pull quotes. Any pull quote is set at a larger font size than body text and is visually separated from surrounding paragraphs by indentation, a rule, or additional whitespace.
Acceptance criterion: Inspecting a pull-quote element’s computed font-size shows a value greater than the body paragraph’s computed font-size, and a visible margin, indent, or rule separates it from adjacent paragraphs.
Article furniture present. A long-form page carries a kicker or a deck, and a byline, each set in a style distinct from both the headline and the body text.
Acceptance criterion: A kicker or deck element exists adjacent to the headline, and a byline element naming the author exists below the headline or deck; the computed font-size, font-weight, or font-style of each differs from both the headline’s and the body paragraph’s.
Spacing from a closed system. Every gap, margin, and padding is a member of one declared, closed spacing scale — either multiples of the body line-height or an authored geometric scale (for example 10 / 20 / 40 / 80 / 160px). No arbitrary values.
Acceptance criterion: Collecting every computed vertical margin, gap, and padding on the page yields values drawn from a single documented set, within a 2px tolerance; any value outside that set is a defect.
A declared grid. Content is laid out on an explicit column grid with fixed side margins — conventionally twelve columns at desktop — and the mobile grid keeps at least six columns so an asymmetric split survives the breakpoint.
Acceptance criterion: Block left and right edges align to a consistent column system at each breakpoint, side margins are equal and fixed, and at the mobile breakpoint at least one content block occupies a fraction of the grid rather than the full width.
Composition before effects. Every hierarchy and legibility problem is solved with typography, colour, grid, imagery, or white space. No shadow, gradient, texture, or decorative border is required to explain why an element reads the way it does.
Acceptance criterion: The layout can be fully described using only those five devices, and removing every shadow, gradient, and texture from the page leaves its hierarchy and legibility unchanged.
Avoid
Sans-only or serif-only pairings that erase the contrast between headline and body voice.
A page with no kicker, deck, or byline, which reads as assembled rather than authored no matter how well the text is set.
Multi-column layouts that keep a single-column measure, running each column too long for its width.
Long, unbroken text blocks with no typographic pacing, section breaks, subheads, or pull quotes.
Images used as generic background decoration without a caption or credit mechanism.
More than one accent colour competing with the reading experience.
Captions styled identically to body text.
Display typography that asks to be looked at rather than read through, which belongs to Art Deco or Maximalist rather than here.
Exhibiting the column grid as a visible structural device, which is Swiss.
Arbitrary vertical spacing that does not resolve to the baseline rhythm.
Acceptance criteria
Rule 1: Single-column body line length measures 45–75 characters at the primary reading viewport.
Rule 2: Headline and body text use visibly different font families.
Rule 3: Every content image has an adjacent, visually distinct caption.
Rule 4: Every section break has a visible rule or spacing of at least 2x body line-height.
Rule 5: Exactly one accent colour is used for links and emphasis.
Rule 6: Long-form content is single-column at 45–75 characters, or multi-column at 40–50 per column.
Rule 7: Pull quotes are visibly larger than body text and separated from surrounding paragraphs.
Rule 8: A kicker or deck and a byline are present and typographically distinct.
Rule 9: Every gap, margin, and padding belongs to one declared, closed spacing scale.
Rule 10: Content aligns to a declared column grid with fixed margins, keeping six or more columns on mobile.
Rule 11: Removing every shadow, gradient, and texture leaves hierarchy and legibility unchanged.
Blocking failures
Body text renders at a measure outside 40–90 characters per line at the primary reading viewport, making it materially unreadable.
No typographic distinction exists anywhere between headline and body type — a single font family, weight, and size are used across the entire page.
A content image is presented with no caption or credit mechanism in a context where the entry’s provenance metadata requires attribution.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Multi-column layouts (Rule 6) collapse to a single column before the reflow would push line length outside the range required by Rule 1. A column that can no longer hold 40 characters is collapsed rather than narrowed.
Margins and section spacing reduce proportionally on narrower viewports but never below a defined minimum that would violate Rule 4, and continue to draw from the closed scale required by Rule 9.
Headline sizes shrink at narrow viewports; body text does not, holding a 16px floor. Calls to action stay the same size or grow rather than shrink, because a control that shrinks on the viewport where it is tapped rather than clicked is moving in the wrong direction.
The mobile grid keeps at least six columns (Rule 10). At four or fewer, every block resolves to the same edge and the layout turns symmetrical without anyone deciding it should.
Mobile is reached by simplifying a finished desktop composition, not by designing small and enlarging: an asymmetric editorial composition cannot be recovered from a single-column one.
Captions remain immediately adjacent to their associated image after any reflow, preserving Rule 3.
Article furniture (Rule 8) survives every breakpoint. The deck may shorten and the byline may move, but a narrow viewport is not a reason to drop the byline — it is the cheapest element on the page and the one carrying authorship.
The single-accent-colour rule (Rule 5) and the headline/body typographic distinction (Rule 2) hold unchanged at every breakpoint.
On mobile and in application contexts, the measure rule governs the text container rather than the viewport: a full-width paragraph on a wide desktop application window violates Rule 1 exactly as it would on the web.
Editorial
editorial
Typographic hierarchy as structure
Type contrast, not colour or containers, is the primary organizing device.
Marguerite Sandoval14 March 20269 min read
Fig. 1 — A column grid holding its measure across a spread.Plate: the author
Editorial is a web-interface design style modelled on print-publication design. It builds a clear typographic hierarchy from a serif-and-sans (or comparably contrasting) type pairing, structures content on a considered reading grid, treats imagery as narrative content rather than decoration, and paces dense and open sections deliberately, producing an interface that reads as authored rather than assembled.
A serif (or otherwise distinctive) display typeface for headlines, paired with a clearly contrasting sans-serif for body and interface text.
A defined column grid with controlled line length for body copy, and a vertical rhythm derived from the body line-height.
The furniture of a published article: a kicker above the headline, a deck below it set one size down and often italic or lighter, and a byline naming the author.
Captions or credit lines set visually apart from body copy, adjacent to their images.
More from this series
02Grid-based compositionContent is set on a considered column and measure system borrowed from print layout, with a baseline rhythm holding it vertically.
03Imagery as contentImages are captioned, art-directed, and integrated into the narrative, not used as generic decoration.
04Restrained colour in service of legibilityColour supports reading; it does not compete with it.
reductive
Borrows print-publication conventions — a serif and sans pairing, a controlled reading measure, and the furniture of a published article — to produce an interface that reads as authored rather than assembled.
You are being asked to apply a Swiss visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Swiss” means here
Swiss design — also called the international typographic style — treats layout as a system rather than a composition. Before anything is placed, a grid is defined; everything afterward is positioned by that grid, and the grid remains legible in the finished result. Typography does the expressive work through size, weight, and position, using a single neutral sans-serif rather than a pairing. Colour is not a hierarchy device: if the interface were rendered in grayscale, the reading order would be unchanged.
The style is impersonal by intent. Its own designers held that the design should be as invisible as possible and the designer’s subjectivity pushed aside, so the material communicates without the interference of whoever arranged it. Nothing on a Swiss page is a signature. That is what separates it from Editorial, which pairs two families, merely uses a grid rather than showing one, and carries a byline.
The common misreading is that Swiss means sparse. It does not. A Swiss page can be extremely dense — full of text, tables, and images — and still be Swiss, because what defines it is the system, not the amount of material. Restraint applies to the number of decisions, not to the amount of content. Emptiness, when it appears, is allocated: a void is a measured region of the grid, not the space left after removing things.
A working order
The order matters more here than in any other direction, because Swiss is the one style where the structure is decided before the content is seen.
Declare the grid, in writing, first. How many columns, what gutter, what side margins, what row unit, what baseline. Write it down before opening a layout tool. If you cannot state it in one sentence, it is not a system yet.
Declare the type scale next. One neo-grotesque family, three or four sizes, two or three weights. Fix them now so that later hierarchy problems are solved by choosing among them rather than by inventing a new size.
Assign every piece of content a level in that scale before placing anything. Levels first, positions second.
Place the largest blocks against the grid, asymmetrically. Decide which columns stay empty as a deliberate act — the void is part of the composition and gets allocated now, not discovered later.
Place the remaining material, each block starting and ending on column edges and beginning on a row line. Both axes, not just the horizontal one.
Add rules only where a division already exists in the structure you just built.
Verify, then correct upstream. When something does not read, fix the scale or the placement. Do not introduce colour, a second family, or an off-grid nudge — those are the three ways this direction is usually lost.
Recommendations
Use one sans-serif family for everything, and make it a neo-grotesque — the lineage of Akzidenz-Grotesk, Univers, and Helvetica. “Any neutral sans” is too loose: a geometric face like Futura or a humanist like Gill Sans will read as another style entirely, however disciplined the grid beneath it is.
Constrain both axes. A column grid alone lets a block start at an arbitrary height while still passing every horizontal check; declare row lines and start blocks on them.
Set text flush left with a ragged right edge. The ragged edge is not the point — even word spacing is. Justified setting reaches its flush right edge by stretching the spaces between words, which produces rivers of white running down the column.
Compose asymmetrically. A block of text in the left two columns with the remaining four empty is more Swiss than the same block centred — the grid is what makes the emptiness feel placed rather than left over.
Choose photographs the way a document does: documentary, not atmospheric. Every image should have a subject the adjacent text names. Then crop it to a whole number of columns and leave it untreated — no filters, no colour overlays, no gradient scrims.
Let hierarchy survive without colour. Assign emphasis through size, weight, and position, then check the result in grayscale. If something becomes ambiguous, fix the typographic hierarchy rather than reintroducing colour.
Keep rules structural. A horizontal rule should mark a real division in the grid, not decorate a section header.
On the web, redeclare the grid at each breakpoint rather than stretching one system across all widths. A fixed canvas has one grid; a fluid one has a small number of declared grids and named widths where it swaps between them.
Avoid
A second typeface family introduced for contrast or personality.
A geometric or humanist sans standing in for a neutral one.
Centered or justified body text, and any setting that varies word spacing to reach a flush right edge.
Colour used to distinguish levels of a hierarchy that size and position should be carrying.
Elements positioned by eye, sitting between column edges or between row lines.
Photographic treatments: duotone, gradient overlay, heavy vignette, decorative masking.
Mood or atmosphere photography with no named subject, however untreated it is.
Rules that underline a heading rather than divide the grid.
Arbitrary vertical spacing that does not resolve to the baseline unit.
A byline, a signature, or any other mark of authorship. That is Editorial.
Reaching emptiness by deleting content rather than by allocating grid fields. That is Minimalist.
How to check your own work
Before considering the result finished, look at it and ask:
Can I overlay the grid on a screenshot and see every element land on a column edge and a row line? Anything that does not is either misplaced or an undeclared exception.
If I render the page in grayscale, does the reading order stay the same? If it does not, colour is carrying hierarchy that typography should carry.
How many typeface families are actually rendering, and is the one that remains a neo-grotesque? If more than one renders, decide which is doing real work and remove the other.
Are the left and right margins of the main content block different? If they are identical, the composition is centred rather than composed, and the grid is doing nothing.
Pick any empty region and measure it. Does it come out to a whole number of columns and row units? If not, it is residue rather than a void.
For each image, can I point to the words that say what it shows? If I cannot, it is decoration and it goes.
Could a reader tell who designed this? If yes, something on the page is a signature and it should not be there.
Swiss — Specification
Definition
Swiss is a web-interface design style in which a declared modular grid governs every placement decision and remains legible in the finished result. A single neutral sans-serif carries the entire typographic hierarchy through size, weight, and position; colour plays no structural role. The style is defined by the presence of a system, not by the quantity of content, so a dense page and a sparse page can both be Swiss.
The system is impersonal on purpose. The movement’s own formulation is that the design should be as invisible as possible and the designer’s subjectivity pushed aside, so that the material communicates without the interference of whoever arranged it. That is what separates Swiss from its two closest neighbours. It is not Editorial: Editorial pairs two contrasting families, merely uses a grid rather than exhibiting one, and is signed — a byline is one of its rules — where a Swiss page is deliberately anonymous. It is not Minimalist either: Minimalist removes material until little is left, while Swiss will accept a page dense with text, tables, and images provided every part of it resolves to the grid. Restraint here applies to the number of decisions, never to the amount of content.
One caution comes from the movement’s own strictest text. Müller-Brockmann, having written the book that codified the grid, held that the grid system is an aid and not a guarantee — it permits many uses, and a designer still has to find the solution the material needs. The rules below constrain how a system is declared and honoured; they do not choose the system.
Core principles
The grid precedes the composition. Columns, rows, gutters, and a baseline unit are defined before any element is placed, and everything resolves to them.
The designer is absent. Presentation is objective and impersonal; nothing on the page is a signature, and the structure is what the reader perceives rather than a personality.
One typographic voice. A single neutral sans-serif family expresses every level of hierarchy; contrast comes from scale, weight, and position, not from a second family.
Hierarchy without colour. Reading order survives in grayscale because size and position, not hue, establish emphasis.
Asymmetry as structure. Balance is achieved through deliberate unequal distribution across the grid rather than through centering.
Untreated material. Photography is documentary rather than emotive — cropped and positioned by the grid, presented as evidence rather than as atmosphere.
Visual characteristics
A visible underlying modular structure, with content blocks starting and ending on both column edges and row lines.
One neo-grotesque sans-serif family — the lineage of Akzidenz-Grotesk, Univers, and Helvetica — at a small number of sizes and two or three weights.
Text set flush left with a ragged right edge, holding word spacing even across every line.
Asymmetric composition with unequal left and right margins.
Documentary photography cropped to whole column widths, without filters or overlays.
Horizontal rules marking real structural divisions rather than decorating headings.
Vertical spacing that resolves to a single baseline unit throughout.
Large deliberate voids that read as placed, because they are measured in whole grid fields rather than left over.
Rules
Declared modular grid. Every content block begins and ends on a column edge of a documented grid, and its top edge begins on a declared row line of that same grid.
Acceptance criterion: Measuring the left, right, and top edge offsets of every content block resolves each to a finite set of positions from the declared grid, with no block landing between column edges or between row lines.
Single typeface family. The entire interface uses one sans-serif family.
Acceptance criterion: Collecting the computed font-family values across every rendered text node yields exactly one family.
A neutral sans, not merely a single one. That family is a neo-grotesque or grotesque — the Akzidenz-Grotesk, Univers, and Helvetica lineage — rather than a geometric, humanist, or display sans.
Acceptance criterion: The rendered family is named in a declared shortlist of grotesque and neo-grotesque faces, and its lowercase a is double-storey and its terminals are horizontal.
Hierarchy survives grayscale. Emphasis is carried by size, weight, and position rather than by colour.
Acceptance criterion: Rendering the page in grayscale leaves the reading order unchanged, and the number of distinct computed text colours is 2 or fewer.
Flush-left text with even word spacing. Body copy and headings are set flush left with a ragged right edge, so that word spacing stays constant on every line.
Acceptance criterion: The computed text-align of every paragraph and heading is left or start, no text block computes to justify or center, and measuring the inter-word gaps within any paragraph yields a single value across all of its lines.
Asymmetric composition. The optical axis of the layout does not coincide with the centre of the viewport.
Acceptance criterion: The measured left and right margins of the main content block differ by at least one full column width.
Grid-derived spacing. Vertical rhythm follows the declared baseline unit.
Acceptance criterion: Every vertical margin and padding value in the layout is an integer multiple of the documented baseline unit.
Untreated photography. Images are cropped by the grid and presented without decorative treatment.
Acceptance criterion: No content image has a CSS filter or a colour overlay, and each image’s rendered width equals a whole number of columns plus their intervening gutters.
Documentary imagery. Every content image depicts the subject the adjacent text is about. Images chosen for mood, atmosphere, or general appeal are not used.
Acceptance criterion: For each content image, a specific referent is named in the adjacent text or in its caption; an image whose referent cannot be named is a decoration and is removed.
Structural rules only. Every horizontal or vertical rule marks a division that exists in the grid.
Acceptance criterion: Each rendered rule aligns to a declared column edge or row line and separates two content regions; a rule that only underlines a heading is a defect.
Measured voids. Empty regions are whole grid fields rather than residual space.
Acceptance criterion: Every empty region larger than one baseline unit measures a whole number of columns wide and a whole number of row units tall.
Avoid
A second typeface family introduced for contrast or personality.
A geometric or humanist sans standing in for a neutral one, which reads as another style entirely however disciplined the grid beneath it is.
Justified or centered body text, and any setting that varies word spacing to reach a flush right edge.
Colour used to separate hierarchy levels that size and position should establish.
Elements positioned optically, landing between column edges or between row lines.
Duotone, gradient scrim, vignette, or decorative masking on photography.
Atmospheric or mood photography with no named subject, however untreated it is.
Rules used to decorate a heading rather than to mark a division in the grid.
Vertical spacing values that do not resolve to the baseline unit.
A byline, a signature, a personal voice, or any other mark of authorship, which belongs to Editorial rather than here.
Emptiness produced by removing content rather than by allocating grid fields, which is Minimalist rather than here.
Acceptance criteria
Rule 1: Every content block starts and ends on a declared column edge and begins on a declared row line.
Rule 2: Exactly one typeface family renders across the interface.
Rule 3: That family is a grotesque or neo-grotesque, not a geometric or humanist sans.
Rule 4: Reading order is unchanged in grayscale and at most 2 text colours are used.
Rule 5: All paragraphs and headings compute to flush-left alignment with constant word spacing.
Rule 6: Left and right margins of the main content block differ by at least one column.
Rule 7: All vertical spacing is an integer multiple of the baseline unit.
Rule 8: No content image carries a filter or overlay, and each spans whole columns.
Rule 9: Every content image has a referent named in adjacent text or caption.
Rule 10: Every rule aligns to the grid and separates two content regions.
Rule 11: Every empty region measures a whole number of columns and row units.
Blocking failures
No grid is declared, so column and row positions cannot be verified and every placement is an isolated judgment.
Two or more typeface families render across the interface, dissolving the single typographic voice the style depends on.
Colour is the only mechanism distinguishing a hierarchy level, so the structure collapses in grayscale or for a colour-blind reader.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
No source examined describes this style at fluid width — the entire literature composes on a fixed canvas, and the poster is its native format. What follows is reasoned from the rules rather than cited, and should be read as this catalogue’s position rather than as the movement’s.
The column count reduces at narrower viewports — for example six columns to four to two — but the grid is never abandoned; every block still resolves to a column edge and a row line in the reduced grid (Rule 1).
The grid is redeclared at each breakpoint, not stretched between them. A fixed canvas has one system; a fluid one has a small number of declared systems and named widths at which it changes from each to the next. A grid that interpolates continuously is not declared and cannot be verified.
The baseline unit may shrink proportionally, but vertical spacing continues to resolve to whole multiples of whichever unit is active (Rule 7).
Asymmetry (Rule 6) weakens as the column count falls and must be evaluated per breakpoint; at a two-column grid, a one-column offset satisfies the rule. Below two columns asymmetry is unachievable, and a single-column layout is an honest reduction rather than a violation.
Voids (Rule 11) are the first thing a narrow viewport destroys, because a whole empty column is unaffordable at small widths. They reduce to whole row units — horizontal bands — rather than disappearing.
Images re-crop to a whole number of columns in the reduced grid rather than scaling to an arbitrary fraction of the viewport (Rule 8).
The single-family (Rule 2), neutral-face (Rule 3), and flush-left (Rule 5) rules hold unchanged at every breakpoint.
Zentralbahnhof06:09
Swiss
A visible underlying modular structure, with content blocks starting and ending on both column edges and row lines.
ZeitLinieRichtungGleis
06:12S4The grid precedes the compositionColumns, rows, gutters, and a baseline unit are defined before any element is placed, and everything resolves to them.3
06:18S9The designer is absentPresentation is objective and impersonal; nothing on the page is a signature, and the structure is what the reader perceives rather than a personality.7
06:24IC1One typographic voiceA single neutral sans-serif family expresses every level of hierarchy; contrast comes from scale, weight, and position, not from a second family.1
06:31S12Hierarchy without colourReading order survives in grayscale because size and position, not hue, establish emphasis.3
06:40RE7Asymmetry as structureBalance is achieved through deliberate unequal distribution across the grid rather than through centering.11
reductive
Organizes an interface on a strict modular grid with a single neutral sans-serif, expressing hierarchy through scale and position alone so the underlying structure stays visible and the designer stays invisible.
Archetype
system
Density
regular
Parts
masthead · hero · grid · aside
Palette
grid · typography · sans-serif · system · asymmetric
Applying a Maximalist visual direction
You are being asked to apply a Maximalist visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Maximalist” means here
Maximalism treats abundance as the organizing principle. Where a reductive direction asks what can be removed, this one asks what else the composition can carry — more colour, more pattern, more layers, more typographic range. The surface is meant to feel full, energetic, and personally authored rather than systematically calm. It descends from decorative traditions where more ornament was held to be better, and it came back as a reaction against a decade of quiet interfaces. That reaction is its purpose: it exists so a brand with an expressive personality does not disappear into a uniform look.
The distinction that matters is between abundance and noise. Noise is what happens when nothing is deliberate: colours that arrived by accident, layers that overlap because nothing was positioned, text that is hard to read because no one checked. Maximalism is the opposite of accidental — the field’s own name for it is controlled chaos. Every colour is chosen, every overlap is placed, and the viewer still has a decided path: a first thing, a second thing, a third thing. If someone cannot tell you what the page is about after two seconds, the composition has failed on its own terms, not just on conventional ones.
One honest caveat, from the strongest source available on this style. A designer who publicly predicted maximalism would take over the web later corrected himself: it did not, and most practitioners dial it back. Treat that as a reason to be deliberate about intensity, not a reason to be timid — a maximalist page that could be made quiet without losing anything was never maximalist, only busy.
A working order
Decide what the loudness is for. Write one sentence naming the personality the page has to carry. Everything below serves that sentence; anything that does not serve it is decoration proving familiarity with a trend.
Nominate the first, second, and third element before composing. This is the decision the style is most often lost at, and it cannot be recovered later by making something bigger.
Build the palette — five or more saturated colours — and pick one of them to win. A pop that stands out from the rest of the palette is what keeps five colours from cancelling each other out.
Set the type scale with a dramatic top and bottom, and pick three families with genuinely different character. Start the header larger than feels comfortable; you will almost never regret it in this direction.
Fill the ground with pattern, texture, or gradient, so the layers have something to sit on.
Compose by overlapping, placing the first element so it commands, then the second and third so the order you nominated is the order a stranger reads.
Declare the motion budget — how many things may animate at once — before adding the first animation.
Measure the worst text on the page against the actual pixels behind it. Fix by changing the composition, not by lowering the standard.
Recommendations
Build a real palette of five or more saturated colours and use all of them, then let one win. Assign them before you compose, so the abundance is designed rather than accumulated.
Layer elements so they genuinely overlap. Blocks that merely sit next to each other read as a busy grid, not as maximalism; the depth comes from things crossing over one another.
Push the typographic range hard. Set the largest element several times the size of the smallest, and use three or more families with genuinely different character — a serif against a sans, a script or a monospace against both — rather than three weights of the same one.
Fill the background. A pattern, a texture, or a gradient field gives the layers something to sit on; a flat white background under a dense composition reads as an unfinished layout rather than a chosen one.
Establish a reading order, not merely a focal point. One element unmistakably the largest, then a decided second and third, so the density has a path through it instead of a single landmark in a crowd.
Bound the motion instead of banning it. Decide how many elements may animate at the same time, write the number down, and hold to it. Under prefers-reduced-motion: reduce that number is zero.
If the page mixes loud and quiet, decide which one governs and say so. A page that alternates between abundance and restraint without a declared dominant reads as indecision, and this is the most commonly repeated warning about the style.
Check contrast on every piece of text, against the actual pixels underneath it rather than against an assumed background. This is where maximalist work fails most often, and it is entirely avoidable.
Vary the angles and scales of secondary material — small photographs, badges, stickers, rules — so the composition has internal rhythm rather than uniform density.
Keep the loudness where it earns its keep. A common and defensible architecture is an abundant entry page over quieter inner pages where a task has to be completed; that is a decision about pages, not a dilution of the style.
Avoid
A palette that grew by accident rather than being chosen, especially unsaturated colours mixed in with saturated ones.
Five colours competing equally, with none of them carrying the composition.
Elements packed tightly but never overlapping, which reads as crowding rather than layering.
Three weights of one typeface standing in for three families.
Text placed over a busy image or pattern without checking its contrast at the worst point.
A composition with no reading order, where several things are equally large and the eye has nowhere to land.
An unstated number of things animating at once, or any motion at all under reduced-motion preferences.
Mixing barely-there minimalism with abundance and leaving undecided which one dominates.
Loudness used where a hierarchy decision was needed — volume is not an ordering device.
Adding to a restrained composition and calling the result maximalist.
How to check your own work
Before considering the result finished, look at it and ask:
If I look at the screen for two seconds and then look away, what do I remember? If the answer is “a lot of stuff,” there is no reading order, and the first element needs to get much larger.
Can I name the first, second, and third element — and would a stranger name the same first one?
Is every colour in the palette one I chose, or did some arrive because a component brought its own default with it? And which one is winning?
Do the layers actually cross each other, or are they just close together?
How many things are moving at once, and did I decide that number or discover it? What happens with reduced motion turned on?
Take the single worst piece of text on the page — smallest, over the busiest background — and measure its contrast. If it fails, the density is being paid for by the reader, which is the one cost this style cannot justify.
Turn off every colour, overlap, and type variation in my head. Is any piece of information now missing? If so, it was never written down.
Maximalist — Specification
Definition
Maximalist is a web-interface design style that treats abundance as the organizing principle. It composes with a large saturated palette, genuinely overlapping layers, extreme typographic range, and a filled rather than empty background, producing a dense and energetic surface. It is distinguished from visual noise by two requirements it never relaxes: an ordered reading sequence, and legible text everywhere.
The style descends from decorative traditions — Baroque, Art Nouveau — in which more detail and more ornament was held to be better, and it returned as a deliberate reaction against a decade of minimalism. That reaction is what it is for: it exists so that a brand with an expressive personality does not disappear into a uniform quiet look. A maximalist page that could be made quiet without losing anything was never maximalist; it was a busy one.
Abundance is not the same as accumulation, and this is the boundary the style is most often lost at. The field’s own name for the distinction is controlled chaos: the material is dense, and the order through it is decided. A composition where the viewer cannot say what they looked at first, second, and third has failed the style’s own test, however loud it is. It is also not Minimalist inverted — a page does not become maximalist by adding to a restrained one, and a maximalist page mixed with a restrained one has to declare which of the two governs rather than alternating between them.
Core principles
Abundance is designed, not accumulated. The palette, the layers, and the typographic range are decided in advance rather than arrived at by addition.
Ordered chaos. Density is deliberate and so is the path through it: first, second, and third are decided by the designer, not left to the viewer.
Depth through overlap. Elements cross one another; proximity alone produces crowding, not layering.
Extreme typographic range. Contrast between the largest and smallest text is dramatic, and multiple families with distinct character coexist.
The surface is filled. Background is treated as material — pattern, texture, or gradient — rather than as empty ground.
Density never costs legibility. Every piece of text remains readable against whatever is actually behind it.
One direction governs. Where restraint and abundance meet on the same page, one of them is declared dominant and the other serves it.
Visual characteristics
Five or more saturated colors present simultaneously.
One of those colors carried further than the rest, so a single accent still wins against an already loud palette.
Overlapping blocks, images, and type rather than adjacent ones.
One element dramatically larger than everything around it, with a clear second and third behind it.
Three or more typeface families with genuinely different character — commonly a serif against a sans, or a script or monospace against both.
A patterned, textured, or gradient background rather than a flat fill.
Secondary material — small photographs, badges, rules — set at varied scales and angles.
Very little uncovered area within the initial viewport.
Rules
Abundant saturated palette. At least five distinct saturated colors are present at once.
Acceptance criterion: Sampling the rendered colors within the initial viewport yields at least five distinct hues with a saturation of 60% or greater.
A winning accent. One color leads the palette rather than five competing equally.
Acceptance criterion: One hue from Rule 1 appears on the dominant element identified by Rule 6 and on no more than two other elements, and no other hue in the palette is applied to fewer total elements.
Genuine overlap. Elements cross one another rather than merely sitting adjacent.
Acceptance criterion: At least three pairs of rendered elements have intersecting bounding boxes.
Extreme typographic range. The scale jump between largest and smallest text is dramatic, across multiple families.
Acceptance criterion: The ratio between the largest and the smallest rendered font-size is 6:1 or greater, and at least three distinct computed font-family values are present.
Deliberate density. The composition fills its surface.
Acceptance criterion: Rendered content covers at least 60% of the initial viewport area.
Filled background. The background is material rather than a flat single color.
Acceptance criterion: The primary background region has a background-image, a repeating pattern, or a gradient; it does not compute to a single solid color.
An ordered reading sequence. A first, second, and third element are decided, and the composition makes that order visible despite the density.
Acceptance criterion: Three elements are nominated in order; the first occupies at least twice the area of the second, the second is larger than the third, and three independent viewers shown the page for two seconds name the first element.
Legibility is not traded away. All text remains readable over whatever sits behind it.
Acceptance criterion: Every text element measures a contrast ratio of at least 4.5:1 against the least favorable background pixel beneath it, not against an average.
A bounded motion budget. Motion is permitted and its quantity is declared rather than discovered.
Acceptance criterion: The number of elements animating simultaneously in any viewport is stated in the design’s own documentation and the rendered page does not exceed it; with prefers-reduced-motion: reduce, that number is zero.
A declared dominant direction. Where the page mixes abundance with restraint, which one governs is written down.
Acceptance criterion: The design states which of the two directions is dominant, and every region of the page can be assigned to the dominant direction or named as a deliberate exception to it.
Meaning never rests on the visual layer alone. Colour, layering, angle, and typographic variation decorate information that is also stated in text.
Acceptance criterion: Removing all colour, overlap, and typographic variation leaves every piece of information on the page still stated somewhere in words.
Avoid
A palette that accumulated from component defaults rather than being chosen.
Five colors competing equally, with no one hue carrying the composition.
Tight packing without overlap, which reads as crowding rather than layering.
Three weights of a single family substituting for three families.
Text placed over pattern or imagery without checking its worst-case contrast.
A composition where several elements are equally large and no reading order exists.
Motion added until the page is hard to read or slow, or an unstated number of things moving at once.
Combining barely-there minimalism with abundance and leaving which one dominates undecided.
Loudness substituting for hierarchy — volume applied where an ordering decision was needed.
Adding to a restrained composition and calling the result maximalist.
Acceptance criteria
Rule 1: At least five saturated hues are present in the initial viewport.
Rule 2: One hue leads the palette and appears on the dominant element.
Rule 3: At least three pairs of elements genuinely overlap.
Rule 4: The largest-to-smallest type ratio is at least 6:1 across at least three families.
Rule 5: Content covers at least 60% of the initial viewport.
Rule 6: The background is patterned, textured, or gradient rather than a flat color.
Rule 7: A first, second, and third are nominated, sized accordingly, and the first is named on sight.
Rule 8: Every text element meets 4.5:1 against its worst-case background pixel.
Rule 9: The simultaneous-animation count is documented, respected, and zero under reduced motion.
Rule 10: A dominant direction is declared and every region resolves to it or is a named exception.
Rule 11: Removing colour, overlap, and type variation leaves every piece of information still stated in words.
Blocking failures
Any text falls below 4.5:1 against the actual pixels behind it, making the density a cost paid by the reader.
No reading order exists, so the composition has no entry point and a visitor cannot determine what the page is about.
Color, layering, or typographic variation is used to convey meaning that exists nowhere else, so the information is unavailable to anyone who cannot resolve the visual distinction.
Motion continues under prefers-reduced-motion: reduce, which turns an expressive choice into an accessibility failure on the style that can least afford one.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Density (Rule 5) is evaluated per breakpoint. At narrow viewports the 60% coverage target may fall to 45% as layers are removed rather than compressed; removing a layer is correct, shrinking every layer is not.
The typographic ratio (Rule 4) may compress to no less than 4:1 at narrow viewports, documented as an explicit exception rather than allowed to drift.
Overlap (Rule 3) is preserved by reducing the number of overlapping pairs, never by separating all layers into a stacked single column.
The reading order (Rule 7) is re-nominated per breakpoint, not inherited. A composition whose second element falls below the fold at a narrow width has a different sequence there, and it is decided rather than discovered.
The motion budget (Rule 9) reduces at narrow viewports rather than carrying over: the same count on a smaller surface is a denser experience, and the devices reaching those widths are the least able to render it.
The contrast floor (Rule 8) holds unchanged at every breakpoint and is re-measured after any reflow, since text frequently lands over different background material at narrower widths.
Where the design declares restraint dominant on inner pages and abundance on the entry page (Rule 10), that boundary is a property of the page and does not move with the viewport.
Atelier MaximalistFW26
MOREISMORE
Lookbook
Five or more saturated colors present simultaneously.
01
Abundance is designed, not accumulated
The palette, the layers, and the typographic range are decided in advance rather than arrived at by addition.
02
Ordered chaos
Density is deliberate and so is the path through it: first, second, and third are decided by the designer, not left to the viewer.
03
Depth through overlap
Elements cross one another; proximity alone produces crowding, not layering.
04
Extreme typographic range
Contrast between the largest and smallest text is dramatic, and multiple families with distinct character coexist.
expressive
Fills the surface deliberately with layered color, pattern, and typographic extremes, treating abundance rather than restraint as the organizing principle while keeping a decided reading order through the density.
You are being asked to apply a Glassmorphism visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Glassmorphism” means here
Glassmorphism builds surfaces that behave like frosted glass: partially transparent, blurring whatever passes behind them, and edged with a thin band of light where the material catches. The effect communicates layering — you can see that one thing is in front of another because you can see through it. The name was coined in November 2020 for patterns that already existed; the technique itself runs back through macOS Big Sur, iOS 7, and Windows Vista’s Aero Glass. It is an operating-system idiom on loan to the web, which is why its conventions are unusually specific.
Two things make or break this direction, and both are frequently missed. The first is that glass needs something behind it. Over a flat grey background there is nothing to blur, and the panels read as slightly translucent boxes rather than as glass; the background is not decoration here, it is the material the effect is made of. The second is that translucency puts text on an unpredictable surface. A label that reads comfortably over the pale part of a gradient can become unreadable where the gradient darkens, and the only way to know is to check the worst point rather than the average. Most published glassmorphism fails exactly there.
There is a third thing that separates this direction from every other one in this catalogue: it has an official off switch. Operating systems ship a reduce-transparency setting, and the browser exposes it as prefers-reduced-transparency. Some readers have already asked for less of this effect before your page loads. So you are designing two surfaces, not one — the glass, and the opaque interface it becomes when the glass is declined — and the second is authored rather than degraded into.
A working order
Build the background first. Soft out-of-focus colour shapes, a broad gradient, or a blurred photograph, with at least two hues. Everything after this is reacting to it.
Decide the blur budget — how many surfaces may carry backdrop-filter in one viewport — before placing any of them. It is among the most expensive things you can ask a browser to composite.
Place the panels, at most two deep anywhere on screen.
Set the glass: blur between 8 and 15 pixels, fill alpha between 0.1 and 0.4, one hairline light border a pixel wide.
Separate the reading panels from the decorative ones. Anything carrying more than a paragraph of text stops being glass in the strict sense and takes an opaque fill — see below. Name those panels; the exemption is declared, not improvised.
Measure the worst pixel behind every text block and every control.
Author the reduced-transparency design, then the reduced-motion behaviour, then the no-backdrop-filter fallback. Three separate conditions, one opaque surface that can serve all three.
Scroll it on a mid-range Android phone. This is the step that gets skipped and the one the budget in step 2 exists for.
Recommendations
Build the background first: soft, out-of-focus colour shapes, a broad gradient, or a blurred photograph. Give it real variation — at least two hues — so there is something worth seeing through the glass.
Blur between 8 and 15 pixels. Below eight it looks like a rendering artifact rather than frost. At twenty and above the compositing cost rises sharply and nothing further is gained that a reader can see.
Keep the panel fill barely there — an alpha between roughly ten and forty percent — so the material shows through while the panel still separates from what is behind it.
Except where the panel carries sustained reading. Accessibility guidance for text-heavy glass panels is an alpha of 0.7 or above, and it is right: contrast over a semi-transparent fill is not computable in the general case, because it depends on content you do not control. Take the opaque fill on reading panels and keep the glass for chrome, controls, and cards. A panel of body text at 0.2 alpha is a legibility problem wearing a style.
Give every panel a single thin light edge, brighter than its fill and only a pixel wide. That edge is what reads as the cut of the glass, and without it the panel dissolves into the background.
Limit the stack. Two layers of glass over one another still read as depth; three or more turn into visual mud and stop communicating order.
Never let a control be a control only because it is translucent. Give it two independent signals — a border meeting 3:1, a text label, a distinct shape — and check that it still reads as interactive with the blur turned off.
Choose text colours against the worst case. Find the darkest and lightest point of the background that falls under a text block and verify contrast at both, not against the panel’s nominal colour.
Handle the three off states as design work, not error handling.prefers-reduced-transparency: reduce for readers who asked; prefers-reduced-motion: reduce so nothing about the glass animates for them; and absent backdrop-filter support. One well-chosen opaque palette usually serves all three.
Avoid
Glass panels over a flat, single-colour background, where the effect has nothing to work with.
A panel fill so opaque that no background detail is visible through it — outside the reading exemption, which you declare deliberately.
Blur radii of twenty pixels and above.
Three or more translucent layers stacked at any point on the screen.
Text contrast evaluated against the panel’s tint rather than against the background actually showing through it.
Heavy drop shadows added under the glass to force separation; the light edge and the blur should be doing that work.
Placing critical small text — labels, values, legal copy — directly over the busiest part of the background.
An unstated number of blurred surfaces, discovered on a slow device instead of decided in the design.
Ignoring reduced-transparency, which is the one preference this style is the direct target of.
How to check your own work
Before considering the result finished, look at it and ask:
Can I see what is behind each panel, blurred? If not, either the blur or the transparency is not actually applied.
If I replaced the background with a flat grey, would anything remain of the effect? If the answer is no, that is correct — and it means the background deserves as much attention as the panels.
How many elements are carrying backdrop-filter right now, and did I decide that number? Does it still scroll smoothly on a mid-range Android phone?
Find the single worst pixel behind each block of text and check the contrast there. If it fails, move the text, take the reading exemption, or change the background under it.
Is there any panel carrying real prose at a low alpha? That one should be opaque.
Point at each control and name two reasons a stranger would know it is a control. If there is only one, and it is the fill, it is not discoverable.
Turn on reduced transparency and look at the result. Is it a design, or is it what happened? Then do the same with reduced motion, and again with backdrop-filter switched off entirely.
Glassmorphism — Specification
Definition
Glassmorphism is a web-interface design style in which surfaces behave like frosted glass: partially transparent, blurring the content behind them, and edged with a thin band of light. Layer order is communicated by seeing through one surface to another. The style depends on a background with real chromatic variation, and it is only shippable when text contrast is verified against the worst-case background pixel rather than against the panel’s nominal fill.
What the glass is for is the part most often missed. Translucency is not a material effect here but a functional one: it lets the reader see the context behind an element — what is underneath, what a panel is covering, where it sits in the stack. That is the property the designer who named the style uses to separate it from its neighbours, since skeuomorphism and claymorphism imitate a material and add nothing a reader can use. It is also the test that separates real glass from decorative blur: if nothing behind the panel is worth seeing, the effect is a texture wearing the style’s name.
The name is recent and the technique is not. Michal Malewicz coined the term in November 2020, grouping frosted-glass patterns that already existed under one word; the effect itself runs back through macOS Big Sur in 2020, iOS 7 in 2013, and Windows Vista’s Aero Glass in 2006. It is an operating-system idiom that arrived on the web, which is why its conventions are so specific and why the platform ships an accessibility preference aimed directly at it.
That preference is the style’s defining constraint, and it makes this the one entry in the catalogue whose aesthetic has an official off switch. Translucency is a stated accessibility burden for some readers, and both the operating system and the browser expose a request to reduce it. A glassmorphic interface therefore has two designs, not one: the glass, and the legible surface it becomes when the glass is declined. Neither is a fallback for the other — a design that only works with the blur on is unfinished.
Core principles
The background is the material. The effect is produced by what shows through the glass, so the background carries as much design weight as the panels.
Translucency carries context, not just order. A front surface reveals a blurred version of what sits behind it, so the reader learns both the depth of the stack and what the panel is covering. This is the functional property that distinguishes the style from an imitated material.
Light defines the edge. A single thin bright border reads as the cut of the glass and keeps the panel from dissolving into its surroundings.
Depth is shallow by design. Two layers read as order; more read as mud.
Contrast is measured at the worst point. Text sits on a variable surface, so legibility is evaluated against the least favorable pixel under it.
The glass is refusable. The interface has a designed appearance for readers who have asked for less transparency, and it is designed rather than degraded into.
Blur is a budget. Backdrop blur is among the most expensive things a browser can be asked to composite, so the number of glass surfaces is a decision rather than a consequence.
Visual characteristics
Translucent panels with a visibly blurred background showing through.
A background of soft gradient fields, out-of-focus color shapes, or a blurred photograph, in at least two hues.
A single hairline border on each panel, lighter than the panel fill.
Low-opacity panel fills that tint rather than obscure, except where a panel carries sustained reading.
At most two overlapping glass layers at any point on screen.
Depth expressed by transparency and edge light rather than by heavy shadow.
Controls whose boundaries survive the translucency — a glass button is still shaped, labelled, and edged like a button.
Bright gradients showing through the glass, and edges that catch light rather than sitting flat.
Clean, minimal sans-serif typography, which the style’s own surveys report as part of its idiom.
Rules
Real backdrop blur, within a bounded radius. Each glass surface blurs what is behind it, at a radius between 8px and 15px.
Acceptance criterion: Every glass panel has a computed backdrop-filter whose blur radius is at least 8px and no more than 15px. Below 8px the effect reads as a rendering artifact; at 20px and above the cost rises sharply for no further legible gain.
Chromatic background behind the glass. The region under each panel has something worth seeing through it.
Acceptance criterion: Sampling the background region beneath each panel yields at least two distinct hues or a gradient; it does not resolve to a single flat color.
Bounded transparency, raised for reading. The panel fill tints without obscuring, except where the panel carries sustained text.
Acceptance criterion: The alpha channel of each panel’s computed background-color falls between 0.1 and 0.4 inclusive. A panel carrying more than one paragraph of body text is exempt from the upper bound and instead uses an alpha of 0.7 or greater; each such panel is named in the design’s documentation.
Hairline light edge. Each panel is cut from its surroundings by a single bright border.
Acceptance criterion: Every panel has a 1px border whose color has an alpha between 0.1 and 0.5 and is lighter than the panel’s own fill.
Shallow stacking. Glass does not accumulate into unreadable depth.
Acceptance criterion: At no point on the rendered screen do more than two translucent panels overlap.
Worst-case contrast. Text legibility is verified against the actual background, not an average.
Acceptance criterion: Every text element over glass measures at least 4.5:1 against the least favorable pixel of the blurred background beneath it, and every essential non-text control measures at least 3:1 against its own worst case.
Defined degradation. The interface remains legible where backdrop blur is unsupported.
Acceptance criterion: With backdrop-filter disabled, each panel renders an opaque background that preserves the same text contrast ratios required by Rule 6.
A declared blur budget. The number of simultaneously composited glass surfaces is decided rather than discovered.
Acceptance criterion: The maximum number of elements carrying backdrop-filter in any single viewport is stated in the design’s documentation, the rendered page does not exceed it, and the page holds its frame budget when scrolled on a mid-range Android device.
Reduced transparency is honoured. A reader who has asked the system for less transparency gets a designed opaque interface.
Acceptance criterion: Under prefers-reduced-transparency: reduce, every glass panel renders an opaque fill with no backdrop-filter, and the resulting surface satisfies Rules 4, 6, and 11 without further change.
Reduced motion is honoured. Glass does not animate for a reader who has asked it not to.
Acceptance criterion: Under prefers-reduced-motion: reduce, no blur radius, panel opacity, or background gradient position is animated or transitioned.
Controls are discoverable by more than their fill. A control’s boundary does not rest on translucency alone.
Acceptance criterion: Every interactive element carries at least two of: a border meeting 3:1 against its surroundings, a text label, and a shape distinct from the surrounding panels — and it remains identifiable as a control with backdrop-filter disabled.
The glass shows something worth seeing. What sits behind a panel is content or context the reader benefits from, not a texture placed there to justify the blur.
Acceptance criterion: For each glass panel, what appears behind it can be named — a photograph, a chart, a map, a scrolling list, a deliberate colour field belonging to the page. A panel whose backdrop exists only so the panel has something to blur is decoration and is made opaque.
Avoid
Glass panels over a flat, single-color background, where no material shows through.
Panel fills opaque enough that no background detail is visible, producing a tinted card rather than glass — outside the reading exemption in Rule 3, which is declared rather than assumed.
Blur radii of 20px and above, which cost sharply more to composite and add nothing legible.
Three or more translucent layers overlapping at any screen position.
Contrast evaluated against the panel’s nominal tint rather than the background showing through it.
Heavy drop shadows added beneath panels to force separation that the edge and blur should provide.
Critical small text placed over the busiest region of the background.
An unstated number of backdrop-filter surfaces, discovered on a mid-range device rather than decided in the design.
Treating the reduced-transparency appearance as a degradation to be tolerated rather than a second design to be authored.
Blur applied where nothing behind it is worth seeing, which imitates the material without the property that makes the style a category.
Acceptance criteria
Rule 1: Every glass panel has a backdrop blur between 8px and 15px.
Rule 2: The background beneath each panel contains at least two hues or a gradient.
Rule 3: Every panel fill has an alpha between 0.1 and 0.4, or 0.7 and above where declared as a reading panel.
Rule 4: Every panel has a 1px border, lighter than its fill, with alpha between 0.1 and 0.5.
Rule 5: No more than two glass layers overlap at any point.
Rule 6: All text over glass meets 4.5:1, and essential controls 3:1, against the worst-case pixel.
Rule 7: With backdrop blur disabled, panels render opaque and contrast is preserved.
Rule 8: The count of backdrop-filter surfaces is documented, respected, and holds frame budget on mid-range hardware.
Rule 9: Under reduced transparency, panels render opaque and still satisfy Rules 4, 6, and 11.
Rule 10: Under reduced motion, no blur, opacity, or gradient position animates.
Rule 11: Every control carries two independent affordance signals and survives blur being disabled.
Rule 12: What sits behind each glass panel can be named as content or context, not filler.
Blocking failures
Any text over glass falls below 4.5:1 against the worst-case pixel behind it, which is the most common failure of this style and makes the interface unusable for part of its audience.
No fallback exists for absent backdrop-filter support, so the interface renders as transparent panels over an unblurred background and content becomes unreadable.
A control’s only boundary is its translucent fill against a background of similar luminance, leaving the control undiscoverable.
prefers-reduced-transparency: reduce is ignored, so a reader who has asked the operating system for less transparency receives the full effect anyway.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Blur radius (Rule 1) may reduce at narrow viewports for performance but never below 8px, since a smaller radius reads as a rendering artifact rather than as glass.
The blur budget (Rule 8) tightens at narrow viewports rather than carrying over, because the devices reaching those widths are typically the least able to composite the effect. Reduce the number of glass surfaces, not the radius, once the radius is at its floor.
The background (Rule 2) is re-composed rather than scaled at narrow widths, so each panel still has chromatic variation beneath it after reflow.
Stacking (Rule 5) tends to resolve naturally as layouts collapse to one column; where it does not, layers are removed rather than made more transparent.
Rule 6 is re-measured after every reflow without exception, because a panel that moves to a different part of the background sits over different pixels and its contrast result does not carry over.
A panel that gains the reading exemption in Rule 3 keeps it at every width, and a panel that acquires sustained text only after a narrow-width reflow acquires the exemption with it.
The fallback required by Rule 7 and the two preference rules (9 and 10) apply identically at every breakpoint. A preference is not a viewport.
GlassmorphismAccountsCards
Translucent panels with a visibly blurred background showing through.
Total balance$12,480.55SendRequest
The background is the materialThe effect is produced by what shows through the glass, so the background carries as much design weight as the panels.+ 1,204.00
Translucency carries context, not just orderA front surface reveals a blurred version of what sits behind it, so the reader learns both the depth of the stack and what the panel is covering. This is the functional property that distinguishes the style from an imitated material.− 86.40
Light defines the edgeA single thin bright border reads as the cut of the glass and keeps the panel from dissolving into its surroundings.+ 320.15
material
Builds surfaces from translucent, blurred panels that let a colored background show through, using light edges and depth ordering to separate layers, with a designed opaque surface for readers who decline the transparency.
Archetype
surface
Density
regular
Parts
masthead · hero · panel
Palette
glassmorphism · translucency · blur · depth
Applying a Neubrutalism visual direction
What “Neubrutalism” means here
Neubrutalism is deliberate graphic bluntness made usable. It uses thick dark outlines, hard offset shadows with no blur, flat saturated color, heavy display type, and visibly separate objects. Unlike raw web brutalism, it does not make navigation obscure or controls hostile: the visual force makes actions easier to identify.
Recommendations
Build the page from a neutral ground, a dark outline color, and a limited set of saturated accents.
Give every interactive object a 2–4px solid outline and a hard, zero-blur offset shadow in the same dark color.
Use large, heavy type and blocky layouts, but preserve a clear first action and normal reading order.
Let color, a label, and a distinct outline work together; color alone never carries state or meaning.
Make active states physically answer the hard shadow: a pressed item moves onto its shadow or loses it rather than softly lifting.
Avoid
Blur, gradients, translucent panels, or soft elevation.
A maximum-saturation treatment on every object; hierarchy still needs a quiet ground.
Raw awkwardness mistaken for personality: clipped labels, unreadable text, and hidden actions are not the style.
Tiny controls or fine type that cannot carry the outline system.
A working order
Name the one action the creative platform needs to make unmistakable.
Choose the neutral ground, outline ink, and two or three accents before arranging components.
Draw a simple, blocky hierarchy using large type and aligned rectangular objects.
Apply one outline thickness and one hard-shadow offset consistently.
Add labels and shape differences so every control remains identifiable without color.
Test contrast and the pressed state, then remove any decorative effect that does not make structure clearer.
How to check your own work
Can every control be identified from its label and outline before hover?
Are all shadows hard, offset, and unblurred?
Does the hierarchy remain clear when the accent colors are removed?
Does pressing a control resolve the hard-shadow geometry rather than adding a soft animation?
Neubrutalism — Specification
Definition
Neubrutalism is a web-interface design style that retains brutalism’s exposed structure and hard edges while replacing its severity with bright, playful color. Objects are outlined in thick dark borders, filled with flat saturated color, and displaced by hard unblurred shadows, producing surfaces that read as cut paper laid slightly above the page. Unlike brutalism, it permits rounded corners and depends on drop shadow as a structural device.
Core principles
Outline defines the object. A thick dark border, not a background change, is what makes a block read as a distinct shape.
Shadow is structure, not light. Offsets are hard and unblurred, describing displacement rather than illumination.
Flat saturated color. Variety comes from adding colors, never from softening them into gradients or tints.
Deliberate imbalance. Small, intentional misalignments make the composition read as hand-placed.
Physical interaction. Controls respond by moving into their own shadow, so feedback is spatial rather than merely chromatic.
Visual characteristics
Thick dark outlines on every distinct object, including images and inputs.
Hard drop shadows with no blur, offset consistently in one direction.
Bright, flat, saturated block fills with no gradient anywhere.
A single corner radius applied uniformly, or none at all.
Sibling blocks offset from one another by small, visible amounts.
Press states that remove the shadow and displace the element by the same offset.
Rules
Thick dark outline. Every container and control is bounded by a heavy dark border.
Acceptance criterion: Computed border-width is 2px or greater on every container and interactive element, with a border color whose relative luminance is below 0.15.
Hard offset shadow. Blocks are displaced by shadow rather than lit by it.
Acceptance criterion: Each block has a box-shadow with a blur radius of exactly 0 and an offset of at least 4px on both axes.
Flat saturated fills. Color is applied as solid blocks.
Acceptance criterion: Each primary block has a solid computed background-color with saturation of 50% or greater, and no linear-gradient or radial-gradient appears anywhere on the page.
Uniform corner radius. Rounding, where present, is consistent.
Acceptance criterion: The set of non-zero computed border-radius values across the page reduces to exactly one value.
Deliberate misalignment. The composition reads as placed rather than snapped.
Acceptance criterion: At least two sibling blocks have positional offsets differing by between 4px and 24px, documented as intentional rather than incidental.
Physical press feedback. Controls move into their own shadow when activated.
Acceptance criterion: In the :active state, the control’s shadow resolves to 0 and the element translates by exactly its resting shadow offset, within 100ms or less.
Contrast over saturated fills. Text remains readable on bright blocks.
Acceptance criterion: Every text element measures at least 4.5:1 against the solid fill color of the block containing it.
One outline system. Structural ink is reused rather than varied by component.
Acceptance criterion: Every visible outline and hard shadow resolves to the same computed color.
Explicit controls. Every action has both a label and a distinct bordered shape.
Acceptance criterion: Each actionable element contains visible text and a 2px-or-greater outline at rest.
Bounded palette. Saturation supports hierarchy rather than making every object equally loud.
Acceptance criterion: The page uses one neutral ground, one dark structural ink, and no more than four saturated fill colors.
No color-only state. Status and selection retain a textual or geometric cue.
Acceptance criterion: Removing color leaves a label, outline, position, or icon change that identifies each state.
Avoid
Soft or blurred shadows, which restore conventional elevation and dissolve the style.
Gradients or same-hue tints used to imply depth.
Multiple corner radii across the interface.
Misalignment large enough to read as a layout defect rather than a decision.
Thin or light-colored borders that cannot hold a saturated fill.
Text placed on a bright fill without a measured contrast result.
Acceptance criteria
Rule 1: Every container and control has a dark border of at least 2px.
Rule 2: Every block has a zero-blur shadow offset at least 4px on both axes.
Rule 3: All fills are solid and saturated, with no gradients present.
Rule 4: Exactly one non-zero corner radius is used across the page.
Rule 5: At least two sibling blocks are intentionally offset by 4–24px.
Rule 6: Active controls lose their shadow and translate by its offset within 100ms.
Rule 7: All text meets 4.5:1 against its containing block’s fill.
Rule 8: All outlines and hard shadows use the shared structural ink.
Rule 9: Every action has text and a heavy outline at rest.
Rule 10: The palette stays within one neutral, ink, and four accents.
Rule 11: States retain a non-color cue.
Blocking failures
Shadows carry a blur radius greater than zero, which removes the single property the style is built on and returns the interface to conventional soft elevation.
Text on a saturated fill falls below 4.5:1, which occurs most often on yellow and lime blocks and is not correctable by adjusting the border.
A control’s press state produces no spatial change, so the physical interaction model the style promises does not exist and pressed state is conveyed by color alone.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Border width (Rule 1) may reduce at narrow viewports but never below 2px, since a thinner outline cannot hold a saturated fill.
Shadow offset (Rule 2) may reduce proportionally to no less than 4px; the blur radius stays at 0 at every breakpoint without exception.
Deliberate misalignment (Rule 5) is reduced or removed at the narrowest widths, where a single-column layout leaves no siblings to offset against; this is an acceptable relaxation, unlike the others.
The uniform radius (Rule 4), the press feedback (Rule 6), and the contrast floor (Rule 7) hold unchanged at every breakpoint.
MAKE / NeubrutalismPublish projectCreative workspace
Make work visible.
Thick dark outlines on every distinct object, including images and inputs.
Start a board →01
Outline defines the object
A thick dark border, not a background change, is what makes a block read as a distinct shape.
02
Shadow is structure, not light
Offsets are hard and unblurred, describing displacement rather than illumination.
03
Flat saturated color
Variety comes from adding colors, never from softening them into gradients or tints.
04
Deliberate imbalance
Small, intentional misalignments make the composition read as hand-placed.
material
Turns blunt geometry into a usable creative-platform language: thick dark outlines, hard unblurred shadows, and saturated blocks make every action explicit.
Archetype
system
Density
regular
Parts
masthead · hero · grid · statusbar
Palette
neubrutalism · hard-shadow · saturated-color
Applying a Bento visual direction
You are being asked to apply a Bento visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Bento” means here
Bento organizes content into a mosaic of rounded tiles at different sizes, packed tightly into a filled rectangle with an identical gap on every side — the arrangement of a compartmented lunch box, which is where the name comes from. Its purpose is to make a lot of separate things scannable at once: instead of a long scroll of sections, a viewer sees the whole set in a single glance and picks what to read.
The discipline is the one-idea rule. Each tile holds exactly one thing: one claim, one metric, one image, one feature. The moment a tile contains two headings of equal weight, it stops being a compartment and becomes a small page, and the format’s entire advantage disappears. Tile size is how you express importance — a bigger compartment for the thing that matters more — not a container to be filled with more material.
The second discipline is that the mosaic must actually be full. A bento arrangement with holes in it reads as a broken grid rather than a designed one, and fixing that with automatic dense packing is not an option: it makes what a viewer sees diverge from what a screen reader announces.
Recommendations
Define the grid explicitly — column count, row count, and the span of every tile — rather than letting tiles flow and land where they may.
Vary spans meaningfully. If every tile is the same size it is a card grid, not a bento; give the most important item two columns or two rows and let the rest fit around it.
Put one idea in each tile. If a tile needs two headings, it is two tiles.
Use one corner radius for every tile, generous enough to read as a compartment — eight pixels or more.
Keep the gap identical horizontally and vertically. An uneven gap is what makes a mosaic look accidental.
Fill the rectangle. If a hole appears, resize a neighboring tile or promote something into it; do not leave the gap and do not turn on dense auto-placement.
Make each tile self-contained: its own heading, its own meaning, understandable without reading its neighbors. Viewers do not read a bento in order.
Order the tiles in the document the way you want them read, and let the visual order follow. Explicit placement keeps those two the same.
Avoid
Uniform tiles at a single size, which is a card grid wearing the name.
Two headings of the same level inside one tile.
Different corner radii or different gap values across the mosaic.
Empty cells left inside the mosaic’s bounding rectangle.
Dense automatic packing, which makes visual order diverge from document order.
Tiles whose content only makes sense in sequence with the tile beside them.
How to check your own work
Before considering the result finished, look at it and ask:
Are all the tiles the same size? If so, nothing is being said about relative importance and the format is doing no work.
Does any tile contain two things I would describe separately? Split it.
Is there a hole anywhere inside the mosaic’s rectangle? Fill it by resizing, not by packing.
Read the tiles in document order with the visuals hidden. Is that the order they appear on screen? If not, the layout is reordering content and that has to be fixed at the placement level.
Pick any single tile and read it alone. Does it still mean something? If it needs its neighbor, the content is not compartmented yet.
A working order
Inventory the product facts and give every fact a priority before placing a tile.
Declare the desktop grid, rows, gaps, and spans explicitly; place the primary promise first in both DOM and visual order.
Give each remaining feature one heading and one supporting idea, then fill any hole by resizing content rather than enabling dense packing.
Verify the mosaic as a rectangle, its reading order as a sequence, and every tile as meaningful in isolation.
Redraw all spans for narrow widths and retain at least one high-priority full-width tile until the honest one-column collapse.
Bento — Specification
Definition
Bento is a web-interface layout style that arranges content as a tightly packed mosaic of rounded tiles at varying spans, filling a rectangle with a uniform gap on every side. Each tile carries exactly one idea, and tile size expresses relative importance. Its purpose is to make many separate items scannable simultaneously rather than sequentially.
Core principles
One idea per compartment. A tile holds a single claim, metric, image, or feature; two ideas mean two tiles.
Size communicates importance. Span is the mechanism for emphasis, not a container to be filled with more material.
The mosaic is full. Holes inside the bounding rectangle read as a broken grid rather than a composed one.
Explicit placement. Every tile’s span and position is declared, which is what keeps visual order identical to document order.
Tiles stand alone. Each is understandable without its neighbors, because a bento is not read in sequence.
Visual characteristics
Rectangular tiles of varying width and height packed into a filled rectangle.
A single, generous corner radius shared by every tile.
An identical gap horizontally and vertically between all tiles.
One heading plus its supporting content inside each tile.
No empty cells within the mosaic’s bounds.
Larger tiles for higher-priority items, surrounded by smaller ones.
Rules
Explicit grid with varying spans. The mosaic is a declared grid in which tiles occupy different spans.
Acceptance criterion: The container declares explicit columns and rows, and at least two tiles occupy different span values.
One idea per tile. Each compartment carries a single subject.
Acceptance criterion: No tile contains more than one heading at the same heading level.
Uniform corner radius. Tiles share a single rounding value.
Acceptance criterion: The computed border-radius is identical across every tile and measures 8px or greater.
Constant gap. Separation is even in both axes.
Acceptance criterion: Computed row-gap and column-gap are equal to each other and identical throughout the mosaic.
No holes. The mosaic fills its own rectangle.
Acceptance criterion: No empty grid cell exists within the bounding rectangle of the rendered mosaic.
Visual order equals document order. Placement never reorders content.
Acceptance criterion:grid-auto-flow does not include dense, and the visual sequence of tiles matches their order in the DOM.
Self-contained tiles. Each tile is meaningful in isolation.
Acceptance criterion: Every tile has its own accessible name, and its content is comprehensible without reading any adjacent tile.
Priority owns area. The largest tile carries the primary product promise, not incidental decoration.
Acceptance criterion: The tile with the greatest rendered area contains the page’s primary heading or action, while supporting facts occupy smaller tiles.
One radius and one gap system. The mosaic reads as one container even when tile colors differ.
Acceptance criterion: All tiles share one computed radius and every adjacent horizontal and vertical separation resolves to the same gap token.
Feature content is scannable. A tile describes a product feature without requiring sequential prose.
Acceptance criterion: Each feature tile has one heading and at most one supporting sentence, and no sentence refers to a neighboring tile for its subject.
Responsive spans are deliberate. The priority hierarchy survives the reduced grid.
Acceptance criterion: At a two-column breakpoint, the primary tile spans both columns and remaining tiles use declared spans without holes or dense packing.
Avoid
Uniform tiles at a single size, which is a card grid rather than a bento.
Two same-level headings inside one tile.
Varying corner radii or gap values across the mosaic.
Empty cells left inside the mosaic’s bounding rectangle.
Dense automatic packing, which separates visual order from document order.
Tile content that only makes sense in sequence with its neighbor.
Acceptance criteria
Rule 1: The grid is explicitly declared and at least two tiles have different spans.
Rule 2: No tile contains two headings of the same level.
Rule 3: All tiles share one corner radius of at least 8px.
Rule 4: Row gap and column gap are equal and constant throughout.
Rule 5: No empty cell exists inside the mosaic’s bounding rectangle.
Rule 6: Dense packing is not used and visual order matches DOM order.
Rule 7: Every tile has its own accessible name and stands alone.
Rule 8: The largest tile carries the primary promise or action.
Rule 9: Tile radius and separation use one shared system.
Rule 10: Feature tiles remain short and self-contained.
Rule 11: Reduced grids use explicit, hole-free spans.
Blocking failures
Dense automatic packing is enabled, so the order a sighted visitor sees differs from the order a screen reader or keyboard user encounters.
A tile’s content is unintelligible without an adjacent tile, which breaks the format’s premise that items can be read in any order.
Every tile has an identical span, so the layout communicates nothing about relative importance and the format has been applied as decoration.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
The column count reduces at narrower viewports and tile spans are re-declared for the reduced grid; spans are never left to reflow automatically, since that is what introduces holes and reordering.
Span variation (Rule 1) must survive the reduction: at a two-column grid, at least one tile spans both columns while others span one.
The no-holes requirement (Rule 5) is re-verified at every breakpoint, because a span that fits a four-column grid frequently leaves a gap in a three-column one.
At the narrowest widths the mosaic legitimately collapses to a single column of stacked tiles; Rules 2, 3, 4, 6, and 7 continue to apply, while Rules 1 and 5 are satisfied trivially.
ORBITAL / BentoProduct tour
Every signal, in its place.
Rectangular tiles of varying width and height packed into a filled rectangle.
Explore workspace
One idea per compartment
A tile holds a single claim, metric, image, or feature; two ideas mean two tiles.
Size communicates importance
Span is the mechanism for emphasis, not a container to be filled with more material.
The mosaic is full
Holes inside the bounding rectangle read as a broken grid rather than a composed one.
Explicit placement
Every tile's span and position is declared, which is what keeps visual order identical to document order.
material
Arranges content as a tight mosaic of rounded tiles at varying spans, each holding exactly one idea, so a dense overview stays scannable.
Archetype
system
Density
dense
Parts
masthead · hero · grid
Palette
bento · grid · modular · feature grid · scannable
Applying a Neumorphism visual direction
What “Neumorphism” means here
Neumorphism makes controls look extruded from, or pressed into, one continuous surface. The surface and controls share a mid-luminance fill; paired light and dark shadows provide the relief. Its central constraint is non-negotiable: relief is material language, never the only evidence that text or a control exists.
Recommendations
Choose one mid-tone background and use it for its controls and containers.
Use exactly two opposing shadows, with one consistent light direction across the whole interface.
Show both raised resting controls and recessed selected or pressed states.
Give wellness metrics and essential controls high-contrast text, labels, and indicators independent of the shadows.
Keep rounding generous and nesting shallow so the continuous material remains believable.
Avoid
White or black grounds, borders, gradients, and controls filled differently from their background.
More than one light source or a third shadow used as decoration.
Small, low-contrast labels or controls discoverable only through soft relief.
Deeply nested raised surfaces, which turn the page into unrelated cards.
A working order
Set the mid-tone material and calculate text contrast against it before styling depth.
Decide the global light direction and define the two corresponding shadows once.
Arrange the wellness controls as one shallow surface, not a card stack.
Assign raised and recessed states to meaningful wellbeing actions.
Add direct labels, icons, or fill cues wherever relief alone would be ambiguous.
Recheck every state at narrow width and with shadows mentally removed.
How to check your own work
Do controls and their container share the same fill?
Does every relief use exactly two shadows with opposite offsets?
Can someone identify every essential action without seeing shadows?
Are raised and recessed states both visibly present?
Neumorphism — Specification
Definition
Neumorphism is a web-interface design style in which elements appear extruded from, or pressed into, a single continuous surface. The element and its container share one fill color, and separation is produced entirely by a pair of opposing shadows — one lighter than the surface, one darker — with no borders present. Because depth is the sole visual separator, the style is only shippable when contrast requirements are satisfied independently of the shadows.
Core principles
One continuous material. Elements are not placed on the surface; they are formed from it.
Paired opposing shadows. A light and a dark shadow, offset in opposite directions, produce the extrusion.
A single light source. One consistent light direction across the page keeps the surface reading as continuous.
Two states only. Raised and recessed are the style’s vocabulary, and both must be visibly present.
Depth is not contrast. Legibility and control discoverability are established by something other than the shadow.
Visual characteristics
A mid-luminance solid background, never white or black.
Controls and panels filled with exactly the background color.
Two shadows per surface: one pale, one dark, offset oppositely.
No borders, outlines, or hard edges anywhere.
Inset shadows expressing pressed or selected states.
Generous rounding, which strengthens the impression of moulded material.
Rules
Shared fill. Elements and their container use the same color.
Acceptance criterion: The computed background-color of each control differs from its containing surface by 3% or less in relative luminance.
Paired opposing shadows. Extrusion is produced by exactly two shadows.
Acceptance criterion: Each neumorphic surface has a box-shadow containing exactly two shadows whose offsets are opposite in sign, one lighter and one darker than the background color.
No borders. Separation never uses an edge.
Acceptance criterion: Computed border-width is 0 on every neumorphic surface.
Mid-luminance ground. The background leaves room for both shadows.
Acceptance criterion: The page background is a solid color with a relative luminance between 0.15 and 0.85.
Single light direction. The surface reads as continuous.
Acceptance criterion: Every light shadow on the page shares the same sign of offset on both axes.
Raised and recessed both exist. The interaction model is expressed spatially.
Acceptance criterion: The pressed or selected state uses an inset shadow while the resting state does not, and both states are present in the interface.
Contrast independent of relief. Legibility does not depend on the shadow.
Acceptance criterion: All text measures at least 4.5:1 and every essential control boundary or indicator measures at least 3:1 against the background, with shadows excluded from the measurement.
Shallow surface hierarchy. Relief does not stack into unrelated cards.
Acceptance criterion: No raised surface is nested inside more than one other raised surface.
Direct control labels. Essential actions are named independently of material depth.
Acceptance criterion: Every essential control includes visible text or a high-contrast icon with an adjacent text label.
Measured state change. Selection is spatial and remains identifiable without color.
Acceptance criterion: A selected control changes from outset to inset relief and includes a visible text, icon, or position cue.
Generous touch separation. Controls do not need borders to remain individually findable.
Acceptance criterion: Adjacent controls have at least 8px of visible gap at every breakpoint.
Avoid
White or black backgrounds, which eliminate one of the two shadows.
Elements filled differently from their container.
Borders, outlines, or hard edges used to reinforce separation.
More than one light direction on a page.
Shadow alone signalling that an element is interactive.
Small or fine text, which the low ambient contrast makes disproportionately hard to read.
Extruded surfaces nested more than one level deep.
Acceptance criteria
Rule 1: Controls and their containers differ by 3% or less in luminance.
Rule 2: Every surface has exactly two opposing shadows, one lighter and one darker.
Rule 3: No neumorphic surface has a border.
Rule 4: The page background luminance falls between 0.15 and 0.85.
Rule 5: All light shadows share one offset direction.
Rule 6: Pressed states use inset shadows and resting states do not.
Rule 7: Text meets 4.5:1 and control indicators meet 3:1 excluding shadows.
Rule 8: Raised hierarchy never nests deeper than one level.
Rule 9: Essential controls have direct visible labels.
Rule 10: Selected controls are inset and retain a non-color cue.
Rule 11: Adjacent controls retain an 8px visible gap.
Blocking failures
A control’s only indication that it is interactive is its shadow, measured below 3:1, leaving it undiscoverable for readers who cannot resolve soft two-tone depth. This is the defining failure of the style and the reason Rule 7 exists.
Text falls below 4.5:1 against the surface, which the low ambient contrast of the style makes easy to miss and impossible to compensate for with relief.
No pressed state exists, so activation is unconfirmed and the style’s only interaction affordance is absent.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Shadow offset and blur may scale down proportionally at narrower viewports, but both shadows remain present; dropping to a single shadow flattens the surface and ends the style.
Rule 7 is re-verified at every breakpoint and at increased text scaling, since smaller rendered text on a low-contrast surface is where the style fails first.
Rounding may reduce at narrow widths without affecting any rule.
The shared-fill (Rule 1), border-free (Rule 3), and single-light-direction (Rule 5) rules hold unchanged at every breakpoint.
Where a narrow viewport forces controls close together, spacing is increased rather than adding separators, since a separator line would violate Rule 3.
Neumorphism / todayLMDaily rhythm
Take a softer pace.
A mid-luminance solid background, never white or black.
72calm
01One continuous materialElements are not placed on the surface; they are formed from it.
02Paired opposing shadowsA light and a dark shadow, offset in opposite directions, produce the extrusion.
03A single light sourceOne consistent light direction across the page keeps the surface reading as continuous.
material
Uses one continuous, mid-tone surface and paired opposing shadows to make a wellness control feel moulded from its background, without outsourcing legibility to relief.
Archetype
surface
Density
regular
Parts
masthead · hero · panel
Palette
neumorphism · soft-ui · depth
Applying a Flat visual direction
What “Flat” means here
Flat removes simulated material and elevation. Solid color, clean sans-serif type, simple geometry, and explicit boundaries carry the structure instead. It is not Minimalism: a flat educational dashboard may use several saturated colors when each has a structural job.
Recommendations
Use solid fills and 1–2px lines to separate modules, categories, and controls.
Build a palette of at least three saturated structural colors, then pair color with labels, position, or shape.
Draw icons as simple one- or two-tone geometry.
Give each control a clearly contrasting fill or outline at rest.
Use color or opacity changes for hover and selected states; elements never lift.
Avoid
Any box shadow, text shadow, bevel, texture, or gradient.
Text-only controls that look like static copy.
A single accent pretending to do the work of a structural palette.
State changes that depend only on color with no label, icon, or positional cue.
A working order
List the learning tasks and assign a distinct structural color to each region or status.
Draw the dashboard in flat blocks before adding text or icons.
Add clear labels and geometric icons for every action and state.
Check every boundary for a solid color change or thin line.
Verify controls at rest, hover, and selected with no shadow available to help them.
Reduce the layout at narrow widths by stacking blocks, not by adding elevation.
How to check your own work
Does the computed page contain any shadow or gradient?
Do at least three saturated colors carry different structural jobs?
Can a learner identify buttons and progress states without relying on color alone?
Does hover change only color or opacity?
Flat — Specification
Definition
Flat is a web-interface design style that eliminates every simulation of physical depth — shadow, gradient, bevel, and texture — and transfers the structural work of separation onto solid color, simple geometry, and clear typography. It is distinguished from reductive styles by its palette: flat interfaces are frequently colorful, because color is the mechanism that replaces depth.
Core principles
No simulated depth. Nothing imitates elevation, material, or light.
Color is structure. Regions, categories, and states are distinguished chromatically rather than spatially.
Geometry over rendering. Icons and shapes are drawn as flat forms, not shaded objects.
Controls announce themselves without relief. Interactivity is carried by fill and outline contrast.
State changes are chromatic. Hover and active alter color or opacity, never height.
Visual characteristics
Solid color regions with no gradient or texture anywhere.
A palette of several saturated colors distinguishing regions and states.
Two-tone geometric icons without shading.
Boundaries formed by color change or a thin line.
Filled or outlined controls that read as controls at a glance.
Clean sans-serif type with no applied effects.
Rules
No simulated depth. The interface contains no device that imitates elevation.
Acceptance criterion: Inspecting computed CSS across the page finds no box-shadow, no text-shadow, and no gradient background-image on any element.
Color forms the boundary. Separation between regions is chromatic or linear.
Acceptance criterion: Each boundary between adjacent regions is produced by a background-color change or a border of 1–2px; no boundary is produced by a shadow.
Flat iconography. Icons are drawn without dimensional rendering.
Acceptance criterion: Every icon uses one or two flat tones and contains no gradient, shadow, or shading.
Broad saturated palette. Color carries structural information.
Acceptance criterion: At least three distinct colors with a saturation of 40% or greater are used to identify regions, states, or categories.
Unaffected typography. Type is rendered plainly.
Acceptance criterion: All text uses a sans-serif family and carries no text-shadow, outline, or textured fill.
Controls announce themselves without relief. Interactivity is visible at rest.
Acceptance criterion: Every interactive control has a fill or border measuring at least 3:1 against its immediate background.
Chromatic state changes. States never reintroduce depth.
Acceptance criterion: Between resting and hover or active, the computed background-color or opacity changes, and no shadow appears in any state.
Paired meaning. Color never carries a learning status alone.
Acceptance criterion: Each colored status also has a visible label, icon, shape, or positional distinction.
Straight boundaries. A color block or thin line makes each region legible at rest.
Acceptance criterion: Every adjacent module has either a distinct solid fill or a 1–2px border between it and its neighbour.
Named structural palette. Each saturated role keeps the same meaning across the dashboard.
Acceptance criterion: A documented color role is not reused for a conflicting category, state, or action.
No elevation in motion. Interaction never changes position, scale, or shadow.
Acceptance criterion: Comparing rest and hover/active computed styles finds no change to transform, box-shadow, or text-shadow.
Avoid
Any shadow, including near-invisible defaults inherited from a component library.
Gradients used to reintroduce a small amount of depth.
Icons with gradients, shadows, or dimensional shading.
Regions separated by elevation instead of color.
Text-only controls with no fill or outline, visually identical to surrounding copy.
Hover or active states that lift or translate an element.
Acceptance criteria
Rule 1: No shadow, text-shadow, or gradient exists anywhere on the page.
Rule 2: Every region boundary is a color change or a 1–2px line.
Rule 3: All icons use flat tones with no shading.
Rule 4: At least three saturated colors carry structural meaning.
Rule 5: All text is sans-serif with no applied effects.
Rule 6: Every control has a fill or border at 3:1 or better against its background.
Rule 7: State changes alter color or opacity only, with no shadow in any state.
Rule 8: Every colored status has a non-color cue.
Rule 9: Every module boundary is a fill change or thin line.
Rule 10: Saturated color roles keep one meaning across the dashboard.
Rule 11: Interaction does not change position, scale, or shadow.
Blocking failures
An interactive control is visually indistinguishable from static content, so a visitor cannot tell what can be acted on. This is the historical failure of the style and Rule 6 exists to prevent it.
Color is the only carrier of a distinction that has no textual or shape equivalent, making that information unavailable to a color-blind reader — a risk this style raises specifically because color does so much structural work.
Shadows or gradients are present, which contradicts the definition of the style rather than merely weakening it.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Region boundaries (Rule 2) may switch from color blocks to thin lines as regions stack into a single column, since adjacent same-color regions would otherwise merge.
The palette (Rule 4) is evaluated per breakpoint: colors dropped along with the regions they identified do not count against the requirement, provided at least three remain structural.
Control contrast (Rule 6) is re-verified after reflow, because a control moving onto a differently colored region changes its measured ratio.
The prohibition on depth (Rules 1 and 7) holds unchanged at every breakpoint; no shadow may be introduced at narrow widths to compensate for lost separation.
Flat / learnWeek 08
Keep learning in view.
Solid color regions with no gradient or texture anywhere.
Resume lessonModule 1
No simulated depth
Nothing imitates elevation, material, or light.
In progressModule 2
Color is structure
Regions, categories, and states are distinguished chromatically rather than spatially.
StartModule 3
Geometry over rendering
Icons and shapes are drawn as flat forms, not shaded objects.
StartModule 4
Controls announce themselves without relief
Interactivity is carried by fill and outline contrast.
Start
material
Uses solid color, plain sans-serif type, and geometric signals to make an educational dashboard legible without simulating elevation or material.
Archetype
system
Density
regular
Parts
masthead · hero · grid · statusbar
Palette
flat-design · solid-color · geometric
Applying a Y2K visual direction
You are being asked to apply a Y2K visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Y2K” means here
Y2K revives the visual optimism of the turn of the millennium, when consumer technology was being marketed as bright, friendly, and imminent. Surfaces look polished and reflective: chrome lettering with a highlight running across it, buttons shaped like liquid drops with a specular gleam on top, silver and electric blue and hot pink at high brightness, small sparkle motifs catching the light. Everything appears to be lit from inside or freshly manufactured.
The reference points are objects, not screens — the translucent plastic and brushed metal of early-2000s consumer electronics, and the way they were photographed for advertising. That is the register to aim for: product gloss, not the muted flat surfaces of contemporary interfaces.
The practical difficulty is that chrome is a gradient, and text on a gradient has no single contrast value. A label that sits comfortably on the light band of a chrome fill can vanish on the dark band a few pixels away. Chrome belongs on display type and ornament, where size carries the legibility; body text belongs on solid ground.
Recommendations
Build chrome as a multi-stop gradient with at least three stops in a light–dark–light sequence. That reversal is what the eye reads as a reflection; a simple two-stop gradient reads as a tint.
Reserve chrome and metallic fills for display type, logos, and ornament. Set body text on a solid color.
Give buttons and highlighted containers a bubble shape: a corner radius of at least half their height, so they read as capsules or drops rather than rectangles.
Add a specular highlight — a distinct paler band across the upper portion of a filled element, separate from the base fill. This is what makes a surface look glossy rather than merely colored.
Push brightness up. Several colors at high luminance and saturation, with at least one silver or chrome value present, is the palette; muted tones are a different decade.
Set headlines heavy: bold weights plus a display family with unusual width, or an outline or dimensional treatment. Restrained type does not carry this direction.
Include a sparkle or starburst motif somewhere, and mark it as decorative so assistive technology skips it.
Measure text over metallic fills at both extremes of the gradient — the lightest stop and the darkest — and treat the worse result as the real one.
Avoid
Body copy set over chrome or any multi-stop gradient.
Two-stop gradients standing in for chrome, which read as a flat tint.
Muted, dusty, or desaturated palettes, which belong to a different era.
Rectangular buttons with small radii, which flatten the bubble language.
A single flat fill on an element that is supposed to look glossy; without the highlight band it is just a colored shape.
Sparkle and starburst motifs left exposed to screen readers as meaningless content.
How to check your own work
Before considering the result finished, look at it and ask:
Does the chrome actually reverse direction — light, then dark, then light? If it only goes light to dark, it is a tint and will not read as metal.
Is there any body text sitting on a gradient? Move it onto a solid fill.
Do the filled elements have a separate, visibly paler band across the top? Without it the surface is not glossy.
Is anything on the page actually bright? A palette of medium-luminance colors will not carry this direction no matter what shapes you use.
Take the darkest stop of every metallic fill that has text on it and measure the contrast there, then repeat with the lightest. Both must pass.
A working order
Define the release, listener action, and one emotional promise before drawing decoration.
Build a solid reading surface and the album title first; reserve the chrome treatment for the display layer.
Choose one dominant cool-neon palette, one bubble control treatment, and a small sparkle budget.
Add a separate highlight band to every major glossy surface, then test its text against the lightest and darkest stops.
Reduce secondary chrome and ornament at narrow widths while preserving the primary title and the album action.
Y2K — Specification
Definition
Y2K is a web-interface design style that revives the glossy consumer-technology optimism of the turn of the millennium. Surfaces read as polished and reflective: multi-stop chrome fills, capsule shapes carrying specular highlights, high-luminance saturated color, heavy display typography, and sparkle ornament. Its visual reference is early-2000s product photography rather than any screen convention.
Core principles
Surfaces are manufactured objects. Elements look moulded, polished, and lit rather than drawn.
Reflection over tint. Metal is expressed by a reversing light–dark–light gradient, not by a single directional fade.
Brightness is the palette. Colors sit high in luminance and saturation, with metal present alongside them.
Type is inflated. Display typography is heavy, wide, or dimensional; restraint belongs to another direction.
Gloss never costs legibility. Reflective fills carry display type and ornament, not reading text.
Visual characteristics
Chrome and metallic gradients on logotypes and headlines.
Capsule and bubble shapes with radii at half their height or more.
A distinct paler highlight band across the upper portion of filled elements.
High-brightness palettes including silver, electric blue, and hot pink.
Heavy display type, often outlined, extruded, or unusually wide.
Four-point sparkles and starburst motifs as ornament.
Rules
Chrome reads as reflection. Metallic surfaces reverse their light direction.
Acceptance criterion: At least one primary element uses a gradient of three or more stops in a light–dark–light sequence.
Inflated display type. Headlines carry weight and unusual form.
Acceptance criterion: Headline elements compute a font-weight of 700 or greater and use a display family of non-standard width, or carry an outline or dimensional treatment.
High-brightness palette. Color sits at the bright end of the range.
Acceptance criterion: At least three colors present measure a relative luminance of 0.6 or greater with saturation of 50% or greater, and at least one silver or chrome value is present.
Specular highlight. Filled surfaces look glossy rather than colored.
Acceptance criterion: At least one filled element has a distinct paler band across its upper portion, rendered separately from its base fill.
Bubble geometry. Containers and buttons read as capsules.
Acceptance criterion: Highlighted containers and buttons have a computed border-radius of at least 50% of their rendered height.
Sparkle ornament, marked decorative. The period motif is present without polluting the accessibility tree.
Acceptance criterion: At least one sparkle or starburst motif is rendered and carries aria-hidden or an equivalent exclusion from assistive technology.
Legibility over metal. Text on reflective fills passes at both extremes.
Acceptance criterion: Text over a metallic surface measures at least 4.5:1 against both the lightest and the darkest stop of that gradient.
One coherent material system. Chrome, bubble controls, and sparkle ornament use one shared lighting direction and palette.
Acceptance criterion: Inspecting all major glossy surfaces finds the same highlight direction and no more than one chrome treatment plus one saturated accent family.
Display-only reflection. Sustained reading remains on solid ground.
Acceptance criterion: No paragraph longer than one sentence is rendered over a gradient, metallic fill, or image.
Bounded ornament. Sparkles support the release identity without becoming content.
Acceptance criterion: Decorative sparkle motifs are fewer than the primary actionable controls and all are excluded from assistive technology.
Narrow-screen reduction. Secondary gloss reduces before the primary release signal does.
Acceptance criterion: At the narrow breakpoint, the title, release action, and one metallic treatment remain visible while secondary decorative treatments are removed or simplified.
Avoid
Body copy set over chrome or any multi-stop gradient.
Two-stop gradients used as chrome, which read as flat tints.
Muted, dusty, or desaturated palettes.
Rectangular buttons with small radii.
Flat single fills on elements intended to look glossy.
Sparkle motifs left exposed to assistive technology as meaningless content.
Acceptance criteria
Rule 1: A three-or-more-stop light–dark–light gradient is present.
Rule 2: Headlines are weight 700+ in a non-standard-width or treated display family.
Rule 3: Three colors meet the brightness threshold and a metallic value is present.
Rule 4: At least one filled element carries a separate specular highlight band.
Rule 5: Buttons and highlighted containers are radiused to half their height or more.
Rule 6: A sparkle motif is present and hidden from assistive technology.
Rule 7: Text over metal passes 4.5:1 at both the lightest and darkest gradient stop.
Rule 8: Major glossy surfaces share one lighting direction and palette.
Rule 9: Sustained reading never sits over a reflective fill.
Rule 10: Ornament remains decorative and less numerous than actions.
Rule 11: Narrow layouts retain the primary release signal before secondary gloss.
Blocking failures
Reading text is set over a metallic or multi-stop gradient and fails contrast at one extreme, which cannot be corrected by adjusting the text color because a single color cannot satisfy both ends of the gradient.
Decorative sparkle and starburst motifs are announced by assistive technology, injecting meaningless content into the reading experience.
No metallic or specular treatment is present at all, in which case the work is a bright colorful interface rather than this style.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Chrome treatments (Rule 1) are preserved on the primary logotype and dropped from secondary elements at narrow viewports rather than being scaled down, since a compressed gradient loses its reversal and stops reading as metal.
Display type (Rule 2) may reduce in size but not in weight or character; substituting a plain family at narrow widths ends the style.
Bubble geometry (Rule 5) is recalculated after reflow, because a button that becomes taller when its label wraps needs a larger radius to remain a capsule.
Rule 7 is re-measured after every reflow, since text moving across a gradient encounters different stops.
Ornament (Rule 6) may be reduced in quantity at narrow widths; whatever remains stays excluded from assistive technology.
LUMI / Y2Klisten · archive · contact✦
LIQUID SATELLITE
Chrome and metallic gradients on logotypes and headlines.
Play the first signalSide A
Surfaces are manufactured objects
Elements look moulded, polished, and lit rather than drawn.
Side B
Reflection over tint
Metal is expressed by a reversing light–dark–light gradient, not by a single directional fade.
Side C
Brightness is the palette
Colors sit high in luminance and saturation, with metal present alongside them.
retro
Revives the glossy techno-optimism of the turn of the millennium: chrome surfaces, inflated type, specular highlights, and a palette that looks lit from inside.
Archetype
surface
Density
regular
Parts
masthead · hero · panel
Palette
y2k · chrome · retro-futurism · glossy · bubble
Applying a Technical Blueprint visual direction
You are being asked to apply a Technical Blueprint visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Technical Blueprint” means here
This direction dresses an interface as an engineering document. Faint hairline guides run between elements the way leader lines run across a drawing. Small monospaced labels sit beside things, set in capitals with wide letter spacing. A tick scale or coordinate index runs along an edge. Where a photograph would normally go, there is a line drawing — an exploded view, a schematic, a cross-section. The palette is two neutrals and a single accent, the way a printed drawing is ink, paper, and one revision color.
The register it produces is precision and seriousness: the impression that the thing being described has been measured. That suits work that genuinely has a technical dimension, and it looks borrowed on work that does not.
There is one thing to be careful about, and it is the reason this direction can go wrong in a way most cannot. The aesthetic is built from labels and figures, and it is tempting to scatter labels that look meaningful but say nothing — reference numbers, tolerances, coordinates invented because they complete the picture. On a poster that is harmless. On a product, a number that looks like a measurement will be read as one. Keep ornament clearly ornamental: lines, ticks, and marks that carry no digits. Anything that presents as data must actually be data.
Recommendations
Draw hairline guides at one pixel with deliberately low contrast, so they sit below the text in the visual hierarchy. They connect and frame elements; they are not container borders.
Set micro-labels in a monospaced family at twelve pixels or smaller, uppercase, with positive letter spacing. That combination is most of what makes the register read.
Put a coordinate system somewhere visible: a tick scale along an edge, a numbered index down a column, a grid reference. It is the single element that most signals “measured.”
Hold the palette to two neutrals and one accent. Blueprint blue and drafting white are the obvious reference, but any two-neutral scheme works as long as the accent stays alone.
Replace photography with line work. An exploded diagram, a wireframe view, or a cross-section is the correct illustration here; a photograph collapses the whole effect.
Keep decorative marks non-numeric. Ticks, arrows, brackets, and crop marks are safe ornament. Invented part numbers, dimensions, and tolerances are not.
Keep real information at full contrast while ornament stays faint. The hierarchy should be unambiguous: what you can read matters, what you can barely see is structure.
Avoid
Invented figures — dimensions, tolerances, reference codes, coordinates — presented as though they described the actual subject.
Hairlines drawn at the same contrast as body text, which turns structure into noise.
Photographs used as the primary illustration.
A second accent color, which breaks the ink-paper-revision logic.
Monospaced type used for body copy, where its wide spacing makes reading slower without adding meaning.
Guides so faint they disappear entirely; below roughly 1.5:1 they read as rendering artifacts.
How to check your own work
Before considering the result finished, look at it and ask:
Point at every number on the screen. Can you say where each one comes from? Any number you cannot source is decoration pretending to be data, and it has to go.
Are the guides clearly quieter than the text? If a hairline competes with a label, the hierarchy has inverted.
Is there a coordinate scale, tick index, or grid reference anywhere? Without one the drawing register does not establish.
How many colors are there beyond the two neutrals? If more than one, the palette has drifted.
Is the main illustration a line drawing? If it is a photograph, the rest of the treatment is decoration on top of an ordinary layout.
A working order
State whether the subject is a real product or an explicitly conceptual study; do not let illustration imply a factual specification.
Draw the object or process in line work before adding labels, then give every readable label a truthful meaning.
Establish ink, paper, and one revision color; assign contrast so information outranks guides.
Add a single coordinate or tick system and nonnumeric leader marks only where they clarify the drawing.
At each narrow breakpoint remove secondary guides before reducing the primary diagram or its legible labels.
Technical Blueprint — Specification
Definition
Technical Blueprint is a web-interface design style that presents an interface as an engineering document. Hairline guides, uppercase monospaced micro-labels, a visible coordinate or tick system, line-drawn illustration, and a palette of two neutrals plus one accent combine to produce a register of precision and measurement. Because the style is built from labels and figures, it carries a specific obligation: ornament must never present itself as data.
Core principles
The drawing is the metaphor. Guides, ticks, and labels behave like annotation on a technical drawing rather than like interface chrome.
Ornament is quiet, information is loud. Structural marks sit below text in contrast; anything readable is meant to be read.
Measurement is visible. A coordinate system, index, or scale establishes the register more than any other single element.
Ink, paper, and one revision color. The palette stays at two neutrals plus a single accent.
Decoration never impersonates data. Marks and lines may be meaningless; numbers may not.
Visual characteristics
One-pixel hairline guides at low contrast, connecting or framing elements.
Uppercase monospaced labels at small sizes with positive letter spacing.
A tick scale, numbered index, or grid reference along an edge.
Line-drawn illustration — exploded views, wireframes, cross-sections — in place of photography.
Two neutral colors plus a single accent.
Brackets, crop marks, arrows, and other non-numeric annotation.
Rules
Hairline guides. Structural marks are thin and quiet.
Acceptance criterion: One-pixel lines are present with a measured contrast ratio between 1.5:1 and 3:1 against their background, and are distinct from container borders.
Monospaced micro-labels. Annotation uses drafting typography.
Acceptance criterion: Label elements compute a monospaced font-family at 12px or smaller with a positive letter-spacing.
Visible coordinate system. The interface declares that it has been measured.
Acceptance criterion: At least one tick scale, numbered index, or grid reference is rendered on the page.
Two neutrals and one accent. The palette follows drawing convention.
Acceptance criterion: The rendered palette resolves to at most two neutral colors plus exactly one accent color.
Line work replaces photography. Illustration is drawn, not captured.
Acceptance criterion: The primary illustration is a line drawing, schematic, or diagram; no photograph occupies the primary illustration position.
Ornament carries no figures. Decoration never impersonates measurement.
Acceptance criterion: No decorative label, mark, or annotation displays a numeric value that could be read as a real measurement, specification, or identifier of the subject.
Information outranks ornament. The contrast hierarchy is unambiguous.
Acceptance criterion: All informational text measures at least 4.5:1 while all decorative lines and marks measure below 3:1.
Conceptual status is explicit. A speculative object is never framed as a released or measured product.
Acceptance criterion: A concept specimen visibly labels the object as conceptual, illustrative, or not a specification, and contains no claim of production status.
Callouts identify, not fabricate. Readable labels name visual roles or real supplied information.
Acceptance criterion: Every readable callout can be traced to visible form, supplied content, or an explicit conceptual label; none contains an invented number, code, tolerance, or coordinate.
One drawing subject. The primary line work explains a single object or process.
Acceptance criterion: The primary illustration has one named subject and its leader lines terminate on that subject rather than on unrelated page furniture.
Guide reduction preserves the register. Narrow layouts remove secondary guides before shrinking annotation into body text.
Acceptance criterion: At the narrow breakpoint, one coordinate or tick system and one line illustration remain, while secondary leader lines may be removed and labels remain 12px or smaller.
Avoid
Invented dimensions, tolerances, reference codes, or coordinates presented as descriptions of the subject.
Hairlines drawn at the same contrast as body text.
Photography used as the primary illustration.
A second accent color.
Monospaced type used for body copy.
Guides below roughly 1.5:1, which read as rendering artifacts rather than structure.
Acceptance criteria
Rule 1: Hairline guides measure between 1.5:1 and 3:1 and are distinct from borders.
Rule 2: Labels are monospaced, 12px or smaller, with positive letter spacing.
Rule 3: A tick scale, index, or grid reference is present.
Rule 4: The palette is two neutrals plus exactly one accent.
Rule 5: The primary illustration is line work, not a photograph.
Rule 6: No decorative element displays a numeric value readable as real data.
Rule 7: Informational text is at or above 4.5:1 and decorative marks below 3:1.
Rule 8: Conceptual work is visibly labelled and makes no production claim.
Rule 9: Every readable callout is truthful and non-fabricated.
Rule 10: Line work explains one named subject.
Rule 11: Narrow layouts preserve the drawing register without oversized labels.
Blocking failures
A decorative label presents a number that a visitor could reasonably read as a measurement, specification, or identifier of the actual subject. This is the defining risk of the style: on a poster it is harmless, in a product it is false information.
Informational text is rendered at the same low contrast as the structural guides, so what must be read is indistinguishable from what is merely structure.
No coordinate system, tick scale, or index exists anywhere, in which case the work is a monospaced layout rather than this style.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Guide density reduces at narrower viewports — fewer leader lines, shorter runs — but the remaining guides keep the contrast band required by Rule 1 rather than being made fainter to reduce clutter.
Micro-labels (Rule 2) may drop to a smaller subset at narrow widths, but never grow past 12px, since a larger monospaced label stops reading as annotation and starts competing with body text.
The coordinate system (Rule 3) may shorten or move to a single edge but must remain present at every breakpoint.
Line illustration (Rule 5) is re-cropped or simplified rather than replaced by a photograph at any width.
Rules 6 and 7 hold unchanged at every breakpoint; reducing ornament must never promote a decorative mark into a position where it reads as data.
Technical Blueprint is a web-interface design style that presents an interface as an engineering document. Hairline guides, uppercase monospaced micro-labels, a visible coordinate or tick system, line-drawn illustration, and a palette of two neutrals plus one accent combine to produce a register of precision and measurement. Because the style is built from labels and figures, it carries a specific obligation: ornament must never present itself as data.
concept view — not a specification
The drawing is the metaphor
Guides, ticks, and labels behave like annotation on a technical drawing rather than like interface chrome.
Ornament is quiet, information is loud
Structural marks sit below text in contrast; anything readable is meant to be read.
Measurement is visible
A coordinate system, index, or scale establishes the register more than any other single element.
reductive
Presents an interface as an engineering drawing — hairline guides, monospaced micro-labels, coordinate marks, and line diagrams instead of photography.
Archetype
system
Density
dense
Parts
statusbar · hero · grid · aside
Palette
blueprint · monospace · diagrammatic · technical grid · line art
Applying a Handcrafted visual direction
You are applying Handcrafted to an existing web interface. Preserve the product’s purpose and information architecture; change the visual language so it feels authored by a person, tactile, and specific without making the mechanism feel unreliable.
What this means here
Use a disciplined layout as the ground, then add a small vocabulary of genuine human marks: a variable-width stroke, paper or ink material, a slightly placed object, or one handwritten accent. Imperfection belongs to the surface. Text, controls, hit areas, and focus states remain regular and predictable.
Recommendations
Give one or two hand-drawn marks a communication job: route, annotation, emphasis, or signature.
Use a paper, ink, or print-like material cue at a perceptible but restrained intensity.
Keep rotation and offset small enough to read as hand placement, not a layout error.
Pair one irregular display accent with a clear interface/body face.
Build a legible grid first, then introduce deliberate breaks around the route or note.
Keep essential information separate from texture and decorative marks.
Use standard, rectangular controls with clear focus; the handmade treatment must not alter their mechanism.
Check the smallest text against the darkest and lightest actual background behind it.
Avoid
Covering every surface with doodles, grain, or random rotation.
Handwritten body copy or irregular controls that slow parsing or reduce hit reliability.
Generic stock illustration pretending to be a hand-made mark.
Removing focus indicators because they look too mechanical.
Presenting fictional route, person, or performance data as real.
A working order
Name the product job and the one human mark that can clarify it.
Establish the content hierarchy and a regular underlying grid.
Choose a bounded material vocabulary: paper, graphite, ink, or one warm accent.
Select or draw one variable-width mark with a clear role.
Add the route, annotation, or callout before adding any supporting texture.
Introduce no more than two small placements or rotations.
Set body and utility text in a readable interface face; reserve irregular type for an accent.
Restore regular shapes, dimensions, and focus states to every interactive mechanism.
Verify texture, type, and marks at the smallest responsive size.
Remove any imperfection that reads as accidental or hides essential information.
How to check your own work
Ask whether the handmade layer explains or identifies something specific. Measure the worst text/background pairing, inspect the route at narrow width, and confirm that every real control stays rectangular, discoverable, and keyboard-visible. If the page feels broken rather than made, reduce the rotations and keep the purposeful mark.
Handcrafted — Specification
Definition
Handcrafted is a web-interface style that makes human authorship visible through purposeful hand-drawn marks, tactile material cues, and small authored irregularities over a disciplined structure. A route, annotation, or signature can feel placed by a person; essential information and interaction mechanisms remain regular and dependable.
Core principles
Authored imperfection. Irregularity is a deliberate visual decision, not a rendering error.
A mark has a job. A stroke, note, or texture clarifies a route, identity, or emphasis.
Structure before deviation. A grid makes the breaks feel intentional.
Mechanisms stay regular. Controls, hit areas, and focus states do not inherit decorative distortion.
Material serves legibility. Texture is background atmosphere, never the carrier of essential information.
Visual characteristics
Variable-width ink, pencil, or marker lines.
Paper, print, or restrained ink texture.
A route line, stop, annotation, or caption arranged with slight human placement.
One irregular display accent paired with readable interface text.
A warm paper-and-ink palette with one route accent.
Regular control shapes and clear state boundaries.
Rules
Give the hand a communication role. A mark must explain, identify, or direct.
Acceptance criterion: At least one hand-drawn mark labels a route, annotates content, or carries an identity cue; no decorative mark is present without a stated role.
Use a bounded material vocabulary. Tactile cues should feel like one authored kit.
Acceptance criterion: The composition uses no more than three material cues from paper, graphite, ink, print grain, and stamp-like marks.
Make the primary mark genuinely irregular. Uniform borders do not count as hand-drawn.
Acceptance criterion: The primary route or underline has visible variation in width, dash, or contour along its length at 100% zoom.
Build on a legible structure. The hand-made layer is a deviation from an understood order.
Acceptance criterion: A viewer can identify a title, sequence, and supporting note without following any decorative mark.
Bound placement irregularity. Small shifts signal touch; large shifts signal breakage.
Acceptance criterion: No more than two non-interactive elements use a 0.5–3° rotation or a 2–8px offset, and neither clips content.
Keep text readable. Irregular type is a controlled accent.
Acceptance criterion: Body and utility copy use a readable interface face; one irregular family, if present, appears only in an accent position.
Separate essential information from texture. Material does not become an information dependency.
Acceptance criterion: Removing texture and decorative marks leaves the title, route sequence, labels, and notes understandable.
Keep mechanisms regular. The style must not reduce interaction reliability.
Acceptance criterion: Every interactive element is rectangular, has a predictable hit area, and retains a visible focus indicator; no control is rotated or textured as a control surface.
Use contrast at the worst texture point. Paper grain changes the background beneath text.
Acceptance criterion: Essential text measures at least 4.5:1 against the lightest and darkest actual background it overlaps.
Use motion as a small reveal. Movement should extend the mark’s role, not turn the page into a performance.
Acceptance criterion: At most one route or note reveal responds to preview hover; the static state remains complete and the catalogue grid stays still.
Avoid
Random doodles, uncontrolled texture, or rotations that resemble a layout bug.
Handwritten body copy, decorative marks carrying essential content, and irregular controls.
Stock illustration used as a substitute for an authored mark.
Fictional measurements or routes presented as real-world evidence.
Focus states weakened to preserve a visual illusion.
Acceptance criteria
A hand-made mark has a clear communication role.
The material vocabulary is bounded to three cues or fewer.
The primary mark visibly varies in width, dash, or contour.
Title, sequence, and notes remain understandable without texture.
Placement irregularity is limited, non-clipping, and non-interactive.
Essential text meets 4.5:1 at the worst actual texture point.
Preview motion is limited to one small reveal and has a complete static equivalent.
Blocking failures
A control is rotated, irregular, or visually hidden by the handmade treatment, making the mechanism unreliable.
Texture or a hand-drawn mark is required to understand essential route, status, or instructional content.
Body copy becomes difficult to parse or essential text fails contrast over the real material ground.
Responsive adaptation guidance
Reflow the route and its notes from map-like columns into a readable vertical sequence with @container queries, not viewport assumptions.
Reduce rotation and texture intensity at narrow widths, then re-check contrast and clipping.
Redraw or crop route marks rather than non-uniformly stretching them.
Keep body text readable and controls regular at every container width; the 44px touch target floor applies to real controls.
FIELD NOTES / HandcraftedROUTE 07 · NORTH LOOP
A hand-drawn route journal
Follow the quiet line.
Handcrafted is a web-interface style that makes human authorship visible through purposeful hand-drawn marks, tactile material cues, and small authored irregularities over a disciplined structure. A route, annotation, or signature can feel placed by a person; essential information and interaction mechanisms remain regular and dependable.
illustrative route
START / 08:10RIDGE / 12:40↗
Stops along the line5 marks · 18.4 km sample
01
Authored imperfection
Irregularity is a deliberate visual decision, not a rendering error.
02
A mark has a job
A stroke, note, or texture clarifies a route, identity, or emphasis.
03
Structure before deviation
A grid makes the breaks feel intentional.
expressive
A legible visual system with authored hand-drawn marks, route lines, and tactile material cues that make the interface feel made by a person without making it feel accidental.
Archetype
composition
Density
regular
Parts
masthead · hero · gallery · captionstrip · footer
Palette
hand-drawn · handmade · analog · illustration · human-touch
Applying a Dark Mode visual direction
You are applying Dark Mode to an existing web interface. Preserve the product’s purpose and content; design a complete dark appearance with its own surface, text, color, image, and state decisions rather than inverting a light theme.
What this means here
Dark Mode uses a dark neutral ground, a tonal elevation ladder, softened text, and rebuilt accents that remain legible without becoming neon. Surfaces nearer the viewer become lighter. Images and charts keep their meaning. The result should support sustained low-light use while retaining clear hierarchy and discoverable controls.
Recommendations
Start with a dark grey base so elevated surfaces have room to step lighter.
Name surface, text, border, accent, success, warning, and error roles semantically.
Use luminance and fine borders for depth; do not make a dark shadow carry the hierarchy.
Rebuild accents for the dark background and repeat state meaning with labels or symbols.
Use technical typography and compact modules when the product domain benefits from them, but keep body text readable.
Leave content imagery un-inverted; attenuate only when it improves the surrounding composition without changing meaning.
Measure normal text at 4.5:1 or better and aim higher for small text where practical.
Keep focus, hover, selected, and error states visible against every surface.
Avoid
Pure black as the only base, pure white body text, or a light theme’s accents copied unchanged.
Elevation expressed only by shadow.
Inverted images, charts, or illustrations.
Neon glow used as a substitute for hierarchy.
Semantic meaning carried by hue alone.
Real credentials, repository names, or operational metrics in a fictional specimen.
A working order
Identify the product’s low-light tasks and the content that must remain prominent.
Define base, workbench, elevated, and focused surface roles.
Define softened text, border, and divider roles against each surface.
Re-derive accent and semantic state colors for the dark ground.
Establish the main information grid and its compact utility modules.
Add the product’s data, command, or content layer before decorative effects.
Keep imagery and charts semantically intact; use an overlay only if needed.
Add labels, symbols, and states so color is never the only signal.
Measure contrast on normal text, small labels, and state treatments.
Test the narrow composition and remove any glow, shadow, or density that obscures hierarchy.
How to check your own work
Inspect each stacked surface in grayscale: is the nearer surface lighter? Measure text, accents, and states against the actual surface below them. Check the interface with images present, not just empty panels, and confirm that a user can identify status without hue. If every layer is the same charcoal or every state glows, the dark system is not yet doing enough structural work.
Dark Mode — Specification
Definition
Dark Mode is a complete interface appearance built on a dark neutral ground. It uses a stepped luminance system for elevation, softened text, mode-aware accents, and intact content imagery. It is not a light interface with colors inverted.
Core principles
Darkness is a surface system. Base, workbench, elevated, and focused surfaces have deliberate relationships.
Elevation is luminance. Raised layers become lighter; shadow is supporting detail, not the separator.
Color is semantic. Accents and states are rebuilt for the dark ground and named by role.
Contrast is strong and comfortable. Compliance is measured without treating maximum white-on-black contrast as the aesthetic goal.
Content keeps its meaning. Images, charts, and illustrations are not inverted to match the shell.
Visual characteristics
Charcoal base with slate workbench and subtly lighter focused modules.
Off-white text, fine borders, and technical mono for commands or values.
Cyan, amber, green, or red used sparingly as labelled semantic states.
Dense developer-tool modules: command strip, run summary, telemetry, and status.
Content visuals left intact, with no decorative black shadow doing the structural work.
Rules
Use a dark grey base. Pure black removes the elevation runway.
Acceptance criterion: The base surface is not #000000 and has a relative luminance between 0.02 and 0.08.
Build a luminance ladder. Layers must remain distinguishable in low light.
Acceptance criterion: Every elevated surface that remains stacked has a higher relative luminance than the surface beneath it; no layer relies primarily on shadow.
Soften primary text. The brightest value is reserved for emphasis.
Acceptance criterion: Body text is not pure white and its computed contrast against its surface is at least 4.5:1.
Rebuild accents for darkness. Saturation does not survive unchanged from light mode.
Acceptance criterion: Each accent is assigned a semantic role, measures at least 4.5:1 where it carries text or a state label, and is not the only state cue.
Keep small text comfortably strong. Dark does not excuse weak hierarchy.
Acceptance criterion: Normal text measures at least 4.5:1; small or secondary text is reviewed against the 7:1 quality target where practical.
Preserve content imagery. The dark shell does not rewrite the data.
Acceptance criterion: No image, illustration, or chart uses filter: invert; any attenuation is an overlay that leaves the underlying meaning intact.
Make developer-tool density legible. Compactness must have structure.
Acceptance criterion: The primary view exposes a labelled command/run area and at least one labelled data or status module without relying on hover.
Keep semantic parity. Status is more than a color chip.
Acceptance criterion: Success, warning, and error states each have a text label or symbol plus a semantic color treatment.
Budget effects. The dark surface should not become a neon stage.
Acceptance criterion: No more than one preview-only motion or glow treatment is active at a time, and the static state communicates the same information.
Avoid
Pure-black base surfaces, pure-white body copy, copied light-theme accents, and shadow-only elevation.
Inverted imagery, unlabeled color states, and glow used to compensate for missing structure.
Fictional operational data presented as real.
Acceptance criteria
Base is dark grey, not pure black, and leaves room for elevation.
Stacked surfaces step lighter toward the viewer.
Body text and state labels meet their contrast floors.
Accents are semantic, rebuilt for darkness, and not the only state cue.
Images and charts are not inverted.
A labelled command/run module and data/status module are visible without hover.
Effects stay within a small preview-only budget and have a static equivalent.
Blocking failures
Stacked layers are separated only by an invisible dark shadow, so the interface loses its hierarchy.
A state, essential control, or text label fails contrast because a light-theme value was reused.
Meaning depends on hue alone, or content imagery has been inverted to fit the shell.
Responsive adaptation guidance
Collapse command, run, telemetry, and status modules with @container queries while preserving their labels and surface order.
Keep the luminance relationship between any surfaces that remain stacked; a narrow layout may have fewer levels, not arbitrary levels.
Re-measure text and state contrast at increased type scale and 200% zoom.
Move long technical values to a readable line or clipped, labelled region rather than shrinking body type.
LUMA / Dark Modeworkspace / runs / 042LC
COMMAND PALETTEAnalyze selected run⌘ K
RUN 042 / SAMPLE TELEMETRY
Signal health is stable.
Dark Mode is a complete interface appearance built on a dark neutral ground. It uses a stepped luminance system for elevation, softened text, mode-aware accents, and intact content imagery. It is not a light interface with colors inverted.
All services nominalupdated 18s ago
LATENCY / MS42 ms p95
01
Darkness is a surface system
Base, workbench, elevated, and focused surfaces have deliberate relationships.
READY02
Elevation is luminance
Raised layers become lighter; shadow is supporting detail, not the separator.
99.8%03
Color is semantic
Accents and states are rebuilt for the dark ground and named by role.
LOW
material
A developer tool with a semantic dark surface system, restrained accent color, tonal elevation, and dense but readable telemetry built for long sessions in low light.
You are applying Barely-There UI to an existing web interface. Preserve its content and purpose while reducing visual weight: let typography, whitespace, and real data carry the hierarchy, and keep controls discoverable instead of making the interface invisible.
What this means here
This direction quiets the treatment of an interface, not its useful contents. A restrained palette, light typography, generous air, and low-emphasis boundaries create a calm field for a prompt, result, chart, or other real data. Static chrome may whisper; anything actionable must still announce its boundary, label, and focus state.
Recommendations
Use one type family or a tightly bounded pair, with hierarchy from size, spacing, and alignment.
Keep the palette to one hue family plus at most one accent.
Replace extra containers with spacing, but retain headings and labels that make the data understandable.
Let a real chart, metric, series, or table be the visual protagonist.
Use subtle separators only where they remain findable on inspection.
Keep the primary action visible without scroll or hover.
Give secondary detail progressive reveal only after the main result is complete.
Measure low-emphasis text and separators against their actual background.
Avoid
Tiny or ultra-light type used as atmosphere.
Faint controls that look like static containers.
Decorative objects added to fill the empty field.
A second accent color that breaks the quiet system.
Hiding the primary action, status, or data labels behind blank space.
Empty whitespace that forces excessive mobile scrolling.
A working order
Name the core task and the data the user must understand.
Remove visual weight from secondary chrome, not from essential content.
Set a single type family and establish three to five clear hierarchy levels.
Choose a neutral hue family and one semantic accent.
Give the primary prompt, result, and data panel generous space.
Replace unnecessary boxes with alignment and measured gaps.
Draw static boundaries faintly, then make controls visibly stronger.
Add one real visualization or metric group and label its sample state.
Check text contrast, control contrast, focus, and fallback/zoom hierarchy.
Stack the workspace at narrow widths without turning the calm layout into an endless scroll.
How to check your own work
Can a user find the primary action, understand the chart, and distinguish a panel edge when looking for it? If not, restore contrast or a label locally; quietness is not a reason to hide meaning. If there is no real data, the result is a sparse minimal interface rather than Barely-There UI.
Barely-There UI — Specification
Definition
Barely-There UI is a low-chrome interface style that reduces visual weight rather than useful content. Light typography, generous whitespace, a restrained hue family, and low-emphasis static boundaries give real data the lead. It is not invisibility: controls, labels, status, and focus remain discoverable.
Core principles
Quiet the treatment, not the meaning. Data and content remain present and understandable.
Whitespace is structural. Air separates the task, result, and evidence.
Typography carries hierarchy. Size, measure, alignment, and spacing do more work than bold decoration.
Static chrome can whisper. Controls and focus states are exempt from sub-threshold treatment.
Data earns the attention. A chart, metric, series, or table gives the restraint a subject.
Visual characteristics
A single sans family or tightly bounded pair with light default weights.
Three to five type levels built from size and spacing.
One quiet hue family with one semantic accent.
Generous uncovered areas and few containers.
Hairline static separators that remain findable on inspection.
A labelled chart, metric group, or table as the primary visual event.
Rules
Make content quieter, not absent. The composition still exposes the task and evidence.
Acceptance criterion: The primary prompt or task, its result, and at least one data element are visible in the initial view without hover.
Use a bounded typographic system. Restraint needs consistency.
Acceptance criterion: The page uses no more than two type families and no more than five intentional hierarchy levels.
Let size and space establish hierarchy. Boldness is not the default shortcut.
Acceptance criterion: Body/interface text computes at a light or regular weight, while the primary hierarchy is also distinguishable through size, measure, or spacing.
Use one hue family and one accent. Color stays quiet and coherent.
Acceptance criterion: The visual system contains one neutral hue family plus at most one accent; each accent has a named role.
Give air a job. Empty space separates meaningful groups.
Acceptance criterion: The prompt, result, and data groups have deliberate spacing, and no decorative object is added solely to occupy the air.
Keep static boundaries findable. Low emphasis must not become absence.
Acceptance criterion: Every static panel boundary or separator is visible on deliberate inspection and measures at least 1.1:1 against its adjacent surface.
Exempt interactive controls. Quiet containers do not define the control floor.
Acceptance criterion: Every real control has a border or fill measuring at least 3:1 against its background and a visible focus indicator measuring at least 3:1.
Show real data. The style needs evidence to carry the visual weight.
Acceptance criterion: The primary view contains at least one labelled chart, metric series, table, or equivalent data display.
Keep the primary action discoverable. Calm does not mean hidden.
Acceptance criterion: The primary action has a visible label and is available without hover, scroll, or opening a secondary panel.
Make hierarchy resilient. Thin type cannot be the only structure.
Acceptance criterion: Headings, labels, and data relationships remain distinguishable at fallback font, increased text size, and 200% zoom.
Use progressive reveal only for secondary detail. The base state stays complete.
Acceptance criterion: Any preview-only reveal adds non-essential detail; task, result, primary action, and data summary remain in the static state.
Avoid
Low-contrast text, microtype, hidden primary actions, and controls styled like faint static borders.
Decorative filler, a second accent color, or whitespace that creates excessive mobile scrolling.
A page with no data, no labels, or no visible state.
Acceptance criteria
Task, result, and data are visible without hover.
Type families and hierarchy levels remain bounded.
One hue family and at most one accent carry the palette.
Whitespace separates groups instead of hiding them.
Static boundaries are faint but findable; controls and focus are stronger.
A labelled data display and visible primary action justify the restraint.
Hierarchy survives fallback fonts, zoom, and narrow layouts.
Blocking failures
A primary action, status, or data label is hidden or indistinguishable because it received the same low contrast as static chrome.
Body text or data labels become unreadable at a light weight, small size, fallback font, or increased zoom.
The interface is only empty space and copy, with no real data to carry the visual focus.
Responsive adaptation guidance
Reflow the workspace with @container queries so the prompt, result, and data panel stack without a wide horizontal canvas.
Keep the primary action and chart summary in the first narrow view; move secondary detail below them rather than hiding it behind a tiny control.
Increase body weight or size when thin strokes degrade at narrow widths or zoom, and re-measure contrast.
Preserve readable gaps without allowing whitespace to create unnecessary mobile scroll.
STILL / Barely-There UIWorkspaceSourcesHistoryL
ASK THE WORKSPACE
What changed in the signal this week?
Barely-There UI is a low-chrome interface style that reduces visual weight rather than useful content. Light typography, generous whitespace, a restrained hue family, and low-emphasis static boundaries give real data the lead. It is not invisibility: controls, labels, status, and focus remain discoverable.
Run analysis↗
SYNTHESIS / 04 AUG — 11 AUGsample result
The signal is holding steady while two quiet changes gather underneath.
Quiet the treatment, not the meaning+12.4%week over week
Whitespace is structural4.8kobservations
Typography carries hierarchy0.82confidence
Observed movement7 day sample
MONWEDFRISUN
reductive
An AI workspace that lets data lead: quiet chrome, generous whitespace, restrained typography, and low-emphasis boundaries keep a live dashboard calm without hiding its controls.
You are being asked to apply a Retrowave visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Retrowave” means here
Retrowave renders a future that never happened: specifically, the future as imagined in the 1980s. A wireframe grid recedes toward a horizon. A banded sun sits in a gradient running from magenta through orange. Neon glows against a nearly black sky. Display type is chromed, extruded, or outlined. Palm trees, wireframe mountains, and speed lines appear as landscape.
It is not nostalgia for the actual 1980s — that would be a different palette and a different set of objects entirely. It is nostalgia for that decade’s science fiction, which is why everything looks synthetic, and why the sun is always setting.
Two constraints matter technically. The direction requires a dark ground: neon is light emitted in darkness, and on a pale background the glow simply disappears. And the glow itself must stay away from anything you actually have to read — a soft colored halo around a headline is the effect working, while the same halo around a paragraph makes every letter blur into the next.
Recommendations
Build a perspective grid or a set of receding lines somewhere in the composition. It is the single most recognizable element of the direction, and without it the rest reads as generic neon.
Run a sunset gradient through magenta or violet into orange or cyan. Broad, smooth, and unmistakable — this gradient is the light source for the whole scene.
Produce glow with a colored shadow at zero offset and a generous blur, so the light radiates evenly rather than falling to one side. An offset shadow reads as a drop shadow, which is the wrong effect entirely.
Keep the background near black. A dark navy or deep purple works; anything approaching mid-grey kills the neon.
Set headlines in a period display face — chrome-filled, extruded, or outlined — sized large enough for the treatment to be legible.
Include at least one landscape motif: a banded sun, palms, wireframe mountains, or speed lines. One is enough; four is a poster rather than an interface.
Keep glow off body copy. Reading text sits plain on the dark background at full contrast, and the light effects stay on headlines and ornament.
Avoid
A light background, on which the entire direction stops functioning.
Offset shadows standing in for glow.
Glow applied to paragraphs, labels, or form fields.
A palette of neon colors with no gradient anywhere, which loses the sunset that motivates the light.
Every element treated with a glow, which leaves nothing dark to glow against.
Grid, sun, palms, mountains, and speed lines all at once.
A working order
Establish the dark ground and the horizon before placing interface copy.
Draw the perspective grid and choose one landscape motif; keep the rest of the scene quiet.
Set the main release statement in the display treatment, then reserve plain text for explanation.
Add one primary listening action and a compact track or release index below the first view.
Check the same composition at a narrow container: redraw the grid, keep one landscape motif, and preserve the plain reading measure.
How to check your own work
Before considering the result finished, look at it and ask:
Is the background dark enough? If you can imagine reading a document on it comfortably, it is too light for neon.
Does the glow have any offset? Set it to zero — glow radiates in all directions, shadows do not.
Is there anything receding into the distance? Without a grid or perspective lines this is a neon interface rather than this direction.
Is any body text glowing? Remove it and check that the plain version passes contrast on the dark background.
How many landscape motifs are on screen? More than two and the interface is competing with its own background.
Retrowave — Specification
Definition
Retrowave is a web-interface design style that renders the future as imagined in the 1980s. A perspective grid recedes toward a horizon, a sunset gradient runs through magenta and orange, neon glow radiates against a near-black ground, and display typography is chromed, extruded, or outlined. The style depends structurally on darkness, since neon is emitted light, and it confines its glow to headlines and ornament so that reading text remains legible.
Core principles
A synthetic landscape. The composition depicts a place — grid, horizon, sun — rather than arranging abstract shapes.
Emitted light, not cast shadow. Glow radiates evenly from the element; nothing falls to one side.
Darkness is structural. The direction ceases to function on a pale background.
The sunset is the light source. A broad magenta-to-orange gradient motivates every other bright value.
Effects stay off reading text. Glow belongs to display type and ornament only.
Visual characteristics
A wireframe perspective grid or receding line set.
A broad gradient from magenta or violet into orange or cyan.
Colored glow at zero offset with generous blur.
A near-black background, sometimes tinted navy or deep purple.
Chrome-filled, extruded, or outlined display typography.
Period landscape motifs: banded sun, palms, wireframe mountains, speed lines.
Rules
Perspective grid present. The scene recedes.
Acceptance criterion: A perspective grid or a set of converging vanishing lines is rendered as a compositional element.
Sunset gradient. The light source is depicted.
Acceptance criterion: At least one primary gradient runs from magenta or violet into orange or cyan.
Glow, not shadow. Light radiates rather than falls.
Acceptance criterion: Highlighted elements use a text-shadow or box-shadow in a saturated color with a blur radius of 8px or greater and an offset of 0 on both axes.
Period display type. Headlines carry the era.
Acceptance criterion: Headline elements use a display family with a chrome fill, outline, or extrusion treatment.
Dark ground required. Neon has something to glow against.
Acceptance criterion: The page background has a relative luminance of 0.1 or less.
Landscape motif present. The scene is identifiable.
Acceptance criterion: At least one of a banded sun, palm forms, wireframe mountains, or speed lines is rendered.
Reading text stays plain. Effects do not reach body copy.
Acceptance criterion: Body text carries no colored shadow and measures at least 4.5:1 against the dark background.
Release context is visible. The style carries a music-facing context rather than an abstract poster.
Acceptance criterion: The first view contains a release statement, one listening action, and a secondary track or release index.
One motif leads. The landscape remains an interface backdrop, not a pile of effects.
Acceptance criterion: No more than two landscape motifs appear in the first view, and one is visually dominant.
Display and reading voices separate. Treated type announces; plain type explains.
Acceptance criterion: At least one headline uses the display treatment while every explanatory paragraph uses the unglowed body treatment.
Narrow view redraws depth. The perspective survives the container change.
Acceptance criterion: The narrow layout retains a converging grid, one landscape motif, and a readable plain-text block without horizontal overflow.
Avoid
A light background, on which the direction stops functioning entirely.
Offset shadows substituted for glow.
Glow applied to paragraphs, labels, or form fields.
Neon colors used with no gradient present, losing the sunset that motivates them.
Glow applied to every element, leaving nothing dark for it to register against.
All available landscape motifs used simultaneously.
Acceptance criteria
Rule 1: A perspective grid or converging line set is present.
Rule 2: A magenta-or-violet to orange-or-cyan gradient is present.
Rule 3: Glow uses zero offset with a blur of 8px or more.
Rule 4: Headlines use a treated period display family.
Rule 5: The background luminance is 0.1 or less.
Rule 6: At least one period landscape motif is rendered.
Rule 7: Body text is unglowed and meets 4.5:1 on the dark ground.
Rule 8: The release context includes a listening action and index.
Rule 9: The first view uses no more than two landscape motifs.
Rule 10: Display and explanatory type use separate treatments.
Rule 11: Narrow view retains depth and readable copy.
Blocking failures
Body copy carries a colored glow, which blurs adjacent glyphs into one another and makes sustained reading impossible regardless of the measured contrast ratio.
The background is light, so no glow registers and the direction has been applied as a set of colors rather than as a lighting model.
A form field or control is rendered with glow as its only boundary, making its edges indeterminate and its focus state indistinguishable from its resting state.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
The perspective grid (Rule 1) is re-drawn for the narrower aspect rather than scaled, since a horizontally compressed grid loses its convergence and stops reading as depth.
Landscape motifs (Rule 6) reduce to one at narrow viewports; at least one remains at every breakpoint.
Glow blur (Rule 3) may reduce for performance but never below 8px, and the offset stays at 0 at every breakpoint.
The dark ground (Rule 5) and the plain-body-text requirement (Rule 7) hold unchanged, and Rule 7 is re-verified whenever reflow moves body text over the gradient rather than the flat background.
Display type (Rule 4) may reduce in size but keeps its treatment; substituting a plain face at narrow widths ends the style.
NRW / RetrowaveReleasesArtistsRadioSIGNAL 06
NEW RELEASE / SYNTHWAVE ARCHIVE
Future in replay.
Retrowave is a web-interface design style that renders the future as imagined in the 1980s. A perspective grid recedes toward a horizon, a sunset gradient runs through magenta and orange, neon glow radiates against a near-black ground, and display typography is chromed, extruded, or outlined. The style depends structurally on darkness, since neon is emitted light, and it confines its glow to headlines and ornament so that reading text remains legible.
Listen to the releaseView tracklist
NIGHT DRIVE / 04:20
NEON HORIZON
RELEASE 042OUTRUN / 198X
01
A synthetic landscape
The composition depicts a place — grid, horizon, sun — rather than arranging abstract shapes.
04:2002
Emitted light, not cast shadow
Glow radiates evenly from the element; nothing falls to one side.
03:4803
Darkness is structural
The direction ceases to function on a pale background.
05:12
retro
Renders an imagined 1980s future: a perspective grid running to a sunset gradient, neon glow on dark ground, and chrome display type.
Archetype
surface
Density
regular
Parts
masthead · hero · panel
Palette
retrowave · neon · retro-futurism
Applying a Collage visual direction
You are being asked to apply a Collage visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Collage” means here
Collage assembles a composition from fragments that visibly came from somewhere else. A photographic cutout with a torn edge overlaps a hand-drawn shape, which overlaps a piece of printed type; a person is larger than the building behind them; several pieces sit at angles. Nothing is blended, and that is the point — the seams between materials are the subject, not a flaw to be smoothed away.
The register this produces is handmade and slightly surreal, closer to a physical scrapbook or a cut-paper poster than to anything rendered. It carries editorial and cultural work well, and it fights any interface that needs to feel systematic.
The one place it needs discipline is text. Running text over a busy cutout is unreadable no matter what color you pick, because the background changes every few pixels. In a physical collage the solution is what a designer would actually do: paste a clean piece of paper over the fragments and write on that. The same move works here.
Recommendations
Assemble at least three fragments with genuinely irregular edges — torn, cut, or hand-traced. A rectangular crop is not a cutout, and neither is a circle.
Break scale on purpose. Take two things that would be similar in size in reality and make one several times larger. That mismatch is what makes a collage read as a collage instead of as a busy layout.
Overlap in a stated order. Fragments should cross each other with a deliberate front-to-back sequence, not merely sit near one another.
Mix material kinds. Photography with illustration, illustration with treated type, type with texture. Two kinds is enough; the point is that they are visibly not the same substance.
Rotate pieces off-axis by more than a few degrees. Unlike directions where a slight tilt reads as a hand, here the angles want to be obvious.
Give text its own clean ground. A solid panel, a band of flat color, or an area of the composition kept deliberately empty — then set the text there at full contrast.
Consider letting a fragment run past the edge of the frame. Collage tends to look composed rather than contained.
Avoid
Rectangular or circular crops used as fragments, which read as a photo grid rather than a collage.
Fragments arranged neatly with no overlap.
All fragments at similar scale, which loses the dislocation that defines the style.
Running text placed directly over a busy cutout.
Blending, feathering, or blurring the seams between fragments.
A single material — a page of photographs alone is a gallery, not a collage.
A working order
Write the editorial or exhibition question on a clean paper ground before assembling fragments.
Choose three material roles — image, type, and object or texture — then give each a distinct edge.
Place the largest fragment first, set a front-to-back order, and make two pieces visibly cross it.
Break scale and angle deliberately; use the index below the assembly to restore linear wayfinding.
At a narrow container, remove nonessential fragments and grow the clean text panels instead of shrinking the copy.
How to check your own work
Before considering the result finished, look at it and ask:
Are any of the edges perfectly straight or perfectly round? Those pieces are not reading as cut, and they will pull the whole composition toward a conventional layout.
Is anything unexpectedly large or small relative to the things around it? If everything is proportionate, the surreal quality is missing.
Do the fragments actually cross one another, or are they merely adjacent?
Find every piece of running text. Is it on a clean ground? If any sits on a fragment, move it or give it a panel.
How many different material kinds are present? If the answer is one, the seams have nothing to be between.
Collage — Specification
Definition
Collage is a web-interface design style that assembles a composition from visibly heterogeneous fragments — photographic cutouts, illustration, treated type, texture — layered at clashing scales and angles with their seams left exposed. Nothing is blended between materials. Because fragment surfaces are visually unpredictable, running text is placed on its own clean ground rather than over the assembly.
Core principles
The seam is the subject. Boundaries between materials are shown, never smoothed.
Scale is dislocated deliberately. Mismatched proportions produce the surreal quality that defines the style.
Layering is ordered. Fragments cross one another in a stated front-to-back sequence.
Materials are mixed. A single material produces a gallery, not a collage.
Text gets clean ground. Reading copy sits on a solid surface rather than on the assembly.
Visual characteristics
Three or more fragments with torn, cut, or hand-traced edges.
Objects rendered at proportions unrelated to their real relative sizes.
Overlapping pieces with explicit stacking order.
Photography, illustration, treated type, and texture coexisting.
Fragments rotated visibly off-axis.
Text confined to solid panels or deliberately empty regions.
Rules
Irregular cut edges. Fragments read as cut rather than cropped.
Acceptance criterion: At least three images have irregular, non-geometric edges; rectangular and circular crops do not satisfy this rule.
Dislocated scale. Proportion is broken on purpose.
Acceptance criterion: At least two elements representing objects of comparable real-world size differ in rendered scale by a factor of 3 or more.
Ordered overlap. Layering is explicit.
Acceptance criterion: At least three elements overlap with a declared z-index.
Mixed materials. The assembly is heterogeneous.
Acceptance criterion: At least two distinct material treatments coexist among photography, illustration, type-as-image, and texture.
Off-axis rotation. Pieces are visibly angled.
Acceptance criterion: At least two elements carry a rotation greater than 3°.
No blended seams. Boundaries remain visible.
Acceptance criterion: No fragment boundary uses feathering, blur, or a blend mode that dissolves the edge into the layer beneath it.
Text on its own ground. Reading copy is never set over the assembly.
Acceptance criterion: Every text element sits on a solid panel or a uniform background region and measures at least 4.5:1 against it; no running text is placed directly over a busy fragment.
Editorial path remains linear. The assembly can invite exploration without becoming the only navigation.
Acceptance criterion: A clean heading panel introduces the subject and a separate ordered index lists at least three fragments in reading order.
Material roles stay distinct. Heterogeneity is visible at a glance.
Acceptance criterion: Image-like shape, treated type, and one contrasting paper, tape, or object treatment are distinguishable without relying on hover.
The largest cutout leads. The composition has a clear focal fragment.
Acceptance criterion: One fragment is at least 1.5 times the area of the next-largest fragment and its overlap order is explicit.
Narrow composition edits honestly. Responsive reduction preserves the style’s grammar.
Acceptance criterion: At least three irregular fragments, two off-axis pieces, a clean text ground, and the ordered index remain visible in the narrow layout.
Avoid
Rectangular or circular crops used as fragments.
Fragments arranged tidily with no overlap.
Uniform scale across all fragments.
Running text placed directly over a cutout.
Feathering, blurring, or blending the seams between fragments.
A composition made from a single material.
Acceptance criteria
Rule 1: At least three fragments have irregular, non-geometric edges.
Rule 2: Two comparable objects differ in rendered scale by 3× or more.
Rule 3: At least three elements overlap with declared stacking order.
Rule 4: At least two distinct material treatments are present.
Rule 5: At least two elements are rotated more than 3°.
Rule 6: No fragment boundary is feathered, blurred, or blended away.
Rule 7: All text sits on solid ground at 4.5:1 or better.
Rule 8: A clean heading and ordered index preserve linear reading.
Rule 9: Image, type, and contrasting material roles remain distinct.
Rule 10: One focal cutout leads by rendered area.
Rule 11: Narrow view keeps the collage grammar and index.
Blocking failures
Running text is set directly over a photographic or illustrated fragment, where the background varies at the scale of individual glyphs and no single text color can remain legible across it.
Meaning depends on the spatial arrangement of overlapping fragments alone, so the content is unavailable to anyone reading the page linearly or through assistive technology.
Interactive controls are placed over fragments without their own ground, leaving their boundaries and focus states indeterminate.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Fragment count reduces at narrower viewports rather than fragments being scaled down uniformly; three irregular pieces (Rule 1) is the floor, below which the composition stops reading as an assembly.
Scale dislocation (Rule 2) is preserved by keeping the enlarged element large and shrinking its counterpart, not by normalizing both toward a middle size.
Rotations (Rule 5) may reduce toward 3° where a steeper angle would cause clipping at narrow widths, but at least two elements stay visibly off-axis.
Rule 7 is re-verified after every reflow without exception, since a text panel that clears the fragments at desktop width frequently lands on them once the layout collapses.
Text panels grow rather than shrink as the viewport narrows, since the available clean ground is what limits how much copy the composition can carry.
CUT / CollageIssue 08ArchiveContributorsFREEFORM INDEX
VISUAL CULTURE / FIELD NOTE
Make room for the fragments.
Collage is a web-interface design style that assembles a composition from visibly heterogeneous fragments — photographic cutouts, illustration, treated type, texture — layered at clashing scales and angles with their seams left exposed. Nothing is blended between materials. Because fragment surfaces are visually unpredictable, running text is placed on its own clean ground rather than over the assembly.
Open the current issue ↗
SUN / 01LOOK AGAINCUTTHE SEAMFOUND / REFRAMED
THIS ISSUE / THREE WAYS INASSEMBLY ORDER →
01
The seam is the subject
Boundaries between materials are shown, never smoothed.
CUT / IMAGE02
Scale is dislocated deliberately
Mismatched proportions produce the surreal quality that defines the style.
CUT / TYPE03
Layering is ordered
Fragments cross one another in a stated front-to-back sequence.
CUT / OBJECT
expressive
Assembles cut fragments of photography, illustration, and type at clashing scales and angles, letting the seams between materials stay visible.
Archetype
composition
Density
dense
Parts
captionstrip · gallery · panel
Palette
collage · cut-paper · layering
Applying a Constructivist visual direction
You are being asked to apply a Constructivist visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.
What “Constructivist” means here
Constructivist composition is built on a diagonal. A wedge, a bar, or a line crosses the frame at a steep angle, and everything else — shapes, type, images — organizes around that axis rather than around a horizontal grid. Primitive geometry does structural work: a circle is not an ornament, it is a mass balancing the composition. The palette is severe, usually red, black, and white. Weight collects on one side rather than distributing evenly, and elements are frequently cut off by the edge of the frame rather than politely contained within it.
The effect is urgency. This is a compositional language developed for posters that had to stop someone crossing a street, and it retains that quality: assertive, kinetic, and impossible to read passively. It suits announcements and statements. It fights any interface whose job is to feel calm or neutral.
One practical note, because it is where implementations usually go wrong: the angled type is real text. Rotating a text block with CSS keeps it selectable, searchable, and available to a screen reader in the correct order. Exporting the same headline as an image throws all of that away for no visual gain.
Recommendations
Establish the diagonal axis first, somewhere between fifteen and forty-five degrees, then compose everything else in relation to it. The angle is the structure, not a decoration applied afterward.
Hold the palette to three colors: black, white, and one saturated red. If red is wrong for the context, substitute a single other primary — but it stays one color, not two.
Use primitive shapes as structural masses. A circle, a triangle, a heavy bar. They should be large enough to carry compositional weight rather than sitting in a corner as accents.
Set headlines heavy and let at least one text block share the diagonal’s angle. Type is a construction material here, not a caption on a picture.
Load one side. Concentrate the visual mass in one region and let the opposite side carry much less; symmetry is the one thing this direction cannot tolerate.
Let something bleed off the edge. A shape cut by the frame implies that the composition continues beyond it, which is where much of the energy comes from.
Rotate real text elements rather than exporting typographic images. The visual result is identical and everything else about it is better.
Avoid
A symmetrical or centered composition.
A fourth color, which immediately dissolves the severity.
Geometric shapes used as small decorative accents rather than as structural mass.
Every element contained politely inside the margins.
Headline type set as an image in order to achieve an angle.
Angles so shallow they read as a mistake — below roughly fifteen degrees, a tilt looks like a misalignment rather than a decision.
A working order
Choose the single diagonal axis and draw the largest red bar or wedge across the field.
Place the black mass and one primary geometric counterweight on the heavier side.
Set the exhibition statement in heavy text, then rotate the real headline to share the axis.
Give the archive a compact selected-works index and a clean reading panel so urgency does not erase wayfinding.
Re-angle the axis for the narrow container, retain one angled headline, and re-check that the bleed does not crop meaning.
How to check your own work
Before considering the result finished, look at it and ask:
Is there one clear diagonal that organizes the page, or several unrelated angles? Multiple competing axes read as chaos rather than construction.
Draw a vertical line down the middle. Is one side clearly heavier? If the two sides are balanced, the composition is centered and the direction has not been applied.
How many colors are there? Three is the budget.
Does anything run off the edge of the frame? If everything is contained, the composition is static.
Select the angled headline with your cursor. Does it select as text? If not, it is an image, and it should not be.
Constructivist — Specification
Definition
Constructivist is a web-interface design style organized around a strong diagonal axis, in which primitive geometric shapes act as structural mass, the palette is restricted to black, white, and one saturated primary, and visual weight is deliberately loaded to one side. Elements bleed past the frame rather than being contained by it. The resulting register is urgent and assertive rather than neutral.
Core principles
The diagonal is the structure. A steep axis organizes the composition; everything else relates to it.
Geometry carries mass. Circles, triangles, and bars are structural elements, not accents.
Severity of palette. Three colors, one of which is a single saturated primary.
Weight is loaded, not balanced. Symmetry is the one arrangement the style cannot accommodate.
The frame is a crop, not a container. Elements continue past the edge.
Visual characteristics
One dominant diagonal between roughly fifteen and forty-five degrees.
Large primitive shapes acting as compositional counterweights.
Black, white, and a single saturated red or other primary.
Heavy sans-serif headlines, at least one running along the diagonal.
Visual mass concentrated in one region of the frame.
At least one element cut off by the viewport edge.
Rules
Dominant diagonal. The composition has a stated axis.
Acceptance criterion: At least one major compositional axis is rotated between 15° and 45°.
Three colors at most. The palette stays severe.
Acceptance criterion: The rendered palette resolves to black, white, and exactly one saturated primary color.
Primitives as structure. Geometry does compositional work.
Acceptance criterion: At least two primitive shapes — circle, triangle, or bar — function as compositional elements rather than as decorative accents, each occupying a substantial share of the layout area.
Heavy type, some angled. Type is construction material.
Acceptance criterion: Headlines compute a font-weight of 700 or greater, and at least one text block shares the angle of the diagonal axis.
Loaded asymmetry. Weight collects on one side.
Acceptance criterion: At least 65% of the covered area falls on one side of the vertical center axis.
Bleeding edge. The frame crops the composition.
Acceptance criterion: At least one element extends beyond the visible area rather than terminating inside the margins.
Rotated text remains text. Angled type keeps its semantics.
Acceptance criterion: Every rotated text element remains selectable text in the DOM with correct reading order; no headline is substituted by an image to achieve its angle.
Announcement precedes archive. The urgent composition still gives the visitor a clear cultural context.
Acceptance criterion: The first view contains an exhibition statement, one archive action, and a separately readable selected-works section.
One axis governs. Structural force is not confused with random rotation.
Acceptance criterion: At least 80% of angled bars, text, and shape edges either share the dominant axis or remain unrotated.
Red carries emphasis. The primary is used for force, not decoration scattered everywhere.
Acceptance criterion: Red marks the dominant axis and at least one action or heading, while black and white carry the remaining structural roles.
Narrow view preserves urgency and meaning. Reflow edits quantity before it edits hierarchy.
Acceptance criterion: The narrow layout retains the diagonal, two structural primitives, one angled text block, a readable archive panel, and no cropped essential copy.
Avoid
Symmetrical or centered composition.
A fourth color.
Geometric shapes used as small decorative accents.
Every element contained within the margins.
Headline type exported as an image in order to achieve rotation.
Angles below roughly fifteen degrees, which read as misalignment rather than intent.
Acceptance criteria
Rule 1: A major axis is rotated between 15° and 45°.
Rule 2: The palette is black, white, and exactly one saturated primary.
Rule 3: At least two primitive shapes act as structural mass.
Rule 4: Headlines are weight 700+ and at least one text block follows the diagonal.
Rule 5: At least 65% of covered area falls on one side of the center axis.
Rule 6: At least one element bleeds past the visible frame.
Rule 7: All rotated text is selectable text with correct reading order.
Rule 8: Exhibition context, archive action, and works section are distinct.
Rule 9: Most angled elements follow one axis.
Rule 10: Red is reserved for the structural primary and emphasis.
Rule 11: Narrow view preserves the axis and essential meaning.
Blocking failures
Angled headline text is rendered as an image, removing it from selection, search, translation, and assistive technology for a visual result that CSS rotation achieves identically.
Rotation places text at an angle steep enough to be unreadable, or reading order in the DOM no longer matches the intended sequence of the composition.
An element bleeding past the frame carries content that exists nowhere else, so information is cropped away rather than implied to continue.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
The diagonal (Rule 1) is re-angled for the narrower aspect rather than preserved numerically; an angle that reads as dynamic across a wide frame becomes nearly vertical in a narrow one.
Rotated text (Rule 4) reduces in quantity as the viewport narrows, since angled type consumes far more width; at least the primary headline retains the angle, or the rule is documented as suspended at that breakpoint.
Asymmetric loading (Rule 5) is preserved vertically when the layout stacks: mass collects toward the top or bottom rather than being distributed evenly down the column.
Bleed (Rule 6) is re-verified after reflow, since an element that crossed the edge at desktop width often fits entirely within a narrower one.
Rules 2 and 7 hold unchanged at every breakpoint.
ARCHIVE / ConstructivistPostersPeopleMethodsK-26
EXHIBITION 04 / GRAPHIC CONSTRUCTION
Build the message.
Constructivist is a web-interface design style organized around a strong diagonal axis, in which primitive geometric shapes act as structural mass, the palette is restricted to black, white, and one saturated primary, and visual weight is deliberately loaded to one side. Elements bleed past the frame rather than being contained by it. The resulting register is urgent and assertive rather than neutral.
Enter the archive ↗
FORM / FORCE / FUNCTION
SELECTED WORKSTHE POSTER AS DEVICE
01
The diagonal is the structure
A steep axis organizes the composition; everything else relates to it.
02
Geometry carries mass
Circles, triangles, and bars are structural elements, not accents.
03
Severity of palette
Three colors, one of which is a single saturated primary.
READ / 04
One dominant diagonal between roughly fifteen and forty-five degrees.
→
expressive
Drives composition with a strong diagonal axis, primitive geometric shapes as structure, and a red-black-white palette, producing deliberate visual urgency.
Archetype
composition
Density
regular
Parts
captionstrip · gallery · panel · footer
Palette
constructivism · diagonal · geometric
Applying a Vaporwave visual direction
You are applying Vaporwave to an independent electronic record-label and release archive. Make the archive legible first, then let recovered digital material give it its nostalgic, faintly ironic atmosphere.
What “Vaporwave” means here
Vaporwave is a memory world assembled from discarded consumer-digital material: washed magenta and cyan, obsolete interface chrome, classical forms, checkerboard space, and visible image degradation. It looks backward at the future imagined by late-20th-century consumer culture. It is pale and still, not a dark neon-futurist dashboard.
Recommendations
Give the fictional label a clear masthead, release index, artist and format metadata, and a short archive note.
Use a centered axis and calm, symmetrical composition before introducing the retro layer.
Combine a pale magenta/cyan atmosphere with one restrained obsolete-window convention, a small glitch vocabulary, and original geometric or marble-like forms.
Keep release names, formats, dates, and explanatory copy clean; distortion belongs to display type and atmosphere only.
Treat every release, artist, play count, and price as synthetic specimen furniture. Do not imply a real catalogue or audience.
If Japanese or another non-Latin script is unnecessary, omit it. Never use characters as visual texture.
Avoid
Dark, kinetic neon cyberpunk or Retrowave shorthand.
A nostalgia collage with no archive hierarchy.
Real album covers, recognizable logos, anime frames, statues, or label claims without a verified reuse basis.
Autoplay audio, fake listener counts, or a transactional flow as the visual subject.
Glitch effects on body copy, metadata, labels, or controls.
A working order
Name the archive job: identify the label and browse a small release index.
Establish the centered masthead, release metadata, and reading order.
Choose a washed magenta/cyan ground with dark ink that remains readable.
Add one obsolete GUI frame as a container for the release field.
Draw original classical/geometric media and one visible degradation artifact.
Apply channel separation only to display type or non-essential ornament.
Keep archive taxonomy and format labels plain and stable.
Reflow the release index as a centered stack at narrow widths.
Remove any effect that competes with the archive or carries meaning by distortion.
How to check your own work
Confirm that the release index still reads when the glitch layer is removed. Fold the specimen on its vertical axis and check the main composition. Check that the ground is washed rather than vivid, that one artifact remains visible at each breakpoint, and that all archive copy meets 4.5:1 contrast. Verify that any borrowed image or script has documented evidence; otherwise use original synthetic geometry.
Vaporwave — Specification
Definition
Vaporwave is a web-interface style assembled from discarded consumer-digital material: washed magenta and cyan, obsolete interface chrome, classical forms, and visible image artifacts. In this specimen it becomes a synthetic electronic release archive whose calm, centered structure makes the memory layer useful rather than noisy.
Core principles
Archive before atmosphere. Label identity, release names, formats, and dates remain easy to scan.
Secondhand material. The surface feels recovered from an obsolete consumer-digital world.
Degradation is visible but bounded. Copying, compression, or display failure belongs to display treatment and media fields.
Stillness is structural. The archive is centered and symmetrical like a paused screensaver.
Washed rather than vivid. Pastel color recalls memory without becoming neon futurism.
Synthetic and honest. Fictional releases and original geometry never pose as a real catalogue, artwork, or audience.
Visual characteristics
Pale magenta and cyan atmospheric planes with dark readable ink.
A quoted obsolete window frame or title bar around the release field.
Original marble-like geometry, checkerboard perspective, and small chromatic artifacts.
Clean artist, format, date, and archive-note text.
Symmetry about a vertical axis and a quiet, centered release index.
Rules
Archive hierarchy. The release job comes before the aesthetic layer.
Acceptance criterion: A viewer can identify the label, release names, artists, formats, and dates with the artifact layer disabled.
Washed palette. Color recalls pastel consumer media rather than neon futurism.
Acceptance criterion: The dominant magenta and cyan surfaces use 20–60% saturation and maintain at least 4.5:1 contrast for archive text.
Visible degradation. Recovered material shows a controlled failure.
Acceptance criterion: At least one non-essential display or media element visibly uses scanlines, channel offset, banding, or compression blocks at every breakpoint.
Obsolete interface quote. The archive has a recognizable period container.
Acceptance criterion: A release or media field includes a title bar, bevel, scrollbar, or window-frame convention, drawn as original CSS geometry.
Classical reference without borrowed rights. The memory world may suggest statuary without importing an unverified asset.
Acceptance criterion: The specimen uses original geometric marble-like forms only, or records a verified source and reuse basis in its research dossier; no copied image ships here.
Vertical stillness. The primary archive composition holds its axis.
Acceptance criterion: The masthead, release field, and release index remain centered on one vertical axis at desktop and narrow container widths.
Distortion stays off information. Artifacts never carry the taxonomy.
Acceptance criterion: Artist, format, date, archive note, and labels have no channel offset or glitch treatment and remain readable without color-only meaning.
Avoid
Dark, kinetic cyberpunk or generic Retrowave neon.
Nostalgia without release hierarchy, or fake plays, listeners, sales, and availability.
Copied album art, logos, anime frames, or statues without verified reuse evidence.
Non-Latin characters used as texture rather than meaningful text.
Glitch effects on archive copy, metadata, labels, or controls.
Acceptance criteria
The synthetic release archive remains scannable without artifacts.
Dominant surfaces are washed magenta/cyan with readable archive text.
One degradation artifact remains visible at each breakpoint.
An original obsolete GUI convention frames the release field.
Classical memory is represented by original geometry or documented licensed media.
The main composition stays centered and symmetrical.
Archive labels remain unglitched and do not rely on color alone.
Blocking failures
A glitch effect obscures a release name, format, date, or archive note.
A copied or unverified image, logo, or non-Latin text is presented as decorative material.
The retro layer replaces the archive hierarchy or introduces fake audience, commerce, or availability claims.
Responsive adaptation guidance
Preserve the vertical axis as the release field and index stack; do not collapse into an arbitrary left-aligned dashboard.
Simplify the obsolete frame and checkerboard geometry rather than shrinking them until their conventions disappear.
Keep at least one visible artifact and the full plain-text release metadata at every container width.
Use @container queries scoped to .specimen--site; the archive remains illustrative and has no real transactional controls.
AE / Vaporwavearchivesignalsaboutonline / 1994
A SYNTHETIC RELEASE ARCHIVE
sounds from a softer future
Vaporwave is a web-interface style assembled from discarded consumer-digital material: washed magenta and cyan, obsolete interface chrome, classical forms, and visible image artifacts. In this specimen it becomes a synthetic electronic release archive whose calm, centered structure makes the memory layer useful rather than noisy.
ARCHIVE.EXE / RELEASE FIELD_ □ ×
CURRENT SIGNALAE / 1994—95The catalogue is illustrative.
A small memory system for copied tapes, soft machines, and the places between one signal and the next.
RELEASE INDEX03 / SAMPLE CATALOGUE
AE-001
Soft Focus Memory
Mira Plaza
C-60 / digital08.94AE-002
Afterimage Mall
Pacific Signal
VHS / digital11.94AE-003
Blue Screen Garden
Window Seat
C-90 / digital02.95
retro
Builds a release archive from discarded consumer-digital material: washed magenta and cyan, obsolete interface chrome, classical forms, and visible image artifacts.
You are applying Art Deco to a boutique design-hotel site. Preserve a useful hospitality story—rooms, an experience, and booking-oriented information—while making symmetry, exact geometry, and machine-age luxury visible.
What “Art Deco” means here
Art Deco is decorative precision: a vertical axis, stepped forms, fans and rays, paired rules, restrained brass, and formal display typography over a deep ground. Every arc is constructed and every angle is intentional. It is not floral Art Nouveau, and it is not black-and-gold decoration without structure.
Recommendations
Center the masthead and hero, then mirror the major content blocks around the axis.
Use one bounded motif kit: stepped frame, fan/rays, and paired rules are enough.
Keep brass or gold to rules, highlights, and small geometry; use a deep navy, oxblood, forest, or near-black ground.
Set display titles in an uppercase condensed face with generous tracking; keep body, dates, room details, and booking furniture readable.
Make the specimen’s hotel, rooms, dates, amenities, and prices explicitly illustrative rather than real availability.
Preserve the task path: the primary booking-oriented label remains easy to find even when ornament is simplified.
Avoid
Organic floral ornament, freehand curves, or arbitrary angles.
Metallic color spread across the whole surface or used as the only text contrast.
A pale ground, single casual divider, or a left-aligned layout that loses the axial structure.
Decorative motifs that cover room details, dates, prices, or action labels.
Claims about a real hotel, room, availability, rate, or historical source.
A working order
State the hospitality job and list the information the visitor needs.
Build the centered masthead, vertical hero, room/experience index, and booking note.
Choose a deep ground and a high-contrast readable body color.
Add a single stepped or radiating motif as structural framing.
Introduce paired rules and a restrained brass accent.
Set only display typography in the formal condensed voice.
Re-measure the metallic area after reflow.
Simplify motifs and stack the content with container queries at narrow widths.
Check that no ornament interrupts the information path.
How to check your own work
Fold the specimen down its vertical center and compare the major regions. Confirm that the motif uses exact geometry, that brass is an accent rather than wallpaper, and that every paired rule marks a real division. Read the room details and booking information without relying on color or ornament. Verify that narrow layouts remain centered, readable, and free of clipped copy.
Art Deco — Specification
Definition
Art Deco is a web-interface style built on strict axial symmetry and exact geometry: stepped and radiating motifs, restrained metallic accents over a deep ground, formal display capitals, and grouped rules. In this specimen it frames a synthetic boutique-hotel experience so ornament and hospitality information share one precise hierarchy.
Core principles
Symmetry is the structure. Major regions mirror around a vertical axis.
Ornament is constructed. Steps, fans, rays, and arcs are exact geometry, never freehand filler.
Metal stays precious. Brass is a small accent for rules and highlights.
Depth supports contrast. A dark ground lets the metallic note read without carrying text legibility.
Hospitality remains clear. Rooms, dates, amenities, and booking-oriented information stay findable.
Synthetic content is explicit. The hotel and availability furniture are illustrative, not real claims.
Visual characteristics
Centered masthead and vertical hero with mirrored information blocks.
Deep navy ground, brass rules, and a small stepped fan motif.
Uppercase condensed display type with controlled tracking.
Paired or triple rules framing real divisions.
Exact rays, stepped geometry, and clean circle sections.
Rules
Strict axial symmetry. The hospitality composition mirrors.
Acceptance criterion: The masthead, hero motif, room index, and booking note share a visible vertical center axis at every breakpoint.
Structural geometric motif. Ornament organizes information.
Acceptance criterion: A stepped frame or radiating fan directly frames or aligns the hero and does not float as unrelated decoration.
Restrained brass. Metallic material remains valuable.
Acceptance criterion: Brass is confined to rules, rays, and small highlights, occupies no more than 15% of the rendered specimen, and sits over a deep ground.
Formal display voice. Typography carries the period reference.
Acceptance criterion: Display headings are uppercase, use the project’s condensed artifact face, and have computed tracking of at least 0.05em; body copy stays readable.
Grouped rules. Divisions use inlay-like rhythm.
Acceptance criterion: At least two real regions are separated or framed by parallel groups of two or three 1–2px rules, not single casual dividers.
Exact geometry. Construction is repeatable.
Acceptance criterion: All rays use documented 15° increments and all curved motifs are circle sections or CSS border-radius constructions.
Information over ornament. Luxury does not hide the hotel job.
Acceptance criterion: Room details, illustrative dates, amenities, and the booking-oriented label remain legible without relying on brass or ornament for meaning.
Avoid
Organic floral ornament, freehand marks, arbitrary angles, or Art Nouveau substitution.
Black-and-gold shorthand without symmetry and structural geometry.
Metallic surfaces large enough to become wallpaper or a contrast dependency.
Decorative frames crossing room details, dates, prices, or action labels.
Claims about a real hotel, room, availability, rate, or historical provenance.
Acceptance criteria
Major site regions mirror on a vertical axis.
A stepped or radiating motif organizes the hero.
Brass remains a small accent over a deep ground.
Display headlines are uppercase, condensed, and letterspaced.
Paired or triple rules mark real divisions.
Curves and angles use exact constructions.
Hospitality information remains readable without ornament.
Blocking failures
Ornament interrupts or obscures the room, date, amenity, or booking information.
Metallic treatment creates a contrast failure at one of its light or dark extremes.
Responsive reflow destroys the central axis or clips a heading and is presented as decoration.
Responsive adaptation guidance
Keep content centered as regions stack; reduce motif steps and rays rather than shrinking them into illegibility.
Re-measure the 15% brass budget after reflow because fixed ornaments occupy more of a narrow specimen.
Preserve paired-rule divisions, display tracking at or above 0.05em, and readable body copy at every container width.
Render the hospitality path as synthetic specimen furniture only; the site should not become a real booking flow.
PARIS / 1928—NOW
AASTRA HOUSE
ROOMS DINING VISITA BOUTIQUE HOUSE FOR THE MACHINE AGE
Stay in good form.
Art Deco is a web-interface style built on strict axial symmetry and exact geometry: stepped and radiating motifs, restrained metallic accents over a deep ground, formal display capitals, and grouped rules. In this specimen it frames a synthetic boutique-hotel experience so ornament and hospitality information share one precise hierarchy.
ARRIVE14 OCT 2026
DEPART17 OCT 2026
ROOMS01 / TWO GUESTS
VIEW THE HOUSE →
THE ROOMSTHREE WAYS TO STAY
I
The Meridian Suite
A high room for slow mornings, brass light, and a view across the imagined city.
KING / 48 M²II
The Radio Room
A compact retreat with lacquered surfaces and a listening alcove.
QUEEN / 32 M²III
The Palm Salon
A generous corner room for late dinners and long geometric shadows.
TWIN / 41 M²
retro
Frames a hospitality experience with strict symmetry, exact stepped geometry, restrained brass, and formal typography over a deep architectural ground.
Archetype
reading
Density
regular
Parts
masthead · hero · reading · footer
Palette
art deco · symmetry · geometric · hospitality · luxury
Applying an Anti-Design visual direction
You are applying Anti-Design to an experimental creative-studio portfolio. Make the studio, work index, and contact path understandable; then deliberately refuse selected visual conventions around them.
What “Anti-Design” means here
Anti-Design is named disobedience, not missing decisions. Clashing colors, uncomfortable secondary type, inverted prominence, off-grid placement, and awkward overlaps make a position visible. The semantic skeleton remains intact: contrast, focus, accessible names, predictable order, and a usable primary path are not conventions to break.
Recommendations
Name each visible refusal: for example, “caption outranks title” or “project labels reject the shared column.”
Establish a readable studio identity, project index, labels, and contact route before disrupting the frame.
Use a bounded rupture kit: two adjacent clashing colors, one off-grid cluster, one overlapping zone, and one uncomfortable secondary typographic treatment.
Give the eye a leverage point and preserve one calm reading zone so the page feels aggressive on purpose rather than broken.
Keep project names, descriptions, and contact information plain enough to parse; make the secondary label carry the discomfort.
Keep the specimen synthetic: no real client claims, copied campaign imagery, or invented performance metrics.
Avoid
Random mess with no named convention being refused.
Maximum intensity everywhere, which erases the studio’s communication job.
Low-contrast text, hidden focus, color-only meaning, or controls that become unreachable.
Deliberate anti-usability in health, finance, checkout, support, or other critical flows.
Copying a real designer’s layout or campaign and calling the imitation original.
A working order
State what the studio makes and identify the primary path to its work.
Build the semantic skeleton: heading, project index, labels, descriptions, and contact route.
Write down two or three conventions the composition will refuse.
Choose an accessible clashing pair and a calm text ground.
Break one alignment axis and invert one secondary/primary prominence relationship.
Add one bounded overlap without clipping or obscuring copy.
Keep the index and contact path stable while expressive surfaces respond to preview hover.
Reflow offsets into a reachable vertical sequence at narrow widths.
Test contrast, focus, reading order, and the named refusals together.
How to check your own work
For every rupture, say which convention it breaks and why. Read the project index with the disruptive colors mentally removed. Tab through every real control and confirm a visible focus state. Check the worst color pair at narrow width and 200% zoom. If the page reads as broken rather than deliberately tense, reduce the number of ruptures and restore the calm zone.
Anti-Design — Specification
Definition
Anti-Design is a web-interface style that deliberately subverts polished interface conventions: colors clash, secondary typography becomes uncomfortable, hierarchy is inverted, and alignment is refused. In this specimen it becomes an experimental creative-studio portfolio. The stance is legible because the studio’s identity, project index, and contact path remain intact; access conditions are never treated as decoration.
Core principles
Name the refusal. Every rupture identifies the convention it breaks.
Discomfort is bounded. A few clashing relationships create tension; maximum noise erases intent.
Hierarchy can invert. Secondary material may become the leverage point on purpose.
The grid is refused selectively. Offsets should be visible decisions, not unreachable content.
A calm zone restores reading. One quiet region lets the experimental frame be understood.
Access is not a convention. Contrast, focus, order, labels, and reachable controls remain dependable.
Visual characteristics
Saturated near-complementary colors placed directly against each other.
A secondary caption or label larger and louder than the primary studio title.
One off-grid project cluster and one bounded overlap.
Plain project descriptions and contact information inside a tense frame.
Written labels that state the conventions being refused.
Rules
Named subversion. Rupture is authored, not random.
Acceptance criterion: At least two visible deviations include a plain-text label naming the convention they reject, such as “caption outranks title” or “shared column refused.”
Clashing color. Discomfort is deliberate and adjacent.
Acceptance criterion: At least two adjacent non-gradient surfaces use near-complementary hues at 70% or greater saturation while their text remains readable.
Uncomfortable secondary type. Typography breaks convention without breaking reading.
Acceptance criterion: A non-primary caption or label uses intentionally extreme scale, tracking, or rotation; project names and descriptions use a readable treatment.
Inverted prominence. Hierarchy is visibly challenged.
Acceptance criterion: A secondary label is larger or more visually dominant than the studio title, and a nearby annotation names the inversion.
Selective grid refusal. Placement does not resolve to one shared column.
Acceptance criterion: At least two non-interactive project elements have distinct, bounded inline offsets while the project index remains in a predictable reading order.
Calm zone. Tension has a place to resolve.
Acceptance criterion: One project description or contact region uses a quiet ground, regular type, and uninterrupted reading measure of 65–75ch or less.
Access floor. Aesthetic refusal stops at usability.
Acceptance criterion: All visible text measures at least 4.5:1, controls at least 3:1, focus remains visible, and no project state or contact meaning is conveyed by color alone.
Avoid
Random mess with no named convention.
Maximum intensity across every element or uncomfortable type on required reading copy.
Low-contrast text, hidden focus, missing labels, or unreachable controls.
Deliberate anti-usability in critical flows.
Copied portfolios, campaign imagery, client claims, or invented performance metrics.
Acceptance criteria
Two or more ruptures name the conventions they refuse.
Adjacent saturated color tension is visible without color-only meaning.
Uncomfortable type is confined to secondary material.
A secondary label intentionally outranks a primary title.
Off-grid placement is bounded and the project order remains predictable.
A calm zone restores a readable measure.
Contrast, focus, labels, and meaning floors remain intact.
Blocking failures
A project name, description, contact route, or control becomes unreadable or unreachable.
The specimen relies on hue alone to communicate project state or navigation.
Rupture has no named convention, no bounded placement, or no remaining hierarchy, so the work reads as broken rather than deliberate.
Responsive adaptation guidance
Keep deliberate offsets in the stack but remove overlap when it would clip or obscure project copy.
Reduce extreme tracking, scale, and rotation at narrow widths while keeping the secondary typographic refusal visible.
Preserve predictable project and contact order, readable body measure, and any real control’s touch target.
Re-check the worst color pair and the calm zone after every container reflow and at 200% zoom.
Anti-Design is a web-interface style that deliberately subverts polished interface conventions: colors clash, secondary typography becomes uncomfortable, hierarchy is inverted, and alignment is refused. In this specimen it becomes an experimental creative-studio portfolio. The stance is legible because the studio’s identity, project index, and contact path remain intact; access conditions are never treated as decoration.
NOBRIEFTHE CAPTION IS BIGGER BECAUSE IT SAID SO
SELECTED WORK / 03CONVENTION REFUSED: SHARED COLUMNS
A—01
LOUD QUIET
A visual identity that refuses the neat launch story.
CAPTION > TITLEA—02
ROOM TONE
An editorial object built from misregistered voices.
SHARED COLUMN REFUSEDA—03
NO NORMAL
A poster system for a festival that has not happened.
ORDER / REARRANGEDCALM ZONE / CONTACT PATH
Tell us the strange part.
Studio conversations, commissions, and useful misreadings all begin here.
↘
expressive
Stages an experimental studio portfolio where named rule-breaking, clashing color, uncomfortable secondary type, and off-grid composition remain legible on purpose.
Archetype
composition
Density
regular
Parts
footer · gallery · panel · masthead
Palette
anti-design · experimental · creative studio · typographic · off-grid
Applying a Memphis visual direction
You are applying Memphis to a page that needs the energy of a design exhibition or archive. Preserve the product’s purpose and information architecture, then make the interface feel like a field of authored objects: flat geometry, unexpected color, pattern, asymmetry, and strong labels.
What Memphis means here
Memphis uses a postmodern graphic grammar of symbolic primitive forms and deliberately surprising color combinations. Circles, wedges, bars, dots, stripes, and squiggles should feel like an exhibition’s object language rather than stickers added after layout. Keep the information architecture dependable: the archive title, captions, metadata, and controls need a clear lane through the expressive material.
The visual commitment is page-scale. Use a warm paper ground, dark ink, and several saturated accents that make a real field of color. Keep forms flat and graphic; the point is the relationship of shape, line, pattern, and type, not simulated depth. Vary scale, rotation, and position with intention. A little asymmetry makes the composition feel authored; random obstruction makes it fail.
Recommendations
Open with a memorable object field or exhibition title, not a generic hero card.
Use at least six independent marks in the initial composition, including angular, circular, and curved forms.
Give the archive a repeatable dot, stripe, or terrazzo-like pattern so the page has a signature motif.
Let three or more saturated accents occupy meaningful regions or object marks; do not hide the palette in tiny badges.
Keep archive copy on stable dark/light surfaces. Route marks around text and controls.
Give at least three objects distinct titles, descriptors, and states so the page demonstrates browsing.
Recompose the object index at container breakpoints. Remove or reposition marks when margins disappear.
Add one preview-only hover response, such as a small color or rotation shift. The still state must be complete and reduced motion must remove the transition.
Avoid
A neutral page with a few colorful stickers.
Gradients, blur, photorealistic shading, or heavy shadows on Memphis geometry.
Identical icon-heading-copy cards or a tidy grid that erases asymmetry.
Decoration behind text, captions, controls, or focus indicators.
Invented period claims, real exhibition claims, or provenance not supplied by the project.
Hiding the archive index on narrow screens or allowing horizontal overflow.
How to check your own work
Before considering the result finished, ask:
Can the first viewport be remembered as an object field rather than only a mood?
Do the shapes read as one authored system even though the colors clash?
Is the pattern still visible after container reflow?
Can every object title and caption be read without decoration touching it?
Does the page remain complete before hover, and does reduced motion leave that still composition intact?
A working order
Establish the dark text lanes and the full-palette ground.
Compose the exhibition title and the focal geometric object.
Add the repeatable pattern and the asymmetrical marks around, never over, content.
Build the object index with distinct titles, descriptors, and states.
Recompose in narrow containers, then verify contrast, overflow, and reduced motion.
Memphis — Specification
Definition
Memphis is a postmodern interface language of symbolic, flat forms, unexpected color combinations, and playful pattern. It turns an exhibition or archive into a field of objects: circles, wedges, squiggles, stripes, and dots keep their graphic presence while content stays in a dependable reading lane. The visual world is intentionally anti-standardized, but its information hierarchy is not chaotic.
Core principles
Symbolic geometry. Primitive shapes behave like authored marks and objects, not generic decoration.
Deliberate disharmony. Saturated colors meet without being softened into a harmonious palette.
Flat material logic. Color fields, paper-like blocks, and linework stay graphic rather than simulated with depth.
Playful asymmetry. Rotation, scale, and position vary enough to feel composed by hand.
Archive clarity. Labels, titles, and metadata remain aligned and legible inside the expressive field.
Cultural quotation without nostalgia. The early-1980s postmodern vocabulary is a starting grammar, not a reason to imitate a period artifact.
Visual characteristics
A high-energy field of flat circles, wedges, bars, dots, and squiggles.
Three or more saturated accent colors held together by a dark ink and a warm paper ground.
A visible pattern or repeated motif that reads as part of the archive’s visual system.
Mixed scales and slight rotations, with intentional asymmetry rather than random noise.
Strong display typography paired with compact archive metadata.
Clear text lanes and object captions that are never placed on top of decorative shapes.
A visible index or collection view where each object has a distinct title and state.
Rules
Primitive object language. Shapes carry the visual argument.
Acceptance criterion: The first viewport contains at least six independently authored geometric marks, including one circle or dot system, one angular form, and one curved or squiggled line.
Full-palette commitment. Color is a page-scale material.
Acceptance criterion: At least three saturated accent roles occupy meaningful regions or object marks, alongside a dark ink and a light ground; no accent is reduced to a token chip.
Patterned evidence. The archive has a repeatable motif.
Acceptance criterion: A dot, stripe, or terrazzo-like pattern appears in a non-text region and remains visible at narrow widths.
Graphic flatness. Forms do not pretend to be 3D objects.
Acceptance criterion: Decorative geometry uses solid fills and strokes only; no gradient, blur, or box shadow is used for the Memphis visual material.
Composed asymmetry. Variation is intentional and bounded.
Acceptance criterion: At least four decorative marks use visibly different scale, rotation, or position, while the archive labels retain a consistent alignment system.
Object-first index. The style has something to browse.
Acceptance criterion: The specimen presents at least three distinct archive objects with a title, a short descriptor, and a visible collection or state label.
Readable lanes. Expression yields to information.
Acceptance criterion: Decorative marks do not overlap text, and all archive copy and controls retain at least 4.5:1 contrast against their actual background.
Responsive re-composition. The field adapts rather than shrinks blindly.
Acceptance criterion: At the narrow container breakpoint, the object index becomes a single readable column and decorative marks are reduced or repositioned without causing horizontal overflow.
One authored response. Motion reinforces the object language.
Acceptance criterion: A preview-only object state changes color or rotation on hover, while cards remain still at rest and reduced motion removes the transition.
Avoid
Random decoration that obscures an archive title, caption, or control.
A neutral page with isolated colorful stickers.
Soft gradients, photorealistic shadows, or depth effects that turn flat marks into generic 3D UI.
Equal-sized cards with identical icon-heading-copy anatomy.
Nostalgic period-copy claims that are not part of the supplied content.
A responsive collapse that hides the collection index or creates horizontal scrolling.
Acceptance criteria
Rule 1: Six or more authored geometric marks cover the initial field.
Rule 2: Three saturated accent roles carry page-scale or object-scale weight.
Rule 3: A repeatable dot, stripe, or terrazzo motif remains present at every breakpoint.
Rule 4: Memphis geometry uses solid fills/strokes without gradients, blur, or shadows.
Rule 5: Marks vary in scale, rotation, or position while labels align consistently.
Rule 6: Three or more archive objects expose title, descriptor, and state.
Rule 7: Text remains unobscured and meets 4.5:1 contrast.
Rule 8: Narrow containers recompose the index and avoid horizontal overflow.
Rule 9: The authored hover response is still by default and suppressed by reduced motion.
Blocking failures
Any mark sits behind archive copy or a control, making the reading background unpredictable.
The palette or geometry is exposed as meaningful content to assistive technology inside the decorative specimen.
The index becomes unreadable, disappears, or overflows horizontally at a narrow container.
Motion is required to understand an object, or continues when reduced motion is requested.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Keep the dark text lanes and archive metadata in the reading order; move marks into margins or remove them when the container cannot hold a safe margin.
Reduce the decorative field from six or more marks to a smaller set only when needed for clear copy; preserve at least one curved line, one angular mark, and the signature pattern.
Let the object index change from a multi-column field to a single column. Do not preserve desktop card widths by creating horizontal scroll.
Scale display type with the container, but keep a clear step between the exhibition title and object metadata.
Test at 200% zoom and after the grid reflow: contrast, focus boundaries outside the hidden specimen, and label order must remain intact.
MEMPHIS / MemphisSYNTHETIC ARCHIVE · OBJECTS IN PLAY
Design exhibition / visual index
Form as argument.
Scatters flat primitive shapes, squiggles, and confetti pattern in colors that refuse to harmonize, producing cheerful, weightless visual noise.
read the marks / keep the order
OBJECT FIELD / 01FLAT / LOUD / CLEAR
Archive indexThree principles / synthetic entries
01
Symbolic geometry
Primitive shapes behave like authored marks and objects, not generic decoration.
INDEXED / OPEN
02
Deliberate disharmony
Saturated colors meet without being softened into a harmonious palette.
INDEXED / OPEN
03
Flat material logic
Color fields, paper-like blocks, and linework stay graphic rather than simulated with depth.
INDEXED / OPEN
expressive
Scatters flat primitive shapes, squiggles, and confetti pattern in colors that refuse to harmonize, producing cheerful, weightless visual noise.
Archetype
system
Density
regular
Parts
masthead · hero · grid · footer
Palette
memphis · playful · pattern
Applying an Ethereal visual direction
You are applying Ethereal to a contemporary art gallery and digital viewing room. Preserve the product’s purpose and information architecture, then create a quiet high-key experience where atmosphere gives a focal work room to breathe and deep ink keeps every piece of information usable.
What Ethereal means here
Ethereal holds the page in pale, low-saturation light. Blush, lilac, pearl, or blue fields move into one another over long distances; the boundary between regions is a tonal drift, not a visible line. Large delicate type floats in the open field, while gallery titles, metadata, and controls stay dark and precise.
The softness belongs to the surface, not to the content. Use blur, translucency, and glow only around the focal artwork where they explain atmosphere. Do not turn every region into a translucent card: a viewing room needs one dominant work, a small index, and enough quiet around both to preserve scale.
Recommendations
Open with one large exhibition title and one abstract focal work surrounded by visible negative space.
Keep the overall field bright and use low-saturation gradients that run at least 200px or across the relevant container.
Pair a thin/light title at 40px or larger with compact, darker metadata that remains easy to read.
Present at least three distinct works with title, descriptor, and viewing state or medium.
Use tonal change, whitespace, or a soft mask instead of hard borders between the main regions.
Keep blur and translucency on the artwork atmosphere, never on essential text or state labels.
Add one slow, optional drift or glow response; start from a complete still composition and honor reduced motion.
At narrow widths, stack the artwork and index with breathing room. Increase title weight if the title must become smaller than 40px.
Avoid
Pale grey copy on a pale field, or controls with no visible state/focus treatment.
A dark-mode inversion, saturated neon palette, or generic aurora background.
Glassmorphism-by-default, with blur and transparency on every surface.
Dense equal cards that make the gallery feel like a dashboard.
Hard dividers, abrupt gradient edges, and fast entrance animations.
Invented artist, exhibition, date, or collection claims presented as real provenance.
How to check your own work
Before considering the result finished, ask:
Is the first viewport remembered as a specific viewing room, not only as “soft”?
Does the focal work have more air than the supporting index?
Is the lightest visible copy still dark enough against its actual field?
Does the still state explain the work without motion?
Does the narrow composition preserve hierarchy, breathing room, and a readable index?
A working order
Establish the light field and deep-ink reading color.
Set the exhibition title and the focal work’s negative-space composition.
Add one restrained atmospheric layer and the viewing metadata.
Build the three-work index with distinct states.
Recompose in narrow containers, then verify contrast, focus treatment, motion, and overflow.
Ethereal — Specification
Definition
Ethereal is a high-key interface language for a quiet, immersive viewing experience. Pale low-saturation fields dissolve into one another, translucent atmosphere gives a focal artwork room to breathe, and large delicate type establishes a calm pace. The surface is soft; the information is not: gallery titles, work metadata, and controls use deep ink so the lightness never becomes illegibility.
Core principles
High-key atmosphere. Light and low saturation define the room before any object appears.
Dissolved boundaries. Tonal drift and soft masks separate regions instead of visible rules.
Artwork in negative space. A focal object gets room, scale, and quiet around it.
Delicacy at a readable scale. Thin display type is reserved for large titles; small metadata remains darker and sturdier.
Softness on the surface. Blur, translucency, and glow belong to atmosphere, never to essential text.
Slow looking. Movement is a restrained drift that supports contemplation and has a complete still state.
Visual characteristics
A bright surface with blush, lilac, blue, or pearl tonal fields and no hard color seams.
Large, thin or light display type balanced by compact deep-ink metadata.
One dominant abstract artwork or light form surrounded by generous open space.
A small gallery index with distinct works, titles, and viewing states.
Translucent layers, soft masks, and restrained blur used only where they explain atmosphere.
A slow, gently eased focal motion that is optional rather than required.
Controls with a clear dark state and a visible focus treatment despite the borderless surface.
Rules
High-key room. The viewing room starts in light.
Acceptance criterion: The specimen background is predominantly pale and its primary surface colors have high relative luminance; no dark panel occupies the main field.
Long atmospheric transitions. Color changes feel continuous.
Acceptance criterion: Every primary gradient uses low-saturation stops and spans at least 200px or the full relevant container dimension; no abrupt stop separates gallery regions.
Negative-space composition. The artwork is given air.
Acceptance criterion: The initial viewport leaves a substantial open field around the focal artwork and the gallery index does not occupy the entire hero.
Delicate display, anchored metadata. Typography carries both lightness and proof.
Acceptance criterion: The main title is at least 40px at weight 300 or lighter on wide containers; labels and metadata use a darker, readable weight and size.
Atmospheric boundaries. Regions dissolve rather than become cards.
Acceptance criterion: Primary regions have no visible 1px divider or boxed card edge; tonal fields, masks, or whitespace establish the separation.
Focal translucency. Soft effects have a job.
Acceptance criterion: Blur, translucency, or glow is limited to the focal artwork and its atmosphere; essential text and metadata remain unblurred and opaque.
Gallery index. The room supports looking and choosing.
Acceptance criterion: At least three works are presented with distinct titles, a concise descriptor, and a visible viewing state or medium label.
Contrast under lightness. Calm never means faint.
Acceptance criterion: All visible text meets 4.5:1 contrast against its actual background, and any control state reaches at least 3:1 with a visible focus treatment.
Slow optional motion. Drift is a material, not a dependency.
Acceptance criterion: Any animation lasts at least 800ms, uses gentle easing, starts from a complete visible state, and is disabled under prefers-reduced-motion.
Responsive quiet. Narrow rooms preserve hierarchy.
Acceptance criterion: The title, artwork, and work index recompose at the container breakpoint without horizontal overflow, and small-screen title weight increases if its size drops below 40px.
Avoid
Pale grey copy that disappears into the field.
A dark mode inversion, saturated neon palette, or generic aurora effect.
Blur or translucency applied to every surface until the interface becomes glassmorphism.
Equal card grids that remove the sense of a viewing room.
Hard borders, abrupt gradient stops, and short attention-grabbing motion.
Thin typography at small sizes or metadata that is too low-contrast to read.
Acceptance criteria
Rule 1: The room reads predominantly pale and high-key.
Rule 2: Primary gradients use low-saturation, long transitions with no hard seam.
Rule 3: The focal artwork has visible negative space around it.
Rule 4: The title is delicate at large scale and metadata is anchored.
Rule 5: Primary regions are separated without visible divider lines or boxes.
Rule 6: Soft effects are restricted to the focal artwork and remain off essential text.
Rule 7: Three or more works expose title, descriptor, and state/medium.
Rule 8: Text reaches 4.5:1 and controls/focus treatment remain findable.
Rule 9: Motion is slow, optional, and reduced-motion safe.
Rule 10: Narrow containers preserve hierarchy and avoid horizontal overflow.
Blocking failures
Gallery copy or control text is pale against the pale field and fails contrast.
The primary gallery regions are turned into hard-bordered, dense cards that defeat the viewing-room composition.
Blur makes a title, work label, or state unreadable.
The artwork or index requires animation to be understood, or animation continues under reduced motion.
These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.
Responsive adaptation guidance
Re-evaluate the open field after every container reflow. A stacked narrow layout may cover more area, but it must retain visible breathing room around the focal work.
Keep the title as the first typographic anchor. If it falls below 40px, increase weight to 400 and preserve deep contrast.
Let the gallery index move to one column with generous vertical gaps; do not squeeze three works into unreadable slivers.
Scale the atmosphere with the container so its gradients remain long and edge-free. Remove secondary haze layers before reducing text contrast.
Check at 200% zoom and with reduced motion: metadata order, control boundaries, and focus visibility must stay intact.
AETHER / EtherealVIEWING ROOM · INDEX · NOTES
Contemporary gallery / synthetic exhibition
Light holds the work.
Holds the interface in high, even light — soft low-saturation gradients, diffuse boundaries, thin large type, and mostly empty space — to read as calm and weightless.
ROOM 01OPEN VIEW / STILL FIELD
UNTITLED ATMOSPHERE / 01
Works in the roomsynthetic index / three views
01
High-key atmosphere
Light and low saturation define the room before any object appears.
NOW VIEWING
02
Dissolved boundaries
Tonal drift and soft masks separate regions instead of visible rules.
ENTER ROOM
03
Artwork in negative space
A focal object gets room, scale, and quiet around it.
ENTER ROOM
Viewing note
The still field is the invitation.Softness belongs to the room; clarity belongs to the label.
reductive
Holds the interface in high, even light — soft low-saturation gradients, diffuse boundaries, thin large type, and mostly empty space — to read as calm and weightless.