Warm Editorial
Magazine system on a warm charcoal-brown base with a terracotta accent, a tight grotesque for headlines and a readable serif for long text: for magazines, longreads and food.
Rubriek · Thuis koken
Stamppot is geen wintereten meer
Drie koks uit Deventer, Leiden en Groningen herschrijven het boerenrecept. Minder room, meer zuur, en de rookworst mag blijven.
Tekst Saskia Mulder · Beeld Joost van Eck · 9 min lezen

Er zijn gerechten die je niet uitlegt, je zet ze op tafel. Stamppot hoort daarbij. Toch zag Mirjam Kok in haar restaurant aan de Brink de borden steeds vaker half leeg terugkomen. "Mensen willen het herkennen, maar niet zwaar eten," zegt ze.
Haar oplossing is eenvoudig. Ze kookt de aardappels in de schil, stampt ze grof met een scheut karnemelk en voegt de boerenkool pas op het laatst toe, rauw en fijngesneden. Recept op pagina 22
14Eetkamer · herfst 2026
Colofon · kleur
- Achtergrond
#241B16 - Oppervlak
#2F241E - Tekst
#F1E6DA - Gedempt
#B9A797 - Lijn
#4A3A30 - Accent: terracotta
#D2643F - Accent 2: oker
#D9A441 - Signaal: nieuw
#9DBF7E
Colofon · letter
Author koppen
Erode lopende tekst
| Kop | Author 600 | 44/48 |
| Intro | Erode 400 cursief | 20/30 |
| Brood | Erode 400 | 16/26 |
| Kicker | Author 600 kapitaal | 11/14 |
Abonneren
Vier nummers per jaar, gratis bezorgd.
Waarom elke Twentse bakker zijn eigen krentenwegge heeft
Pagina 38 · 6 min lezen
Past bij: magazines, longreads, foodblogs, restaurants, uitgeverijen15
How to use it
- Paste the HTML where the themes should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Warm Editorial · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="twe"><div class="twe__in">
<div class="twe__mast">
<span class="twe__mast-l">Thema 05 · Warm Editorial</span>
<span class="twe__title">Eetkamer</span>
<span class="twe__mast-r">Nummer 14 · Herfst 2026 · € 9,95</span>
</div>
<div class="twe__spread">
<div class="twe__page twe__page--l">
<p class="twe__kick">Rubriek · Thuis koken</p>
<h3 class="twe__h">Stamppot is geen wintereten meer</h3>
<p class="twe__stand">Drie koks uit Deventer, Leiden en Groningen herschrijven het boerenrecept. Minder room, meer zuur, en de rookworst mag blijven.</p>
<p class="twe__by">Tekst Saskia Mulder · Beeld Joost van Eck · 9 min lezen</p>
<figure class="twe__fig"><img src="https://neddev.com/lab-media/thm-warm-editorial-1.webp" alt="Stamppot met rookworst in een terracotta schaal op een donkere houten tafel" loading="lazy"><figcaption>Boerenkool met gerookte worst, roggebrood en een lepel mosterdzuur. Foto genomen in de keuken van Herberg De Waag.</figcaption></figure>
<div class="twe__cols">
<p><span class="twe__drop">E</span>r zijn gerechten die je niet uitlegt, je zet ze op tafel. Stamppot hoort daarbij. Toch zag Mirjam Kok in haar restaurant aan de Brink de borden steeds vaker half leeg terugkomen. "Mensen willen het herkennen, maar niet zwaar eten," zegt ze.</p>
<p>Haar oplossing is eenvoudig. Ze kookt de aardappels in de schil, stampt ze grof met een scheut karnemelk en voegt de boerenkool pas op het laatst toe, rauw en fijngesneden. <span class="twe__note">Recept op pagina 22</span></p>
</div>
<p class="twe__folio"><span>14</span>Eetkamer · herfst 2026</p>
</div>
<div class="twe__page twe__page--r">
<div class="twe__block">
<p class="twe__bh">Colofon · kleur</p>
<ul class="twe__col">
<li><i style="--c:#241B16"></i><span>Achtergrond</span><code>#241B16</code></li>
<li><i style="--c:#2F241E"></i><span>Oppervlak</span><code>#2F241E</code></li>
<li><i style="--c:#F1E6DA"></i><span>Tekst</span><code>#F1E6DA</code></li>
<li><i style="--c:#B9A797"></i><span>Gedempt</span><code>#B9A797</code></li>
<li><i style="--c:#4A3A30"></i><span>Lijn</span><code>#4A3A30</code></li>
<li><i style="--c:#D2643F"></i><span>Accent: terracotta</span><code>#D2643F</code></li>
<li><i style="--c:#D9A441"></i><span>Accent 2: oker</span><code>#D9A441</code></li>
<li><i style="--c:#9DBF7E"></i><span>Signaal: nieuw</span><code>#9DBF7E</code></li>
</ul>
</div>
<div class="twe__block">
<p class="twe__bh">Colofon · letter</p>
<div class="twe__type">
<p class="twe__ty1">Author <span>koppen</span></p>
<p class="twe__ty2">Erode <span>lopende tekst</span></p>
</div>
<table class="twe__scale">
<tr><td>Kop</td><td>Author 600</td><td>44/48</td></tr>
<tr><td>Intro</td><td>Erode 400 cursief</td><td>20/30</td></tr>
<tr><td>Brood</td><td>Erode 400</td><td>16/26</td></tr>
<tr><td>Kicker</td><td>Author 600 kapitaal</td><td>11/14</td></tr>
</table>
</div>
<div class="twe__block twe__sub">
<p class="twe__bh">Abonneren</p>
<p class="twe__subt">Vier nummers per jaar, gratis bezorgd.</p>
<div class="twe__form">
<input class="twe__input" type="text" value="Anne de Wit" aria-label="Naam">
<select class="twe__sel" aria-label="Abonnement"><option>Jaar · € 34,50</option><option>Proef · 2 nummers € 12</option></select>
</div>
<div class="twe__btns">
<button class="twe__btn twe__btn--p" type="button">Abonneer</button>
<button class="twe__btn twe__btn--s" type="button">Los nummer</button>
<button class="twe__btn twe__btn--g" type="button">Inkijken</button>
<button class="twe__btn twe__btn--p is-hover" type="button">Hover</button>
</div>
</div>
<div class="twe__block twe__card">
<p class="twe__tags"><span class="twe__tag twe__tag--a">Recept</span><span class="twe__tag">Reportage</span><span class="twe__tag twe__tag--o">Wijn</span><span class="twe__tag twe__tag--n">Nieuw</span></p>
<p class="twe__card-t">Waarom elke Twentse bakker zijn eigen krentenwegge heeft</p>
<p class="twe__card-m">Pagina 38 · 6 min lezen</p>
</div>
<p class="twe__folio twe__folio--r">Past bij: magazines, longreads, foodblogs, restaurants, uitgeverijen<span>15</span></p>
</div>
</div>
</div></div>
</div>/* Warm Editorial · NedDev · eigen werk. */
/* fonts (Fontshare): author@400,500,600,700 + erode@400,500,600 */
.twe{--twe-bg:#241B16;--twe-surface:#2F241E;--twe-ink:#F1E6DA;--twe-muted:#B9A797;--twe-line:#4A3A30;--twe-accent:#D2643F;--twe-accent-2:#D9A441;--twe-signal:#9DBF7E;--twe-display:'Author',sans-serif;--twe-serif:'Erode',Georgia,serif;
container-type:inline-size;background:var(--twe-bg);color:var(--twe-ink);font-family:var(--twe-serif);font-variant-numeric:tabular-nums oldstyle-nums}
.twe *{box-sizing:border-box}
.twe__in{padding:28px 44px 30px;max-width:1280px;margin:0 auto}
.twe__mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-bottom:14px;border-bottom:4px double var(--twe-line);font:500 12px var(--twe-display);letter-spacing:.06em;text-transform:uppercase;color:var(--twe-muted)}
.twe__mast-r{text-align:right}
.twe__title{font:700 64px/.9 var(--twe-display);letter-spacing:-.04em;text-transform:none;color:var(--twe-ink)}
.twe__spread{display:grid;grid-template-columns:1.55fr 1fr;gap:0;margin-top:26px}
.twe__page--l{padding-right:36px;border-right:1px solid var(--twe-line)}
.twe__page--r{padding-left:36px}
.twe__kick{margin:0 0 12px;font:600 11px var(--twe-display);letter-spacing:.14em;text-transform:uppercase;color:var(--twe-accent)}
.twe__h{margin:0;font:600 48px/1.02 var(--twe-display);letter-spacing:-.03em;max-width:15ch}
.twe__stand{margin:14px 0 10px;font-size:20px;line-height:1.5;font-style:italic;color:var(--twe-ink);max-width:46ch}
.twe__by{margin:0 0 18px;font:500 12px var(--twe-display);color:var(--twe-muted)}
.twe__fig{margin:0 0 18px;display:grid;grid-template-columns:1fr 190px;gap:16px;align-items:end}
.twe__fig img{display:block;width:100%;height:220px;object-fit:cover;filter:sepia(.12) saturate(.95)}
.twe__fig figcaption{font-size:13px;line-height:1.5;font-style:italic;color:var(--twe-muted);border-top:1px solid var(--twe-accent);padding-top:8px}
.twe__cols{columns:2;column-gap:30px;column-rule:1px solid var(--twe-line);font-size:16px;line-height:1.65}
.twe__cols p{margin:0 0 12px}
.twe__drop{float:left;font:600 62px/.8 var(--twe-display);color:var(--twe-accent);margin:6px 8px 0 0}
.twe__note{display:block;margin-top:10px;font:600 11px var(--twe-display);letter-spacing:.12em;text-transform:uppercase;color:var(--twe-accent-2)}
.twe__folio{margin:16px 0 0;padding-top:10px;border-top:1px solid var(--twe-line);font:500 11px var(--twe-display);color:var(--twe-muted);display:flex;gap:14px;align-items:baseline;letter-spacing:.04em}
.twe__folio span{font-weight:700;color:var(--twe-ink);font-size:13px}
.twe__folio--r{justify-content:space-between}
.twe__block{padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid var(--twe-line)}
.twe__bh{margin:0 0 10px;font:600 11px var(--twe-display);letter-spacing:.14em;text-transform:uppercase;color:var(--twe-accent)}
.twe__col{list-style:none;margin:0;padding:0;columns:2;column-gap:20px}
.twe__col li{display:grid;grid-template-columns:12px auto 1fr auto;align-items:baseline;gap:6px;font-size:13.5px;line-height:1.95;break-inside:avoid}
.twe__col li::after{content:"";grid-column:3;grid-row:1;border-bottom:1px dotted var(--twe-line);transform:translateY(-4px)}
.twe__col i{width:10px;height:10px;background:var(--c);box-shadow:0 0 0 1px rgba(241,230,218,.25);align-self:center}
.twe__col code{grid-column:4;font:500 11.5px var(--twe-display);color:var(--twe-muted)}
.twe__type{display:flex;gap:22px;align-items:baseline;margin-bottom:6px}
.twe__ty1{margin:0;font:600 34px/1 var(--twe-display);letter-spacing:-.03em}
.twe__ty2{margin:0;font:400 34px/1 var(--twe-serif);font-style:italic}
.twe__type span{display:block;font:500 11px var(--twe-display);font-style:normal;letter-spacing:.04em;color:var(--twe-muted);margin-top:4px}
.twe__scale{width:100%;border-collapse:collapse;font:400 13px var(--twe-display)}
.twe__scale td{padding:5px 0;border-top:1px solid var(--twe-line)}.twe__scale td:first-child{color:var(--twe-muted);width:22%}.twe__scale td:last-child{text-align:right;font-weight:600}
.twe__subt{margin:0 0 10px;font-size:15px;font-style:italic;color:var(--twe-muted)}
.twe__form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.twe__input,.twe__sel{width:100%;font:400 15px var(--twe-serif);color:var(--twe-ink);background:transparent;border:0;border-bottom:1px solid var(--twe-muted);padding:8px 2px;outline:none;border-radius:0;transition:border-color .15s}
.twe__sel{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#B9A797 50%),linear-gradient(135deg,#B9A797 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.twe__sel option{background:#2F241E}
.twe__input:focus,.twe__sel:focus{border-bottom-color:var(--twe-accent)}
.twe__btns{display:flex;flex-wrap:wrap;gap:8px}
.twe__btn{font:600 13px/1 var(--twe-display);letter-spacing:.02em;padding:10px 14px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.twe__btn--p{background:var(--twe-accent);color:#1E1510}
.twe__btn--p:hover,.twe__btn--p.is-hover{background:var(--twe-ink);color:var(--twe-bg)}
.twe__btn--s{background:transparent;color:var(--twe-ink);border-color:var(--twe-muted)}.twe__btn--s:hover{border-color:var(--twe-ink)}
.twe__btn--g{background:transparent;color:var(--twe-accent-2);text-decoration:underline;text-underline-offset:4px;padding-left:4px;padding-right:4px}.twe__btn--g:hover{color:var(--twe-ink)}
.twe__card{border-bottom:0;margin-bottom:0;cursor:default}
.twe__tags{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.twe__tag{font:600 10.5px/1 var(--twe-display);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border:1px solid var(--twe-line);color:var(--twe-muted)}
.twe__tag--a{background:var(--twe-accent);border-color:var(--twe-accent);color:#1E1510}.twe__tag--o{color:var(--twe-accent-2);border-color:var(--twe-accent-2)}.twe__tag--n{color:var(--twe-signal);border-color:var(--twe-signal)}
.twe__card-t{margin:0;font:600 22px/1.15 var(--twe-display);letter-spacing:-.015em;transition:color .15s}
.twe__card:hover .twe__card-t{color:var(--twe-accent)}
.twe__card-m{margin:6px 0 0;font-size:13px;font-style:italic;color:var(--twe-muted)}
@container (max-width:960px){.twe__spread{grid-template-columns:1fr}.twe__page--l{padding-right:0;border-right:0;padding-bottom:22px;border-bottom:4px double var(--twe-line);margin-bottom:22px}.twe__page--r{padding-left:0}}
@container (max-width:620px){.twe__in{padding:20px 16px}.twe__mast{grid-template-columns:1fr;gap:6px;text-align:left}.twe__mast-r{text-align:left}.twe__title{font-size:48px;order:-1}.twe__h{font-size:34px}.twe__stand{font-size:18px}.twe__fig{grid-template-columns:1fr}.twe__fig img{height:190px}.twe__cols{columns:1}.twe__col{columns:1}.twe__form{grid-template-columns:1fr}.twe__type{flex-direction:column;gap:10px}}
@media (prefers-reduced-motion:reduce){.twe *{transition:none!important}}
More themes
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →