My 2026 UX design thoughts
Contents
Most of my design work happens in prompts now, and that turned out to expose a gap I did not know I had: I can recognise a style I love in a second, but I could not put it into words precisely enough for an LLM, the large language model on the other end, to build it. This post is my attempt to fix that, for my own sake as much as anyone’s: the styles I keep coming back to, why I think they work, and a prompt-ready description of each that I can paste straight into a design prompt.
It ends with my design language, the through-line I found once I had written all of the others down.
| Style | What it is to me | When I reach for it |
|---|---|---|
| Swiss | The skeleton under everything | Always, as the base |
| Web brutalism | Raw, honest, unstyled | Rarely, as a statement |
| Neubrutalism | Brutalism dressed as a cartoon | Playful products with one accent |
| Neomaximalism | Controlled abundance | Only with real imagery to carry it |
| Terminal | Committed monospace | When the subject really is a CLI |
| Electric duotone editorial | The Hermes look | Technical, fully art-directed launches |
| Glass | Depth through translucency | Sparingly, one sheet per view |
| Warm-paper editorial | The Anthropic feel | Reading and essays |
The lesson I learned the hard way
My first attempt at rendering these styles was a failure, and an instructive one. I handed an LLM a list of each style’s ingredients and got back the amateur version of every single one: every colour at full saturation, every element decorated, the canvas crammed. It looked like a bot made it, because a bot did. The reference pages I love are elegant because of what they leave out and hold back, not what they include, and an ingredient list says nothing about holding back. Handed one, an LLM (or a junior designer) executes the style at its maximum.
The second mistake was worse. I asked an agent to describe Hermes from a text-only fetch of the site, and it told me “dark navy ground, sans-serif”. The site is in fact electric ultramarine, set in Didone serif caps and monospace, with engraved duotone artwork. I trusted the summary, and it overwrote notes of mine that had been correct all along.
So every expressive style below carries a restraint clause: not just what the style contains, but how little of it to use, the ratio of quiet to loud, and the one discipline that separates a professional execution from a generated one. These are the rules I took away:
- Abundance needs an anchor of calm. Even maximalist styles are mostly negative space with a few loud moves, and the loudness reads because the rest is quiet. One focal point per view, never five.
- One accent, not the whole palette. A style that permits lime, pink and yellow does not mean using all three at once. Pick one and let a white, cream or dark ground do the rest.
- Scale and spacing over quantity. Elegance is generous padding, big confident type and few elements, not a filled canvas. When in doubt, make it bigger and delete a neighbour.
- Real materials beat CSS imitations. Neomaximalist collage and glass need real photography and texture; a pure-CSS gradient is the tell of a fake. No asset means picking a different style.
- Commit fully or don’t invoke it. Two box-drawing characters are not a style. Commit to the type, palette and imagery, or leave the style alone. A half-executed style is worse than a plain one.
- Never derive visual facts from a text scrape. Colour, typeface and imagery have to come from seeing the actual pixels, a screenshot rather than a summariser. If you cannot see it, say the description is unverified instead of inventing one.
Every prompt in this post was written with those rules in front of me.
Swiss: the skeleton under everything
If I had to keep one style, it would be the Swiss one, the International Typographic Style. Josef Müller-Brockmann described the grid as “a system of order that makes the message more easily understood”1, and that is exactly what I like about it. Fixing columns, gutters and alignment in advance means fewer decisions per page and a stable baseline for the eye, so a deliberate break, a full-bleed image or an oversized number, reads as emphasis rather than accident. On the web it maps directly onto a 12-column CSS Grid held across breakpoints.
The rest follows from that. Type is the interface: hierarchy is carried by weight and size within one or two typefaces, never by variety or decoration, so there is never any doubt about what matters most. Whitespace is a material, composed first, with content earning its way in. And because the system is mathematics plus legibility rather than fashion, there is nothing in it to date. It is often credited with seeding iOS, Material Design, Stripe and Notion2.
It is also the style my own /htmlify skill defaults to, and the skill states the discipline better than I can: “perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” Every element has to answer one question: does this help the reader understand, or does it just prove a designer was here? My test is to strip the accent entirely. If the page still reads as ordered and hierarchical from type, grid and spacing alone, it is built right. Colour carries meaning; it is never the scaffolding.
These are the numbers /htmlify encodes, the ones I actually reach for:
- Palette: white canvas
#ffffff, near-black ink#111111for headings and rules, body#1a1a1a(never light grey on white), dim#555555, mute#767676, hairlines#e3e3e3, and one accent (/htmlifyuses green#28a745; classic Swiss uses red). A neutral sans:"Helvetica Neue", Helvetica, Inter, Arial. - Type scale: a ratio of about 1.333,
13 / 17 / 23 / 30 / 40 / 64pxas CSS variables. Headline flush-left, weight 700, tight leading (about 1.05), negative tracking (-0.02em); body at 400; small uppercase labels tracked out (0.1em). - Grid: a real 12-column grid (
repeat(12,1fr)) held across breakpoints, reading measure capped at about 65 to 75 characters, broken only deliberately and for emphasis. - Spacing scale:
4 / 8 / 16 / 24 / 32 / 48 / 64, and only those values. Section gaps much larger than paragraph gaps; headlines in a column of air. - Surfaces: sharp corners (no
border-radius), hairline rules instead of fills (tables get rules, not zebra stripes), and no gradients, shadows, glows or ornament.
Here is the prompt I paste:
Swiss / International Typographic Style. The grid is the design: fixing columns and spacing in advance lets one deliberate break read as emphasis, not accident. A 12-column grid with constant gutters; everything aligns to it, flush left and asymmetric: labels in a narrow column, text in a wide one, the rest left empty. One neutral grotesque (Helvetica, Inter or Neue Haas Grotesk) in two weights on a 1.333 scale (13/17/23/30/40/64px): headline at 700, leading 1.05, tracking -0.02em; body at 400, ragged right, 65–75 characters wide; small uppercase labels tracked 0.1em. Every gap from 4/8/16/24/32/48/64px, with far more space between sections than inside them. Near-black (#111 headings, #1a1a1a body) on white, hairline rules for structure, square corners; no fills, gradients, shadows or ornament. Restraint: one accent, used only where it carries meaning, and one oversized element per view, a headline or a numeral. Test: remove the accent and the hierarchy still reads from size, weight and position alone.
Brutalism, neubrutalism or neomaximalism?
This section started as a question I could not answer: were the two sites I kept staring at brutalist or neomaximalist? The answer turned out to be neither, and getting there meant learning to tell three styles apart.
- Web brutalism (from about 2014) is raw, structure-exposing anti-design3: a bare-HTML feel, monospace or system type, default blue links, thin 1px borders, no shadows or rounding. Its philosophy is honesty of materials and a rejection of slick corporate UX.
- Neubrutalism (from about 2021) is brutalism domesticated4: thick 2 to 4px black outlines, hard offset drop shadows, flat candy colours (lime, pink, yellow) and chunky cards. Edgy-looking but friendly and accessible; playful pastiche, not protest.
- Neomaximalism (the 2025 and 2026 trend) is the swing away from minimalism5: layered textures, oversized mixed typography, saturated palettes, collage density, motion and 3D. In 2026 it gets framed as “controlled boldness”, abundance deployed selectively.
The shortest way I can put it: brutalism strips down, neubrutalism dresses it up as a cartoon, and neomaximalism piles on.
My first example was Hermes Agent, and it is the site from the scrape story above. I had first filed it under “terminal” brutalism. Once I actually looked at the screenshots, it was something else entirely: electric-blue duotone editorial. The whole site is monochrome electric ultramarine (about #1a17e6; my original #0000f2 note was right) and white, with no dark ground and no neutral UI, and the blue inverts to blue-on-white for alternating sections. Every headline is a high-contrast Didone display serif (think Didot, Bodoni or Canela) set huge in all caps, paired with uppercase monospace for eyebrows, labels, nav and body, and never a sans-serif. The signature is dithered, halftone, classical-engraving duotone artwork in blue and white: radiating sunbursts, a multi-armed figure, an anime girl cupping the earth. That imagery carries the mood. The layout is a centred poster: text nav, then the giant serif hero “THE AGENT THAT GROWS WITH YOU”, then a white install box with a blue curl … | bash, then an inverted white feature grid (#1 CONNECT, #2 REMEMBER, #3 SCHEDULE and so on) with serif-caps titles, mono body and one dithered image per card. It is a neo-riso engraving broadsheet that happens to ship a CLI, not terminal brutalism. For the genuine all-terminal look, see The Making of Claude Code.
My second example, Works in Progress, is not brutalism at all. It is contemporary editorial minimalism with print-magazine DNA: a cream ground, restrained serif headlines, magazine conventions like “Issue 24” and “Words by…”, a dense but orderly article grid, and a red accent.
Here are the prompts for all five looks. Web brutalism:
Web brutalism: the page as raw material. Browser-default HTML: system or monospace type, black on white, underlined default-blue links, 1px borders that expose the structure. Dense text in source order, hierarchy from size alone. Restraint: add nothing. Test: delete the stylesheet and little changes.
Neubrutalism:
Neubrutalism: brutalism made friendly, a cartoon you could pick up. A white or cream canvas with generous padding, black type, and one flat saturated accent: lime, hot pink or sunflower yellow, a single one. A big grotesque headline and one or two chunky cards, each with a 2–4px solid black outline and a hard black shadow, offset 4–8px with no blur, with air between them. Restraint: the outline, the shadow and the accent are the whole trick, so one or two elements carry them and the rest of the page stays plain. Test: count the shadowed elements. More than three, or a second accent, and it reads as generated. Tactile but calm.
Neomaximalism:
Neomaximalism: abundance aimed at one point. A single dominant composition, one oversized expressive display headline (serif or hand-drawn), on a deep or textured ground. Real materials do the work: photography, paper grain, 3D renders. Two curated colours at most, plus the ground. Restraint: the density gathers around the one hero and the rest stays open, because loudness only reads against quiet. A flat CSS gradient standing in for texture is the tell of a fake: with no real image or texture to use, say so and propose a calmer style instead. Test: squint, and exactly one thing shouts.
The full terminal aesthetic, the all-mono look of The Making of Claude Code:
Terminal: a page that is a command line, used only when the subject really is one. Monospace throughout; type and spacing are the whole design: line-height about 1.6, lines under 80 characters, wide margins. Near-black ground, phosphor-pale text, and one accent that appears once or twice, on a command or a link. Shell commands are the hero content, in sparse numbered sections; flat, square corners. ASCII or box-drawing art is one real piece, a proper logo or divider, or absent. Restraint: quiet, precise and full of air; the polish comes from what is left out. Test: it looks typed, not decorated.
And the electric duotone editorial look, the real Hermes style:
Electric duotone editorial: a classical engraving broadsheet crossed with a terminal. Two colours only: one electric ultramarine (~#1a17e6) and white. Blue is the ground, and alternating sections invert to blue on white: no grey, no black, no second hue. Two type voices, no sans-serif: a high-contrast Didone (Didot, Bodoni or Canela) set huge in capitals for headlines, and tracked uppercase monospace for eyebrows, labels, nav and body. A centred poster: text nav, a small mono eyebrow, the giant serif headline, a mono line, then one white box with the key action in blue mono, e.g. an install command. Below, an inverted grid of numbered features: mono label, serif-caps title, mono body and one image each. Imagery carries the mood and must be real: dithered, halftone or engraved duotone artwork (sunbursts, classical figures) in the same blue and white. Without such assets, say so; a CSS gradient is a weak stand-in. Square corners, hairline boxes, no shadows. Restraint: any colour, typeface or effect beyond these leaves the style. Test: every pixel is the blue or the white.
Glassmorphism and Liquid Glass
Glass is the style I am most torn about. Apple’s Liquid Glass, introduced at WWDC 2025 for iOS 26 and macOS Tahoe 26, goes well beyond blur: translucent surfaces refract light, cast specular highlights and adapt their tint to the content underneath in real time6. It works because frosted layers exploit real depth cues, occlusion, blur as distance and background continuity, so a panel reads as physically above the content while keeping its context.
The pitfall is contrast. Translucency makes contrast variable: text that passes WCAG, the web’s accessibility guidelines, over one background fails over a bright photo, and the early iOS 26 betas drew exactly those legibility complaints7. If you lean into glass this year, this is what I would do:
- Keep text and essential controls at high contrast, at least 4.5:1, measured after the blur and against the worst-case background.
- Give people an opacity slider or a way to reduce or disable the glass, and honour Reduce Transparency and Reduce Motion.
- Test against real backgrounds, in motion, in both light and dark mode.
- Use one primary glass sheet per view, and keep glass off critical content.
Glassmorphism / Liquid Glass: depth from translucency, a sheet that floats above its content. It needs a rich, softly blurred ground behind it, a real photo or soft two-colour mesh; on a flat ground the effect dies. Panel: fill rgba(255,255,255,0.15–0.25), backdrop-filter: blur(10–20px), 1px rgba(255,255,255,0.2–0.3) border to catch light, radius 12–20px, soft deep shadow (0 8px 32px rgba(31,38,135,0.35)), faint specular highlight on the top edge. Restraint: one primary sheet per view at generous scale; a second layer differs in blur and opacity; critical content stays off glass. Text holds 4.5:1 over the worst patch of ground behind it, and panels go solid under prefers-reduced-transparency. Test: read every label over the busiest part of the ground.
What makes Anthropic feel like Anthropic
I spend more time looking at Anthropic’s pages than at almost any other company’s, and for a long time I could not say why they felt the way they did. My answer now is that they read like a well-set book rather than a tech product, and five concrete choices produce that:
- A serif and sans editorial pairing. Headlines and UI are in Styrene, a geometric-humanist sans by Berton Hasebe at Commercial Type; body text is in Tiempos Text from Klim Type Foundry, built for long-form reading8. Sans for structure and serif for prose is a magazine convention, and it is the single biggest driver of the editorial feel.
- Warm paper, not a white screen. The background is a book cream,
#FAF9F5, and the text a warm near-black,#141413. Nothing is pure#FFFor#000, so the contrast is high but soft. - One restrained accent. Terracotta
#D97757(rust#C15F3Con the site), used sparingly, with a muted blue#6A9BCCand sage#788C5Das secondaries. Clay and earth tones read as human, grounded and careful in a market full of neon gradients. - Hand-drawn illustration. Loose crayon and charcoal line drawings soften a frontier AI company. The identity is by the studio Geist, and the wordmark is purely typographic (“ANTHROP\C”, the slash standing for code)9.
- Generous whitespace and a long measure. Wide margins, single-column prose, minimal chrome. Even The Making of Claude Code leans typographic: it opens with ASCII art and offers to “Read in Terminal”.
One useful fact for prompting: Anthropic’s own distributable brand skill swaps in free lookalikes, Poppins for headings and Lora for body, because Styrene and Tiempos are licensed10.
The same feel shows up in a small cluster of AI labs. Thinking Machines has a research-journal look: a cream ground, a serif body, and essay-length prose as the homepage. Physical Intelligence goes for extreme plainness, a homepage that is a reading list of papers and earns its credibility through absence. Imbue shares the warm-paper base and pushes the hand-made furthest, with a sketchy logo, scanned masking tape and zine collage. What they share is warm paper, a serif body that signals “we publish, we don’t pitch”, one muted accent at most, text-first layouts, and analogue touches as a humanising counterweight to AI. The genre is the research lab as literary press.
Warm-paper editorial: a page that reads like a well-set book, not a tech product. Ivory ground (#FAF9F5), warm near-black text (#141413), nothing pure white or black. Sans for structure, serif for prose: a geometric-humanist sans for headings (Styrene, or free Poppins), a readable serif for body (Tiempos, or free Lora), one long-form column, wide margins. One muted terracotta accent (#D97757) for links and highlights; muted blue (#6A9BCC) and sage (#788C5D) as rare secondaries. Minimal borders, no shadows or gradients. Restraint: the only decoration is hand-drawn line illustration in charcoal or terracotta. Test: it feels like a printed essay, warm and quietly confident.
Other sites I keep going back to
These are the pages I open when I want to remember what good looks like:
- Field Mag is editorial outdoor lifestyle: enormous edge-to-edge film photography and ambient video as the content, glassmorphic overlays floating above, and restrained sans type. The colour comes from the photos, not the UI. Each section inherits its palette from the imagery, so the site feels varied while the system stays simple.
- The Making of Claude Code is terminal brutalism and CLI nostalgia: an ASCII block-art headline, a “>_ Read in Terminal” mode, monospace type, a near-black ground and box-drawing characters as decoration. The medium is the message, a CLI story styled as a CLI. Its discipline is one accent, phosphor austerity, and typographic play instead of imagery.
- SSI is radical anti-design: a single centred column of serif manifesto text, three links, and nothing else. It is the Berkshire Hathaway move, credibility through deliberate absence, and the entire design is line length, leading and restraint.
- Stripe Press is digital print-making: books as interactive 3D “living covers” over a deep dark backdrop, bookish serif type, jewel-toned covers doing all the colour work, and slow, tactile WebGL motion. It works because the craft of the artefact mirrors the subject.
- iA Writer is Swiss typographic functionalism, typewriter-modern: the product is focus and the page performs it. A monochrome UI with a single accent, their own mono and duospaced typefaces as the identity, and plain-text screenshots as the hero imagery. The layout itself is the sales pitch.
- Daylight Computer is warm calm tech, almost solarpunk: Apple-style scrollytelling detoxed with a paper-cream ground (
#faf5f2), amber and sepia accents echoing its blue-light-free display, hand-drawn spot icons, outdoor lifestyle photography and a founder letter. It materialises the “caring computer” promise.
Lined up together, they have four things in common. The design language enacts the product’s core claim: focus looks focused, terminal tools look like terminals, calm tech looks calm. One dominant material carries the colour, whether photography, cover art or a single warm or dark ground, never a multi-hue UI palette. Typography carries the identity more than the layout does: a custom mono, a bookish serif, a manifesto serif. And they all subtract aggressively, with minimal chrome and few accents. Restraint is the status signal they share.
My design language
Writing all of that down made something obvious that I had not seen before: I do not have one favourite style, I have one skeleton. It is Swiss discipline underneath, grid, fixed spacing scale, sharp corners, hairline rules and whitespace as material, with the surface register chosen per project from everything above. The four rules are constant; the palette and the type are variables.
The register depends on what the thing claims to be:
- Reading or essayistic: Anthropic’s warm-paper editorial, with an ivory ground, a serif body and one muted accent.
- A hero image or video exists: Field Mag’s move. Full-bleed photography carries all the colour and the UI stays neutral and out of the way.
- A focused tool: iA Writer’s move. A distinctive typeface is the identity, the UI is monochrome, and the layout performs the product.
- A CLI or technical artefact: the single-command terminal flourish of Hermes or the full mono aesthetic of The Making of Claude Code, matched to how technical it really is.
- Credibility from restraint: SSI’s move. One column of good type and almost nothing else, absence as confidence.
- The artefact is the subject: Stripe Press’s move. Tactile craft, 3D and slow motion, that mirrors what is being shown.
And these are the four rules that hold across all of them:
- The look enacts the claim. Before I choose a font, I ask what the thing is, focused, honest, calm or editorial, and let that pick the register. A CLI tool earns terminal brutalism, a reading product earns a bookish serif, and a data tool earns Swiss.
- One material carries the colour. Photography, cover art or a single warm or dark ground does the chromatic work. The UI itself stays near-monochrome, with exactly one accent that only ever carries meaning: never decoration, never a second competing hue.
- Type over layout for identity. A distinctive typeface pairing, a bookish serif body or a custom mono, does more identity work than any clever grid. The layout should be quiet and gridded; the type should be the voice.
- Subtract until it breaks, then stop. Sharp corners, hairline rules, generous whitespace, no gradients, shadows or ornament. If removing something does not hurt legibility or meaning, it goes.
This is the prompt I brief an LLM with when I do not want a specific style, I want mine:
Confident minimalism on a Swiss skeleton; the surface enacts what the project claims to be. First name that claim in a word (focused, honest, calm, editorial, technical) and let it pick the register.
Skeleton, always: 12-column grid, flush left and asymmetric; measure 65–75 characters; every gap from 4/8/16/24/32/48/64px, whitespace composed first; a mathematical type scale, big headline at 700, tight leading; square corners, hairlines instead of fills; no gradients, shadows, glows or ornament.
Colour, always: one material carries it. A hero material (photography, cover art, a dark product ground) does all the colour work and the UI stays neutral. Without one: monochrome plus exactly one accent that only carries meaning (a link, a key number, an active state). Ground: warm ivory, clean white or deep dark, by register. Body text: never pure black or white, nor light grey.
Type is the identity; the layout stays quiet. Pick the pairing from the claim:
- Reading or editorial: serif body with a humanist sans, on ivory #FAF9F5 with near-black #141413 and a terracotta accent.
- A focused tool: one distinctive typeface doing all the work.
- Something technical: a monospace flourish or full mono, matched to how technical it is.
- Credibility from restraint: one column of excellent type and little else.
Decoration only where it earns its place: hand-drawn lines for warmth; tactile 3D or slow motion when the artefact is the subject.
Test: remove the accent and the hierarchy still reads from type, grid and spacing alone. Then cut whatever can go without hurting meaning.
It is the closest I have come to describing my own taste in a way a machine can act on. I expect it to change, and the next version of this post will be the place I find out how.
Footnotes
-
Josef Müller-Brockmann was one of the central figures of the International Typographic Style, which grew out of Switzerland in the 1950s. For an overview of the movement, its grids and its typefaces, see International Typographic Style and Swiss style principles, typefaces and designers. ↩
-
This lineage is an argument about influence rather than a documented design history, so treat it as such. It is made, with the translation of Swiss principles into web practice, in Swiss design for web designers. ↩
-
Nielsen Norman Group treats brutalism as a form of anti-design, a deliberate rejection of polished conventions, and discusses what it costs usability: Brutalism and antidesign. ↩
-
For the softer, more colourful descendant and how it differs from the original, see Neobrutalism from Nielsen Norman Group and Brutalism vs neubrutalism in UI design. ↩
-
Neomaximalism is a trend label rather than a defined movement, so its edges are fuzzy. Figma’s roundup of current web design trends covers the anti-minimalist swing. ↩
-
For how Liquid Glass differs from earlier glassmorphism, and how far CSS can follow it, see Getting clarity on Apple’s Liquid Glass and Apple’s Liquid Glass: how glassmorphism is shaping UI design in 2025. ↩
-
The accessibility case against variable-contrast glass is laid out in Liquid Glass: smart or bad for accessibility?. ↩
-
Styrene in use at Anthropic: type.today. The Tiempos Text and Styrene A pairing on anthropic.com: Font of Web. ↩
-
The palette and fallback fonts come from Anthropic’s published brand guidelines skill. ↩