White ground
Porcelain, not a tinted grey. The white is the material.
Russian cobalt on white porcelain. Flowers, leaves and a changing blue, with a lot of the white left bare.
Gzhel is the blue-and-white ware from the ceramic villages near Moscow. On a page it means a white ground, cobalt ornament, and blues that change like a watered brush.
Porcelain, not a tinted grey. The white is the material.
Pale wash, middle blue and deep blue. No second hue.
A flower, a leaf, a berry, a curved stem. One cluster, not a repeat all over.
The line goes from thin wash to deep cobalt, the way a brush runs out of paint.
The craft is local and specific. The page should name it plainly and draw its own flowers.
Potters in Gzhel, near Moscow, paint cobalt on white clay.
The flower and bird motifs become a familiar Russian tableware pattern.
Workshops keep the same cobalt range even as production grows.
The pattern shows up on packaging and posters, sometimes as a photo of a plate.
The ornament can be an SVG on a white page, with the story told in words.
A stem and a flower draw on, as if the brush were still moving. Then they rest.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
A maker can show the ornament large and the copy small.
A simple list of pieces stays in the sans. The name stays in the serif.
A catalogue can use the flower once per page, not as a background tile.
Palette, type, layout, texture and the tokens every component reads. Tap a swatch to copy its hex value.
White porcelain and cobalt only. Pale wash, middle blue and deep blue are the same pigment at different strengths.
:root {
--porcelain: #F7F8FB;
--wash: #C5D6F0;
--mid-blue: #3E6BB8;
--cobalt: #1A3E8C;
--deep: #0E245C;
--line: #16356E;
}A high-contrast serif for the name, like a word painted under the rim. A plain sans for the interface.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root {
--font-d: "Cormorant Garamond",Georgia,serif;
--font-b: "Instrument Sans",system-ui,sans-serif;
--h-weight: 500;
--h-track: .02em;
}Large white areas. Ornament sits in a cluster, not as a wallpaper. Text keeps a wide margin from the flowers.
Equal cards, product tiles, feature lists.
Articles, documentation, settings pages.
Soft radii, like a plate's rim. Borders are thin cobalt lines.
:root {
--radius: 18px;
--radius-sm: 10px;
--bw: 1px;
--shadow: 0 12px 28px -22px rgba(14,36,92,.35);
--shadow-sm: 0 6px 14px -12px rgba(14,36,92,.3);
--gap: 28px;
--pad: 26px;
}A faint round highlight, as on glazed clay, and brush flowers in three blues. No photo of a real plate.
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.
/* Gzhel kit · Anti-Boring */
:root{
--bg:#F7F8FB;
--surface:#FFFFFF;
--surface2:#E7EEF8;
--fg:#0E245C;
--muted:#2C4A7A;
--accent:#1A3E8C;
--accent-fg:#F7F8FB;
--accent2:#0E245C;
--accent2-fg:#F7F8FB;
--border:#1A3E8C;
--bw:1px;
--radius:18px;
--radius-sm:10px;
--shadow:0 12px 28px -22px rgba(14,36,92,.35);
--shadow-sm:0 6px 14px -12px rgba(14,36,92,.3);
--font-d:"Cormorant Garamond",Georgia,serif;
--font-b:"Instrument Sans",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:500;
--h-track:.02em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:28px;
--pad:26px;
--focus:rgba(26,62,140,.3);
--ok:#1A3E8C;
--warn:#8A5A00;
--danger:#8E2A3A;
--info:#1A3E8C;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle at 50% 45%,#F7F8FB,#C5D6F0 40%,#1A3E8C 41% 70%,#F7F8FB 71%);
--code-bg:#0E245C;
--code-fg:#F7F8FB;
--btn-case:none;
--btn-track:0;
--btn-weight:600;
--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 */
.card{background:#fff;border-color:var(--accent)}
.badge{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn{border-radius:999px}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#0E1830;
--surface:#152240;
--surface2:#121E38;
--fg:#F4F7FC;
--muted:#D5E0F2;
--accent:#C5D6F2;
--accent-fg:#0E1830;
--accent2:#9BB6E8;
--accent2-fg:#0E1830;
--border:#9BB6E8;
--code-bg:#0A1224;
--code-fg:#F4F7FC;
}
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 porcelain tableware studio in an authentic Gzhel style.
Palette: Porcelain #F7F8FB, Wash #C5D6F0, Mid blue #3E6BB8, Cobalt #1A3E8C, Deep #0E245C.
Typography: Cormorant Garamond for the name, Instrument Sans for interface and body.
Layout: A white page. The hero shows a plate drawn in SVG: a thin rim, one flower cluster, the word Gzhel under it. Later sections leave wide white margins.
Texture: A round porcelain highlight and brush flowers in three blues. Strokes are SVG paths, not a photo.
Signature details: Thin cobalt borders, white cards, pill buttons, a badge that is an outline rather than a fill.
Components: Cobalt pill buttons, white cards with a blue rule, outline badges.
Motion: A flower stroke draws on with stroke-dashoffset over about six seconds, then holds.
Do: Vary the blue inside one motif. Leave large white areas. Draw original flowers.
Avoid: Red or gold, photos of antique plates, edge-to-edge pattern, a second accent colour, fake Cyrillic as decoration.
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.
A picture of a real Gzhel plate is not a layout. Draw a new flower.
Tiling the flower until the white disappears loses the porcelain.
Gold rims and red seals are other ceramics. This one is cobalt and white.
Do not sprinkle letters you are not using as words. The ornament is the flower.