Taking this style from one component to a whole product?
You just browsed 20 minimalist UI patterns. Untitled UI is the Figma UI kit 380,000+ designers use, with 10,000+ components and variants in Pro, plus a matching React library on Tailwind CSS. Figma Pro is a one-time purchase from $129.
One custom property holds the ratio and every step is derived from it with calc(), so the whole type system moves when you change a single number. The same specimen renders at 1.200, 1.250 and 1.333 side by side with every computed size printed, so you can see what the ratio actually changes before you commit to one.
Two identical cards, one tinted and one reduced to a single ink colour, so you can check whether the hierarchy actually survives. Separation comes from size, weight, letter-spacing and space — and if it collapses the moment colour is removed, colour was doing structural work it should never have been doing.
The full modern system stack, row by row, with what each entry actually catches and why system-ui alone is not enough. Four specimens — sans, serif, monospace and rounded — render in the native UI face with a metric-compatible fallback chain, so a fallback swap changes the shape of the letters and not the shape of the layout.
A play triangle centred by maths looks left-heavy, and a quotation mark that starts flush looks indented. Each pair here shows the mathematically-centred version beside the optically-corrected one with the nudge value printed, so you can see the correction and know exactly how much of it to apply.
One base unit, six derived steps, and a rule that no component invents an off-scale value. A measured ruler prints every step, then the same card is built twice — once from the scale and once from hand-picked pixels — with the values labelled on both so the drift is visible rather than asserted.
A form where every label sits the same distance from its own field and the next one, so nothing is grouped — then the corrected version, where the gap between groups clearly exceeds the gap inside them. Both sides carry their measurements, so proximity stops being a feeling and becomes a number you can check.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Line heights and block margins are multiples of one rhythm unit, so text blocks line up down the page. A toggleable overlay draws the grid over live prose so you can see where the rhythm holds and where an image or an input breaks it — which it will, and the demo says what to do about that.
The same card rendered twice — once with five wrapper <div> elements doing the positioning, once with grid applied directly to <article>, <header> and <ul>. Identical output, half the markup, and a DOM that describes the content instead of the layout.
A stated budget: one accent, spent on the single most important action in the view. The same panel is shown with one accent and then with three, so you can watch the primary action stop being primary — and the demo draws the line between an accent and a semantic status colour, which is not part of the budget.
A ten-step neutral ramp with the measured contrast ratio printed against every step and a marked cut-off line below which text must not go. It names the most common minimalist failure directly: light grey secondary text that looks refined at 2.8:1 on a good display and fails WCAG 1.4.3 on a phone in daylight. Build the ramp in oklch(), measure every step, print the number.
An audit, not a style: delete each border and see whether space or alignment already did its job. A table and a card set are shown fully ruled, then stripped, with a note on every rule that survived. Most card borders lose the test, most table rules lose it too — but not all, because in dense data, scanning across a row genuinely needs a guide, and a rule that stays has to be visible at 3:1 rather than a fashionable 8% hairline.
Three elevation levels rendered with surface tone, spacing and a single hairline — no shadow stack, no gradients. It also states the limit honestly: without shadows a floating element loses its depth cue, so the overlay here still ships a scrim, and the demo explains why that is not a contradiction.
Four failures side by side, each with the criterion it breaks printed on it and a switch that shows the corrected version in place: low-contrast secondary text, an icon-only button with no accessible name, placeholders used as labels, and a 32px target chosen because 44px looked heavy. Every one of these ships weekly in the name of clean design.
The same signup card built twice, with the decisions labelled on each side: restraint budget against deliberate excess, hairline against 4px border, tonal elevation against a hard offset shadow. Neither is more correct — they optimise for different things, and the demo says which is which.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
One metric card — value, label, delta and sparkline — where the hierarchy between the number and its label comes from scale and weight, not colour. A component study rather than a dashboard layout, so it drops into whatever grid you already have — and the delta carries a glyph and a word alongside its hue, so the direction survives for a reader who cannot resolve the colour.
One product card: image area, name, price, one action. It covers the place where restraint conflicts with commerce head on — a price and an add-to-cart both want to be primary. The demo takes a position on which channel each one gets, reserves the image box before the photo loads, and lists exactly what was deleted to get here.
A project list as rows, where the hover state is the only decorative moment in the whole page. It also argues the case: when items are text-led, a list beats a card grid, because a grid spends most of its space on containers and thumbnails you did not need — and the whole row is one link, one tab stop, at a 44px minimum height.
One article column: measure, rhythm, a lead paragraph, one pull quote. It applies the ratio from demo 01 and the block-level rhythm from demo 07 to real prose, at the size a reader actually meets them — a column, not a homepage. Measure in ch, one step for the lead, one pull quote, and a caption in the interface face so it reads as apparatus rather than prose.
A single app screen inside a phone frame, where minimalism is under real pressure: 390 points of width, a 44px touch floor, and a thumb that has to reach everything. It shows what gets cut first when space runs out — imagery, repeated metadata, tertiary actions — and why the touch floor is never the thing you cut. The tab list is a real widget with arrow keys, in 24 lines of vanilla script.
One section — headline, sub, one action, one supporting element. It handles the restraint budget under marketing pressure, where every stakeholder wants their element emphasised. It prints the budget beside the section, lists the four reasonable requests it refused, and explains why the secondary path is a text link rather than a second button.
FAQ
Frequently asked questions
What actually separates minimalist UI from a design that is merely clean?
A clean design removes obvious clutter. Minimalist UI is a set of stated rules that decide what stays: a type scale generated from one ratio rather than hand-picked sizes, spacing derived from a single base unit, a budget that caps how many accent colours exist, and hierarchy carried by size, weight and space rather than colour. The test is subtraction. Strip the colour out of a minimalist interface and the hierarchy survives, because colour was never doing structural work. Strip the colour out of a merely clean one and it usually collapses into a flat wall of text.
Why do none of these demos load Google Fonts?
Because a webfont is a network dependency, and a type system that silently falls back is not a type system. Every demo here builds its typography from the system stack instead — system-ui and its named fallbacks for interface text, ui-serif with Georgia and Palatino for reading, ui-monospace with Menlo and Consolas for data, ui-rounded where a softer voice helps. You give up a distinctive brand face and you gain type that is already installed on the device, needs no preload, causes no layout shift on first paint, and cannot break when a font host is unreachable. One demo in this collection makes that stack its explicit subject, including which entry catches which platform.
How do I choose a type scale ratio?
Pick the ratio from the density of the interface, not from a preference. Around 1.200 keeps adjacent steps close enough that two of them can sit in the same table row without the layout jumping, which is what a dense console needs. Around 1.250 is the working default for most product interfaces — steps stay distinguishable while leaving room for four or five levels of hierarchy. Around 1.333 is decisive on a landing page and hostile in a data table, because by the fourth step the jump is large enough that no dense interface can absorb it. The demo that covers this renders all three from one identical rule set so the difference is visible rather than described.
Is minimalist design bad for accessibility?
It is not inherently bad, but it fails in a small number of predictable ways, and every one of them comes from choosing a look over a requirement. Light grey secondary text at around 2.5:1 gets described as subtle when it simply fails SC 1.4.3. An icon-only button loses its accessible name because a visible label looked heavy. A placeholder gets used instead of a real label, so the field is unlabelled the moment someone types. A target gets cut to 32px because 44px felt bulky. One demo here shows all four failures side by side with the criterion each breaks and the corrected version underneath, and every other demo in the collection is built to pass them.
How is this different from just using a component library?
A component library hands you defaults; this collection hands you the reasoning behind them, so you can tell when a default is wrong for your interface. Knowing that the spacing scale has one base unit tells you why an off-scale value looks wrong even when nothing is obviously broken. Knowing that the restraint budget allows one accent tells you what to do when a second stakeholder wants their button emphasised too. Every demo states its rule in the interface itself rather than only in prose, so the decision is visible in the rendered output and not buried in documentation.
When is minimalism the wrong choice?
Whenever discoverability matters more than calm. Dense professional tools — trading terminals, clinical systems, audio and video editors, air traffic and industrial control — are used all day by trained people who want every control visible and labelled, not tucked behind progressive disclosure. Safety-critical interfaces need redundant cues, not fewer. First-run and onboarding surfaces often need more explanation than a restrained design wants to carry. Minimalism optimises for the experienced user on a familiar path; if that is not who you are designing for, a denser and more explicit interface will serve them better.
