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

Clean Light

Licht, neutraal designsysteem met één frisse muntgroene accentkleur, zachte kaders en strakke cijfers: voor software, B2B en financiële dienstverleners die rust en precisie willen uitstralen.

Bekijk op volledig scherm ↗

Thema · Clean Light

Clean Light

Neutraal en precies. Eén frisse accentkleur doet het werk, de rest krijgt ruimte en een dunne lijn.

Radius
8 / 12 px
Lijn
1 px
Raster
4 px
Font
General Sans

Kleurtokens

  • Achtergrond--tcl-bg#F7F7F5
  • Oppervlak--tcl-surface#FFFFFF
  • Tekst--tcl-ink#16181D
  • Gedempt--tcl-muted#5E6470
  • Lijn--tcl-line#E4E4E0
  • Accent--tcl-accent#0C8A68
  • Accent 2--tcl-accent-2#DDF2EA
  • Signaal--tcl-signal#D9480F

Ruimte · 4 px-stap

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48

Schaduw

smmd

Typografie · General Sans

  1. Overzicht in één blik40 / 600
  2. Facturen deze maand28 / 600
  3. Openstaand bij klanten20 / 500
  4. Je btw-aangifte over Q3 is voorbereid en wacht op je controle.16 / 400
  5. Laatst bijgewerkt 7 okt 2026, 09:1413 / 500

Componenten

Betaald Concept Verlopen Q3 2026
Omzet okt€ 18.420,75
Openstaand€ 3.112,00
Gem. betaling11,4 dgn

Nieuw · automatische btw-check

Je btw-aangifte staat klaar voordat je eraan denkt.

Factuurflow koppelt je bankrekening, herkent 94 procent van je bonnetjes zelf en zet alles per kwartaal voor je klaar. Voor zzp'ers en kleine bv's.

Facturen · oktober
2026-0412Bakkerij Van Dam, Deventer€ 1.248,50Betaald
2026-0413Kapsalon Noor, Zwolle€ 386,00Verstuurd
2026-0414Installatiebedrijf Hofman€ 2.904,10Verlopen
2026-0415Stichting Oude Haven€ 640,00Betaald

