KO · JIMENU

Fewer,
better.

One chair, made for thirty years. Everything else we said no to.

SEE THE CHAIR

Most of this page is empty on purpose — the air is the design

Minimalism

Established movement

Borrowed from the mid-century art and architecture movement; NN/g's 112-site study pinned down what the word means on the web specifically.

also called minimalist design, minimal web design

Minimalism governs what is ON the screen, not how it's drawn: strip the interface to the fewest elements that still do the job, then let generous negative space and one or two dramatic typographic moments carry the composition. NN/g's study of 112 minimalist sites found the recurring traits — flat-ish surfaces, limited or monochrome palettes, restricted element counts, negative space, and large type as the hero.

Scope: Minimalism and Flat Design are different axes: flat governs rendering, minimalism governs content, features, and layout. A UI can be flat but crowded, or minimalist while still using depth and shadow.

If you called it…

the page with almost nothing on ithuge empty space and one buttongiant headline and tons of white spacethe apple style page with one product and nothing elsea website that is basically just text and aireverything unnecessary removed until only the message is left

…you meant Minimalism.

What makes it this — the defining signals

  1. Negative space as materialLayout & composition

    Emptiness is deliberate and generous — content floats in air, and the space around a thing is what makes it matter.

  2. Restricted element countLayout & composition

    Few things on screen, and every one earns its place: one nav, one message, one action — decoration is deleted, not restyled.

  3. Limited or monochrome paletteColor & contrast

    One or two hues at most, often just black/white/grey with a single accent — color restraint is part of the restraint.

  4. Dramatic typographyTypography

    With imagery and ornament gone, type goes big: an oversized headline is usually the loudest element on the page.

Style brief — paste into your agent

Create the surface using minimalism. Defining signals: the fewest elements that still do the job — one navigation, one message, one primary action, decoration deleted; generous negative space around everything (think 40 to 60 percent of the viewport empty); a limited palette — near-monochrome with at most one accent color; one dramatic typographic moment, an oversized headline that is the loudest thing on screen. Rendering is flexible — flat fills or subtle shadows both fit. Do not confuse this with flat design: minimalism constrains content and layout, not rendering — if you add content back until the page is busy, it stops being minimalist no matter how flat it is. Preserve discoverability: core actions must stay visible, never hidden behind mystery-meat icons to keep the page empty, and text keeps 4.5:1 contrast even in grey-on-white palettes.

Often confused with Flat Design

The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.

LumenLibrarySettings3 new

Welcome back

Pick up where you left off.

Email

mara@lumen.app
ContinueCancel

Minimalism

This is minimalism because the content itself is reduced — few elements, vast negative space, one dramatic headline — whatever the rendering.

It would be merely Flat Design if the screen filled up with content again and only the unshaded 2D rendering remained.

vs Web Brutalism: This is minimalism because the sparseness is polished and art-directed — a considered composition of type, space, and one action. It would become web brutalism if the polish were dropped and the page showed raw defaults — Times New Roman, blue links, bare structure — as a statement.

Full style DNA

Layout & composition

defining
Negative space as material

Emptiness is deliberate and generous — content floats in air, and the space around a thing is what makes it matter.

defining
Restricted element count

Few things on screen, and every one earns its place: one nav, one message, one action — decoration is deleted, not restyled.

avoid
Crowding and ornament

A second competing message, decorative flourishes, or a dense widget wall breaks the style regardless of how flat it looks.

Color & contrast

defining
Limited or monochrome palette

One or two hues at most, often just black/white/grey with a single accent — color restraint is part of the restraint.

Typography

defining
Dramatic typography

With imagery and ornament gone, type goes big: an oversized headline is usually the loudest element on the page.

Depth & light

variable
Rendering is free

Most minimalist sites render flat, but shadow and depth are allowed — minimalism constrains WHAT is shown, not HOW it's lit.

In code — optional starting points

The brief above is framework-neutral; these are concrete handles if your stack matches.

CSSmax-width: 34rem; margin-inline: auto; padding-block: clamp(4rem, 18vh, 10rem);A narrow measure floating in deliberate emptiness
CSSfont-size: clamp(2.5rem, 8vw, 6rem); letter-spacing: -0.03em; line-height: 1.05;The dramatic headline as the composition's hero

Accessibility & misuse

  • Light-grey-on-white is the classic minimalist contrast failure — measure text at 4.5:1, muted palettes included.
  • Don't purge affordances along with the decoration: hiding navigation or labels to preserve emptiness trades clutter for mystery.
  • Huge display type needs responsive clamping — a 96px headline that fits a desktop can wrap into an unreadable wall on a phone.

Origin

The reduction ethos of mid-century movements (Bauhaus, Swiss typography, 'less is more') applied to interfaces; on the web it became the dominant 'serious brand' register through the 2010s, with Apple's product pages as the most-copied specimen. NN/g's definitional study is from 2015.

See also

Search

Describe the UI element you're thinking of