NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Refined Brutalist

Neo-brutalist design system: black on white, monospaced text, 3 px borders, hard offset shadows and zero radius. For studios, portfolios and statement brands that stay disciplined.

View full screen ↗

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

How to use it

  1. Paste the HTML where the themes should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. No JavaScript needed.
<!-- 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>

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 →