Fixed 30 degree angles
Horizontal edges run at 30 degrees up to the left and right. Verticals stay vertical.
Tiny 3D worlds with no vanishing point. Every edge runs at 30 degrees, so objects keep their size wherever they sit, and a whole city fits neatly on one screen.
Open the kit Copy the promptIsometric design shows three sides of an object at once without perspective. It feels like a tidy model on a table, which makes complex systems easy to explain.
Horizontal edges run at 30 degrees up to the left and right. Verticals stay vertical.
Objects far away are drawn the same size as objects nearby, so the scene reads like a diagram.
One light top face, one mid face and one dark face. That trio creates depth with flat colour.
Buttons and cards get a stepped shadow at 45 degrees, as if they were thick blocks.
Isometric drawing began as an engineering tool and became a favourite of games and tech illustration.
Cambridge professor William Farish describes isometric projection as a way to draw machines accurately.
Sega's Zaxxon is one of the first arcade games to use an isometric view.
Strategy and simulation games use isometric maps to show whole cities and bases at once.
The mobile game Monument Valley turns isometric illusions into art and wins design awards.
Product pages and explainers use isometric scenes to show servers, workflows and data flows.
Isometric motion stacks and assembles. Blocks drop into place along the vertical axis and the angles never change.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Isometric servers and pipelines make invisible systems visible.
City builders and puzzle games use the view to show a whole world.
Event maps and campus guides use it to show buildings without perspective distortion.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Every colour comes as a set of three: light for the top, mid for one side, dark for the other. Tap a swatch to copy its hex value.
:root{
--paper: #F1F4FA;
--top-face: #FFFFFF;
--mid-face: #C9D6F2;
--shade-face: #93A9E0;
--coral: #FF6B4A;
--teal: #2BB3A3;
--ink: #1C2440;
}A sturdy grotesque in heavy weights for headings, and its mono sibling for labels and measurements.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Chivo",system-ui,sans-serif;
--font-b: "Chivo",system-ui,sans-serif;
--font-m: "Chivo Mono",ui-monospace,monospace;
--fs-d: clamp(46px, 9vw, 96px);
--fs-1: 45.6px; --fs-2: 35.7px;
--fs-3: 27.9px; --fs-4: 21.8px;
--fs-body: 17px; --fs-sm: 13.3px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 800;
letter-spacing: -.02em;
text-transform: none;
line-height: 1;
}
/* fonts: Chivo and Chivo Mono */A regular grid underneath, with an isometric line pattern in the background as a hint of the 3D space.
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>Any flat grid becomes isometric with two CSS rotations.
/* .iso { transform: rotateX(55deg) rotateZ(-45deg); transform-style: preserve-3d; } */
<div style="padding:40px 0;overflow:hidden"><div class="row iso" style="max-width:360px;margin:0 auto;grid-auto-rows:60px"><div class="col-4">A</div><div class="col-4">B</div><div class="col-4">C</div><div class="col-4">D</div><div class="col-8">E</div></div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.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; }
}Stepped 1px shadows at 45 degrees fake the thickness of a block. No blur anywhere.
:root {
--radius: 4px;
--radius-sm: 3px;
--bw: 2px;
--shadow: 1px 1px 0 #93A9E0,2px 2px 0 #93A9E0,3px 3px 0 #93A9E0,4px 4px 0 #93A9E0,5px 5px 0 #93A9E0,6px 6px 0 #93A9E0,7px 7px 0 #93A9E0,8px 8px 0 #93A9E0;
--shadow-sm: 1px 1px 0 #1C2440,2px 2px 0 #1C2440,3px 3px 0 #1C2440,4px 4px 0 #1C2440;
--gap: 24px;
--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.
/* Isometric 3D kit · Anti-Boring */
:root{
--bg:#F1F4FA;
--surface:#FFFFFF;
--surface2:#E4EAF6;
--fg:#1C2440;
--muted:#4F5A78;
--accent:#FF6B4A;
--accent-fg:#FFFFFF;
--accent2:#2BB3A3;
--accent2-fg:#FFFFFF;
--border:#1C2440;
--bw:2px;
--radius:4px;
--radius-sm:3px;
--shadow:1px 1px 0 #93A9E0,2px 2px 0 #93A9E0,3px 3px 0 #93A9E0,4px 4px 0 #93A9E0,5px 5px 0 #93A9E0,6px 6px 0 #93A9E0,7px 7px 0 #93A9E0,8px 8px 0 #93A9E0;
--shadow-sm:1px 1px 0 #1C2440,2px 2px 0 #1C2440,3px 3px 0 #1C2440,4px 4px 0 #1C2440;
--font-d:"Chivo",system-ui,sans-serif;
--font-b:"Chivo",system-ui,sans-serif;
--font-m:"Chivo Mono",ui-monospace,monospace;
--h-weight:800;
--h-track:-.02em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:24px;
--pad:24px;
--focus:rgba(255,107,74,.35);
--ok:#1E7A6E;
--warn:#9A5A00;
--danger:#C23A2B;
--info:#3D5BB8;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(30deg,#C9D6F2 25%,transparent 25% 75%,#C9D6F2 75%),linear-gradient(150deg,#C9D6F2 25%,transparent 25% 75%,#C9D6F2 75%),#FFFFFF;
--code-bg:#1C2440;
--code-fg:#E4EAF6;
--btn-case:none;
--btn-track:0;
--btn-weight:800;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.3px;
--fs-body:17px;
--fs-4:21.8px;
--fs-3:27.9px;
--fs-2:35.7px;
--fs-1:45.6px;
--fs-d:clamp(46px, 9vw, 96px);
}
*,*::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:#1C2440}
.btn:hover{transform:translate(-2px,-2px);box-shadow:1px 1px 0 #1C2440,2px 2px 0 #1C2440,3px 3px 0 #1C2440,4px 4px 0 #1C2440,5px 5px 0 #1C2440,6px 6px 0 #1C2440}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.card-media{background-size:28px 48px}
.badge{box-shadow:1px 1px 0 #1C2440,2px 2px 0 #1C2440;font-family:var(--font-m)}
.input:focus,.select:focus,.textarea:focus{box-shadow:1px 1px 0 #FF6B4A,2px 2px 0 #FF6B4A,3px 3px 0 #FF6B4A}
.alert{box-shadow:1px 1px 0 #93A9E0,2px 2px 0 #93A9E0,3px 3px 0 #93A9E0,4px 4px 0 #93A9E0}
.table-wrap{box-shadow:1px 1px 0 #93A9E0,2px 2px 0 #93A9E0,3px 3px 0 #93A9E0,4px 4px 0 #93A9E0,5px 5px 0 #93A9E0,6px 6px 0 #93A9E0}
.pager a{box-shadow:1px 1px 0 #1C2440,2px 2px 0 #1C2440,3px 3px 0 #1C2440}
.iso{transform:rotateX(55deg) rotateZ(-45deg);transform-style:preserve-3d}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#141A2E;
--surface:#1D2540;
--surface2:#19203A;
--fg:#E8EDFA;
--muted:#A9B3D0;
--border:#E8EDFA;
--code-bg:#0A0F1F;
--shadow:1px 1px 0 #3A4A80,2px 2px 0 #3A4A80,3px 3px 0 #3A4A80,4px 4px 0 #3A4A80,5px 5px 0 #3A4A80,6px 6px 0 #3A4A80,7px 7px 0 #3A4A80,8px 8px 0 #3A4A80;
--shadow-sm:1px 1px 0 #93A9E0,2px 2px 0 #93A9E0,3px 3px 0 #93A9E0,4px 4px 0 #93A9E0;
}
html.alt .btn:hover{box-shadow:1px 1px 0 #93A9E0,2px 2px 0 #93A9E0,3px 3px 0 #93A9E0,4px 4px 0 #93A9E0,5px 5px 0 #93A9E0,6px 6px 0 #93A9E0}html.alt .badge,html.alt .pager a{box-shadow:1px 1px 0 #93A9E0,2px 2px 0 #93A9E0}html.alt .alert,html.alt .table-wrap{box-shadow:1px 1px 0 #3A4A80,2px 2px 0 #3A4A80,3px 3px 0 #3A4A80,4px 4px 0 #3A4A80}html.alt .stage{background:#19203A}html.alt body{background-image:linear-gradient(30deg,rgba(232,237,250,.05) 1px,transparent 1px),linear-gradient(150deg,rgba(232,237,250,.05) 1px,transparent 1px)!important}html.alt .isocity polygon:first-child{fill:#1D2540}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 cloud hosting service for small teams in an authentic Isometric 3D style.
Palette: Paper #F1F4FA, Top face #FFFFFF, Mid face #C9D6F2, Shade face #93A9E0, Coral #FF6B4A, Teal #2BB3A3, Ink #1C2440.
Typography: Chivo 800 for headings, Chivo 400 for body, Chivo Mono for labels.
Layout: Two-column hero: headline left, an isometric city of stacked blocks on the right drawn in SVG with true 30 degree projection. Light isometric line pattern in the page background.
Signature details: Every object uses three shades (top light, left mid, right dark), consistent light direction, stepped 45 degree block shadows on cards and buttons, 2px ink borders.
Components: Chunky buttons that lift on hover and press flat on click, cards with 8px stepped shadows, mono badges, tables with block shadows.
Motion: Blocks drop along the vertical axis with a slight bounce, staggered.
Avoid: perspective or vanishing points, mixed projections, blurred shadows, tilted body text, purple gradients.
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.
Mixing 30 degree and 45 degree views in one scene looks broken. Pick one projection.
If the light face changes side between objects, the world stops making sense.
Isometric scenes shrink fast on phones. Keep objects chunky and labels outside the drawing.
Tilted text is hard to read. Keep headings and body text flat.