Layout
From our catalogue entryComposition: broken grid.
No shared edge, crowded type that won't align, harsh colour, pages that disorient on purpose
Build with it
A starting grammar for a website in Anti-Design: nothing on a shared edge, colours left to clash, type that refuses to align but stays readable, and controls that resist, with one switch that straightens it all.
Web translation marks our choices for the screen. Not specified by the source marks what the sources leave open. Everything else is a rule from the record below.
The same system is in the brief (Build → Brief) and in the structured data.
Colour
- ground
#F4EFE2 - ink
#17141B - blue
#1F3E9E - lime
#D6FF3F - pink
#FF3DA6 - lilac
#C7D0FF
Two systems, nothing arbitrating. Text stays in ink or blue.
The rules behind it
- From our catalogue entry · Source attachedLeave the colours clashing: two systems on one page with nothing arbitrating between them. From our catalogue entry (colour)
- DocumentedReach it the documented way: combine clashing colours at the extreme, then dial back until it works. From a documented finding (technique)
- Web translationCarry text only in ink or blue; put lime and pink behind it, never under it as text. The clash is in the fields; contrast is what the page cannot afford to give up. From our catalogue entry (colour), a documented finding (technique)
- Not specified by the sourceThe sources do not specify a palette. These six are the room's. Choose your own clash; do not treat lime and pink as the language.
Type
Hard work, not unreadable
type that refuses to align
Running text stays level, at 17px, in the same face.
The rules behind it
- Our readingSet type that refuses to align: hard work to read, never unreadable. From our reading (typography)
- Web translationUse one variable face and swing it from 900 to 100 italic inside a single heading. Weight collision is how the room makes type difficult without making it illegible. From our reading (typography)
- Web translationKeep running text level and at 17px. The sources describe difficulty, not illegibility; the difficulty belongs to the headings and the placement. From our reading (typography), a documented finding (interface)
- Not specified by the sourceThe sources do not name a typeface. Work Sans is the room's. Any face with a wide weight range will do.
Layout
Twelve columns exist only to be missed: every block its own start, its own angle.
The rules behind it
- From our catalogue entryBreak the grid. From our catalogue entry (layout)
- Our readingBreak alignment so nothing settles on a shared edge; if the system stays inferable it has become New Wave Typography. From our reading (layout)
- Our reading · disputedLeave the ranking contested: competing signals that never resolve. From our reading (hierarchy)
- Web translationPlace every offset and angle by hand; nothing random. A placed break can be straightened by one switch; a random one cannot be designed or tested. From our reading (layout)
Shape
Square corners, 3px ink. The break is the angle, placed by hand, and a blemish left in.
The rules behind it
- Web translationSquare corners and 3px ink borders; the break is in the angle and the placement, not the shape. The record breaks alignment and legibility, not form; three-dimensional form is an open question. From our reading (layout), a documented finding (form)
- DocumentedAdd deliberate blemishes and glitches so the work reads as made by a person. From a documented finding (surface)
Imagery
A disorienting pattern in CSS; an image stretched until it breaks its frame.
The rules behind it
- Our readingImagery is neither demanded nor forbidden. From our reading (imagery)
- DocumentedWhere you use images, stretch them and let them break the layout. From a documented finding (technique)
- DocumentedUse disorienting patterns. From a documented finding (motif)
- Web translationBuild patterns in CSS, not raster files. A disorienting pattern must stay sharp at every width and be removable in one switch. From a documented finding (motif)
- Not specified by the sourceThe sources describe no fixed motif set. Built In calls it a way of thinking more than an aesthetic; do not turn one site's scribble into a rule. From a documented finding (motif)
Components
The record documents interface conventions for Anti-Design. These four components are contemporary builds on those conventions, not historical artefacts.
Poster, 2019ProjectThree colours that were never meant to share a sheet.
Error: this needs an @.
The rules behind it
- Web translationTilt the button off the page's edges and put its shadow on the side no light would cast it. Nothing may settle on a shared edge; a button is one more thing that refuses to. From our reading (layout), our catalogue entry (layout)
- Web translationPair two colours from the set that do not agree. Colour is left clashing, with no arbitration between hues. From our catalogue entry (colour)
- Web translationGive every card its own column start and angle; never let two share an edge. Alignment is broken so that nothing settles; if the structure stays legible it is Web Brutalism instead. From our reading (layout), our catalogue entry (layout)
- Web translationRank nothing: let size, colour and position pull against each other. The record states that there is no stable ranking. From our reading (hierarchy)
- Web translationSlide the label off the field's edge; keep the field straight. The friction has to be chosen, and the record accepts cost to conversion, not to entering text at all. From our reading (layout), our reading
- Not specified by the sourceThe sources do not specify an anti-design form convention. Do not invent a form convention; keep the field plain and break only its alignment.
- Web translationDrop each link to its own baseline. Type that does not align is the documented trait; a row of links is the easiest place to refuse it. From our reading (typography), a documented finding
- Web translationLet one control move, resist or do something other than it advertises, for the mouse only. Unexpected interaction is the record's evidenced behaviour; keyboards and assistive technology never meet it. From our reading (interface), our catalogue entry (motion)
Motion
Point here
A weird cursor, and a block that flips in four steps. Nothing eases.
The rules behind it
- From our catalogue entry · Source attachedMake interaction unexpected: it is a claimed behaviour, not an inference. From our catalogue entry (motion)
- DocumentedWeird cursors and unnecessary, distracting animation are documented. From a documented finding (interface)
- Web translationMove in steps, never eased. Easing reads as polish, and the record refuses smooth, predictable interaction. From our reading, our catalogue entry (motion)
Friction and its exit
The switch removes every angle above. A control that resists gives in after three tries, and never resists the keyboard.
The rules behind it
- Our readingControls move, resist, or do something other than they advertise. From our reading (interface)
- DocumentedInteraction does not have to be smooth. From a documented finding (interface)
- Web translationLet a resisting control give in after three tries, and never resist the keyboard. The cost is accepted for the pointer, not for someone who cannot use one. From our reading, our reading (interface)
- Web translationShip a switch that removes every transform. Accessibility is a cost the record accepts; the switch lets each visitor decide whether to pay it. From our reading
What carries the look
0 Elements linked. No Element is linked to this Aesthetic yet. Each row still opens its gallery.
| Typographycarries the look | Work Sans Page set in Work Sans. |
|---|---|
| Color | #17141B#1F3E9E#D6FF3F#F4EFE2#FF3DA6#C7D0FF#EFEDF3#0B0D12 as built |
| Compositioncarries the look | Nothing linked yet |
| Imagery | Nothing linked yet |
| Surfaces | Nothing linked yet |
| Motion | The page moves: one control resists. |
| Motifs & Symbols | Nothing linked yet |
| Techniques | Nothing linked yet |
What it argues
Usability conventions are a commercial value, not a natural law.
Breaking alignment, legibility and interaction on purpose refuses the assumption that a page exists to convert a visitor, and treats the visitor as someone who came to look rather than to be processed.
It refuses:smooth interaction, predictable alignment, and any optimisation aimed at conversion.(Hover or focus to turn it the right way up.)
How you recognise it
Alignment broken so that nothing settles onto a shared edge, type set to be difficult rather than merely unusual, clashing colour with no arbitration, and interactions that behave unexpectedly — controls that move, resist, or do something other than what they advertise.
The diagnostic condition is that the friction is functional: something is genuinely harder than it needs to be, and that cost was accepted deliberately.
Web Brutalism exposes structure and leaves it working. New Wave Typography violates a grid that stays inferable; here there is no grid to infer.
Rules
18 · by area, each labelled with what kind of claim it is
Layout, again
Our readingBreakage, not exposure: alignment and legibility are deliberately broken. If the structure stays legible the artefact is Web Brutalism, and if the system stays inferable it is New Wave Typography.
Typography
Our reading · disputedTypography: type that refuses to align, set to be hard work rather than unreadable.
Color
From our catalogue entry · Source attachedColour: clashing.
Surface
Documented · Source attachedAnti-design adds deliberate blemishes and glitches to digital work, so that it reads as made by a person.
Surface, again
Documented · Source attachedA cited example site has a handcrafted or scribbled look.
Interface
Documented · Source attachedSome anti-design sites use weird cursors and unnecessary, distracting animations.
Interface, again
Documented · Source attachedSome designers deliberately make interfaces ugly, disorienting or complex; NN/g adds that in such work interaction does not have to be smooth.
Motion
From our catalogue entry · Source attachedRare, and it is the record's sharpest asset. "Unexpected interaction" is a claimed behaviour, not an inference, which makes this one of the few records where motion is evidenced rather than invented.
Motif
Documented · Source attachedSome anti-design sites use disorienting patterns.
Motif, again
Documented · Source attachedBuilt In calls anti-design 'a way of thinking more than a specific aesthetic'; the sources reviewed name no fixed motif set.
Technique
Documented · Source attachedOne interviewee in a thesis links the look to how the web looked around 1996-97, built with tables, buttons and GIF animations; then it was not irony but testing the limits.
Technique, again
Documented · Source attachedCreative Bloq advises reaching the look by forgetting the usual rules and going to extremes (stretching images, breaking layouts, combining clashing colours), then dialling it back until it works.
Technique, again
Documented · Source attachedIt sets itself against the cookie-cutter templates that design apps make easy.
Technique, again
Documented · Source attachedCreative Bloq suggests looking for anti-design inspiration in old zines, 90s grunge and early web design such as Geocities.
Form
Documented · Source attachedThe name also covers furniture, architecture and fashion, and the historical movement worked through objects. The approved scope limits this record to the web and graphic trend, where no source describes three-dimensional form.
Form, again
Documented · Source attachedThe term 'anti-design' was first used for a 1960s-70s European architectural movement represented by Archigram, Archizoom and Superstudio.
Hierarchy
Our reading · disputedDeliberately contested — competing signals that never resolve. Stating that there is no stable ranking is the instruction.
Ruled out, or left open by the sources
Imagery
Not specified by the sourceThe sources do not specify this area; a translation may follow.
What stands behind it
Partly sourced.
10 sources attached.
Build guidance: recorded in 5 of 8 research dimensions. It says what usable material is recorded, never how well it is evidenced.
No source attached: Argument, Recognition test.
Not researched yet: Summary, Typeface guidance, Overall positions by area, Ornament and contrast scales, Moving it to screen, Source notes.
Scope: Anti-design was an Italian critique movement (1960s–80s) working in furniture and objects. This record covers the later web and graphic trend sharing the name: non-aligning type, loud colour; the rest is Aesthetary's reading.
| Research dimension | Evidence | Carries guidance |
|---|---|---|
| Composition | Specified · From our catalogue entry | yes |
| Typography | Specified · From our catalogue entry | yes |
| Hierarchy | Specified · Our reading | yes |
| Colour | Specified · From our catalogue entry | yes |
| Density | Not specified by the source | no |
| Imagery | Not specified by the source | no |
| Form/motif/surface/technique | Open question: form · Specified: motif, surface, technique | yes |
| Motion | Specified · From our catalogue entry | yes |
Neither is a free hand: an area research has not reached is not permission to decide on the language’s behalf.
Use it
Put it on the Mix benchSee where its rules collide with another Aesthetic’s.
Download the briefEvery rule with its kind of claim, and a checklist for grading the result. Paste it into your AI site tool.
The first link resists the pointer. It gives in after three tries, and never resists the keyboard.
For machines
Contribute
Contributing and commenting need JavaScript. Nothing else on this page does.
Work made in this style: a poster, a page, a type setting. Every submission is reviewed before it appears.
Nothing here yet.
Comments
No comments yet.