High-contrast serifs
Didone faces with hairline thins and heavy thicks, designed to be seen large.
Maison · Paris · MMXXVI
Luxury brands speak through typography. Hairline serifs, wide-tracked capitals and a great deal of silence suggest craft, heritage and price before a single product appears.
Discover the kit Copy the promptLuxury typography uses contrast and restraint as signals of value. Few words, big type and generous space say that nothing here needs to shout.
Didone faces with hairline thins and heavy thicks, designed to be seen large.
Small uppercase labels with wide letter spacing, used for navigation and details.
Huge margins and very little copy. Space implies that attention is precious.
Black, ivory and one metallic accent such as champagne or gold.
The look of luxury comes from late 18th-century type and 20th-century fashion magazines.
The Didot family in Paris cuts typefaces with extreme contrast between thick and thin strokes.
Giambattista Bodoni in Parma refines the same idea. Didone faces become symbols of elegance.
Fashion magazines set their names in Didone capitals, linking the style to couture for decades.
Several fashion houses swap their serif logos for plain sans-serif wordmarks, a trend critics nickname blanding.
Brands and designers bring back expressive high-contrast serifs to regain character.
Luxury motion is slow and deliberate. Letters open up, lines of light pass through, and nothing hurries.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Collections launch with a single image and a single line of type.
Premium hospitality uses serif wordmarks and tracked labels to set expectations.
Product pages rely on typography because the product itself is hard to show.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Near-black, warm ivory and champagne gold. Nothing bright, nothing cold. Tap a swatch to copy its hex value.
:root{
--noir: #0E0D0B;
--ivory: #EDE6DA;
--champagne: #C9A96E;
--taupe: #A99F8E;
--umber: #2A2621;
}A Didone for display with a very large scale ratio, and a narrow elegant sans in tracked capitals for labels.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Bodoni Moda",Didot,"Times New Roman",serif;
--font-b: "Tenor Sans",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(75px, 9vw, 229px);
--fs-1: 75.1px; --fs-2: 51.8px;
--fs-3: 35.7px; --fs-4: 24.6px;
--fs-body: 17px; --fs-sm: 11.7px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: -.01em;
text-transform: none;
line-height: 1;
}
/* fonts: Bodoni Moda and Tenor Sans */Centered, symmetrical and slow. Use a narrow content column and very wide margins.
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: 36px;
}
.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 and no shadow. Hairline borders in translucent gold.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 36px;
--pad: 36px;
}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.
/* Luxury Typography kit · Anti-Boring */
:root{
--bg:#0E0D0B;
--surface:#161411;
--surface2:#12110E;
--fg:#EDE6DA;
--muted:#A99F8E;
--accent:#C9A96E;
--accent-fg:#0E0D0B;
--accent2:transparent;
--accent2-fg:#EDE6DA;
--border:rgba(201,169,110,.45);
--bw:1px;
--radius:0px;
--radius-sm:0px;
--shadow:none;
--shadow-sm:none;
--font-d:"Bodoni Moda",Didot,"Times New Roman",serif;
--font-b:"Tenor Sans",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:-.01em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:36px;
--pad:36px;
--focus:rgba(201,169,110,.45);
--ok:#8FC7A3;
--warn:#E0B872;
--danger:#E08A7A;
--info:#C9A96E;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(160deg,#2A2621,#0E0D0B 60%),#0E0D0B;
--code-bg:#050504;
--code-fg:#D9C9A5;
--btn-case:uppercase;
--btn-track:.28em;
--btn-weight:400;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:11.7px;
--fs-body:17px;
--fs-4:24.6px;
--fs-3:35.7px;
--fs-2:51.8px;
--fs-1:75.1px;
--fs-d:clamp(75px, 9vw, 229px);
}
*,*::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{font-size:.72rem;padding:1.3em 2.6em}
.btn:hover{transform:none;background:#EDE6DA;color:#0E0D0B}
.btn-2{border-color:var(--accent);color:var(--accent)}
.btn-2:hover{background:var(--accent);color:#0E0D0B}
.btn-ghost{border-color:transparent;letter-spacing:.28em}
.card{background:transparent;text-align:center}
.card h3,.card h4{font-style:italic}
.card-media{border:1px solid var(--border)}
.badge{background:transparent;border:0;color:var(--accent);text-transform:uppercase;letter-spacing:.3em;font-weight:400;padding:0}
.label{font-weight:400;text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;color:var(--muted)}
.input,.select,.textarea{background:transparent;border:0;border-bottom:1px solid var(--border);padding-left:0}
.textarea{border:1px solid var(--border);padding-left:.9em}
.input:focus,.select:focus,.textarea:focus{box-shadow:none;border-color:var(--accent)}
.select option{background:#0E0D0B}
.check:checked::after{border-color:#0E0D0B}.radio:checked::after{background:#0E0D0B}
.switch{background:transparent}.switch::before{background:var(--muted)}.switch:checked::before{background:#0E0D0B}
.alert{background:transparent;border-left-width:1px;font-family:var(--font-d);font-style:italic;font-size:1.1rem}
.alert b{font-style:normal;font-family:var(--font-b);text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;margin-right:.8em}
.progress{height:1px;border:0;background:var(--border)}
.progress i{height:1px}
.tab{text-transform:uppercase;letter-spacing:.24em;font-size:.7rem;font-weight:400}
.tab[aria-selected="true"]{border-bottom-width:1px}
.pager a{border-color:transparent;font-family:var(--font-d);font-size:1.1rem}
.pager a[aria-current]{background:transparent;color:var(--accent);border-color:var(--accent)}
.table-wrap{border-left:0;border-right:0}
.table th{font-family:var(--font-b);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--muted);font-weight:400}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#F4EFE6;
--surface:#FBF8F2;
--surface2:#EEE7DA;
--fg:#1A1714;
--muted:#6B6256;
--border:rgba(140,110,60,.45);
--accent:#8C6A2E;
--accent-fg:#FFFFFF;
--accent2-fg:#1A1714;
--code-bg:#1A1714;
}
html.alt .btn:hover{background:#1A1714;color:#F4EFE6}html.alt .select option{background:#fff}html.alt .check:checked::after{border-color:#fff}html.alt .radio:checked::after,html.alt .switch:checked::before{background:#fff}html.alt .stage{background:#EEE7DA}html.alt .demo{border-color:rgba(140,110,60,.3)!important}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 Parisian leather goods atelier in an authentic Luxury Typography style.
Palette: Noir #0E0D0B, Ivory #EDE6DA, Champagne #C9A96E, Taupe #A99F8E, Umber #2A2621.
Typography: Bodoni Moda 400 for display at very large sizes with italic for emphasis, Tenor Sans in uppercase with 0.28em tracking for labels and buttons.
Layout: Full-height centered hero: tiny tracked kicker, a huge two-line serif headline with the second line italic in champagne, a thin vertical gold rule, a short paragraph and two outlined buttons. Narrow centered columns throughout.
Signature details: Near-black background, ivory text, champagne accent used once per view, hairline translucent gold borders, very wide margins.
Components: Rectangular outlined buttons with wide-tracked uppercase labels, underline-only inputs, centered borderless cards with italic titles, 1px progress lines.
Motion: Slow letter-spacing reveals and faint light sweeps over seven seconds.
Avoid: bold weights, rounded corners, shadows, bright colors, emoji, dense copy, tracked 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.
Didone thins disappear under 24 pixels. Use them only for display text.
Wide letter spacing works for labels, not for paragraphs.
Metallic accents lose value when overused. One gold element per view.
Black and gold alone looks cheap. The quality comes from spacing, scale and restraint.