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

True Dark

OLED-zwart designsysteem met één neon-muntgroen accent, haarlijnen van 1 px en monospace-labels: voor developer-tools, AI-producten en premium tech die in het donker moeten overtuigen.

Bekijk op volledig scherm ↗
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 ]

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

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 →