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

Ontwerpsysteem geïnspireerd door Stripe

Category: Fintech & Crypto Betalingsinfrastructuur. Kenmerkende paarse verlopen, elegantie met gewicht 300.

1. Visueel Thema & Atmosfeer

De website van Stripe is de gouden standaard van fintech-ontwerp — een systeem dat tegelijkertijd technisch en luxueus aanvoelt, precies en warm. De pagina opent op een helder wit canvas (#ffffff) met diepe marineblauw koppen (#061b31) en een kenmerkend paars (#533afd) dat fungeert als merkankerpunt én interactief accent. Dit is niet het koude, klinische paars van bedrijfssoftware; het is een rijk, verzadigd violet dat overkomt als zelfverzekerd en premium. De algehele indruk is die van een financiële instelling opnieuw ontworpen door een topfontgieterij.

Het aangepaste variabele lettertype sohne-var is het bepalende element van Stripe's visuele identiteit. Elk tekstelement schakelt de OpenType-stijlset "ss01" in, die tekenvormen aanpast voor een uitgesproken geometrisch, modern gevoel. Op weergaveformaten (48px-56px) draait sohne-var op gewicht 300 — een buitengewoon licht gewicht voor koppen dat een etherische, bijna gefluisterde autoriteit creëert. Dit is het tegenovergestelde van de conventie van de "vetgedrukte heldenkop"; de koppen van Stripe voelen aan alsof ze niet hoeven te schreeuwen. De negatieve letterafstand (-1,4px bij 56px, -0,96px bij 48px) perst de tekst samen tot dichte, ingenieurmatig opgebouwde blokken. Bij kleinere formaten gebruikt het systeem ook gewicht 300 met proportioneel verminderde spatiëring, en tabelcijfers via "tnum" voor de weergave van financiële gegevens.

Wat Stripe echt onderscheidt, is het schaduwsysteem. In plaats van de platte of eenlagige aanpak van de meeste sites gebruikt Stripe meerlaagse, blauw-getinte schaduwen: de kenmerkende rgba(50,50,93,0.25) gecombineerd met rgba(0,0,0,0.1) creëert schaduwen met een koele, bijna atmosferische diepte — alsof elementen zweven in een schemerluchthemel. De blauwgrijze ondertoon van de primaire schaduwkleur (50,50,93) sluit direct aan op het marine-paarse merkpalet, waardoor zelfs elevatie merkgebonden aanvoelt.

Kernkenmerken:

• sohne-var met OpenType "ss01" op alle tekst — een aangepaste stijlset die de lettervormgeving van het merk bepaalt
• Gewicht 300 als het kenmerkende kopgewicht — licht, zelfverzekerd, anti-conventie
• Negatieve letterafstand op weergaveformaten (-1,4px bij 56px, geleidelijk losser naar beneden)
• Blauw-getinte meerlaagse schaduwen met rgba(50,50,93,0.25) — elevatie die merkgebonden aanvoelt
• Diepe marineblauw (#061b31) koppen in plaats van zwart — warm, premium, financieel kwaliteitsniveau
• Conservatieve randafronding (4px-8px) — geen pilvormige elementen, niets te scherp
• Robijn (#ea2261) en magenta (#f96bee) accenten voor verlopen en decoratieve elementen
• SourceCodePro als de monospace-metgezel voor code en technische labels

2. Kleurenpalet & Rollen

Primair

• Stripe Paars (#533afd): Primaire merkkleur, CTA-achtergronden, linktekst, interactieve accenten. Een verzadigd blauw-violet dat het hele systeem verankert.
• Diepe Marine (#061b31): --hds-color-heading-solid. Primaire kopkleur. Niet zwart, niet grijs — een zeer donker blauw dat warmte en diepte toevoegt aan tekst.
• Puur Wit (#ffffff): Paginaachtergrond, kaartoppervlakken, knoptekst op donkere achtergronden.

Merk & Donker

• Merkdonker (#1c1e54): --hds-color-util-brand-900. Diepe indigo voor donkere secties, voettekstachtergronden en meeslepende merkmomenten.
• Donkere Marine (#0d253d): --hds-color-core-neutral-975. Het donkerste neutraal — bijna-zwart met een blauwe ondertoon voor maximale diepte zonder hardheid.

Accentkleuren

• Robijn (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. Warm rood-roze voor pictogrammen, waarschuwingen en accenten.
• Magenta (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. Levendig roze-paars voor verlopen en decoratieve hoogtepunten.
• Magenta Licht (#ffd7ef): --hds-color-util-accent-magenta-100. Getint oppervlak voor magenta-kaarten en badges.

Interactief

• Primair Paars (#533afd): Primaire linkkleur, actieve toestanden, geselecteerde elementen.
• Paars Hover (#4434d4): Donkerder paars voor zweeftoestanden op primaire elementen.
• Diep Paars (#2e2b8c): --hds-color-button-ui-iconHover. Donker paars voor zweeftoestanden van pictogrammen.
• Licht Paars (#b9b9f9): --hds-color-action-bg-subduedHover. Zacht lavendel voor gedempte zweefachtergronden.
• Middel Paars (#665efd): --hds-color-input-selector-text-range. Bereikkeuzeschuif en invoeraccentkleur.

Neutrale Schaal

• Koptekst (#061b31): Primaire koppen, navigatietekst, sterke labels.
• Label (#273951): --hds-color-input-text-label. Formulierlabels, secundaire koppen.
• Hoofdtekst (#64748d): Secundaire tekst, beschrijvingen, bijschriften.
• Succesgoen (#15be53): Statusbadges, succesaanduidingen (met 0,2-0,4 alpha voor achtergronden/randen).
• Succestekst (#108c3d): Tekstkleur van successbadge.
• Citroen (#9b6829): --hds-color-core-lemon-500. Waarschuwings- en accentkleur.

Oppervlakken & Randen

• Standaardrand (#e5edf5): Standaardrandkleur voor kaarten, scheidingslijnen en containers.
• Paarse Rand (#b9b9f9): Actieve/geselecteerde randtoestand op knoppen en invoervelden.
• Zachte Paarse Rand (#d6d9fc): Subtiele paars-getinte randen voor secundaire elementen.
• Magenta Rand (#ffd7ef): Roze-getinte randen voor magenta-elementen.
• Gestreepte Rand (#362baa): Gestreepte randen voor dropzones en plaatshoudelementen.

Schaduwkleuren

• Blauwe Schaduw (rgba(50,50,93,0.25)): Het kenmerkende — blauw-getinte primaire schaduwkleur.
• Donkerblauwe Schaduw (rgba(3,3,39,0.25)): Diepere blauwe schaduw voor verhoogde elementen.
• Zwarte Schaduw (rgba(0,0,0,0.1)): Secundaire schaduwlaag voor diepteversterking.
• Omgevingsschaduw (rgba(23,23,23,0.08)): Zachte omgevingsschaduw voor subtiele elevatie.
• Zachte Schaduw (rgba(23,23,23,0.06)): Minimale omgevingsschaduw voor lichte lift.

3. Typografieregels

Lettertype

• Primair: sohne-var, met uitwijkoptie: SF Pro Display
• Monospace: SourceCodePro, met uitwijkoptie: SFMono-Regular
• OpenType-functies: "ss01" globaal ingeschakeld op alle sohne-var-tekst; "tnum" voor tabelcijfers in financiële gegevens en bijschriften.

Hiërarchie

Rol	Lettertype	Grootte	Gewicht	Regelhoogte	Letterafstand	Functies	Opmerkingen
Display Hero	sohne-var	56px (3.50rem)	300	1.03 (nauw)	-1.4px	ss01	Maximale grootte, fluisterende autoriteit
Display Groot	sohne-var	48px (3.00rem)	300	1.15 (nauw)	-0.96px	ss01	Secundaire heldenkoppen
Sectiekop	sohne-var	32px (2.00rem)	300	1.10 (nauw)	-0.64px	ss01	Titels van functiesecties
Grote Onderkop	sohne-var	26px (1.63rem)	300	1.12 (nauw)	-0.26px	ss01	Kaartkoppen, subsecties
Onderkop	sohne-var	22px (1.38rem)	300	1.10 (nauw)	-0.22px	ss01	Kleinere sectiekoppen
Grote Hoofdtekst	sohne-var	18px (1.13rem)	300	1.40	normaal	ss01	Functiebeschrijvingen, inleidende tekst
Hoofdtekst	sohne-var	16px (1.00rem)	300-400	1.40	normaal	ss01	Standaard leestekst
Knop	sohne-var	16px (1.00rem)	400	1.00 (nauw)	normaal	ss01	Tekst van primaire knop
Kleine Knop	sohne-var	14px (0.88rem)	400	1.00 (nauw)	normaal	ss01	Secundaire/compacte knoppen
Link	sohne-var	14px (0.88rem)	400	1.00 (nauw)	normaal	ss01	Navigatielinks
Bijschrift	sohne-var	13px (0.81rem)	400	normaal	normaal	ss01	Kleine labels, metadata
Klein Bijschrift	sohne-var	12px (0.75rem)	300-400	1.33-1.45	normaal	ss01	Kleine letters, tijdstempels
Tabel Bijschrift	sohne-var	12px (0.75rem)	300-400	1.33	-0.36px	tnum	Financiële gegevens, cijfers
Micro	sohne-var	10px (0.63rem)	300	1.15 (nauw)	0.1px	ss01	Kleine labels, asmarkeringen
Micro Tabel	sohne-var	10px (0.63rem)	300	1.15 (nauw)	-0.3px	tnum	Grafiekgegevens, kleine cijfers
Nano	sohne-var	8px (0.50rem)	300	1.07 (nauw)	normaal	ss01	Kleinste labels
Code Hoofdtekst	SourceCodePro	12px (0.75rem)	500	2.00 (ruim)	normaal	--	Codeblokken, syntaxis
Vetgedrukte Code	SourceCodePro	12px (0.75rem)	700	2.00 (ruim)	normaal	--	Vetgedrukte code, sleutelwoorden
Code Label	SourceCodePro	12px (0.75rem)	500	2.00 (ruim)	normaal	hoofdletters	Technische labels
Micro Code	SourceCodePro	9px (0.56rem)	500	1.00 (nauw)	normaal	ss01	Kleine codeannotaties

Principes

• Licht gewicht als kenmerk: Gewicht 300 op weergaveformaten is Stripe's meest onderscheidende typografische keuze. Waar anderen 600-700 gebruiken om aandacht te trekken, gebruikt Stripe lichtheid als luxe — de tekst is zo zelfverzekerd dat het geen gewicht nodig heeft om gezaghebbend te zijn.
• ss01 overal: De stijlset "ss01" is niet onderhandelbaar. Het past specifieke glyphs aan (waarschijnlijk alternatieve a-, g- en l-vormen) voor een geometrischer, eigentijdser gevoel in alle sohne-var-tekst.
• Twee OpenType-modi: "ss01" voor weergave-/hoofdtekst, "tnum" voor tabelcijfers in financiële gegevens. Deze overlappen nooit — een cijfer in een alinea gebruikt ss01, een cijfer in een datatabel gebruikt tnum.
• Progressieve spatiëring: Letterafstand wordt nauwer naargelang de grootte toeneemt: -1,4px bij 56px, -0,96px bij 48px, -0,64px bij 32px, -0,26px bij 26px, normaal bij 16px en kleiner.
• Twee-gewicht eenvoud: Voornamelijk 300 (hoofdtekst en koppen) en 400 (UI/knoppen). Geen vetgedrukt (700) in het primaire lettertype — SourceCodePro gebruikt 500/700 voor codecontrast.

4. Componentstijlen

Knoppen

Primair Paars

• Achtergrond: #533afd
• Tekst: #ffffff
• Opvulling: 8px 16px
• Radius: 4px
• Lettertype: 16px sohne-var gewicht 400, "ss01"
• Zweefstand: #4434d4 achtergrond
• Gebruik: Primaire CTA ("Nu starten", "Verkoop contacteren")

Geest / Omlijnd

• Achtergrond: transparant
• Tekst: #533afd
• Opvulling: 8px 16px
• Radius: 4px
• Rand: 1px solid #b9b9f9
• Lettertype: 16px sohne-var gewicht 400, "ss01"
• Zweefstand: achtergrond verschuift naar rgba(83,58,253,0.05)
• Gebruik: Secundaire acties

Transparant Info

• Achtergrond: transparant
• Tekst: #2874ad
• Opvulling: 8px 16px
• Radius: 4px
• Rand: 1px solid rgba(43,145,223,0.2)
• Gebruik: Tertiaire/info-niveau acties

Neutraal Geest

• Achtergrond: transparant (rgba(255,255,255,0))
• Tekst: rgba(16,16,16,0.3)
• Opvulling: 8px 16px
• Radius: 4px
• Omtrek: 1px solid rgb(212,222,233)
• Gebruik: Uitgeschakelde of gedempte acties

Kaarten & Containers

• Achtergrond: #ffffff
• Rand: 1px solid #e5edf5 (standaard) of 1px solid #061b31 (donker accent)
• Radius: 4px (nauw), 5px (standaard), 6px (comfortabel), 8px (uitgelicht)
• Schaduw (standaard): rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
• Schaduw (omgeving): rgba(23,23,23,0.08) 0px 15px 35px 0px
• Zweefstand: schaduw intensiveert, waarbij vaak de blauw-getinte laag wordt toegevoegd

Badges / Tags / Pills

Neutrale Pill

• Achtergrond: #ffffff
• Tekst: #000000
• Opvulling: 0px 6px
• Radius: 4px
• Rand: 1px solid #f6f9fc
• Lettertype: 11px gewicht 400

Succesbadge

• Achtergrond: rgba(21,190,83,0.2)
• Tekst: #108c3d
• Opvulling: 1px 6px
• Radius: 4px
• Rand: 1px solid rgba(21,190,83,0.4)
• Lettertype: 10px gewicht 300

Invoervelden & Formulieren

• Rand: 1px solid #e5edf5
• Radius: 4px
• Focus: 1px solid #533afd of paarse ring
• Label: #273951, 14px sohne-var
• Tekst: #061b31
• Plaatshouder: #64748d

Navigatie

• Schone horizontale navigatie op wit, sticky met vervaagd achtergrondfilter
• Merklogotype links uitgelijnd
• Links: sohne-var 14px gewicht 400, #061b31 tekst met "ss01"
• Radius: 6px op navigatiecontainer
• CTA: paarse knop rechts uitgelijnd ("Inloggen", "Nu starten")
• Mobiel: hamburgerschakelaar met radius van 6px

Decoratieve Elementen

Gestreepte Randen

• 1px dashed #362baa (paars) voor plaatshouder-/dropzones
• 1px dashed #ffd7ef (magenta) voor magenta-getinte decoratieve randen

Verlopen Accenten

• Robijn-naar-magenta-verlopen (#ea2261 naar #f96bee) voor heldendecoratief
• Donkere merksecties gebruiken #1c1e54 achtergronden met witte tekst

5. Layoutprincipes

Spatiëringssysteem

• Basiseenheid: 8px
• Schaal: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
• Opvallend: De schaal is dicht aan de kleine kant (elke 2px van 4-12), wat de precisiegerichte UI van Stripe voor financiële gegevens weerspiegelt

Raster & Container

• Maximale inhoudbreedte: ongeveer 1080px
• Hero: gecentreerde enkelvoudige kolom met royale opvulling, lichte koppen
• Functiesecties: 2-3 kolomrasters voor functiekaarten
• Volledige breedte donkere secties met #1c1e54 achtergrond voor merkdompeling
• Code-/dashboardvoorbeelden als afgebakende kaarten met blauw-getinte schaduwen

Witruimtefilosofie

• Precieze spatiëring: In tegenstelling tot de immense leegte van minimalistische systemen gebruikt Stripe gemeten, doelgerichte witruimte. Elke tussenruimte is een bewuste typografische keuze.
• Dichte gegevens, royale omlijsting: Weergave van financiële gegevens (tabellen, grafieken) is strak gepakt, maar de UI-omlijsting eromheen is royaal gespatiëerd. Dit creëert een gevoel van gecontroleerde dichtheid — als een goed georganiseerd rekenblad in een prachtig frame.
• Sectieritmiek: Witte secties wisselen af met donkere merksecties (#1c1e54), wat een dramatisch licht/donker ritme creëert dat eentonigheid voorkomt zonder willekeurige kleuren in te voeren.

Randafronding Schaal

• Micro (1px): Fijnmazige elementen, subtiele afronding
• Standaard (4px): Knoppen, invoervelden, badges, kaarten — het werkpaard
• Comfortabel (5px): Standaard kaartcontainers
• Ruim (6px): Navigatie, grotere interactieve elementen
• Groot (8px): Uitgelichte kaarten, hero-elementen
• Samengesteld: 0px 0px 6px 6px voor onderaan afgeronde containers (tabbladpanelen, dropdownvoetteksten)

6. Diepte & Elevatie

Niveau	Behandeling	Gebruik
Plat (Niveau 0)	Geen schaduw	Paginaachtergrond, inline tekst
Omgeving (Niveau 1)	rgba(23,23,23,0.06) 0px 3px 6px	Subtiele kaartlift, zweefhints
Standaard (Niveau 2)	rgba(23,23,23,0.08) 0px 15px 35px	Standaardkaarten, inhoudspanelen
Verhoogd (Niveau 3)	rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px	Uitgelichte kaarten, dropdowns, popovers
Diep (Niveau 4)	rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px	Modals, zwevende panelen
Ring (Toegankelijkheid)	2px solid #533afd omtrek	Toetsenbordfocusring

Schaduwfilosofie: Stripe's schaduwsysteem is gebouwd op het principe van chromatische diepte. Waar de meeste ontwerpsystemen neutrale grijze of zwarte schaduwen gebruiken, is Stripe's primaire schaduwkleur (rgba(50,50,93,0.25)) een diep blauwgrijs dat het marinepalet van het merk weerspiegelt. Dit creëert schaduwen die niet alleen diepte toevoegen — ze voegen merksfeer toe. De meerlaagse aanpak koppelt deze blauw-getinte schaduw aan een puur zwarte secundaire laag (rgba(0,0,0,0.1)) op een andere offset, waardoor een parallaxachtige diepte ontstaat waarbij de merkschaduw verder van het element ligt en de neutrale schaduw dichterbij. De negatieve spreidingwaarden (-30px, -18px) zorgen ervoor dat schaduwen niet horizontaal buiten de footprint van het element uitsteken, waardoor elevatie verticaal en gecontroleerd blijft.

Decoratieve Diepte

• Donkere merksecties (#1c1e54) creëren meeslepende diepte door contrast in achtergrondkleur
• Verloonoverlays met robijn-naar-magenta-overgangen voor heldendecoratief
• Schaduwkleur rgba(0,55,112,0.08) (--hds-color-shadow-sm-top) voor bovenkantschaduwen op sticky elementen

7. Dos en Don'ts

Wel doen

• Gebruik sohne-var met "ss01" op elk tekstelement — de stijlset IS het merk
• Gebruik gewicht 300 voor alle koppen en hoofdtekst — lichtheid is het kenmerk
• Pas blauw-getinte schaduwen (rgba(50,50,93,0.25)) toe voor alle verhoogde elementen
• Gebruik #061b31 (diepe marine) voor koppen in plaats van #000000 — de warmte is belangrijk
• Houd randafronding tussen 4px-8px — conservatieve afronding is opzettelijk
• Gebruik "tnum" voor elke tabel-/financiële cijferweergave
• Laag schaduwen: blauw-getint ver + neutraal dichtbij voor diepteparallax
• Gebruik #533afd paars als primaire interactieve/CTA-kleur

Niet doen

• Gebruik geen gewicht 600-700 voor sohne-var-koppen — gewicht 300 is de merkstem
• Gebruik geen grote randafronding (12px+, pilvormig) op kaarten of knoppen — Stripe is conservatief
• Gebruik geen neutrale grijze schaduwen — tint altijd met blauw (rgba(50,50,93,...))
• Sla "ss01" niet over op sohne-var-tekst — de alternatieve glyphs bepalen de persoonlijkheid
• Gebruik geen puur zwart (#000000) voor koppen — altijd #061b31 diepe marine
• Gebruik geen warme accentkleuren (oranje, geel) voor interactieve elementen — paars is primair
• Pas geen positieve letterafstand toe op weergaveformaten — Stripe trekt nauw
• Gebruik de magenta-/robijnaccenten niet voor knoppen of links — ze zijn alleen decoratief/verlopend

8. Responsief Gedrag

Breekpunten

Naam	Breedte	Belangrijkste Wijzigingen
Mobiel	<640px	Enkelvoudige kolom, kleinere kopformaten, gestapelde kaarten
Tablet	640-1024px	2-kolomrasters, matige opvulling
Desktop	1024-1280px	Volledig layout, 3-kolomfunctierasters
Groot Bureaublad	>1280px	Gecentreerde inhoud met royale marges

Aanraakdoelen

• Knoppen gebruiken comfortabele opvulling (8px-16px verticaal)
• Navigatielinks op 14px met voldoende spatiëring
• Badges hebben minimaal 6px horizontale opvulling voor aanraakdoelen
• Mobiele navigatieschakelaar met knop met radius van 6px

Inklapstrategie

• Hero: 56px weergave -> 32px op mobiel, gewicht 300 gehandhaafd
• Navigatie: horizontale links + CTA's -> hamburgerschakelaar
• Functiekaarten: 3 kolommen -> 2 kolommen -> enkelvoudige kolom gestapeld
• Donkere merksecties: volledige breedte behouden, interne opvulling verminderen
• Financiële gegevenstabellen: horizontaal scrollen op mobiel
• Sectiespatiëring: 64px+ -> 40px op mobiel
• Typografieschaal comprimeert: 56px -> 48px -> 32px heldenformaten over breekpunten

Afbeeldingsgedrag

• Dashboard-/productschermafbeeldingen behouden blauw-getinte schaduw op alle formaten
• Hero-verloomdecoraties worden eenvoudiger op mobiel
• Codeblokken behouden SourceCodePro-behandeling, kunnen horizontaal scrollen
• Kaartafbeeldingen behouden consistente randafronding van 4px-6px

9. Agentpromptgids

Snelle Kleurenreferentie

• Primaire CTA: Stripe Paars (#533afd)
• CTA Zweefstand: Donker Paars (#4434d4)
• Achtergrond: Puur Wit (#ffffff)
• Koptekst: Diepe Marine (#061b31)
• Hoofdtekst: Leisteen (#64748d)
• Labeltekst: Donker Leisteen (#273951)
• Rand: Zacht Blauw (#e5edf5)
• Link: Stripe Paars (#533afd)
• Donkere sectie: Merkdonker (#1c1e54)
• Succes: Groen (#15be53)
• Decoratief accent: Robijn (#ea2261), Magenta (#f96bee)

Voorbeeldcomponentprompts

• "Maak een heldsectie op witte achtergrond. Kop op 48px sohne-var gewicht 300, regelhoogte 1.15, letterafstand -0.96px, kleur #061b31, font-feature-settings 'ss01'. Ondertitel op 18px gewicht 300, regelhoogte 1.40, kleur #64748d. Paarse CTA-knop (#533afd, 4px radius, 8px 16px opvulling, witte tekst) en geestknop (transparant, 1px solid #b9b9f9, #533afd tekst, 4px radius)."
• "Ontwerp een kaart: witte achtergrond, 1px solid #e5edf5 rand, 6px radius. Schaduw: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Titel op 22px sohne-var gewicht 300, letterafstand -0.22px, kleur #061b31, 'ss01'. Hoofdtekst op 16px gewicht 300, #64748d."
• "Bouw een succesbadge: rgba(21,190,83,0.2) achtergrond, #108c3d tekst, 4px radius, 1px 6px opvulling, 10px sohne-var gewicht 300, rand 1px solid rgba(21,190,83,0.4)."
• "Maak navigatie: witte sticky header met backdrop-filter blur(12px). sohne-var 14px gewicht 400 voor links, #061b31 tekst, 'ss01'. Paarse CTA 'Nu starten' rechts uitgelijnd (#533afd achtergrond, witte tekst, 4px radius). Navigatiecontainer 6px radius."
• "Ontwerp een donkere merksectie: #1c1e54 achtergrond, witte tekst. Kop 32px sohne-var gewicht 300, letterafstand -0.64px, 'ss01'. Hoofdtekst 16px gewicht 300, rgba(255,255,255,0.7). Kaarten binnenin gebruiken rgba(255,255,255,0.1) rand met 6px radius."

Iteratiegids

1. Schakel altijd font-feature-settings: "ss01" in op sohne-var-tekst — dit is het typografische DNA van het merk
2. Gewicht 300 is de standaard; gebruik 400 alleen voor knoppen/links/navigatie
3. Schaduwformule: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2 waarbij Y1/B1 groter zijn (verre schaduw) en Y2/B2 kleiner (nabije schaduw)
4. Kopkleur is #061b31 (diepe marine), hoofdtekst is #64748d (leisteen), labels zijn #273951 (donker leisteen)
5. Randafronding blijft in het bereik van 4px-8px — gebruik nooit pilvormige of grote afronding
6. Gebruik "tnum" voor alle cijfers in tabellen, grafieken of financiële weergaven
7. Donkere secties gebruiken #1c1e54 — niet zwart, niet grijs, maar een diepe merkgebonden indigo
8. SourceCodePro voor code op 12px/500 met regelhoogte 2.00 (zeer royaal voor leesbaarheid)