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

Clean Light

Light, neutral design system with a single fresh mint accent, soft frames and crisp tabular numbers: for software, B2B and financial services that want calm precision.

View full screen ↗

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

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.
<!-- 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>

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 →