Flat facets
Every triangle has a single solid colour with no smooth gradient inside it.
Scenes built from flat triangles. Early 3D graphics could only afford a few polygons, and designers turned that limit into a crisp, faceted style.
Open the kit Copy promptLow-poly art builds shapes from a small number of flat-shaded triangles. Each facet gets one colour, and light is shown by changing the shade from facet to facet.
Every triangle has a single solid colour with no smooth gradient inside it.
A facet facing the light is paler, one facing away is darker. That alone creates volume.
Detail is reduced on purpose. A mountain might be a few dozen triangles.
Buttons and cards borrow the cut corners and diagonals of the triangles.
Low-poly started as a technical limit of early 3D and returned as a deliberate art style.
Mathematician Boris Delaunay describes the triangulation method still used to turn points into neat triangle meshes.
Home consoles render characters and worlds with a few hundred polygons, creating the classic faceted look.
Indie games and illustrators choose low-poly for its clarity and small file sizes.
WebGL and SVG make faceted backgrounds and hero scenes easy to generate in the browser.
Low-poly motion is shimmer. Facets brighten and dim at different times, like light moving over a crystal.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Indie studios use low-poly for worlds and marketing sites.
Faceted mountains and landscapes feel adventurous and modern.
Generated triangle meshes make light, scalable hero backgrounds.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
A ramp of blues for shading plus warm peach and coral for light and action. Tap a swatch to copy its hex value.
:root{
--night-blue: #1B2A49;
--deep-blue: #2C4470;
--blue: #3E5C8A;
--sky: #7FA3C8;
--peach: #F2B880;
--coral: #E07A5F;
--mist: #EEF1F6;
}A squarish geometric sans for headings and a friendly sans for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Saira",system-ui,sans-serif;
--font-b: "Nunito Sans",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,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: -.01em;
text-transform: none;
line-height: 1;
}
/* fonts: Saira and Nunito Sans */Clean grids with angled edges. Faceted art fills full-bleed backgrounds.
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: 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; }
}No radius. Corners are cut at angles with clip-path, and shadows stay soft.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 1px;
--shadow: 0 10px 24px rgba(27,42,73,.18);
--shadow-sm: 0 4px 10px rgba(27,42,73,.18);
--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.
/* Low-poly kit · Anti-Boring */
:root{
--bg:#EEF1F6;
--surface:#FFFFFF;
--surface2:#E1E7F0;
--fg:#1B2A49;
--muted:#4A5A7A;
--accent:#E07A5F;
--accent-fg:#FFFFFF;
--accent2:#3E5C8A;
--accent2-fg:#FFFFFF;
--border:#C9D3E2;
--bw:1px;
--radius:0px;
--radius-sm:0px;
--shadow:0 10px 24px rgba(27,42,73,.18);
--shadow-sm:0 4px 10px rgba(27,42,73,.18);
--font-d:"Saira",system-ui,sans-serif;
--font-b:"Nunito Sans",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:800;
--h-track:-.01em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:24px;
--pad:24px;
--focus:rgba(224,122,95,.4);
--ok:#2E7D5B;
--warn:#9A5A00;
--danger:#C23A2B;
--info:#3E5C8A;
--field-bg:var(--surface);
--field-shadow:none;
--media:conic-gradient(from 30deg at 30% 60%,#3E5C8A 0 60deg,#5B7FAF 0 150deg,#7FA3C8 0 220deg,#2C4470 0 300deg,#1B2A49 0);
--code-bg:#1B2A49;
--code-fg:#E1E7F0;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--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{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border:0;background:linear-gradient(135deg,#E07A5F 50%,#C9654C 50%)}
.btn-2{background:linear-gradient(135deg,#3E5C8A 50%,#2C4470 50%)}
.btn-ghost{clip-path:none;border:1px solid var(--fg);background:transparent}
.btn:hover{transform:none;filter:brightness(1.08)}
.card{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));border:0}
.card-media{clip-path:polygon(0 0,100% 0,100% 82%,78% 100%,0 100%)}
.badge{clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);border:0;background:#F2B880;color:#1B2A49;border-radius:0}
.alert{border-left:0;clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));background:linear-gradient(135deg,var(--surface) 70%,color-mix(in srgb,var(--c) 14%,var(--surface)) 70%)}
.progress{border-radius:0}
.progress i{background:repeating-linear-gradient(120deg,#E07A5F 0 10px,#F2B880 10px 20px)}
.switch,.switch::before{border-radius:0}
.switch::before{clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--accent)}
.pager a{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:0;background:var(--surface2)}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#111A2E;
--surface:#1B2A49;
--surface2:#16223D;
--fg:#E6ECF7;
--muted:#A9B6CF;
--border:#2C4470;
--code-bg:#0A1122;
}
html.alt .hero .card-h{background:rgba(27,42,73,.92)}html.alt .hero .lede{color:#A9B6CF}html.alt .hero h1{color:#E6ECF7}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 an outdoor adventure and hiking app in an authentic Low-poly style.
Palette: Night blue #1B2A49, Deep blue #2C4470, Blue #3E5C8A, Sky #7FA3C8, Peach #F2B880, Coral #E07A5F, Mist #EEF1F6.
Typography: Saira 800 for headings, Nunito Sans for body.
Layout: Full-bleed low-poly mountain landscape as the hero background, generated as SVG triangles shaded by height, with a solid angular card on the left holding the headline and buttons.
Signature details: Flat-shaded triangles in a blue ramp with peach and coral highlights, cut-corner cards and badges via clip-path, soft shadows.
Components: Parallelogram buttons with a two-tone diagonal split, faceted cards, diamond pagination, triangular switch thumbs.
Motion: Triangles shimmering with staggered brightness changes.
Avoid: smooth gradients inside shapes, rounded corners, tiny noisy facets, text on the mesh.
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.
Hundreds of tiny facets look noisy. Keep triangles large.
Smooth gradients break the look. One flat colour per triangle.
Put text on a solid panel, never directly on the mesh.
Shade by light direction or height. Random colours read as confetti.