NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Refined Brutalist

Neo-brutalistisch designsysteem: zwart op wit, monospace-tekst, randen van 3 px, harde offset-schaduw en nul radius. Voor studio's, portfolio's en merken die een statement willen maken zonder rommelig te worden.

Bekijk op volledig scherm ↗

THM/03

Refined
Brutalist

Hard, eerlijk en strak gemaakt. Geen ronding, geen verloop: alleen randen, ritme en één gele markering.

0 px radius
3 px rand
6/6 schaduw

01Achtergrond#FFFFFF
02Oppervlak#EFEDE6
03Tekst#0A0A0A
04Gedempt#55534E
05Lijn#0A0A0A · 3px
06Accent#FFE600
07Accent 2#2B4BFF
08Signaal#FF3B1F

[ TYPE ] Cabinet Grotesk 900 / JetBrains Mono 400

Aa
  1. WERK 202644
  2. Identiteit voor Kade24
  3. Bodytekst in mono, 13 px, regelafstand 1,6. Leest als een werkdocument, niet als reclame.13
  4. LABEL · 11 PX11

[ KNOPPEN ]

[ FORMULIER ]

NIEUWIDENTITEITWEBVOL TOT JAN

[ KAART ]

KADE

CASE 14 · 2026 · ROTTERDAM

Nieuwe huisstijl voor zeilmakerij Kade & Zn.

STUDIO KADEWerkStudioJournalContact
01Zeilmakerij Kade & Zn.Identiteit, web2026
02Brouwerij NoordschansEtiketten, verpakking2025
03Architectenbureau VlakWebsite, fotografie2025
04Festival MaasoeverCampagne, signing2024

PAST BIJ ontwerpstudio's · fotografen en portfolio's · architecten · platenlabels · merken met een uitgesproken mening

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Geen JavaScript nodig.
<!-- Refined Brutalist · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tbr"><div class="tbr__in">
  <div class="tbr__mast">
    <p class="tbr__no">THM/03</p>
    <h3 class="tbr__name">Refined<br>Brutalist</h3>
    <p class="tbr__mood">Hard, eerlijk en strak gemaakt. Geen ronding, geen verloop: alleen randen, ritme en één gele markering.</p>
    <p class="tbr__stamp">0 px radius<br>3 px rand<br>6/6 schaduw</p>
  </div>
  <div class="tbr__pal">
    <div class="tbr__sw" style="--c:#FFFFFF;--t:#0A0A0A"><b>01</b><span>Achtergrond</span><code>#FFFFFF</code></div>
    <div class="tbr__sw" style="--c:#EFEDE6;--t:#0A0A0A"><b>02</b><span>Oppervlak</span><code>#EFEDE6</code></div>
    <div class="tbr__sw" style="--c:#0A0A0A;--t:#FFFFFF"><b>03</b><span>Tekst</span><code>#0A0A0A</code></div>
    <div class="tbr__sw" style="--c:#55534E;--t:#FFFFFF"><b>04</b><span>Gedempt</span><code>#55534E</code></div>
    <div class="tbr__sw" style="--c:#0A0A0A;--t:#FFFFFF"><b>05</b><span>Lijn</span><code>#0A0A0A · 3px</code></div>
    <div class="tbr__sw" style="--c:#FFE600;--t:#0A0A0A"><b>06</b><span>Accent</span><code>#FFE600</code></div>
    <div class="tbr__sw" style="--c:#2B4BFF;--t:#FFFFFF"><b>07</b><span>Accent 2</span><code>#2B4BFF</code></div>
    <div class="tbr__sw" style="--c:#FF3B1F;--t:#0A0A0A"><b>08</b><span>Signaal</span><code>#FF3B1F</code></div>
  </div>
  <div class="tbr__grid">
    <div class="tbr__box tbr__type">
      <p class="tbr__lbl">[ TYPE ] Cabinet Grotesk 900 / JetBrains Mono 400</p>
      <div class="tbr__spec"><span class="tbr__aa">Aa</span>
        <ol class="tbr__scale">
          <li><span class="tbr__s1">WERK 2026</span><em>44</em></li>
          <li><span class="tbr__s2">Identiteit voor Kade</span><em>24</em></li>
          <li><span class="tbr__s3">Bodytekst in mono, 13 px, regelafstand 1,6. Leest als een werkdocument, niet als reclame.</span><em>13</em></li>
          <li><span class="tbr__s4">LABEL · 11 PX</span><em>11</em></li>
        </ol>
      </div>
    </div>
    <div class="tbr__box tbr__ui">
      <p class="tbr__lbl">[ KNOPPEN ]</p>
      <div class="tbr__btns">
        <button class="tbr__btn tbr__btn--p" type="button">Project starten</button>
        <button class="tbr__btn tbr__btn--s" type="button">Bekijk werk</button>
        <button class="tbr__btn tbr__btn--g" type="button">Lees meer →</button>
        <button class="tbr__btn tbr__btn--p is-hover" type="button">Hover: inzakken</button>
      </div>
      <p class="tbr__lbl">[ FORMULIER ]</p>
      <div class="tbr__form">
        <label class="tbr__field"><span>E-MAIL</span><input class="tbr__input" type="text" value="jij@voorbeeld.nl"></label>
        <label class="tbr__field"><span>BUDGET</span><select class="tbr__sel"><option>€ 8k tot 15k</option><option>€ 15k of meer</option></select></label>
      </div>
      <div class="tbr__badges"><span class="tbr__bdg tbr__bdg--y">NIEUW</span><span class="tbr__bdg">IDENTITEIT</span><span class="tbr__bdg tbr__bdg--b">WEB</span><span class="tbr__bdg tbr__bdg--r">VOL TOT JAN</span></div>
    </div>
    <div class="tbr__box tbr__card">
      <p class="tbr__lbl">[ KAART ]</p>
      <div class="tbr__case">
        <div class="tbr__case-img"><span>KADE</span></div>
        <div class="tbr__case-body"><p class="tbr__case-meta">CASE 14 · 2026 · ROTTERDAM</p><p class="tbr__case-t">Nieuwe huisstijl voor zeilmakerij Kade &amp; Zn.</p></div>
      </div>
    </div>
  </div>
  <div class="tbr__site">
    <div class="tbr__nav"><b>STUDIO KADE</b><span>Werk</span><span>Studio</span><span>Journal</span><span class="tbr__nav-cta">Contact</span></div>
    <div class="tbr__index">
      <div class="tbr__row"><span>01</span><span>Zeilmakerij Kade &amp; Zn.</span><span>Identiteit, web</span><span>2026</span></div>
      <div class="tbr__row"><span>02</span><span>Brouwerij Noordschans</span><span>Etiketten, verpakking</span><span>2025</span></div>
      <div class="tbr__row"><span>03</span><span>Architectenbureau Vlak</span><span>Website, fotografie</span><span>2025</span></div>
      <div class="tbr__row"><span>04</span><span>Festival Maasoever</span><span>Campagne, signing</span><span>2024</span></div>
    </div>
  </div>
  <p class="tbr__fit"><b>PAST BIJ</b> ontwerpstudio's · fotografen en portfolio's · architecten · platenlabels · merken met een uitgesproken mening</p>
</div></div>
</div>

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 →