Ornamental frames
Double rules, corner pieces and flourishes frame every block, like a playbill or label.
The Anti-Boring proudly presents
A style of abundance from the age of steam and print. Ornate frames, decorative type, deep jewel colors and engraved detail turn every page into a keepsake.
Open the kit Copy the promptVictorian design comes from the printing boom of the 19th century. It loves ornament, mixed display type and framed compositions full of detail.
Double rules, corner pieces and flourishes frame every block, like a playbill or label.
Wood type, small caps and elegant serifs combine on one layout, each line a different style.
Oxblood, forest green and navy on ivory, with gold for details.
Fine lines, hatching and patterns imitate steel engraving and chromolithography.
The Victorian era saw printing, advertising and ornament explode together.
Queen Victoria takes the British throne. Her 63-year reign gives its name to an era of industry and decoration.
London's Crystal Palace shows off industrial goods and ornate design to millions of visitors.
William Morris co-founds a decorative arts firm, reacting against mass production with handmade pattern and craft.
Morris founds the Kelmscott Press and prints books with dense borders and medieval-inspired type.
Steampunk fiction and craft brands revive Victorian ornament, often mixed with brass and machinery.
Victorian motion is mechanical and ceremonial. Brass gears turn slowly behind an ornate frame.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Labels and product pages use frames and ornate type to signal heritage.
Small businesses use playbill layouts to feel established and handmade.
Posters and ticket pages borrow the drama of 19th-century playbills.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Dark wood tones, ivory paper and oxblood, finished with gilt. Every color should look printed or polished. Tap a swatch to copy its hex value.
:root{
--mahogany: #241814;
--ivory: #F1E6CF;
--oxblood: #8C1C24;
--gilt: #C8A45C;
--bronze: #8C6A2E;
--walnut: #2E1F1A;
}Wood type for posters, engraved small caps for headings and a classical text serif for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Playfair Display SC",Georgia,serif;
--font-b: "Old Standard TT",Georgia,serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(51px, 9vw, 113px);
--fs-1: 51.4px; --fs-2: 39.5px;
--fs-3: 30.4px; --fs-4: 23.4px;
--fs-body: 18px; --fs-sm: 13.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 700;
letter-spacing: .02em;
text-transform: none;
line-height: 1.05;
}
/* fonts: Rye, Playfair Display SC and Old Standard TT */Symmetrical, centered compositions inside frames. The frame is part of the grid.
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. Depth comes from stacked frames: double borders, spacer rings and gold outlines.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 4px;
--shadow: 0 0 0 4px #241814, 0 0 0 5px #C8A45C, 0 14px 30px rgba(0,0,0,.45);
--shadow-sm: 0 0 0 3px #241814, 0 0 0 4px #C8A45C;
--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.
/* Victorian kit · Anti-Boring */
:root{
--bg:#241814;
--surface:#F1E6CF;
--surface2:#2E1F1A;
--fg:#F1E6CF;
--muted:#CDBB98;
--accent:#8C1C24;
--accent-fg:#F1E6CF;
--accent2:#C8A45C;
--accent2-fg:#241814;
--border:#C8A45C;
--bw:4px;
--radius:0px;
--radius-sm:0px;
--shadow:0 0 0 4px #241814, 0 0 0 5px #C8A45C, 0 14px 30px rgba(0,0,0,.45);
--shadow-sm:0 0 0 3px #241814, 0 0 0 4px #C8A45C;
--font-d:"Playfair Display SC",Georgia,serif;
--font-b:"Old Standard TT",Georgia,serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:700;
--h-track:.02em;
--h-case:none;
--h-style:normal;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:rgba(200,164,92,.55);
--ok:#2F5A33;
--warn:#8A5A00;
--danger:#8C1C24;
--info:#2E3F5E;
--field-bg:#FBF5E6;
--field-shadow:none;
--media:repeating-radial-gradient(circle at 50% 50%,#2E1F1A 0 3px,#C8A45C 3px 4px,#2E1F1A 4px 9px);
--code-bg:#140D0A;
--code-fg:#E6D3A8;
--btn-case:uppercase;
--btn-track:.14em;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.8px;
--fs-body:18px;
--fs-4:23.4px;
--fs-3:30.4px;
--fs-2:39.5px;
--fs-1:51.4px;
--fs-d:clamp(51px, 9vw, 113px);
}
*,*::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,.table-wrap,.alert{color:#241814}
.card{border-style:double;border-color:#8C6A2E}
.card::before,.card::after{content:"❦";position:absolute;top:6px;font-size:1rem;color:#8C1C24}
.card::before{left:10px}.card::after{right:10px;transform:scaleX(-1)}
.card .card-media{border:3px double #8C6A2E}
.btn{font-family:var(--font-d);border:2px solid #C8A45C;box-shadow:0 0 0 3px #241814,0 0 0 4px #C8A45C}
.btn:hover{transform:none;background:#A8262F}
.btn-2:hover{background:#DDBA6E}
.btn-ghost{color:var(--accent2)}
.badge{font-family:var(--font-d);border-radius:0;border:1px solid #8C6A2E;background:#F1E6CF;color:#8C1C24}
.label{font-family:var(--font-d);font-size:.85rem}
.input,.select,.textarea{border:2px solid #8C6A2E;color:#241814;font-family:var(--font-b)}
.check,.radio{border:2px solid #C8A45C}
.switch{border:2px solid #C8A45C;background:#2E1F1A}.switch::before{background:#C8A45C}
.alert{border:3px double #8C6A2E;border-left:10px solid var(--c)}
.alert b{font-family:var(--font-d)}
.progress{border:2px solid #C8A45C;background:#2E1F1A}
.progress i{background:repeating-linear-gradient(90deg,#8C1C24 0 8px,#A8262F 8px 16px)}
.tab{font-family:var(--font-d);color:var(--muted)}
.tab[aria-selected="true"]{color:var(--accent2);border-bottom-color:var(--accent2)}
.pager a{border:2px solid #C8A45C;background:#2E1F1A;font-family:var(--font-d)}
.table th{font-family:var(--font-d);background:#E6D3A8;border-bottom:3px double #8C6A2E}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#F1E6CF;
--surface:#FBF5E6;
--surface2:#E6D8BC;
--fg:#241814;
--muted:#5A4636;
--border:#8C6A2E;
--field-bg:#FFFDF6;
--code-bg:#241814;
}
html.alt .sec-title,html.alt .tl .yr{color:#8C1C24}html.alt .pager a,html.alt .switch,html.alt .progress{background:#FBF5E6}html.alt .tab{color:#5A4636}html.alt .tab[aria-selected="true"]{color:#8C1C24;border-bottom-color:#8C1C24}html.alt .btn-ghost{color:#8C1C24}html.alt .demo{border-color:rgba(140,106,46,.5)!important}html.alt body{background-image:radial-gradient(rgba(140,106,46,.12) 1px,transparent 1px)!important}html.alt .stage{background:#E6D8BC}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 a heritage tea merchant in an authentic Victorian style.
Palette: Mahogany #241814, Ivory #F1E6CF, Oxblood #8C1C24, Gilt #C8A45C, Bronze #8C6A2E, Walnut #2E1F1A.
Typography: Rye for poster titles, Playfair Display SC for headings and buttons, Old Standard TT for body.
Layout: A centered playbill-style hero: ivory panel with double gilt frame, red corner brackets, a small italic line, a huge wood-type title in oxblood, a banded subtitle between double rules, then buttons. Dark mahogany page around it.
Signature details: Double borders, stacked frame rings via box-shadow, fleuron ornaments on card corners, fine dotted texture, engraved-style radial patterns for images.
Components: Oxblood buttons with gold ring outlines, ivory inputs with bronze borders, ivory cards with double borders and fleurons, gilt-framed pagination.
Motion: Rare and mechanical: slowly turning gears or a revealing flourish.
Avoid: rounded corners, flat modern sans, neon, small light text on dark wood, random steampunk props.
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.
When frames crowd out the words, the page becomes wallpaper. Keep reading areas calm.
Real playbills mixed many faces, but screens need restraint. Three families is the limit.
Small serif text on dark wood fails contrast. Put reading text on ivory panels.
Random gears and goggles feel like fancy dress. Use ornament that fits the content.