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

Ontwerpsysteem geïnspireerd op NVIDIA

Categorie: Media & Consument GPU-computing. Groen-zwarte energie, esthetiek van technische kracht.

1. Visueel thema & sfeer

De website van NVIDIA is een hoogcontrasterende, technologiegerichte ervaring die ruwe rekenkracht communiceert via ontwerpbeheersing. De pagina is opgebouwd op een strak zwart (#000000) en wit (#ffffff) fundament, onderbroken door NVIDIA's kenmerkende groen (#76b900) -- een kleur die zo specifiek is dat ze als merkvingerafdruk fungeert. Dit is niet het weelderige groen van de natuur; het is het elektrische, limoenachtige groen van GPU-gerenderd licht, een kleur die ergens tussen chartreuse en kelly green in zit en bij iedereen in de technologiewereld onmiddellijk "NVIDIA" roept.

De custom lettertypefamilie NVIDIA-EMEA (met Arial en Helvetica als fallbacks) creëert een strakke, industriële typografische stem. Koppen van 36px vet met een strakke regelafstand van 1.25 vormen dichte, gezaghebbende tekstblokken. Het lettertype mist de geometrische speelsheid van Silicon Valley-schreefloze lettertypen -- het is Europees, pragmatisch en ingenieursmatig van aard. Bodytekst staat op 15-16px, comfortabel om te lezen maar niet royaal, waardoor het gevoel blijft dat schermruimte geoptimaliseerd wordt als GPU-geheugen.

Wat NVIDIA's ontwerp onderscheidt van andere technologiesites met donkere achtergrond, is het gedisciplineerde gebruik van het groene accent. De #76b900 verschijnt in randen (2px solid #76b900), koppelingsonderstrepingen (underline 2px rgb(118, 185, 0)) en CTA's -- maar nooit als achtergrond of grote vlakken in de hoofdinhoud. Het groen is een signaal, geen oppervlak. Gecombineerd met een diep schaduwsysteem (rgba(0, 0, 0, 0.3) 0px 0px 5px) en minimale randafronding (1-2px) ontstaat het totaaleffect van precisie-engineeringshardware weergegeven in pixels.

Kernkenmerken:

• NVIDIA Green (#76b900) als puur accent -- uitsluitend voor randen, onderstrepingen en interactieve highlights
• Zwart (#000000) als dominante achtergrond met wit (#ffffff) tekst op donkere secties
• Custom lettertype NVIDIA-EMEA met Arial/Helvetica fallback -- industrieel, Europees, strak
• Strakke regelafstanden (1.25 voor koppen) die dichte, gezaghebbende tekstblokken creëren
• Minimale randafronding (1-2px) -- scherpe, geëngineerde hoeken door de hele interface
• Groen omlijnde knoppen (2px solid #76b900) als primair interactiepatroon
• Font Awesome 6 Pro/Sharp icoonssysteem op gewicht 900 voor scherpe iconografie
• Multi-framework architectuur (PrimeReact, Fluent UI, Element Plus) voor rijke interactieve componenten

2. Kleurenpalet & rollen

Primair merk

• NVIDIA Green (#76b900): Het kenmerk -- randen, koppelingsonderstrepingen, CTA-contouren, actieve indicatoren. Nooit gebruikt als grote vlakopvulling.
• Echt zwart (#000000): Primaire paginaachtergrond, tekst op lichte vlakken, dominante toon.
• Puur wit (#ffffff): Tekst op donkere achtergronden, lichte sectieachtergronden, kaartoppervlakken.

Uitgebreid merkpalet

• NVIDIA Green Light (#bff230): Helder limoenaccent voor highlights en hover-toestanden.
• Orange 400 (#df6500): Warm accent voor waarschuwingen, uitgelichte badges of energiegerelateerde contexten.
• Yellow 300 (#ef9100): Secundair warm accent, highlights voor productcategorieën.
• Yellow 050 (#feeeb2): Licht warm vlak voor callout-achtergronden.

Status & semantiek

• Red 500 (#e52020): Fouttoestanden, destructieve acties, kritieke waarschuwingen.
• Red 800 (#650b0b): Donkerrood voor ernstige waarschuwingsachtergronden.
• Green 500 (#3f8500): Succestoestanden, positieve indicatoren (donkerder dan merkgroen).
• Blue 700 (#0046a4): Informatieve accenten, alternatief voor koppeling hover.

Decoratief

• Purple 800 (#4d1368): Diep paars voor kleurovergangeinden, premium/AI-contexten.
• Purple 100 (#f9d4ff): Licht paars oppervlaktint.
• Fuchsia 700 (#8c1c55): Rijk accent voor speciale promoties of uitgelichte inhoud.

Neutrale schaal

• Gray 300 (#a7a7a7): Gedempte tekst, uitgeschakelde labels.
• Gray 400 (#898989): Secundaire tekst, metadata.
• Gray 500 (#757575): Tertiaire tekst, placeholders, voetteksten.
• Gray Border (#5e5e5e): Subtiele randen, scheidingslijnen.
• Near Black (#1a1a1a): Donkere vlakken, kaartachtergronden op zwarte pagina's.

Interactieve toestanden

• Koppeling standaard (donkere achtergrond) (#ffffff): Witte koppelingen op donkere achtergronden.
• Koppeling standaard (lichte achtergrond) (#000000): Zwarte koppelingen met groene onderstreping op lichte achtergronden.
• Koppeling hover (#3860be): Blauwe verschuiving bij hover op alle koppelingsVarianten.
• Knop hover (#1eaedb): Teal-highlight voor hover-toestanden van knoppen.
• Knop actief (#007fff): Helder blauw voor actieve/ingedrukte knoppen.
• Focusring (#000000 solid 2px): Zwarte contour voor toetsenbordfocus.

Schaduwen & diepte

• Kaartschaduw (rgba(0, 0, 0, 0.3) 0px 0px 5px 0px): Subtiele omgevingsschaduw voor verheven kaarten.

3. Typografieregels

Lettertypefamilie

• Primair: NVIDIA-EMEA, met fallbacks: Arial, Helvetica, sans-serif
• Icoonfont: Font Awesome 6 Pro (gewicht 900 voor solid-iconen, 700 voor regulier)
• Icoon Scherp: Font Awesome 6 Sharp (gewicht 300 voor lichte iconen, 400 voor regulier)

Hiërarchie

Rol	Lettertype	Grootte	Gewicht	Regelafstand	Letterspatiëring	Opmerkingen
Display Hero	NVIDIA-EMEA	36px (2.25rem)	700	1.25 (strak)	normaal	Koppen met maximale impact
Sectiekop	NVIDIA-EMEA	24px (1.50rem)	700	1.25 (strak)	normaal	Sectietitels, kaartkoppen
Subkop	NVIDIA-EMEA	22px (1.38rem)	400	1.75 (ruim)	normaal	Functieomschrijvingen, ondertitels
Kaarttitel	NVIDIA-EMEA	20px (1.25rem)	700	1.25 (strak)	normaal	Kaart- en modulekoppen
Body groot	NVIDIA-EMEA	18px (1.13rem)	700	1.67 (ruim)	normaal	Benadrukte bodytekst, introparagrafen
Body	NVIDIA-EMEA	16px (1.00rem)	400	1.50	normaal	Standaard leestekst
Body vet	NVIDIA-EMEA	16px (1.00rem)	700	1.50	normaal	Sterke labels, navigatie-items
Body klein	NVIDIA-EMEA	15px (0.94rem)	400	1.67 (ruim)	normaal	Secundaire inhoud, beschrijvingen
Body klein vet	NVIDIA-EMEA	15px (0.94rem)	700	1.50	normaal	Benadrukte secundaire inhoud
Knop groot	NVIDIA-EMEA	18px (1.13rem)	700	1.25 (strak)	normaal	Primaire CTA-knoppen
Knop	NVIDIA-EMEA	16px (1.00rem)	700	1.25 (strak)	normaal	Standaard knoppen
Knop compact	NVIDIA-EMEA	14.4px (0.90rem)	700	1.00 (strak)	0.144px	Kleine/compacte knoppen
Koppeling	NVIDIA-EMEA	14px (0.88rem)	700	1.43	normaal	Navigatiekoppelingen
Koppeling hoofdletters	NVIDIA-EMEA	14px (0.88rem)	700	1.43	normaal	text-transform: uppercase, navigatielabels
Bijschrift	NVIDIA-EMEA	14px (0.88rem)	600	1.50	normaal	Metadata, tijdstempels
Bijschrift klein	NVIDIA-EMEA	12px (0.75rem)	400	1.25 (strak)	normaal	Kleine letters, juridische tekst
Micro-label	NVIDIA-EMEA	10px (0.63rem)	700	1.50	normaal	text-transform: uppercase, minuscule badges
Micro	NVIDIA-EMEA	11px (0.69rem)	700	1.00 (strak)	normaal	Kleinste UI-tekst

Principes

• Vet als standaardstem: NVIDIA leunt zwaar op gewicht 700 voor koppen, knoppen, koppelingen en labels. Gewicht 400 is gereserveerd voor bodytekst en beschrijvingen -- al het andere is vet, wat zelfvertrouwen en gezag uitstraalt.
• Strakke koppen, ruimere bodytekst: De regelafstand van koppen is consequent 1.25 (strak), terwijl bodytekst ontspant naar 1.50-1.67. Dit contrast creëert visuele dichtheid bovenaan inhoudsblokken en comfortabele leesbaarheid in alinea's.
• Hoofdletters voor navigatie: Koppelingslabels gebruiken text-transform: uppercase met gewicht 700, waardoor een navigatiestem ontstaat die aanvoelt als hardwarespecificatielabels.
• Geen decoratieve spatiëring: Letterspatiëring is normaal door de hele interface, behalve voor compacte knoppen (0.144px). Het lettertype draagt het industriële karakter zonder manipulatie.

4. Componentopmaak

Knoppen

Primair (groene rand)

• Achtergrond: transparent
• Tekst: #000000
• Opvulling: 11px 13px
• Rand: 2px solid #76b900
• Afronding: 2px
• Lettertype: 16px gewicht 700
• Hover: achtergrond #1eaedb, tekst #ffffff
• Actief: achtergrond #007fff, tekst #ffffff, rand 1px solid #003eff, scale(1)
• Focus: achtergrond #1eaedb, tekst #ffffff, contour #000000 solid 2px, opacity 0.9
• Gebruik: Primaire CTA ("Meer informatie", "Oplossingen verkennen")

Secundair (dunne groene rand)

• Achtergrond: transparent
• Rand: 1px solid #76b900
• Afronding: 2px
• Gebruik: Secundaire acties, alternatieve CTA's

Compact / inline

• Lettertype: 14.4px gewicht 700
• Letterspatiëring: 0.144px
• Regelafstand: 1.00
• Gebruik: Inline CTA's, compacte navigatie

Kaarten & containers

• Achtergrond: #ffffff (licht) of #1a1a1a (donkere secties)
• Rand: geen (strakke randen) of 1px solid #5e5e5e
• Afronding: 2px
• Schaduw: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px voor verheven kaarten
• Hover: intensivering van schaduw
• Opvulling: 16-24px intern

Koppelingen

• Op donkere achtergrond: #ffffff, geen onderstreping, hover verschuift naar #3860be
• Op lichte achtergrond: #000000 of #1a1a1a, onderstreping 2px solid #76b900, hover verschuift naar #3860be, onderstreping verwijderd
• Groene koppelingen: #76b900, hover verschuift naar #3860be
• Gedempte koppelingen: #666666, hover verschuift naar #3860be

Navigatie

• Donkere zwarte achtergrond (#000000)
• Logo links uitgelijnd, prominent NVIDIA-woordmerk
• Koppelingen: NVIDIA-EMEA 14px gewicht 700 hoofdletters, #ffffff
• Hover: kleurverschuiving, geen wijziging van onderstreping
• Mega-menu dropdowns voor productcategorieën
• Sticky bij scrollen met backdrop

Beeldbehandeling

• Product-/GPU-renders als hero-afbeeldingen, vaak volledig breed
• Schermafbeeldingen met subtiele schaduw voor diepte
• Groene kleurovergangslagen over donkere hero-secties
• Cirkelvormige avatarcontainers met radius 50%

Onderscheidende componenten

Productkaarten

• Strakke witte of donkere kaart met minimale afronding (2px)
• Groen accentrand of -onderstreping op de titel
• Patroon van vette kop + lichtere beschrijving
• CTA met groene rand onderaan

Technische specificatietabellen

• Industriële rasterindelingen
• Wisselende rijachtergronden (subtiele grijsverschuiving)
• Vette labels, reguliere waarden
• Groene highlights voor kernmetrieken

Cookie/toestemmingsbanner

• Vaste positie onderaan
• Afgeronde knoppen (radius 2px)
• Grijze randbehandelingen

5. Indelingsprincipes

Spatiëringssysteem

• Basiseenheid: 8px
• Schaal: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
• Primaire opvullingswaarden: 8px, 11px, 13px, 16px, 24px, 32px
• Sectiespatiëring: 48-80px verticale opvulling

Raster & container

• Maximale inhoudbreedte: circa 1200px (begrensd)
• Volledige-breedte hero-secties met begrensde tekst
• Functiesecties: 2-3 kolomrasters voor productkaarten
• Enkele kolom voor artikel-/bloginhoud
• Zijbalkindelingen voor documentatie

Witruimtefilosofie

• Doelbewuste dichtheid: NVIDIA hanteert een strakkere spatiëring dan typische SaaS-sites, wat de dichtheid van technische inhoud weerspiegelt. Witruimte bestaat om concepten te scheiden, niet om luxueuze leegte te creëren.
• Sectieritme: Donkere secties wisselen af met witte secties, waarbij achtergrondkleur (niet alleen spatiëring) inhoudsblokken scheidt.
• Kaartdichtheid: Productkaarten staan dicht op elkaar met tussenruimten van 16-20px, wat een catalogusgevoel creëert in plaats van een galeriegevoel.

Schaal voor randafronding

• Micro (1px): Inline spans, kleine elementen
• Standaard (2px): Knoppen, kaarten, containers, invoervelden -- de standaard voor vrijwel alles
• Cirkel (50%): Avatarafbeeldingen, cirkelvormige tabindicatoren

6. Diepte & elevatie

Niveau	Behandeling	Gebruik
Plat (Niveau 0)	Geen schaduw	Paginaachtergronden, inline tekst
Subtiel (Niveau 1)	rgba(0,0,0,0.3) 0px 0px 5px 0px	Standaard kaarten, modals
Rand (Niveau 1b)	1px solid #5e5e5e	Inhoudsscheidingslijnen, sectieranden
Groen accent (Niveau 2)	2px solid #76b900	Actieve elementen, CTA's, geselecteerde items
Focus (Toegankelijkheid)	2px solid #000000 contour	Toetsenbordfocusring

Schaduwfilosofie: Het dieptesysteem van NVIDIA is minimaal en utilitair. Er is in wezen één schaduwwaarde -- een 5px omgevingsonscherpte op 30% dekking -- die spaarzaam wordt gebruikt voor kaarten en modals. Het primaire dieptesignaal is niet schaduw maar kleurcontrast: zwarte achtergronden naast witte secties, groene randen op zwarte vlakken. Dit creëert hardwareachtige visuele gelaagdheid waarbij diepte voortkomt uit materiaalverschil, niet uit gesimuleerd licht.

Decoratieve diepte

• Groene kleurovergangslagen achter hero-inhoud
• Donker-naar-donkerder kleurovergangen (zwart naar bijna-zwart) voor sectieovergangen
• Geen glasmorfisme of vervagingseffecten -- helderheid boven sfeer

7. Responsief gedrag

Breekpunten

Naam	Breedte	Belangrijkste wijzigingen
Mobiel klein	<375px	Compacte enkele kolom, verminderde opvulling
Mobiel	375-425px	Standaard mobiele indeling
Mobiel groot	425-600px	Bredere mobiele layout, hints voor 2 kolommen
Tablet klein	600-768px	Begin van 2-kolomrasters
Tablet	768-1024px	Volledige kaartrasters, uitgebreide navigatie
Desktop	1024-1350px	Standaard desktopindeling
Groot desktop	>1350px	Maximale inhoudsbreedte, royale marges

Aanraakdoelwitten

• Knoppen gebruiken 11px 13px opvulling voor comfortabele tik-doelwitten
• Navigatiekoppelingen op 14px hoofdletters met voldoende spatiëring
• Groen omlijnde knoppen bieden hoog-contrast tik-doelwitten op donkere achtergronden
• Mobiel: hamburgermenuvouwen met volledig scherm overlay

Vouwstrategie

• Hero: 36px kop schaalt proportioneel omlaag
• Navigatie: volledige horizontale navigatie klapt in bij ~1024px
• Productkaarten: 3 kolommen naar 2 kolommen naar gestapelde enkele kolom
• Voettekst: meerkolomraster klapt in naar enkele gestapelde kolom
• Sectiespatiëring: 64-80px vermindert naar 32-48px op mobiel
• Afbeeldingen: beeldverhouding behouden, schalen naar containerbreedte

Afbeeldingsgedrag

• GPU-/productrendering behoudt hoge resolutie op alle formaten
• Hero-afbeeldingen schalen proportioneel mee met de viewport
• Kaartafbeeldingen gebruiken consistente beeldverhoudingen
• Volledigbreedtedonkere secties behouden de rand-tot-rand behandeling

8. Responsief gedrag (uitgebreid)

Typografieschaling

• Display 36px schaalt naar ~24px op mobiel
• Sectiekoppen 24px schalen naar ~20px op mobiel
• Bodytekst behoudt 15-16px op alle breekpunten
• Knoptekst behoudt 16px voor consistente tik-doelwitten

Strategie voor donkere/lichte secties

• Donkere secties (zwarte achtergrond, witte tekst) wisselen af met lichte secties (witte achtergrond, zwarte tekst)
• Het groene accent blijft consistent op beide vlaktypes
• Op donker: koppelingen zijn wit, onderstrepingen zijn groen
• Op licht: koppelingen zijn zwart, onderstrepingen zijn groen
• Deze afwisseling creëert een natuurlijk scrollritme en inhoudsgroepering

9. Agentpromptgids

Snelle kleurverwijzing

• Primair accent: NVIDIA Green (#76b900)
• Achtergrond donker: Echt zwart (#000000)
• Achtergrond licht: Puur wit (#ffffff)
• Koptekst (donkere achtergrond): Wit (#ffffff)
• Koptekst (lichte achtergrond): Zwart (#000000)
• Bodytekst (lichte achtergrond): Zwart (#000000) of Bijna-zwart (#1a1a1a)
• Bodytekst (donkere achtergrond): Wit (#ffffff) of Gray 300 (#a7a7a7)
• Koppeling hover: Blauw (#3860be)
• Randaccent: 2px solid #76b900
• Knop hover: Teal (#1eaedb)

Voorbeeldcomponentprompts

• "Maak een hero-sectie op een zwarte achtergrond. Kop op 36px NVIDIA-EMEA gewicht 700, regelafstand 1.25, kleur #ffffff. Ondertitel op 18px gewicht 400, regelafstand 1.67, kleur #a7a7a7. CTA-knop met transparante achtergrond, 2px solid #76b900 rand, afronding 2px, opvulling 11px 13px, tekst #ffffff. Hover: achtergrond #1eaedb, tekst wit."
• "Ontwerp een productkaart: witte achtergrond, randafronding 2px, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Titel op 20px NVIDIA-EMEA gewicht 700, regelafstand 1.25, kleur #000000. Body op 15px gewicht 400, regelafstand 1.67, kleur #757575. Groen onderstreepaccent op titel: border-bottom 2px solid #76b900."
• "Bouw een navigatiebalk: achtergrond #000000, sticky bovenaan. NVIDIA-logo links uitgelijnd. Koppelingen op 14px NVIDIA-EMEA gewicht 700 hoofdletters, kleur #ffffff. Hover: kleur #3860be. Groen omlijnde CTA-knop rechts uitgelijnd."
• "Maak een donkere functiesectie: achtergrond #000000. Sectielabel op 14px gewicht 700 hoofdletters, kleur #76b900. Kop op 24px gewicht 700, kleur #ffffff. Beschrijving op 16px gewicht 400, kleur #a7a7a7. Drie productkaarten op een rij met 20px tussenruimte."
• "Ontwerp een voettekst: achtergrond #000000. Meerkolomindeling met koppelingsgroepen. Koppelingen op 14px gewicht 400, kleur #a7a7a7. Hover: kleur #76b900. Onderste balk met juridische tekst op 12px, kleur #757575."

Iteratiegids

1. Gebruik altijd #76b900 als accent, nooit als achtergrondvulling -- het is een signaalkleur voor randen, onderstrepingen en highlights
2. Knoppen zijn standaard transparant met groene randen -- gevulde achtergronden verschijnen alleen bij hover/actieve toestanden
3. Gewicht 700 is de dominante stem voor alle interactieve elementen en koppen; 400 is alleen voor bodytekst
4. Randafronding is 2px voor alles -- deze scherpe, minimale afronding is essentieel voor de industriële esthetiek
5. Donkere secties gebruiken witte tekst; lichte secties gebruiken zwarte tekst -- het groene accent werkt identiek op beide
6. Koppeling hover is altijd #3860be (blauw), ongeacht de standaardkleur van de koppeling
7. Regelafstand 1.25 voor koppen, 1.50-1.67 voor bodytekst -- handhaaf dit contrast voor visuele hiërarchie
8. Navigatie gebruikt hoofdletters 14px vet -- deze typografie als hardwarelabel is onderdeel van de merkstem