Luxe Noir Nieuw
Bijna zwart met champagne-haarlijnen, een dunne serif en wijd gespatieerde kapitalen, symmetrisch opgebouwd. Voor juweliers, cocktailbars, hotels en exclusieve diensten.
N° 05ThemaMMXXVI
Luxe Noir
Weinig licht, veel aandacht. Champagne als enige glans, letters die fluisteren.
- achtergrond
#0B0B0A - oppervlak
#151412 - tekst
#EDE6D8 - gedempt
#8E8676 - lijn
#3A352C - accent
#CDB38A - accent-2
#7D6A4C - signaal
#9E2B25
Typografie
Aa
Bespoke Serif Light · Supreme
- Solitair
40 - Geelgoud, 18 karaat
24 - Handgezet in ons atelier.
14 - Op afspraak
11
Maison Verlaan · Noordeinde, Den Haag
Ringen die één keer gemaakt worden.
Ontwerp en vervaardiging op afspraak, sinds 1961 in de Hofstad.
Elementen
UnicumOp maatGereserveerd
Collectie Hofvijver
Ring met oud-geslepen diamant, 0,72 ct
€ 8.450
Past bij juweliers · cocktailbars · boetiekhotels · wijnhuizen · privéklinieken · notarissen in het hogere segment
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Geen JavaScript nodig.
<!-- Luxe Noir · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tln-thm"><div class="tln-frame">
<i class="tln-corner tln-corner--tl"></i><i class="tln-corner tln-corner--tr"></i><i class="tln-corner tln-corner--bl"></i><i class="tln-corner tln-corner--br"></i>
<div class="tln-top"><span>N° 05</span><span>Thema</span><span>MMXXVI</span></div>
<h3 class="tln-title">Luxe <em>Noir</em></h3>
<p class="tln-mood">Weinig licht, veel aandacht. Champagne als enige glans, letters die fluisteren.</p>
<ul class="tln-pal">
<li><i style="background:var(--tln-bg)"></i><b>achtergrond</b><code>#0B0B0A</code></li>
<li><i style="background:var(--tln-surface)"></i><b>oppervlak</b><code>#151412</code></li>
<li><i style="background:var(--tln-text)"></i><b>tekst</b><code>#EDE6D8</code></li>
<li><i style="background:var(--tln-muted)"></i><b>gedempt</b><code>#8E8676</code></li>
<li><i style="background:var(--tln-line)"></i><b>lijn</b><code>#3A352C</code></li>
<li><i style="background:var(--tln-accent)"></i><b>accent</b><code>#CDB38A</code></li>
<li><i style="background:var(--tln-accent-2)"></i><b>accent-2</b><code>#7D6A4C</code></li>
<li><i style="background:var(--tln-signal)"></i><b>signaal</b><code>#9E2B25</code></li>
</ul>
<div class="tln-cols">
<div class="tln-col">
<p class="tln-lbl">Typografie</p>
<p class="tln-spec">Aa</p>
<p class="tln-specname">Bespoke Serif Light · Supreme</p>
<ul class="tln-scale"><li><span style="font:300 30px/1 var(--tln-display)">Solitair</span><code>40</code></li><li><span style="font:300 22px/1 var(--tln-display);font-style:italic">Geelgoud, 18 karaat</span><code>24</code></li><li><span style="font-size:14px">Handgezet in ons atelier.</span><code>14</code></li><li><span class="tln-caps">Op afspraak</span><code>11</code></li></ul>
</div>
<div class="tln-col tln-col--mid">
<div class="tln-hero">
<div class="tln-hero__img" role="img" aria-label="Werkbank van een juwelier met een gouden ring"></div>
<div class="tln-hero__txt">
<p class="tln-caps">Maison Verlaan · Noordeinde, Den Haag</p>
<h4>Ringen die één keer gemaakt worden.</h4>
<p>Ontwerp en vervaardiging op afspraak, sinds 1961 in de Hofstad.</p>
<button class="tln-btn tln-btn--p" type="button">Maak een afspraak</button>
</div>
</div>
</div>
<div class="tln-col">
<p class="tln-lbl">Elementen</p>
<div class="tln-btns"><button class="tln-btn tln-btn--p" type="button">Afspraak</button><button class="tln-btn tln-btn--s" type="button">Collectie</button><button class="tln-btn tln-btn--g" type="button">Het atelier</button></div>
<label class="tln-f"><span>Naam</span><input type="text" placeholder="Mevrouw Van Lier"></label>
<label class="tln-f"><span>Gelegenheid</span><select><option>Verloving</option><option>Huwelijk</option><option>Jubileum</option></select></label>
<div class="tln-badges"><span class="tln-bd">Unicum</span><span class="tln-bd tln-bd--a">Op maat</span><span class="tln-bd tln-bd--s">Gereserveerd</span></div>
<div class="tln-card"><p class="tln-caps">Collectie Hofvijver</p><p class="tln-card__t">Ring met oud-geslepen diamant, 0,72 ct</p><p class="tln-card__p">€ 8.450</p></div>
</div>
</div>
<p class="tln-fit"><span>Past bij</span> juweliers · cocktailbars · boetiekhotels · wijnhuizen · privéklinieken · notarissen in het hogere segment</p>
</div></div>
</div>/* Luxe Noir · NedDev · eigen werk. */
/* fonts (Fontshare): bespoke-serif@300,400,301 + supreme@300,400,500 */
.tln-thm{--tln-bg:#0B0B0A;--tln-surface:#151412;--tln-text:#EDE6D8;--tln-muted:#8E8676;--tln-line:#3A352C;--tln-accent:#CDB38A;--tln-accent-2:#7D6A4C;--tln-signal:#9E2B25;--tln-radius:0;--tln-display:'Bespoke Serif',serif;--tln-body:'Supreme',sans-serif;container:tln/inline-size;background:var(--tln-bg);color:var(--tln-text);font:300 14px/1.6 var(--tln-body);padding:28px}
.tln-thm,.tln-thm *{box-sizing:border-box}
.tln-frame{position:relative;border:1px solid var(--tln-line);padding:34px 40px 26px;text-align:center}
.tln-corner{position:absolute;width:18px;height:18px;border:0 solid var(--tln-accent)}
.tln-corner--tl{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.tln-corner--tr{right:-1px;top:-1px;border-right-width:1px;border-top-width:1px}
.tln-corner--bl{left:-1px;bottom:-1px;border-left-width:1px;border-bottom-width:1px}
.tln-corner--br{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
.tln-top{display:flex;justify-content:space-between;font:400 10px/1 var(--tln-body);letter-spacing:.4em;text-transform:uppercase;color:var(--tln-muted);border-bottom:1px solid var(--tln-line);padding-bottom:14px}
.tln-title{margin:26px 0 8px;font:300 clamp(48px,7cqw,88px)/1 var(--tln-display);letter-spacing:.04em}
.tln-title em{font-style:italic;color:var(--tln-accent)}
.tln-mood{margin:0 auto 24px;max-width:46ch;color:var(--tln-muted);font-size:15px}
.tln-pal{list-style:none;margin:0 auto 30px;padding:18px 0;display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--tln-line);border-bottom:1px solid var(--tln-line);max-width:980px}
.tln-pal li{display:flex;flex-direction:column;align-items:center;gap:4px;border-right:1px solid var(--tln-line)}
.tln-pal li:last-child{border-right:0}
.tln-pal i{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px var(--tln-line),0 0 0 4px var(--tln-bg),0 0 0 5px rgba(205,179,138,.25);margin-bottom:8px}
.tln-pal b{font:400 9px/1 var(--tln-body);letter-spacing:.24em;text-transform:uppercase;color:var(--tln-muted)}
.tln-pal code{font:400 11px 'JetBrains Mono',monospace;color:var(--tln-accent)}
.tln-cols{display:grid;grid-template-columns:1fr 1.5fr 1fr;text-align:left}
.tln-col{padding:0 28px;min-width:0}
.tln-col--mid{border-left:1px solid var(--tln-line);border-right:1px solid var(--tln-line);padding:0}
.tln-lbl{margin:0 0 14px;font:400 10px/1 var(--tln-body);letter-spacing:.36em;text-transform:uppercase;color:var(--tln-accent)}
.tln-spec{margin:0;font:300 96px/.9 var(--tln-display);color:var(--tln-text)}
.tln-specname{margin:6px 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tln-muted)}
.tln-scale{list-style:none;margin:0;padding:0}
.tln-scale li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--tln-line);white-space:nowrap;overflow:hidden}
.tln-scale code{font:400 10px 'JetBrains Mono',monospace;color:var(--tln-muted)}
.tln-caps{margin:0;font:400 10px/1.4 var(--tln-body);letter-spacing:.32em;text-transform:uppercase;color:var(--tln-accent)}
.tln-hero{position:relative;height:100%;min-height:330px;display:flex;flex-direction:column}
.tln-hero__img{flex:1;min-height:170px;background:linear-gradient(180deg,transparent 55%,var(--tln-bg)),url('https://neddev.com/lab-media/thm-luxe-noir-1.webp') 45% 55%/cover}
.tln-hero__txt{padding:0 28px 6px;text-align:center}
.tln-hero__txt h4{margin:10px 0 8px;font:300 30px/1.1 var(--tln-display)}
.tln-hero__txt p:not(.tln-caps){margin:0 0 16px;color:var(--tln-muted)}
.tln-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tln-btn{font:400 10px/1 var(--tln-body);letter-spacing:.3em;text-transform:uppercase;padding:14px 18px;border:1px solid var(--tln-accent);border-radius:var(--tln-radius);cursor:pointer;transition:background .4s,color .4s,letter-spacing .4s}
.tln-btn--p{background:var(--tln-accent);color:var(--tln-bg)}
.tln-btn--p:hover{background:transparent;color:var(--tln-accent)}
.tln-btn--s{background:transparent;color:var(--tln-accent)}
.tln-btn--s:hover{background:var(--tln-accent);color:var(--tln-bg)}
.tln-btn--g{background:none;border-color:transparent;color:var(--tln-text);padding-left:0;padding-right:0}
.tln-btn--g:hover{letter-spacing:.4em;color:var(--tln-accent)}
.tln-f{min-width:0;display:flex;flex-direction:column;gap:4px;margin-bottom:12px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--tln-muted)}
.tln-f input,.tln-f select{font:300 15px var(--tln-display);color:var(--tln-text);background:transparent;border:0;border-bottom:1px solid var(--tln-line);border-radius:0;padding:7px 0;outline:0;letter-spacing:0;text-transform:none;min-width:0}
.tln-f select option{background:var(--tln-surface)}
.tln-f input:focus,.tln-f select:focus{border-bottom-color:var(--tln-accent)}
.tln-badges{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px}
.tln-bd{font:400 9px/1 var(--tln-body);letter-spacing:.26em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--tln-line);color:var(--tln-muted)}
.tln-bd--a{border-color:var(--tln-accent-2);color:var(--tln-accent)}
.tln-bd--s{background:var(--tln-signal);border-color:var(--tln-signal);color:var(--tln-text)}
.tln-card{background:var(--tln-surface);border:1px solid var(--tln-line);padding:14px 16px;transition:border-color .4s}
.tln-card:hover{border-color:var(--tln-accent)}
.tln-card__t{margin:6px 0 4px;font:300 18px/1.25 var(--tln-display)}
.tln-card__p{margin:0;font:400 13px var(--tln-body);letter-spacing:.1em;color:var(--tln-accent);font-variant-numeric:tabular-nums}
.tln-fit{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--tln-line);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tln-muted)}
.tln-fit span{color:var(--tln-accent)}
@container tln (max-width:980px){.tln-pal{grid-template-columns:repeat(4,1fr);row-gap:16px}.tln-pal li:nth-child(4){border-right:0}.tln-cols{grid-template-columns:1fr 1fr}.tln-col--mid{grid-column:1/-1;order:-1;border:0;border-bottom:1px solid var(--tln-line);margin-bottom:24px}}
@container tln (max-width:620px){.tln-thm{padding:12px}.tln-frame{padding:24px 16px 20px}.tln-cols{grid-template-columns:1fr}.tln-col{padding:0 0 24px}.tln-top span:nth-child(2){display:none}.tln-pal b{font-size:8px;letter-spacing:.12em}}
@media (prefers-reduced-motion:reduce){.tln-btn,.tln-card{transition:none}}
Meer uit thema's
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →