Radical reduction
Every element must earn its place. Decoration, extra copy and extra options go.
Minimalism removes everything that does not help. What stays gets room to breathe, and the empty space becomes part of the message.
Open the kit Copy promptMinimalist design is an exercise in editing. It keeps the essential content, one or two colors and a lot of space, and removes the rest.
Every element must earn its place. Decoration, extra copy and extra options go.
White space groups, separates and emphasises. It is designed, not left over.
Light weights and a restrained scale. Size and position create hierarchy without bold or color.
Black, white and one soft gray. Color appears rarely, which gives it force when it does.
Minimalism links modernist architecture, 1960s art and today's interface design through one idea: remove until only the essential remains.
Ludwig Mies van der Rohe's Barcelona Pavilion shows architecture reduced to planes, glass and open space. The phrase less is more is linked to him.
Artists such as Donald Judd and Agnes Martin in New York strip art to simple forms and repetition.
Industrial designer Dieter Rams formulates his principles of good design, ending with as little design as possible.
Google launches with a nearly empty homepage while competitors crowd theirs with links.
Mobile interfaces drop texture and ornament. Minimal layouts become the default for apps and product sites.
Minimal motion is slow and singular. One element moves at a time, with long easing and nothing competing for attention.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
A single object on white lets craft and materials speak.
Writing, note and meditation apps remove chrome to protect attention.
Big images and small type let the work do the talking.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Five near-neutrals. The only color in the interface comes from your content. Tap a swatch to copy its hex value.
:root{
--paper: #FCFCFB;
--stone: #F3F3F1;
--line: #E2E2DF;
--gray: #6E6E6E;
--ink: #1B1B1B;
}One geometric family in light and regular weights. A large scale ratio makes size, not weight, carry hierarchy.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Jost",system-ui,sans-serif;
--font-b: "Jost",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(65px, 9vw, 179px);
--fs-1: 65.3px; --fs-2: 46.6px;
--fs-3: 33.3px; --fs-4: 23.8px;
--fs-body: 17px; --fs-sm: 12.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 300;
letter-spacing: -.02em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Jost in light, regular and medium */Wide gaps of 40px and generous margins. Use fewer columns than you think you need.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 40px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}A hint of radius, hairline borders, no shadows. Separation mostly comes from space.
:root {
--radius: 2px;
--radius-sm: 2px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 40px;
--pad: 32px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Minimalism kit · Anti-Boring */
:root{
--bg:#FCFCFB;
--surface:#FCFCFB;
--surface2:#F3F3F1;
--fg:#1B1B1B;
--muted:#6E6E6E;
--accent:#1B1B1B;
--accent-fg:#FCFCFB;
--accent2:#F3F3F1;
--accent2-fg:#1B1B1B;
--border:#E2E2DF;
--bw:1px;
--radius:2px;
--radius-sm:2px;
--shadow:none;
--shadow-sm:none;
--font-d:"Jost",system-ui,sans-serif;
--font-b:"Jost",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:300;
--h-track:-.02em;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:40px;
--pad:32px;
--focus:rgba(27,27,27,.2);
--ok:#2F6B4A;
--warn:#8A5A00;
--danger:#A8322D;
--info:#1B1B1B;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(#EDEDEA,#EDEDEA);
--code-bg:#1B1B1B;
--code-fg:#EDEDEA;
--btn-case:none;
--btn-track:.04em;
--btn-weight:400;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.1px;
--fs-body:17px;
--fs-4:23.8px;
--fs-3:33.3px;
--fs-2:46.6px;
--fs-1:65.3px;
--fs-d:clamp(65px, 9vw, 179px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-color:var(--accent);padding:.9em 1.8em}
.btn:hover{transform:none;opacity:.8}
.btn-2{border-color:var(--border)}
.btn-ghost{border-color:transparent;text-decoration:underline;text-underline-offset:6px}
.card{border-color:transparent;padding:0}
.card-media{border-radius:0;margin-bottom:1.4em}
.badge{background:transparent;border:0;color:var(--muted);padding:0;font-weight:400;letter-spacing:.06em}
.label{font-weight:400;color:var(--muted);font-size:.85rem}
.input,.select,.textarea{border:0;border-bottom:1px solid var(--border);border-radius:0;padding-left:0;background:transparent}
.input:focus,.select:focus,.textarea:focus{box-shadow:none;border-bottom-color:var(--fg)}
.textarea{border:1px solid var(--border);padding-left:.9em}
.alert{border:0;border-left:1px solid var(--c);background:transparent;padding-left:1.4em}
.alert b{font-weight:500}
.progress{height:2px;border:0;background:var(--border)}
.switch{background:var(--border);border:0}
.switch::before{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tabs{border-color:transparent}
.tab{font-weight:400}
.tab[aria-selected="true"]{border-bottom-width:1px;border-bottom-color:var(--fg)}
.pager a{border-color:transparent}
.pager a[aria-current]{background:transparent;color:var(--fg);border-bottom:1px solid var(--fg)}
.table-wrap{border:0}
.table th{font-weight:400;color:var(--muted)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#121212;
--surface:#121212;
--surface2:#1A1A1A;
--fg:#EDEDED;
--muted:#9A9A9A;
--border:#2E2E2E;
--accent:#EDEDED;
--accent-fg:#121212;
--accent2:#1A1A1A;
--accent2-fg:#EDEDED;
--code-bg:#000;
}
html.alt .switch::before{background:#EDEDED}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a studio that makes one wooden chair in an authentic Minimalism style.
Palette: Paper #FCFCFB, Stone #F3F3F1, Line #E2E2DF, Gray #6E6E6E, Ink #1B1B1B.
Typography: Jost 300 for headings with a large 1.4 scale ratio, Jost 400 for body. No bold anywhere.
Layout: Nearly empty hero: one giant word bottom left, a short paragraph and two actions bottom right, a single small black dot in the top right. Sections separated by 120px of space.
Signature details: Five near-neutral colors only, hairline borders, a 2px radius, underline-only inputs, lots of white space.
Components: Black rectangular primary button, underlined ghost link, borderless cards, 2px progress line, understated tabs with a 1px underline.
Motion: One slow movement at a time, six seconds, ease in and out.
Avoid: shadows, gradients, icons as decoration, more than one accent, thin gray body text, crowded sections.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Removing content people need is not reduction, it is a usability problem.
Ghost buttons and gray text can make actions invisible. Primary actions stay obvious.
Thin weights in gray fail contrast. Keep body text dark and at least regular weight.
Minimal can turn into template. One distinctive detail, like scale or crop, keeps character.