workbuddy_skills/open-design/design-systems/vercel/DESIGN-nl.md

Ontwerpsysteem geïnspireerd door Vercel

Category: Ontwikkelaarstools Frontend-implementatie. Zwart-witte precisie, Geist-lettertype.

1. Visueel Thema & Sfeer

De website van Vercel is de visuele these van ontwikkelaarsinfrastructuur die onzichtbaar is gemaakt — een ontwerpsysteem zo terughoudend dat het bijna filosofisch aandoet. De pagina is overweldigend wit (#ffffff) met bijna-zwart (#171717) tekst, waardoor een galerij-achtige leegte ontstaat waarin elk element zijn pixel moet verdienen. Dit is geen minimalisme als decoratie; het is minimalisme als ingenieursprincipe. Het Geist-ontwerpsysteem behandelt de interface zoals een compiler code behandelt — elk overbodig token wordt verwijderd totdat alleen structuur overblijft.

De aangepaste Geist-lettertypefamilie is de kroonjuweel. Geist Sans gebruikt agressieve negatieve letterafstand (-2,4px tot -2,88px op weergavegroottes), waardoor koppen ontstaan die gecomprimeerd, urgent en geëngineered aanvoelen — als code die voor productie geminificeerd is. Op tekstgroottes ontspant de spatiëring, maar de geometrische precisie blijft. Geist Mono completeert het systeem als de monospace-metgezel voor code, terminaluitvoer en technische labels. Beide lettertypen schakelen OpenType "liga" (ligaturen) globaal in, wat een laag van typografische verfijning toevoegt die beloont bij aandachtig lezen.

Wat Vercel onderscheidt van andere monochrome ontwerpsystemen is zijn schaduw-als-rand-filosofie. In plaats van traditionele CSS-randen gebruikt Vercel box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08) — een schaduw met nul offset, nul vervaging en 1px verspreiding, die een randachtige lijn creëert zonder de gevolgen van het box-model. Deze techniek laat randen bestaan in de schaduwlaag, waardoor vloeiendere overgangen, afgeronde hoeken zonder knippen en een subtielere visuele zwaarte mogelijk zijn dan traditionele randen. Het volledige dieptesysteem is gebouwd op gelaagde, meervoudige schaduwstapels waarbij elke laag een specifiek doel dient: één voor de rand, één voor zachte verhoging en één voor omgevingsdiepte.

Belangrijkste kenmerken:

