Dynamic diagonals
Type and shapes run at steep angles, so the page feels like it is moving.
Posters built like machines. Red and black blocks, sharp diagonals, bold type and photomontage turned 1920s graphic design into pure energy and movement.
Open the kit Copy promptConstructivism treated design as construction. Artists assembled posters from basic shapes, diagonal type and photos to create maximum visual force.
Type and shapes run at steep angles, so the page feels like it is moving.
A tight palette of red and black on off-white newsprint.
Heavy, blocky letters, often rotated or stacked.
Sharp triangles pierce circles, a signature graphic device.
Constructivism grew out of art experiments in Russia around 1915 and shaped modern graphic design worldwide.
Artists start building abstract works from industrial materials instead of painting pictures.
El Lissitzky's poster of a red wedge piercing a white circle becomes a landmark of abstract graphic design.
Alexander Rodchenko combines photos, diagonals and bold type in posters and advertisements.
Official art policy favours realistic painting, and the movement fades at home.
Album covers, posters and fashion borrow the diagonals and red-black palette.
Constructivist motion is force. A red wedge drives into a black circle and the circle shudders on impact.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Bands and events use diagonals and red-black type for energy.
Advocacy groups borrow the direct, loud visual language.
Features about design and history use the look for impact.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Red and black on paper. Nothing else is needed. Tap a swatch to copy its hex value.
:root{
--paper: #ECE4D0;
--red: #D0271D;
--black: #111111;
--newsprint: #E0D6BE;
--grey: #3F3A33;
}A heavy geometric display face in uppercase, and a condensed sans for body text.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Russo One",Impact,sans-serif;
--font-b: "IBM Plex Sans Condensed",system-ui,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: 400;
letter-spacing: 0;
text-transform: uppercase;
line-height: .95;
}
/* fonts: Russo One and IBM Plex Sans Condensed */Start from a grid, then rotate the whole composition. Content blocks stay aligned to the tilted axis.
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. Heavy borders, wedges and circles provide all the structure.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 3px;
--shadow: none;
--shadow-sm: none;
--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.
/* Constructivism kit · Anti-Boring */
:root{
--bg:#ECE4D0;
--surface:#F5EFE0;
--surface2:#E0D6BE;
--fg:#111111;
--muted:#3F3A33;
--accent:#D0271D;
--accent-fg:#FFFFFF;
--accent2:#111111;
--accent2-fg:#ECE4D0;
--border:#111111;
--bw:3px;
--radius:0px;
--radius-sm:0px;
--shadow:none;
--shadow-sm:none;
--font-d:"Russo One",Impact,sans-serif;
--font-b:"IBM Plex Sans Condensed",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:0;
--h-case:uppercase;
--h-style:normal;
--h-lh:.95;
--gap:24px;
--pad:24px;
--focus:rgba(208,39,29,.4);
--ok:#2F5A33;
--warn:#8A5A00;
--danger:#D0271D;
--info:#111;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(115deg,#ECE4D0 40%,#D0271D 40% 60%,#111 60%);
--code-bg:#111;
--code-fg:#ECE4D0;
--btn-case:uppercase;
--btn-track:.08em;
--btn-weight:600;
--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{transform:skewX(-10deg)}
.btn:hover{transform:skewX(-10deg) translateX(4px);background:var(--fg);color:var(--bg)}
.btn:active{transform:skewX(-10deg)}
.card{border-top-width:14px;border-top-color:var(--accent)}
.card:nth-child(2n){transform:rotate(-1deg)}
.badge{transform:rotate(-8deg);background:var(--accent);color:#fff;border:0;border-radius:0;font-family:var(--font-d);font-weight:400}
.alert{border-left-width:16px}
.progress{height:1em;border-radius:0}
.progress i{background:repeating-linear-gradient(115deg,var(--accent) 0 12px,var(--fg) 12px 16px)}
.switch,.switch::before{border-radius:0}
.tab{font-family:var(--font-d);font-weight:400;text-transform:uppercase}
.tab[aria-selected="true"]{border-bottom:6px solid var(--accent)}
.table th{background:var(--fg);color:var(--bg);font-weight:400}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#151311;
--surface:#1F1C19;
--surface2:#1A1815;
--fg:#ECE4D0;
--muted:#BFB6A2;
--border:#ECE4D0;
--accent2:#ECE4D0;
--accent2-fg:#151311;
--code-bg:#000;
}
html.alt .disc,html.alt .bar,html.alt .stage .c{background:#ECE4D0}html.alt .disc::after{background:radial-gradient(circle,#151311 1.5px,transparent 2px) 0 0/7px 7px}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 independent film festival in an authentic Constructivism style.
Palette: Paper #ECE4D0, Red #D0271D, Black #111111, Newsprint #E0D6BE, Grey #3F3A33.
Typography: Russo One uppercase for headings, IBM Plex Sans Condensed for body.
Layout: Hero with a red wedge thrusting in from the left, a big black halftone disc on the right, a tilted black bar across the bottom and a rotated two-colour headline over a boxed intro.
Signature details: Red #D0271D and black on newsprint paper, steep diagonals, 3px black borders, halftone dot fills.
Components: Skewed uppercase buttons, cards with thick red top bars, rotated red badges, diagonal striped progress bars.
Motion: A red wedge driving into a circle with hard mechanical easing.
Avoid: political symbols and slogans, rounded corners, pastel colours, rotated paragraphs.
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.
The movement is tied to politics. Avoid state symbols and slogans unless that is your topic.
Tilt headings and blocks. Keep paragraphs level for reading.
Red works as a strike. Large red areas tire the eye.
Historic photomontages use protected photos. Make your own.