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

True Dark

OLED-black design system with a single neon mint accent, 1 px hairlines and monospace labels: for developer tools, AI products and premium tech that live in dark mode.

View full screen ↗
tokens.csscomponents.tsxpreview build 2.4.1 · 412 ms

/* True Dark · thema 02 */

/* OLED-zwart, één neon-accent, haarlijnen. */

.thema {

  • 01--tdk-bg#000000achtergrond
  • 02--tdk-surface#0C0D0Eoppervlak
  • 03--tdk-ink#EDEFEEtekst
  • 04--tdk-muted#8B918Fgedempt
  • 05--tdk-line#1F2224lijn
  • 06--tdk-accent#00F5A0accent
  • 07--tdk-accent-2#0E3B2Caccent 2
  • 08--tdk-signal#FF4D6Dsignaal

}

Veerkracht CI · Eindhoven

True Dark

Zwart als het scherm uit staat. Eén neon-accent wijst de weg, al het andere is een haarlijn.

~/webshop $ veerkracht deploy --prod

✓ 214 tests geslaagd in 38,2 s

✓ image gebouwd · 61,4 MB

● live op ams-1 · eu-west

// type · Supreme + JetBrains Mono

Deploy in 412 ms

Rollback met één commando

Previews per branch, logs die je kunt doorzoeken en een status die klopt.

mono 13 · 3c9f1e2 · main · 2 min geleden

5632201513

// knoppen

// invoer

livepreviewfailed⌘K

// kaart

api.bakkerijvandam.nllive
p95
84 ms
uptime
99,98%
req/min
1.204

