admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ea02f186a59d88b880ea032066638dabc5d20364
workbuddy_skills/open-design/design-systems/stripe/DESIGN-nl.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00

326 lines
21 KiB
Markdown
Raw Blame History

# 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)
Reference in new issue View Git Blame Copy Permalink