The modular grid
Every text block and image aligns to columns and rows. Designers plan the grid first and place content second.
A way of designing where the grid decides everything. Clean sans-serif type sits on strict columns, and empty space does as much work as the content.
Swiss design treats layout as a problem to solve with order. Grids, neutral type and asymmetric balance let content speak with clarity.
Every text block and image aligns to columns and rows. Designers plan the grid first and place content second.
Grotesque typefaces with plain shapes carry the message. Text is set flush left with a ragged right edge.
Layouts avoid a centered axis. Large empty areas create tension and guide the eye.
The movement preferred objective photos and pure shapes to decorative drawing.
Swiss design grew in Basel and Zurich schools and became the base of modern corporate and interface design.
Jan Tschichold publishes Die neue Typographie, arguing for asymmetric layouts and sans-serif type, building on the Bauhaus.
Emil Ruder and Armin Hofmann teach typography at the Basel School of Design. Their students carry the method worldwide.
Max Miedinger and Eduard Hoffmann release Neue Haas Grotesk, later renamed Helvetica. Adrian Frutiger releases Univers the same year.
Josef Müller-Brockmann and three fellow designers launch the journal Neue Grafik in Zurich, spreading the style internationally.
Müller-Brockmann publishes Grid Systems in Graphic Design, still a standard text.
CSS Grid, design systems and transit signage follow the same logic. Much of interface design is Swiss at its core.
Swiss motion is precise. Each element travels in a straight line and stops exactly on a grid line.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Concert and museum posters use geometry and type as the whole image.
Railway and airport apps depend on neutral type and a clear grid.
Brand guidelines and design systems adopt grids and fixed type rules.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Black and white with one red. Color marks what matters and nothing else. Tap a swatch to copy its hex value.
:root{
--white: #FFFFFF;
--swiss-red: #E4002B;
--black: #111111;
--light-gray: #EDEDED;
--mid-gray: #5E5E5E;
}One neo-grotesque in a few weights. Hierarchy comes from size and position, not from different typefaces.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
--font-b: "Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(53px, 9vw, 125px);
--fs-1: 53.2px; --fs-2: 40.0px;
--fs-3: 30.1px; --fs-4: 22.6px;
--fs-body: 17px; --fs-sm: 12.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 700;
letter-spacing: -.03em;
text-transform: none;
line-height: 1;
}
/* fonts: Helvetica Neue where installed, Inter from Google Fonts as fallback */A 12-column grid with 20px gutters. Press Show grid in the hero to see the page aligned to it.
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>Columns and rows form modules that images and text snap to.
<!-- rows fixed with grid-auto-rows: 60px -->
<div class="row" style="grid-auto-rows:60px"><div class="col-8" style="grid-row:span 2">8 × 2</div><div class="col-4">4</div><div class="col-4" style="background:#E4002B;color:#fff">4</div><div class="col-4">4</div><div class="col-8">8</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 20px;
}
.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; }
}Zero radius, no shadow. Hairlines and heavy rules structure the page.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 20px;
--pad: 24px;
}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.
/* Swiss Design kit · Anti-Boring */
:root{
--bg:#FFFFFF;
--surface:#FFFFFF;
--surface2:#EDEDED;
--fg:#111111;
--muted:#5E5E5E;
--accent:#E4002B;
--accent-fg:#FFFFFF;
--accent2:#111111;
--accent2-fg:#FFFFFF;
--border:#111111;
--bw:1px;
--radius:0px;
--radius-sm:0px;
--shadow:none;
--shadow-sm:none;
--font-d:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
--font-b:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:700;
--h-track:-.03em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:20px;
--pad:24px;
--focus:rgba(228,0,43,.3);
--ok:#1E6B3E;
--warn:#8A5A00;
--danger:#E4002B;
--info:#111111;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 70% 40%,#E4002B 0 22%,transparent 22.5%),linear-gradient(#111 0 0) 0 100%/60% 18% no-repeat,#EDEDED;
--code-bg:#111111;
--code-fg:#EDEDED;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.8px;
--fs-body:17px;
--fs-4:22.6px;
--fs-3:30.1px;
--fs-2:40.0px;
--fs-1:53.2px;
--fs-d:clamp(53px, 9vw, 125px);
}
*,*::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:hover{transform:none;background:#111;color:#fff}
.btn:active{transform:none}
.btn-2:hover{background:var(--accent)}
.btn-ghost:hover{background:transparent;color:var(--accent)}
.card{border-width:0;border-top:2px solid var(--fg);padding:16px 0 0;background:transparent}
.badge{border-radius:0;background:transparent;border:1px solid var(--fg);color:var(--fg)}
.alert{border:0;border-top:2px solid var(--c);border-left:0;background:var(--surface2)}
.switch,.switch::before{border-radius:0}
.check{border-radius:0}
.progress{border-radius:0;height:.5em}
.tab{font-weight:500}
.tab[aria-selected="true"]{border-bottom-color:var(--fg);font-weight:700}
.table th{font-weight:700;border-bottom:2px solid var(--fg)}
.table-wrap{border:0;border-top:2px solid var(--fg)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#111111;
--surface:#111111;
--surface2:#1C1C1C;
--fg:#F2F2F2;
--muted:#A8A8A8;
--border:#F2F2F2;
--accent2:#F2F2F2;
--accent2-fg:#111111;
--code-bg:#000;
}
html.alt .btn:hover{background:#F2F2F2;color:#111}html.alt .hero h1{mix-blend-mode:normal}html.alt .facts div{border-color:#333}html.alt #gridbtn{background:#111;color:#F2F2F2;border-color:#F2F2F2}html.alt .stage .blk:first-of-type{background:#F2F2F2!important}html.alt .demo{border-color:#333!important}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 contemporary music concert hall in an authentic Swiss Design style.
Palette: White #FFFFFF, Swiss red #E4002B, Black #111111, Light gray #EDEDED, Mid gray #5E5E5E.
Typography: Helvetica Neue or Inter, 900 weight with -0.055em tracking for the hero headline, 400 and 700 for everything else. Flush left, ragged right.
Layout: Strict 12-column grid with 20px gutters. Hero: small meta text top left, a giant red circle spanning columns 5 to 11, a huge two-line headline overlapping it with multiply blend, a facts table on columns 8 to 12.
Signature details: Black, white and one red. Hairline and 2px rules instead of boxes. Asymmetric balance, large empty areas.
Components: Square buttons that invert on hover, cards defined by a top rule, square checkboxes, tables with a heavy header rule.
Motion: Straight-line moves that stop exactly on grid lines, easing cubic-bezier(.7,0,.2,1).
Avoid: centered layouts, rounded corners, shadows, gradients, decorative illustration, more than two typefaces.
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.
Centered text breaks the asymmetric tension that defines the style. Start from the left edge.
Pick a short type scale and stick to it. Seven sizes on one page destroy the order.
Visible grid lines look Swiss, but the real test is whether edges align when you hide them.
Strict layouts can feel sterile. Strong photography and one bold color bring life back.