past_bij = [ developer-tools, AI-producten, hosting en cloud, cybersecurity, premium tech-merken ]

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.
<!-- True Dark · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tdk"><div class="tdk__in">
  <div class="tdk__win">
    <div class="tdk__bar">
      <span class="tdk__dots"><i></i><i></i><i></i></span>
      <span class="tdk__tab is-on">tokens.css</span><span class="tdk__tab">components.tsx</span><span class="tdk__tab">preview</span>
      <span class="tdk__status"><i></i>build 2.4.1 · 412 ms</span>
    </div>
    <div class="tdk__body">
      <div class="tdk__code">
        <p class="tdk__cm">/* True Dark · thema 02 */</p>
        <p class="tdk__cm">/* OLED-zwart, één neon-accent, haarlijnen. */</p>
        <p><span class="tdk__k">.thema</span> {</p>
        <ul class="tdk__toks">
          <li><b>01</b><span class="tdk__p">--tdk-bg</span><i style="--c:#000000"></i><span class="tdk__v">#000000</span><em>achtergrond</em></li>
          <li><b>02</b><span class="tdk__p">--tdk-surface</span><i style="--c:#0C0D0E"></i><span class="tdk__v">#0C0D0E</span><em>oppervlak</em></li>
          <li><b>03</b><span class="tdk__p">--tdk-ink</span><i style="--c:#EDEFEE"></i><span class="tdk__v">#EDEFEE</span><em>tekst</em></li>
          <li><b>04</b><span class="tdk__p">--tdk-muted</span><i style="--c:#8B918F"></i><span class="tdk__v">#8B918F</span><em>gedempt</em></li>
          <li><b>05</b><span class="tdk__p">--tdk-line</span><i style="--c:#1F2224"></i><span class="tdk__v">#1F2224</span><em>lijn</em></li>
          <li><b>06</b><span class="tdk__p">--tdk-accent</span><i style="--c:#00F5A0"></i><span class="tdk__v">#00F5A0</span><em>accent</em></li>
          <li><b>07</b><span class="tdk__p">--tdk-accent-2</span><i style="--c:#0E3B2C"></i><span class="tdk__v">#0E3B2C</span><em>accent 2</em></li>
          <li><b>08</b><span class="tdk__p">--tdk-signal</span><i style="--c:#FF4D6D"></i><span class="tdk__v">#FF4D6D</span><em>signaal</em></li>
        </ul>
        <p>}</p>
      </div>
      <div class="tdk__hero">
        <p class="tdk__tag"><i></i>Veerkracht CI · Eindhoven</p>
        <h3 class="tdk__name">True Dark</h3>
        <p class="tdk__mood">Zwart als het scherm uit staat. Eén neon-accent wijst de weg, al het andere is een haarlijn.</p>
        <div class="tdk__term">
          <p><span class="tdk__dim">~/webshop</span> <span class="tdk__acc">$</span> veerkracht deploy --prod</p>
          <p class="tdk__dim">✓ 214 tests geslaagd in 38,2 s</p>
          <p class="tdk__dim">✓ image gebouwd · 61,4 MB</p>
          <p><span class="tdk__acc">●</span> live op ams-1 · eu-west <span class="tdk__cur"></span></p>
        </div>
        <div class="tdk__btns">
          <button class="tdk__btn tdk__btn--p" type="button">Start gratis <kbd>↵</kbd></button>
          <button class="tdk__btn tdk__btn--s" type="button">Documentatie</button>
        </div>
      </div>
    </div>
  </div>
  <div class="tdk__cells">
    <div class="tdk__cell tdk__cell--type">
      <p class="tdk__lbl">// type · Supreme + JetBrains Mono</p>
      <p class="tdk__t1">Deploy in 412 ms</p>
      <p class="tdk__t2">Rollback met één commando</p>
      <p class="tdk__t3">Previews per branch, logs die je kunt doorzoeken en een status die klopt.</p>
      <p class="tdk__t4">mono 13 · 3c9f1e2 · main · 2 min geleden</p>
      <p class="tdk__scale"><span>56</span><span>32</span><span>20</span><span>15</span><span>13</span></p>
    </div>
    <div class="tdk__cell">
      <p class="tdk__lbl">// knoppen</p>
      <div class="tdk__stack">
        <button class="tdk__btn tdk__btn--p" type="button">Deploy</button>
        <button class="tdk__btn tdk__btn--s" type="button">Logs bekijken</button>
        <button class="tdk__btn tdk__btn--g" type="button">Annuleren</button>
        <button class="tdk__btn tdk__btn--p is-hover" type="button">Hover · glow</button>
      </div>
    </div>
    <div class="tdk__cell">
      <p class="tdk__lbl">// invoer</p>
      <label class="tdk__field"><span>project</span><input class="tdk__input" type="text" value="webshop-productie"></label>
      <label class="tdk__field"><span>regio</span><select class="tdk__sel"><option>ams-1 · Amsterdam</option><option>fra-2 · Frankfurt</option></select></label>
      <div class="tdk__badges"><span class="tdk__bdg tdk__bdg--ok">live</span><span class="tdk__bdg">preview</span><span class="tdk__bdg tdk__bdg--err">failed</span><span class="tdk__bdg tdk__bdg--key">⌘K</span></div>
    </div>
    <div class="tdk__cell tdk__cell--card">
      <p class="tdk__lbl">// kaart</p>
      <div class="tdk__card">
        <div class="tdk__chead"><span>api.bakkerijvandam.nl</span><span class="tdk__bdg tdk__bdg--ok">live</span></div>
        <div class="tdk__spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:62%"></i><i style="height:55%"></i><i style="height:70%"></i><i style="height:48%"></i><i style="height:84%"></i><i style="height:66%"></i><i style="height:92%"></i><i style="height:74%"></i><i style="height:58%"></i></div>
        <dl class="tdk__stats"><div><dt>p95</dt><dd>84 ms</dd></div><div><dt>uptime</dt><dd>99,98%</dd></div><div><dt>req/min</dt><dd>1.204</dd></div></dl>
      </div>
    </div>
  </div>
  <p class="tdk__fit"><span class="tdk__acc">past_bij</span> = [ developer-tools, AI-producten, hosting en cloud, cybersecurity, premium tech-merken ]</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 →