Past bij SaaS en apps · boekhoud- en HR-software · B2B-dienstverlening · fintech · adviesbureaus met een online portaal

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.
<!-- Clean Light · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tcl"><div class="tcl__in">
  <div class="tcl__head">
    <div>
      <p class="tcl__eye">Thema · Clean Light</p>
      <h3 class="tcl__name">Clean Light</h3>
      <p class="tcl__mood">Neutraal en precies. Eén frisse accentkleur doet het werk, de rest krijgt ruimte en een dunne lijn.</p>
    </div>
    <dl class="tcl__specs">
      <div><dt>Radius</dt><dd>8 / 12 px</dd></div>
      <div><dt>Lijn</dt><dd>1 px</dd></div>
      <div><dt>Raster</dt><dd>4 px</dd></div>
      <div><dt>Font</dt><dd>General Sans</dd></div>
    </dl>
  </div>
  <div class="tcl__grid">
    <div class="tcl__rail">
      <p class="tcl__lbl">Kleurtokens</p>
      <ul class="tcl__tokens">
        <li><span class="tcl__sw" style="--c:#F7F7F5"></span><span class="tcl__tn">Achtergrond<small>--tcl-bg</small></span><code>#F7F7F5</code></li>
        <li><span class="tcl__sw" style="--c:#FFFFFF"></span><span class="tcl__tn">Oppervlak<small>--tcl-surface</small></span><code>#FFFFFF</code></li>
        <li><span class="tcl__sw" style="--c:#16181D"></span><span class="tcl__tn">Tekst<small>--tcl-ink</small></span><code>#16181D</code></li>
        <li><span class="tcl__sw" style="--c:#5E6470"></span><span class="tcl__tn">Gedempt<small>--tcl-muted</small></span><code>#5E6470</code></li>
        <li><span class="tcl__sw" style="--c:#E4E4E0"></span><span class="tcl__tn">Lijn<small>--tcl-line</small></span><code>#E4E4E0</code></li>
        <li><span class="tcl__sw" style="--c:#0C8A68"></span><span class="tcl__tn">Accent<small>--tcl-accent</small></span><code>#0C8A68</code></li>
        <li><span class="tcl__sw" style="--c:#DDF2EA"></span><span class="tcl__tn">Accent 2<small>--tcl-accent-2</small></span><code>#DDF2EA</code></li>
        <li><span class="tcl__sw" style="--c:#D9480F"></span><span class="tcl__tn">Signaal<small>--tcl-signal</small></span><code>#D9480F</code></li>
      </ul>
      <p class="tcl__lbl tcl__lbl--sp">Ruimte · 4 px-stap</p>
      <ul class="tcl__space">
        <li><i style="width:4px"></i>4</li><li><i style="width:8px"></i>8</li><li><i style="width:12px"></i>12</li><li><i style="width:16px"></i>16</li><li><i style="width:24px"></i>24</li><li><i style="width:32px"></i>32</li><li><i style="width:48px"></i>48</li>
      </ul>
      <p class="tcl__lbl tcl__lbl--sp">Schaduw</p>
      <div class="tcl__shadows"><span class="tcl__sh1">sm</span><span class="tcl__sh2">md</span></div>
    </div>
    <div class="tcl__main">
      <div class="tcl__row">
        <div class="tcl__card tcl__type">
          <p class="tcl__lbl">Typografie · General Sans</p>
          <ol class="tcl__scale">
            <li><span class="tcl__s1">Overzicht in één blik</span><em>40 / 600</em></li>
            <li><span class="tcl__s2">Facturen deze maand</span><em>28 / 600</em></li>
            <li><span class="tcl__s3">Openstaand bij klanten</span><em>20 / 500</em></li>
            <li><span class="tcl__s4">Je btw-aangifte over Q3 is voorbereid en wacht op je controle.</span><em>16 / 400</em></li>
            <li><span class="tcl__s5">Laatst bijgewerkt 7 okt 2026, 09:14</span><em>13 / 500</em></li>
          </ol>
        </div>
        <div class="tcl__card tcl__ui">
          <p class="tcl__lbl">Componenten</p>
          <div class="tcl__btns">
            <button class="tcl__btn tcl__btn--p" type="button">Factuur maken</button>
            <button class="tcl__btn tcl__btn--s" type="button">Exporteren</button>
            <button class="tcl__btn tcl__btn--g" type="button">Annuleren</button>
            <button class="tcl__btn tcl__btn--p is-hover" type="button">Hover</button>
          </div>
          <div class="tcl__form">
            <label class="tcl__field"><span>Klantnaam</span><input class="tcl__in-put" type="text" value="Bakkerij Van Dam"></label>
            <label class="tcl__field"><span>Betaaltermijn</span><select class="tcl__sel"><option>14 dagen</option><option>30 dagen</option></select></label>
          </div>
          <div class="tcl__badges">
            <span class="tcl__bdg tcl__bdg--ok">Betaald</span>
            <span class="tcl__bdg">Concept</span>
            <span class="tcl__bdg tcl__bdg--warn">Verlopen</span>
            <span class="tcl__bdg tcl__bdg--out">Q3 2026</span>
          </div>
          <div class="tcl__kpi">
            <div><span>Omzet okt</span><strong>€ 18.420,75</strong></div>
            <div><span>Openstaand</span><strong>€ 3.112,00</strong></div>
            <div><span>Gem. betaling</span><strong>11,4 dgn</strong></div>
          </div>
        </div>
      </div>
      <div class="tcl__hero">
        <div class="tcl__hcopy">
          <p class="tcl__pill"><i></i>Nieuw · automatische btw-check</p>
          <h4 class="tcl__htitle">Je btw-aangifte staat klaar voordat je eraan denkt.</h4>
          <p class="tcl__hsub">Factuurflow koppelt je bankrekening, herkent 94 procent van je bonnetjes zelf en zet alles per kwartaal voor je klaar. Voor zzp'ers en kleine bv's.</p>
          <div class="tcl__btns"><button class="tcl__btn tcl__btn--p" type="button">30 dagen proberen</button><button class="tcl__btn tcl__btn--g" type="button">Bekijk de demo</button></div>
        </div>
        <div class="tcl__app">
          <div class="tcl__appbar"><span></span><span></span><span></span><b>Facturen · oktober</b></div>
          <table class="tcl__tbl">
            <tr><td>2026-0412</td><td>Bakkerij Van Dam, Deventer</td><td>€ 1.248,50</td><td><span class="tcl__bdg tcl__bdg--ok">Betaald</span></td></tr>
            <tr><td>2026-0413</td><td>Kapsalon Noor, Zwolle</td><td>€ 386,00</td><td><span class="tcl__bdg">Verstuurd</span></td></tr>
            <tr><td>2026-0414</td><td>Installatiebedrijf Hofman</td><td>€ 2.904,10</td><td><span class="tcl__bdg tcl__bdg--warn">Verlopen</span></td></tr>
            <tr><td>2026-0415</td><td>Stichting Oude Haven</td><td>€ 640,00</td><td><span class="tcl__bdg tcl__bdg--ok">Betaald</span></td></tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <p class="tcl__fit"><b>Past bij</b> SaaS en apps · boekhoud- en HR-software · B2B-dienstverlening · fintech · adviesbureaus met een online portaal</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 →