Vergelijking · gebouwd door Claude Code (Fable 5.1) (WT-002-02-04 (glas en skelet) + WT-05 (toggle) + WT-07 (proefpagina af)) — proefpagina van het ontwerpsysteem van Code Evo, geen website; statische donkere weergave zonder script en zonder themaknop — de toggle staat op de interactieve pagina. Terug naar het overzicht

Ontwerpsysteem · proef

Space black, één signaalkleur, glas als versiering.

Donker is de basis, licht het spiegelbeeld. Elk tekst/achtergrond-paar is gemeten met kleuren.py (19-09-2026, 108 paren); de glaslaag is bonus en nooit dracht.

Plan een gesprek Bekijk de pakketten

Drie glaskaarten

Navigatiebalk

Zweeft boven de inhoud, vervaagt wat eronder scrolt, met een lichtrand. De plaat is gemeten over het grondvlak én over de inkt die eronder kan schuiven.

Kaart

De lichtval verschuift op hover. Staat in de stroom van de pagina op het grondvlak, nooit boven tekst; met breking in Chromium, elders alleen blur.

CTA

Een plaat op vlak-1 met de cyaan knop erop; de knop haalt 3:1 op de plaat en de tekst op de knop 4,5:1 — in beide thema's (gemeten 19-09-2026 met huisstijl/kleuren.py --controleer).

De kleuren, per rol

Elke rol wisselt mee met het thema; de waarden staan in tokens.css, gemeten op 19-09-2026 met huisstijl/kleuren.py --controleer: 108 paren, alles ≥ eis (WCAG 2.2: tekst 4,5:1 volgens 1.4.3, componenten en randen 3:1 volgens 1.4.11).

  • grondhet grondvlak
  • vlak-1secties, kaarten
  • vlak-2tweede niveau
  • vlak-3derde niveau
  • inkttekst en koppen
  • inkt-gedemptbijschriften, ≥ 4,5:1 op elk vlak
  • accentknopvlak, ≥ 3:1 op grond en vlak-1
  • accent-inkttekst óp de knop
  • accent-tekstlinks, labels, lijnen
  • randdecoratief
  • rand-sterkinvoervelden, ≥ 3:1
  • focusde focusring
  • merk-navy#1C1C28, themavast
  • merk-cyaan#1EC1CB, themavast

De type-schaal

Space Grotesk voor koppen (300–700), Manrope voor tekst (200–800), beide lokaal. Vast tot m, vloeiend vanaf l (1,2 op 360 px, 1,333 op 1200 px).

  1. 4xlSpace black.
  2. 3xlEén signaalkleur.
  3. 2xlGlas als versiering.
  4. xlGemeten, niet geschat.
  5. lLopende tekst op maat l, Manrope 400.
  6. mLopende tekst op maat m, de basis: 1 rem, regelafstand 1,55.
  7. sBijschrift op maat s — halfvet 600 en vet 700 bestaan echt.
  8. xsLabel op maat xs, gespatieerd

Knoppen

Cyaan met Deep Navy erop: 7,66:1; wit op cyaan faalt met 2,20:1 (beide gemeten 19-09-2026 met demos/kleur.py contrast(): #1C1C28 en #FFFFFF op #1EC1CB; dezelfde 7,66:1 staat in kleuren.py --controleer als "accent-inkt op accent"). Een knop staat op grond of vlak-1; op vlak-2 en vlak-3 alleen omlijnd.

op grondPlan een gesprek Bekijk de pakketten Klein
op vlak-1Plan een gesprek Omlijnd
op vlak-2: alleen omlijndBekijk de pakketten
op vlak-3: alleen omlijndBekijk de pakketten

Een formulier op donker

Dit blok blijft donker in beide thema's en zet color-scheme: dark, zodat de kalenderknop en de select bij het vlak passen. De tokens heten --donker-*; de veldrand is één trap opgetild tot 3:1 op het vlak.

Proef: deze knop is type="button" en het formulier heeft geen action of method — er wordt niets verzonden, ook niet met Enter.

Het merk

Het woordmerk als paden (Space Grotesk 500), het monogram vlak en rijk, en de favicon op 16, 32 en 64 px.

Het rijke monogram van Code Evo favicon 16 pxfavicon 32 pxfavicon 64 px

Zonder JavaScript

Het enige script van deze proefpagina is thema.js (lokale src, geen inline, geen on*): op de interactieve pagina zet de themaknop het lichte thema aan en onthoudt je keuze op dit apparaat. Zonder script en zonder opgeslagen keuze is de pagina donker; de statische kopieën op het vergelijkingsblad hebben geen script en geen knop. Verder werkt alles zonder JavaScript.

Klaar om te beginnen?

Eén gesprek, daarna een voorstel op maat.

Plan een gesprek