• Geist Sans met extreme negatieve letterafstand (-2,4px tot -2,88px op weergave) — tekst als gecomprimeerde infrastructuur
• Geist Mono voor code en technische labels met globaal OpenType "liga"
• Schaduw-als-rand-techniek: box-shadow 0px 0px 0px 1px vervangt overal traditionele randen
• Meervoudige schaduwstapels voor genuanceerde diepte (rand + verhoging + omgeving in enkele declaraties)
• Bijna-puur wit canvas met #171717 tekst — niet helemaal zwart, waardoor micro-contrastzachtheid ontstaat
• Werkstroom-specifieke accentkleuren: Verzend-rood (#ff5b4f), Voorbeeld-roze (#de1d8d), Ontwikkel-blauw (#0a72ef)
• Focusring-systeem met hsla(212, 100%, 48%, 1) — een verzadigd blauw voor toegankelijkheid
• Pill-badges (9999px) met getinte achtergronden voor statusindicatoren

2. Kleurenpalet & Rollen

Primair

• Vercel Zwart (#171717): Primaire tekst, koppen, donkere oppervlakteachtergronden. Niet zuiver zwart — de lichte warmte voorkomt hardheid.
• Puur Wit (#ffffff): Paginaachtergrond, kaartoppervlakken, knoptekst op donker.
• Echt Zwart (#000000): Secundair gebruik, --geist-console-text-color-default, gebruikt in specifieke console-/codecontexten.

Werkstroom-accentkleuren

• Verzend-rood (#ff5b4f): --ship-text, de "verzenden naar productie"-werkstroomstap — warm, urgent koraalrood.
• Voorbeeld-roze (#de1d8d): --preview-text, de voorbeeldimplementatiewerkstroom — levendig magentaroze.
• Ontwikkel-blauw (#0a72ef): --develop-text, de ontwikkelingswerkstroom — helder, gefocust blauw.

Console-/codekleuren

• Consoleblauw (#0070f3): --geist-console-text-color-blue, syntaxisaccentuering blauw.
• Consolepaars (#7928ca): --geist-console-text-color-purple, syntaxisaccentuering paars.
• Consoleroze (#eb367f): --geist-console-text-color-pink, syntaxisaccentuering roze.

Interactief

• Linkblauw (#0072f5): Primaire linkkleur met onderstrepingsdecoratie.
• Focusblauw (hsla(212, 100%, 48%, 1)): --ds-focus-color, focusring op interactieve elementen.
• Ringblauw (rgba(147, 197, 253, 0.5)): --tw-ring-color, Tailwind ring-hulpklasse.

Neutralenschaal

• Grijs 900 (#171717): Primaire tekst, koppen, navigatietekst.
• Grijs 600 (#4d4d4d): Secundaire tekst, beschrijvingstekst.
• Grijs 500 (#666666): Tertiaire tekst, gedempte links.
• Grijs 400 (#808080): Plaatsaanduidingstekst, uitgeschakelde toestanden.
• Grijs 100 (#ebebeb): Randen, kaartcontouren, scheidslijnen.
• Grijs 50 (#fafafa): Subtiele oppervlaktetint, binnenste schaduwmarkering.

Oppervlak & Overlay

• Overlay-achtergrond (hsla(0, 0%, 98%, 1)): --ds-overlay-backdrop-color, modaal/dialoogachtergrond.
• Selectietekst (hsla(0, 0%, 95%, 1)): --geist-selection-text-color, tekstselectiemarkering.
• Badge blauw achtergrond (#ebf5ff): Pill-badge-achtergrond, getint blauw oppervlak.
• Badge blauw tekst (#0068d6): Pill-badge-tekst, donkerder blauw voor leesbaarheid.

Schaduwen & Diepte

• Randschaduw (rgba(0, 0, 0, 0.08) 0px 0px 0px 1px): De handtekening — vervangt traditionele randen.
• Subtiele verhoging (rgba(0, 0, 0, 0.04) 0px 2px 2px): Minimale lift voor kaarten.
• Kaartstapel (rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px): Volledige meervoudige kaartschaduw.
• Ringrand (rgb(235, 235, 235) 0px 0px 0px 1px): Lichtgrijze ringrand voor tabbladen en afbeeldingen.

3. Typografieregels

Lettertypefamilie

• Primair: Geist, met fallbacks: Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Monospace: Geist Mono, met fallbacks: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New
• OpenType-functies: "liga" globaal ingeschakeld op alle Geist-tekst; "tnum" voor tabulaire cijfers op specifieke bijschriften.

Hiërarchie

Rol	Lettertype	Grootte	Gewicht	Regelhoogte	Letterafstand	Opmerkingen
Display Hero	Geist	48px (3.00rem)	600	1.00–1.17 (strak)	-2.4px tot -2.88px	Maximale compressie, billboard-impact
Sectiekop	Geist	40px (2.50rem)	600	1.20 (strak)	-2.4px	Functiesectietitels
Grote subkop	Geist	32px (2.00rem)	600	1.25 (strak)	-1.28px	Kaartkoppen, subsecties
Subkop	Geist	32px (2.00rem)	400	1.50	-1.28px	Lichtere subkoppen
Kaarttitel	Geist	24px (1.50rem)	600	1.33	-0.96px	Functiekaarten
Lichte kaarttitel	Geist	24px (1.50rem)	500	1.33	-0.96px	Secundaire kaartkoppen
Grote hoofdtekst	Geist	20px (1.25rem)	400	1.80 (ontspannen)	normal	Introducties, functiebeschrijvingen
Hoofdtekst	Geist	18px (1.13rem)	400	1.56	normal	Standaard leestekst
Kleine hoofdtekst	Geist	16px (1.00rem)	400	1.50	normal	Standaard UI-tekst
Middelhoofdtekst	Geist	16px (1.00rem)	500	1.50	normal	Navigatie, benadrukte tekst
Halfvette hoofdtekst	Geist	16px (1.00rem)	600	1.50	-0.32px	Sterke labels, actieve toestanden
Knop / Link	Geist	14px (0.88rem)	500	1.43	normal	Knoppen, links, bijschriften
Kleine knop	Geist	14px (0.88rem)	400	1.00 (strak)	normal	Compacte knoppen
Bijschrift	Geist	12px (0.75rem)	400–500	1.33	normal	Metadata, tags
Mono hoofdtekst	Geist Mono	16px (1.00rem)	400	1.50	normal	Codeblokken
Mono bijschrift	Geist Mono	13px (0.81rem)	500	1.54	normal	Codelabels
Kleine mono	Geist Mono	12px (0.75rem)	500	1.00 (strak)	normal	text-transform: uppercase, technische labels
Micro-badge	Geist	7px (0.44rem)	700	1.00 (strak)	normal	text-transform: uppercase, kleine badges

Principes

• Compressie als identiteit: Geist Sans op weergavegroottes gebruikt -2,4px tot -2,88px letterafstand — de meest agressieve negatieve spatiëring van elk groot ontwerpsysteem. Dit creëert tekst die geminificeerd aanvoelt, als code geoptimaliseerd voor productie. De spatiëring ontspant progressief naarmate de grootte afneemt: -1,28px op 32px, -0,96px op 24px, -0,32px op 16px en normaal op 14px.
• Ligaturen overal: Elk Geist-tekstelement schakelt OpenType "liga" in. Ligaturen zijn niet decoratief — ze zijn structureel en creëren strakke, efficiëntere glyph-combinaties.
• Drie gewichten, strikte rollen: 400 (hoofdtekst/lezen), 500 (UI/interactief), 600 (koppen/nadruk). Geen vet (700) behalve voor kleine micro-badges. Dit smalle gewichtsbereik creëert hiërarchie door grootte en spatiëring, niet door gewicht.
• Mono als identiteit: Geist Mono in hoofdletters met "tnum" of "liga" dient als de "ontwikkelaarsconsole"-stem — compacte technische labels die de marketingsite verbinden met het product.

4. Componentstijlen

Knoppen

Primair wit (schaduwomrand)

• Achtergrond: #ffffff
• Tekst: #171717
• Opvulling: 0px 6px (minimaal — inhoudsgestuurde breedte)
• Radius: 6px (subtiel afgerond)
• Schaduw: rgb(235, 235, 235) 0px 0px 0px 1px (ringrand)
• Hover: achtergrond verschuift naar var(--ds-gray-1000) (donker)
• Focus: 2px solid var(--ds-focus-color) omtrek + var(--ds-focus-ring) schaduw
• Gebruik: Standaard secundaire knop

Primair donker (afgeleid uit Geist-systeem)

• Achtergrond: #171717
• Tekst: #ffffff
• Opvulling: 8px 16px
• Radius: 6px
• Gebruik: Primaire CTA ("Start Deploying", "Get Started")

Pill-knop / Badge

• Achtergrond: #ebf5ff (getint blauw)
• Tekst: #0068d6
• Opvulling: 0px 10px
• Radius: 9999px (volledige pill)
• Lettertype: 12px gewicht 500
• Gebruik: Statusbadges, tags, functielabels

Grote pill (navigatie)

• Achtergrond: transparant of #171717
• Radius: 64px–100px
• Gebruik: Tabbladnavigatie, sectieselectoren

Kaarten & Containers

• Achtergrond: #ffffff
• Rand: via schaduw — rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Radius: 8px (standaard), 12px (uitgelichte/afbeeldingskaarten)
• Schaduwstapel: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px
• Afbeeldingskaarten: 1px solid #ebebeb met 12px bovenste radius
• Hover: subtiele schaduwintensivering

Invoervelden & Formulieren

• Radio: standaardstijl met focus var(--ds-gray-200) achtergrond
• Focusschaduw: 1px 0 0 0 var(--ds-gray-alpha-600)
• Focusomtrek: 2px solid var(--ds-focus-color) — consistente blauwe focusring
• Rand: via schaduw-techniek, niet traditionele rand

Navigatie

• Schone horizontale navigatie op wit, sticky
• Vercel-woordmerk links uitgelijnd, 262x52px
• Links: Geist 14px gewicht 500, #171717 tekst
• Actief: gewicht 600 of onderstreping
• CTA: donkere pill-knoppen ("Start Deploying", "Contact Sales")
• Mobiel: hamburgermenu inklapbaar
• Product-dropdowns met meervoudige menu's

Afbeeldingsbehandeling

• Productschermafbeeldingen met 1px solid #ebebeb rand
• Bovenafgeronde afbeeldingen: 12px 12px 0px 0px radius
• Dashboard-/codevoorbeeldschermafbeeldingen domineren functiesecties
• Zachte verloopachtergronden achter hero-afbeeldingen (pastel multicolor)

Onderscheidende componenten

Werkstroompijplijn

• Drietraps horizontale pijplijn: Ontwikkelen → Voorbeeld → Verzenden
• Elke stap heeft zijn eigen accentkleur: Blauw → Roze → Rood
• Verbonden met lijnen/pijlen
• De visuele metafoor voor Vercels kernwaardepropositie

Vertrouwensbalk / Logoraster

• Bedrijfslogo's (Perplexity, ChatGPT, Cursor, enz.) in grijswaarden
• Horizontaal scrollen of rasterindeling
• Subtiele #ebebeb randscheiding

Metriekkaarten

• Grote cijferweergave (bijv. "10x sneller")
• Geist 48px gewicht 600 voor de metriek
• Beschrijving eronder in grijze hoofdtekst
• Schaduwomrande kaartcontainer

5. Layoutprincipes

Afstandssysteem

• Basiséénheid: 8px
• Schaal: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
• Opvallende sprong: van 16px naar 32px — geen 20px of 24px in primaire schaal

Raster & Container

• Maximale inhoudbreedte: ongeveer 1200px
• Hero: gecentreerde enkele kolom met ruime bovenopvulling
• Functiesecties: 2–3 kolomrasters voor kaarten
• Volledige breedte-scheidslijnen met border-bottom: 1px solid #171717
• Code-/dashboardschermafbeeldingen als volledig-breedte of ingesloten met rand

Witruimtefilosofie

• Galerij-leegte: Enorme verticale opvulling tussen secties (80px–120px+). De witruimte IS het ontwerp — het communiceert dat Vercel niets te bewijzen en niets te verbergen heeft.
• Gecomprimeerde tekst, uitgebreide ruimte: De agressieve negatieve letterafstand op koppen wordt gecompenseerd door royale omliggende witruimte. De tekst is dicht; de ruimte eromheen is uitgestrekt.
• Sectieritme: Witte secties wisselen af met witte secties — er is geen kleurvariatie tussen secties. Scheiding komt uitsluitend van randen (schaduwranden) en afstand.

Grensradius-schaal

• Micro (2px): Inline-codefragmenten, kleine spans
• Subtiel (4px): Kleine containers
• Standaard (6px): Knoppen, links, functionele elementen
• Comfortabel (8px): Kaarten, lijstitems
• Afbeelding (12px): Uitgelichte kaarten, afbeeldingscontainers (bovenafgerond)
• Groot (64px): Tabbladnavigatiepills
• XL (100px): Grote navigatielinks
• Volledige pill (9999px): Badges, statuspills, tags
• Cirkel (50%): Menuschakelaar, avatar-containers

6. Diepte & Verhoging

Niveau	Behandeling	Gebruik
Vlak (niveau 0)	Geen schaduw	Paginaachtergrond, tekstblokken
Ring (niveau 1)	rgba(0,0,0,0.08) 0px 0px 0px 1px	Schaduw-als-rand voor de meeste elementen
Lichte ring (niveau 1b)	rgb(235,235,235) 0px 0px 0px 1px	Lichtere ring voor tabbladen, afbeeldingen
Subtiele kaart (niveau 2)	Ring + rgba(0,0,0,0.04) 0px 2px 2px	Standaardkaarten met minimale lift
Volledige kaart (niveau 3)	Ring + Subtiel + rgba(0,0,0,0.04) 0px 8px 8px -8px + binnenste #fafafa ring	Uitgelichte kaarten, gemarkeerde panelen
Focus (toegankelijkheid)	2px solid hsla(212, 100%, 48%, 1) omtrek	Toetsenbordfocus op alle interactieve elementen

Schaduwfilosofie: Vercel heeft aantoonbaar het meest verfijnde schaduwsysteem in modern webontwerp. In plaats van schaduwen te gebruiken voor verhoging in de traditionele Material Design-zin, gebruikt Vercel meervoudige schaduwstapels waarbij elke laag een duidelijk architecturaal doel heeft: één creëert de "rand" (0px verspreiding, 1px), een andere voegt omgevingszachtheid toe (2px vervaging), een andere verwerkt diepte op afstand (8px vervaging met negatieve verspreiding), en een binnenring (#fafafa) creëert de subtiele markering die de kaart "gloeit" van binnenuit. Deze gelaagde aanpak laat kaarten gebouwd aanvoelen, niet zwevend.

Decoratieve diepte

• Hero-verloop: zacht, pastel multicolor verloopwas achter hero-inhoud (nauwelijks zichtbaar, atmosferisch)
• Sectieranden: 1px solid #171717 (volledige donkere lijn) tussen grote secties
• Geen achtergrondkleurvariatie — diepte komt volledig van schaduwlagen en randcontrast

7. Doe's en Verboden

Doe

• Gebruik Geist Sans met agressieve negatieve letterafstand op weergavegroottes (-2,4px tot -2,88px op 48px)
• Gebruik schaduw-als-rand (0px 0px 0px 1px rgba(0,0,0,0.08)) in plaats van traditionele CSS-randen
• Schakel "liga" in op alle Geist-tekst — ligaturen zijn structureel, niet optioneel
• Gebruik het driegewichtssysteem: 400 (hoofdtekst), 500 (UI), 600 (koppen)
• Pas werkstroom-accentkleuren (rood/roze/blauw) alleen toe in hun werkstroomcontext
• Gebruik meervoudige schaduwstapels voor kaarten (rand + verhoging + omgeving + binnenste markering)
• Houd het kleurenpalet achromatisch — grijzen van #171717 tot #ffffff zijn het systeem
• Gebruik #171717 in plaats van #000000 voor primaire tekst — de micro-warmte maakt verschil

Verboden

• Gebruik geen positieve letterafstand op Geist Sans — het is altijd negatief of nul
• Gebruik geen gewicht 700 (vet) op hoofdtekst — 600 is het maximum, alleen voor koppen
• Gebruik geen traditionele CSS border op kaarten — gebruik de schaduwrandtechniek
• Introduceer geen warme kleuren (oranje, geel, groen) in de UI-shell
• Pas de werkstroom-accentkleuren (Verzend-rood, Voorbeeld-roze, Ontwikkel-blauw) niet decoratief toe
• Gebruik geen zware schaduwen (> 0,1 dekking) — het schaduwsysteem is fluisterzacht
• Vergroot de letterafstand van de hoofdtekst niet — Geist is ontworpen om strak te lopen
• Gebruik geen pill-radius (9999px) op primaire actieknoppen — pills zijn alleen voor badges/tags
• Sla de binnenste #fafafa ring in kaartschaduwen niet over — het is de gloed die het systeem laat werken

8. Responsief Gedrag

Breekpunten

Naam	Breedte	Belangrijkste wijzigingen
Kleine mobiel	<400px	Strakke enkele kolom, minimale opvulling
Mobiel	400–600px	Standaard mobiel, gestapelde indeling
Kleine tablet	600–768px	2-kolomrasters beginnen
Tablet	768–1024px	Volledige kaartrasters, uitgebreide opvulling
Kleine desktop	1024–1200px	Standaard desktopindeling
Desktop	1200–1400px	Volledige indeling, maximale inhoudsbreedte
Grote desktop	>1400px	Gecentreerd, ruime marges

Aanraakvlakken

• Knoppen gebruiken comfortabele opvulling (8px–16px verticaal)
• Navigatielinks op 14px met voldoende afstand
• Pill-badges hebben 10px horizontale opvulling voor aanraakvlakken
• Mobiele menutoggle gebruikt een cirkelvormige knop met 50% radius

Inklap-strategie

• Hero: weergave 48px → schaalt omlaag, behoudt negatieve spatiëring proportioneel
• Navigatie: horizontale links + CTA's → hamburgermenu
• Functiekaarten: 3 kolommen → 2 kolommen → enkele gestapelde kolom
• Codeschermafbeeldingen: behoudt beeldverhouding, kan horizontaal scrollen
• Vertrouwensbalklogo's: raster → horizontaal scrollen
• Voettekst: meerdere kolommen → enkele gestapelde kolom
• Sectieafstand: 80px+ → 48px op mobiel

Afbeeldingsgedrag

• Dashboardschermafbeeldingen behouden randbehandeling op alle groottes
• Hero-verloop wordt zachter/vereenvoudigd op mobiel
• Productschermafbeeldingen gebruiken responsieve afbeeldingen met consistente randradius
• Volledig-breedte secties behouden rand-tot-rand-behandeling

9. Agentpromptgids

Snelle kleurverwijzing

• Primaire CTA: Vercel Zwart (#171717)
• Achtergrond: Puur Wit (#ffffff)
• Koptekst: Vercel Zwart (#171717)
• Hoofdtekst: Grijs 600 (#4d4d4d)
• Rand (schaduw): rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Link: Linkblauw (#0072f5)
• Focusring: Focusblauw (hsla(212, 100%, 48%, 1))

Voorbeeldcomponentprompts

• "Maak een hero-sectie op witte achtergrond. Kop op 48px Geist gewicht 600, regelhoogte 1.00, letterafstand -2.4px, kleur #171717. Ondertitel op 20px Geist gewicht 400, regelhoogte 1.80, kleur #4d4d4d. Donkere CTA-knop (#171717, 6px radius, 8px 16px opvulling) en ghost-knop (wit, schaduwrand rgba(0,0,0,0.08) 0px 0px 0px 1px, 6px radius)."
• "Ontwerp een kaart: witte achtergrond, geen CSS-rand. Gebruik schaduwstapel: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Radius 8px. Titel op 24px Geist gewicht 600, letterafstand -0.96px. Hoofdtekst op 16px gewicht 400, #4d4d4d."
• "Bouw een pill-badge: #ebf5ff achtergrond, #0068d6 tekst, 9999px radius, 0px 10px opvulling, 12px Geist gewicht 500."
• "Maak navigatie: witte sticky header. Geist 14px gewicht 500 voor links, #171717 tekst. Donkere pill-CTA 'Start Deploying' rechts uitgelijnd. Schaduwrand onderaan: rgba(0,0,0,0.08) 0px 0px 0px 1px."
• "Ontwerp een werkstroomsectie met drie stappen: Ontwikkelen (tekstkleur #0a72ef), Voorbeeld (#de1d8d), Verzenden (#ff5b4f). Elke stap: 14px Geist Mono hoofdletters label + 24px Geist gewicht 600 titel + 16px gewicht 400 beschrijving in #4d4d4d."

Iteratiegids

1. Gebruik altijd schaduw-als-rand in plaats van CSS-rand — 0px 0px 0px 1px rgba(0,0,0,0.08) is het fundament
2. Letterafstand schaalt met de lettergrootte: -2,4px op 48px, -1,28px op 32px, -0,96px op 24px, normaal op 14px
3. Slechts drie gewichten: 400 (lezen), 500 (interageren), 600 (aankondigen)
4. Kleur is functioneel, nooit decoratief — werkstroomkleuren (rood/roze/blauw) markeren alleen pijplijnfasen
5. De binnenste #fafafa ring in kaartschaduwen is wat Vercel-kaarten hun subtiele binnenste gloed geeft
6. Geist Mono hoofdletters voor technische labels, Geist Sans voor al het andere