Spot colour inks
Two to four bold inks, often fluorescent pink, blue and yellow, instead of full colour.
A print look made of a few bright spot inks. Colours overlap into new ones, grain shows through, and the layers never line up perfectly, which is exactly the charm.
Open the kit Copy promptRisograph printing uses one drum per ink colour. Designers love its fluorescent inks, visible grain and slightly shifted layers, and the web version copies them with blend modes.
Two to four bold inks, often fluorescent pink, blue and yellow, instead of full colour.
Where inks overlap they mix into new colours. On screen, mix-blend-mode: multiply does the same.
Each colour layer lands slightly off. Offsets of a few pixels make the print feel real.
Paper texture and uneven ink coverage add warmth. A subtle noise layer recreates it.
The Risograph was built as an office duplicator. Artists and zine makers turned it into a design style.
Noboru Hayama founds the company in Tokyo that will later make Risograph machines.
The company releases a small home screen printer that becomes a craft favourite in Japan.
The first Risograph duplicators are sold to schools, churches and offices for cheap bulk printing.
Designers and illustrators start using old machines for zines, posters and art books.
Independent riso studios and zine fairs spread, and the look moves onto websites through CSS blend modes.
Riso motion plays with registration. Ink layers slide apart and back together, mixing new colours where they overlap.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Artists sell prints and zines on sites that echo their printed work.
Music and book fairs use riso-style posters and pages for handmade energy.
Small brands use overprinted colour and grain to feel crafted.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Three spot inks on warm paper. Their overlaps create extra colours for free. Tap a swatch to copy its hex value.
:root{
--paper: #F4EFE4;
--fluorescent-pink: #FF48B0;
--riso-blue: #0078BF;
--yellow: #FFE800;
--teal: #00838A;
--ink-navy: #1F2A44;
}A tall condensed display face for big printed headlines, and a clean grotesque for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Anton",Impact,sans-serif;
--font-b: "Instrument Sans",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(49px, 9vw, 107px);
--fs-1: 48.6px; --fs-2: 37.3px;
--fs-3: 28.7px; --fs-4: 22.1px;
--fs-body: 17px; --fs-sm: 13.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: .01em;
text-transform: uppercase;
line-height: .95;
}
/* fonts: Anton and Instrument Sans */Poster-like layouts with big type and overlapping shapes. Keep body text in calm, readable columns.
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; }
}Small radius. Shadows are coloured ink layers, slightly offset like a misprint.
:root {
--radius: 4px;
--radius-sm: 3px;
--bw: 2px;
--shadow: 6px 6px 0 rgba(255,72,176,.85);
--shadow-sm: 3px 3px 0 rgba(0,120,191,.85);
--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.
/* Risograph kit · Anti-Boring */
:root{
--bg:#F4EFE4;
--surface:#FAF6EC;
--surface2:#EAE3D2;
--fg:#1F2A44;
--muted:#46506A;
--accent:#FF48B0;
--accent-fg:#1F2A44;
--accent2:#0078BF;
--accent2-fg:#FFFFFF;
--border:#1F2A44;
--bw:2px;
--radius:4px;
--radius-sm:3px;
--shadow:6px 6px 0 rgba(255,72,176,.85);
--shadow-sm:3px 3px 0 rgba(0,120,191,.85);
--font-d:"Anton",Impact,sans-serif;
--font-b:"Instrument Sans",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:.01em;
--h-case:uppercase;
--h-style:normal;
--h-lh:.95;
--gap:24px;
--pad:24px;
--focus:rgba(255,232,0,.9);
--ok:#00838A;
--warn:#9A5A00;
--danger:#D6246E;
--info:#0078BF;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 35% 45%,rgba(0,120,191,.9) 0 30%,transparent 31%),radial-gradient(circle at 60% 55%,rgba(255,72,176,.9) 0 30%,transparent 31%),#FFE800;
--code-bg:#1F2A44;
--code-fg:#FAF6EC;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::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:0;box-shadow:3px 2px 0 rgba(0,120,191,.85)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 4px 0 rgba(0,120,191,.85)}
.btn-2{box-shadow:3px 2px 0 rgba(255,72,176,.85)}
.btn-2:hover{box-shadow:5px 4px 0 rgba(255,72,176,.85)}
.btn-ghost{border:2px solid #1F2A44;box-shadow:none}
.card{box-shadow:7px 6px 0 rgba(255,72,176,.75)}
.card:nth-child(2n){box-shadow:7px 6px 0 rgba(0,120,191,.7)}
.badge{background:#FFE800;border:0;color:#1F2A44}
.input:focus,.select:focus,.textarea:focus{box-shadow:4px 4px 0 rgba(255,72,176,.8)}
.alert{background:color-mix(in srgb,var(--c) 10%,#FAF6EC);border:0;border-left:6px solid var(--c);box-shadow:3px 3px 0 color-mix(in srgb,var(--c) 45%,transparent)}
.progress i{background:repeating-linear-gradient(90deg,#FF48B0 0 8px,rgba(0,120,191,.8) 8px 16px)}
.switch::before{background:#FFE800;box-shadow:2px 1px 0 #FF48B0}
.tab[aria-selected="true"]{border-bottom-color:#FF48B0}
.table th{font-family:var(--font-d);font-weight:400;letter-spacing:.04em;color:#0078BF}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1C2233;
--surface:#242B40;
--surface2:#20273A;
--fg:#F4EFE4;
--muted:#C3C8D6;
--border:#F4EFE4;
--code-bg:#10141F;
}
html.alt .alert{background:#242B40}html.alt .sec-title{color:#6FC3FF}html.alt .table th{color:#6FC3FF}html.alt .stage{background:#F4EFE4}html.alt .blobs i{mix-blend-mode:screen}html.alt .riso-title span{mix-blend-mode:normal}html.alt .riso-title span:first-child{color:#6FC3FF}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 print studio and zine shop in an authentic Risograph style.
Palette: Paper #F4EFE4, Fluorescent pink #FF48B0, Riso blue #0078BF, Yellow #FFE800, Teal #00838A, Ink navy #1F2A44.
Typography: Anton uppercase for headlines, Instrument Sans for body.
Layout: Two-column hero: a huge two-layer headline (blue layer plus pink layer offset a few pixels with multiply blending), and overlapping pink, blue and yellow shapes on the right with a halftone dot layer.
Signature details: Only three spot inks (#FF48B0, #0078BF, #FFE800) on warm paper, mix-blend-mode: multiply for overprinting, slight misregistration, subtle SVG grain texture.
Components: Buttons with an offset ink layer behind them, cards with a multiplied pink or blue ink shadow slightly rotated, yellow highlighter badges, striped two-ink progress bars.
Motion: Ink layers sliding in and out of registration, colours mixing where they overlap.
Avoid: full-colour photos, gradients, pink or yellow text, heavy noise, offsets on small text.
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.
Too many overlapping inks turn brown. Stick to two or three.
Misregistration on small text makes it unreadable. Only offset big headlines.
Fluorescent pink and yellow fail contrast as text colours. Use them for shapes.
Heavy noise textures look dirty. Keep grain subtle.