Clean pack first
White, a thin rule, plain grotesk. The product has to look finished before the mark.
Clean packaging first. Then a cobalt spray mark: dots, a drip, and one short word.
Spray is a mark on a clean pack. The layout stays aligned and white. Cobalt dots, a drip and a short marker word sit on top.
White, a thin rule, plain grotesk. The product has to look finished before the mark.
Cobalt only. A second bright can turns it into a mural.
A cluster of dots, one drip, one word. Leave most of the pack alone.
Lighter, smaller dots at the edge. They fade. They do not cover the type.
The mark comes from the street. The page comes from the shelf. The style is the meeting of the two.
Spray paint becomes a public way to write a short name.
Clothing and drinks borrow street type, often all over the surface.
Fashion uses a single stencil rather than a full wall.
Packaging goes back to plain cartons, then adds one sprayed word.
The stipple can be circles in SVG. No photo of paint is required.
Dots appear in a short burst, then a drip runs down. The pack does not move.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
A white label stays intact. The spray is a signature.
A configurator can show the mark as a layer you turn on.
A studio site can keep the grid and let one project carry the spray.
Palette, type, layout, texture and the tokens every component reads. Tap a swatch to copy its hex value.
White packaging and one spray colour: cobalt. Overspray is the same blue, lighter. No second can.
:root {
--white: #F6F6F4;
--cobalt: #1E3BFF;
--overspray: #C9D2FF;
--ink: #121212;
--mist: #EEF1FF;
--deep: #0C1A8A;
}A clean grotesk for the pack. A marker only for the short sprayed word.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root {
--font-d: "Geist",system-ui,sans-serif;
--font-b: "Geist",system-ui,sans-serif;
--h-weight: 700;
--h-track: -.03em;
}The pack is aligned and quiet. The spray sits on top and is allowed to ignore the grid.
Equal cards, product tiles, feature lists.
Articles, documentation, settings pages.
The pack is a sharp rectangle. The spray is irregular dots. Do not round the pack to match the dots.
:root {
--radius: 2px;
--radius-sm: 2px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 24px;
--pad: 22px;
}Stipple: small circles, dense in the stroke and thin at the edge, plus one drip. Drawn in SVG.
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.
/* Spray kit · Anti-Boring */
:root{
--bg:#F6F6F4;
--surface:#FFFFFF;
--surface2:#EEF1FF;
--fg:#121212;
--muted:#3A3A3A;
--accent:#1E3BFF;
--accent-fg:#FFFFFF;
--accent2:#0C1A8A;
--accent2-fg:#FFFFFF;
--border:#121212;
--bw:1px;
--radius:2px;
--radius-sm:2px;
--shadow:none;
--shadow-sm:none;
--font-d:"Geist",system-ui,sans-serif;
--font-b:"Geist",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:700;
--h-track:-.03em;
--h-case:none;
--h-style:normal;
--h-lh:.95;
--gap:24px;
--pad:22px;
--focus:rgba(30,59,255,.35);
--ok:#0C1A8A;
--warn:#8A5A00;
--danger:#9E1C24;
--info:#1E3BFF;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 40% 45%,#1E3BFF 0 2px,transparent 3px) 0 0/10px 10px,#F6F6F4;
--code-bg:#121212;
--code-fg:#F6F6F4;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:2px;
--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-radius:2px}
.card{background:#fff}
.badge{background:var(--accent);color:#fff;border-radius:2px}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#0E1020;
--surface:#16182A;
--surface2:#121426;
--fg:#F4F5FF;
--muted:#D5DAF5;
--accent:#A8B6FF;
--accent-fg:#0C1230;
--accent2:#7C8CFF;
--accent2-fg:#0C1230;
--border:#D5DAF5;
--code-bg:#0A0C18;
--code-fg:#F4F5FF;
}
html.alt .input,html.alt .select,html.alt .textarea{background:var(--surface);color:var(--fg)}
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 Lovable and Claude Design. It names the palette, type, layout, texture, what to do and what to avoid, so the output keeps this style's point of view.
Style prompt for Lovable and Claude Design. Design a responsive landing page for a mineral water brand in an authentic Spray style.
Palette: White #F6F6F4, Cobalt #1E3BFF, Overspray #C9D2FF, Ink #121212, Deep #0C1A8A.
Typography: Geist for the pack and the interface. Permanent Marker only for the sprayed word.
Layout: A white pack rectangle with a small aligned label. Spray dots, a drip and the word spray sit across it, slightly rotated.
Texture: SVG circles of different sizes and opacity, denser at the stroke, plus one stroke drip.
Signature details: Sharp pack, 1px ink rule, cobalt only in the mark and the primary button.
Components: Cobalt rectangular buttons, white cards, small cobalt badges.
Motion: Dots pop in over a fraction of a second, then a drip draws downward.
Do: Design the clean pack first. Add one cobalt mark. Keep the marker word short.
Avoid: Full graffiti backgrounds, many neon colours, marker paragraphs, photos of real walls, rounded glossy bottles.
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.
Covering the page in paint hides the pack. The white is the point.
Pink, green and yellow cans are a mural. This style is one cobalt.
The marker face is for one word. Sentences stay in the grotesk.
A photograph of spray is not yours to drop in. Draw the dots.