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

# Ontwerpsysteem geïnspireerd op Cohere

> Category: AI & LLM
> Enterprise AI-platform. Levendige kleurverlopen, datarijke dashboard-esthetiek.

## 1. Visueel thema & sfeer

De interface van Cohere is een gepolijst enterprise-commando­deck — zelfverzekerd, overzichtelijk en ontworpen om AI als serieuze infrastructuur te laten aanvoelen in plaats van als consumentenspeelgoed. De ervaring speelt zich af op een helderwit canvas waarop inhoud is georganiseerd in royaal afgeronde kaarten (22px radius) die een organische, wolkachtige containertaal creëren. Dit is een site die spreekt tot CTO's en enterprise-architecten: professioneel zonder kil te zijn, verfijnd zonder intimiderend te zijn.

De ontwerptaal overbrugt twee werelden met een dubbel lettertype­systeem: CohereText, een aangepast display-serif met nauw spatiëring, geeft koppen het gezag van een technologisch manifest, terwijl Unica77 Cohere Web alle brood­tekst en UI-tekst verwerkt met geometrische Zwitserse precisie. Dit serif/sans-koppel creëert een persoonlijkheid van "zelfverzekerd gezag ontmoet technische helderheid" die een enterprise AI-platform perfect weerspiegelt.

Kleur wordt uiterst spaarzaam gebruikt — de interface is vrijwel geheel zwart-wit met koele grijze randen (`#d9d9dd`, `#e5e7eb`). Paars-violet verschijnt alleen in fotografische heldbanden, verloop­secties en het interactieve blauw (`#1863dc`) dat hover- en focustoestanden aangeeft. Deze chromatische terughoudendheid zorgt ervoor dat kleur, wanneer die WEL verschijnt — in product­screenshots, enterprise-fotografie en de dieprode sectie — maximaal visueel gewicht draagt.

**Belangrijkste kenmerken:**
- Helderwit canvas met koele grijze containerborders
- 22px kenmerkende hoekradius — de onderscheidende "Cohere-kaart"-rondheid
- Dubbel aangepast lettertype: CohereText (display-serif) + Unica77 (brood­tekst sans)
- Enterprise-waardige chromatische terughoudendheid: zwart, wit, koele grijstinten, minimaal paars-blauw accent
- Dieppurperen/violette heldsecties voor dramatisch contrast
- Ghost/transparante knoppen die blauw worden bij hover
- Enterprise-fotografie met diverse toepassingen uit de praktijk
- CohereMono voor code en technische labels met hoofdletter­transformaties

## 2. Kleurenpalet & rollen

### Primair
- **Cohere Zwart** (`#000000`): Primaire koptekst en elementen met maximale nadruk.
- **Bijna Zwart** (`#212121`): Standaard linkkleur voor brood­tekst — iets zachter dan puur zwart.
- **Diep Donker** (`#17171c`): Een blauwgetint bijna-zwart voor navigatie en tekst in donkere secties.

### Secundair & accent
- **Interactieblauw** (`#1863dc`): Het primaire interactieve accent — verschijnt bij knophover, focustoestanden en actieve links. De enige chromatische actie­kleur.
- **Ring Blauw** (`#4c6ee6` op 50%): Tailwind ring-kleur voor toetsenbord­focusindicatoren.
- **Focuspaars** (`#9b60aa`): Borderkleur bij invoerfocus — een gedempte violet.

### Vlak & achtergrond
- **Puur Wit** (`#ffffff`): De primaire pagina­achtergrond en kaartoppervlak.
- **Sneeuw** (`#fafafa`): Subtiele verhoogde vlakken en lichte sectie­achtergronden.
- **Lichtste Grijs** (`#f2f2f2`): Kaart­borders en de zachtste containerbelijningen.

### Neutrale tinten & tekst
- **Gedempte Lei** (`#93939f`): Niet-geaccentueerde footer­links en tertiaire tekst — een koel­getint grijs met een lichte blauw-violette tint.
- **Koele Border** (`#d9d9dd`): Standaard sectie- en lijstitem­borders — een koele, licht paars­getinte grijstint.
- **Lichte Border** (`#e5e7eb`): Lichtere bordervariant — Tailwinds standaard gray-200.

### Verloopsysteem
- **Paars-Violette Heldband**: Diepe paarse verlooposecties die dramatisch contrast creëren ten opzichte van het witte canvas. Deze verschijnen als volbreedte­banden met product­screenshots en kernboodschappen.
- **Donkere Footer-overgang**: De pagina gaat via diep paars/antraciet over naar de zwarte footer, wat een "schemer"-effect creëert.

## 3. Typografieregels

### Lettertypefamilie
- **Display**: `CohereText`, met terugvalopties: `Space Grotesk, Inter, ui-sans-serif, system-ui`
- **Brood­tekst / UI**: `Unica77 Cohere Web`, met terugvalopties: `Inter, Arial, ui-sans-serif, system-ui`
- **Code**: `CohereMono`, met terugvalopties: `Arial, ui-sans-serif, system-ui`
- **Pictogrammen**: `CohereIconDefault` (aangepast pictogrammen­lettertype)

### Hiërarchie

| Rol | Lettertype | Grootte | Gewicht | Regelhoogte | Letterafstand | Notities |
|------|------|------|--------|-------------|----------------|-------|
| Display / Held | CohereText | 72px (4.5rem) | 400 | 1.00 (nauw) | -1.44px | Maximale impact, serif-autoriteit |
| Display Secundair | CohereText | 60px (3.75rem) | 400 | 1.00 (nauw) | -1.2px | Grote sectiekoppen |
| Sectiekop | Unica77 | 48px (3rem) | 400 | 1.20 (nauw) | -0.48px | Titels van feature­secties |
| Subkop | Unica77 | 32px (2rem) | 400 | 1.20 (nauw) | -0.32px | Kaartkoppen, feature­namen |
| Feature­titel | Unica77 | 24px (1.5rem) | 400 | 1.30 | normaal | Kleinere sectie­titels |
| Grote Brood­tekst | Unica77 | 18px (1.13rem) | 400 | 1.40 | normaal | Inleidende alinea's |
| Brood­tekst / Knop | Unica77 | 16px (1rem) | 400 | 1.50 | normaal | Standaard brood­tekst, knoptekst |
| Knop Middel | Unica77 | 14px (0.88rem) | 500 | 1.71 (ruim) | normaal | Kleinere knoppen, benadrukte labels |
| Bijschrift | Unica77 | 14px (0.88rem) | 400 | 1.40 | normaal | Metadata, beschrijvingen |
| Hoofdletter­label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Sectie­labels in hoofdletters |
| Klein | Unica77 | 12px (0.75rem) | 400 | 1.40 | normaal | Kleinste tekst, footer­links |
| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Kleine codelabels in hoofdletters |

### Principes
- **Serif voor declaratie, sans voor functionaliteit**: CohereText draagt de merkstem op display­schaal — de serif-uiteinden geven koppen het gezag van gepubliceerd onderzoek. Unica77 verwerkt alles functioneels met Zwitsers-geometrische neutraliteit.
- **Negatieve spatiëring op schaal**: CohereText gebruikt -1.2px tot -1.44px letter-spacing bij 60–72px, waardoor dichte, impactvolle tekstblokken ontstaan.
- **Enkel brood­tekst­gewicht**: Vrijwel al het Unica77-gebruik heeft gewicht 400. Gewicht 500 verschijnt alleen voor nadruk op kleine knoppen. Het systeem steunt op grootte en spatiëring, niet op gewichtscontrast.
- **Codelabels in hoofdletters**: CohereMono gebruikt hoofdletters met positieve letter-spacing (0.16–0.28px) voor technische tags en sectie­markeringen.

## 4. Componentopmaak

### Knoppen

**Ghost / Transparant**
- Achtergrond: transparant (`rgba(255, 255, 255, 0)`)
- Tekst: Cohere Zwart (`#000000`)
- Geen zichtbare border
- Hover: tekst verschuift naar Interactieblauw (`#1863dc`), dekking 0.8
- Focus: solide 2px outline in Interactieblauw
- De primaire knopstijl — onzichtbaar totdat er interactie mee is

**Donker Solide**
- Achtergrond: donker/zwart
- Tekst: Puur Wit
- Voor CTA op lichte vlakken
- Pilvormig of standaard radius

**Omlijnd**
- Border­gebaseerde begrenzing
- Gebruikt bij secundaire acties

### Kaarten & containers
- Achtergrond: Puur Wit (`#ffffff`)
- Border: dunne solide Lichtste Grijs (`1px solid #f2f2f2`) voor subtiele kaarten; Koele Border (`#d9d9dd`) voor benadrukte kaarten
- Radius: **22px** — de kenmerkende Cohere-radius voor primaire kaarten, afbeeldingen en dialoog­containers. Ook 4px, 8px, 16px, 20px voor kleinere elementen
- Schaduw: minimaal — Cohere steunt op achtergrond­kleur en borders in plaats van schaduwen
- Speciaal: `0px 0px 22px 22px` radius (alleen onderaan afronden) voor sectie­containers
- Dialoog: 8px radius voor modaal/dialoog­vensters

### Invoervelden & formulieren
- Tekst: wit op donkere invoer, zwart op lichte
- Focusborder: Focuspaars (`#9b60aa`) met `1px solid`
- Focusschaduw: rode ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — waarschijnlijk voor aanduiding van fouttoestanden
- Focusomlijning: Interactieblauw solide 2px

### Navigatie
- Schone horizontale nav op witte of donkere achtergrond
- Logo: Cohere woordmerk (aangepaste SVG)
- Links: Donkere tekst op 16px Unica77
- CTA: Donkere solide knop
- Mobiel: hamburger­inklapbaar

### Afbeeldings­behandeling
- Enterprise-fotografie met diverse onderwerpen en omgevingen
- Paars­getinte heldfotografie voor dramatische secties
- Product-UI-screenshots op donkere vlakken
- Afbeeldingen met 22px radius passend bij het kaartsysteem
- Volbreedte paarse verloop­secties

### Onderscheidende componenten

**22px-kaartsysteem**
- De 22px hoekradius is de visuele handtekening van Cohere
- Alle primaire kaarten, afbeeldingen en containers gebruiken deze radius
- Creëert een wolkachtige, organische zachtheid die zich onderscheidt van de typische 8–12px

**Enterprise-vertrouwensbalk**
- Bedrijfslogo's weergegeven in een horizontale strook
- Toont enterprise-adoptie
- Schone, monochrome logo­behandeling

**Paarse Heldbanden**
- Volbreedte dieppaarse secties met product­showcases
- Creëren dramatische visuele onderbrekingen in de witte pagina­stroom
- Product­screenshots zweven binnen de paarse omgeving

**Hoofdletter-code­tags**
- CohereMono in hoofdletters met letter-spacing
- Gebruikt als sectie­markeringen en categorisatie­labels
- Creëert een technische, gestructureerde informatie­hiërarchie

## 5. Lay-outprincipes

### Spatiëringssysteem
- Basiseenheid: 8px
- Schaal: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
- Knopvulling varieert per variant
- Interne kaart­vulling: circa 24–32px
- Verticale sectie­spatiëring: royaal (56–60px tussen secties)

### Raster & container
- Maximale containerbreedte: tot 2560px (zeer breed) met responsief schalen
- Held: gecentreerd met dramatische typografie
- Feature­secties: meerkolomige kaart­rasters
- Enterprise­secties: volbreedte paarse banden
- 26 breekpunten gedetecteerd — uiterst granulair responsief systeem

### Witruimte­filosofie
- **Enterprise­duidelijkheid**: Elke sectie presenteert één helder voorstel met ademruimte daartussen.
- **Fotografie als held**: Grote fotografische secties bieden visuele interesse zonder decoratieve ontwerpelementen te vereisen.
- **Kaartgroepering**: Gerelateerde inhoud is gegroepeerd in 22px-afgeronde kaarten, waardoor natuurlijke informatie­clusters ontstaan.

### Hoekradius­schaal
- Scherp (4px): Navigatie-elementen, kleine tags, paginering
- Comfortabel (8px): Dialoogvensters, secundaire containers, kleine kaarten
- Royaal (16px): Uitgelichte containers, middelgrote kaarten
- Groot (20px): Grote feature­kaarten
- Kenmerkend (22px): Primaire kaarten, heldfoto's, hoofd­containers — DE Cohere-radius
- Pilvormig (9999px): Knoppen, tags, statusindicatoren

## 6. Diepte & elevatie

| Niveau | Behandeling | Gebruik |
|-------|-----------|-----|
| Vlak (Niveau 0) | Geen schaduw, geen border | Pagina­achtergrond, tekstblokken |
| Omlijnd (Niveau 1) | `1px solid #f2f2f2` of `#d9d9dd` | Standaard kaarten, lijstscheidingen |
| Paarse Band (Niveau 2) | Volbreedte donkerpaarse achtergrond | Heldsecties, feature­showcases |

**Schaduw­filosofie**: Cohere is vrijwel schaduwhvlij. Diepte wordt gecommuniceerd door **achtergrond­kleurcontrast** (witte kaarten op paarse banden, wit vlak op sneeuw), **border­begrenzing** (koele grijze borders) en de dramatische **licht-naar-donker sectie­afwisseling**. Wanneer elementen elevatie nodig hebben, bereiken ze die doordat ze wit-op-donker zijn in plaats van door schaduw­werking.

## 7. Do's en don'ts

### Do
- Gebruik 22px hoekradius op alle primaire kaarten en containers — het is de visuele handtekening
- Gebruik CohereText voor display­koppen (72px, 60px) met negatieve letter-spacing
- Gebruik Unica77 voor alle brood­tekst en UI-tekst op gewicht 400
- Houd het palet zwart-wit met koele grijze borders
- Gebruik Interactieblauw (#1863dc) alleen voor interactieve hover/focustoestanden
- Gebruik dieppaarse secties voor dramatische visuele onderbrekingen en product­showcases
- Pas hoofdletters + letter-spacing toe op CohereMono voor sectie­labels
- Handhaaf enterprise-geschikte fotografie met diverse onderwerpen

### Don't
- Gebruik geen andere hoekradius dan 22px op primaire kaarten — de kenmerkende radius doet ertoe
- Introduceer geen warme kleuren — het palet is strikt koel­getint
- Gebruik geen zware schaduwen — diepte komt van kleurcontrast en borders
- Gebruik geen vetgedrukt (700+) gewicht op brood­tekst — 400–500 is het bereik
- Sla de serif/sans-hiërarchie niet over — CohereText voor koppen, Unica77 voor brood­tekst
- Gebruik paars niet als vlakkleur voor kaarten — paars is gereserveerd voor volbreedte­secties
- Reduceer sectie­spatiëring niet onder 40px — enterprise-lay-outs hebben ademruimte nodig
- Gebruik standaard geen decoratie op knoppen — ghost/transparant is de basisstaat

## 8. Responsief gedrag

### Breekpunten
| Naam | Breedte | Belangrijkste wijzigingen |
|------|-------|-------------|
| Klein Mobiel | <425px | Compacte lay-out, minimale spatiëring |
| Mobiel | 425–640px | Enkelvoudige kolom, gestapelde kaarten |
| Groot Mobiel | 640–768px | Kleine spatiëringaanpassingen |
| Tablet | 768–1024px | 2-kolomrasters beginnen |
| Desktop | 1024–1440px | Volledige meerkolomige lay-out |
| Groot Bureaublad | 1440–2560px | Maximale containerbreedte |

*26 breekpunten gedetecteerd — een van de meest granulaire responsieve sites in de dataset.*

### Aanraakdoelen
- Knoppen adequaat groot voor aanraakinteractie
- Navigatielinks met comfortabele spatiëring
- Kaartoppervlakken als aanraakdoelen

### Inklapstrategie
- **Navigatie**: Volledige nav klapt in tot hamburger
- **Feature­rasters**: Meerkolomig → 2-kolomig → enkelvoudige kolom
- **Koptekst**: 72px → 48px → 32px progressief schalen
- **Paarse secties**: Behouden volbreedte, inhoud stapelt
- **Kaartrasters**: 3 → 2 → 1 kolom

### Afbeeldingsgedrag
- Fotografie schaalt proportioneel binnen 22px-radius containers
- Product­screenshots behouden beeldverhouding
- Paarse secties schalen achtergrond proportioneel

## 9. Promptgids voor agents

### Snelle kleurnaslag
- Primaire tekst: "Cohere Zwart (#000000)"
- Pagina­achtergrond: "Puur Wit (#ffffff)"
- Secundaire tekst: "Bijna Zwart (#212121)"
- Hover­accent: "Interactieblauw (#1863dc)"
- Gedempte tekst: "Gedempte Lei (#93939f)"
- Kaart­borders: "Lichtste Grijs (#f2f2f2)"
- Sectie­borders: "Koele Border (#d9d9dd)"

### Voorbeeldprompts voor componenten
- "Maak een heldsectie op Puur Wit (#ffffff) met CohereText op 72px gewicht 400, regelhoogte 1.0, letter-spacing -1.44px. Cohere Zwart tekst. Ondertitel in Unica77 op 18px gewicht 400, regelhoogte 1.4."
- "Ontwerp een feature­kaart met 22px hoekradius, 1px solide Lichtste Grijs (#f2f2f2) border op wit. Titel in Unica77 op 32px, letter-spacing -0.32px. Brood­tekst in Unica77 op 16px, Gedempte Lei (#93939f)."
- "Maak een ghost-knop: transparante achtergrond, Cohere Zwart tekst in Unica77 op 16px. Bij hover verschuift tekst naar Interactieblauw (#1863dc) met dekking 0.8. Focus: 2px solide Interactieblauw outline."
- "Maak een dieppaarse volbreedte­sectie met witte tekst. CohereText op 60px voor de kop. Product­screenshot zweeft erin met 22px hoekradius."
- "Ontwerp een sectie­label met CohereMono op 14px, hoofdletters, letter-spacing 0.28px. Gedempte Lei (#93939f) tekst."

### Iteratiegids
1. Richt je op ÉÉN component tegelijk
2. Gebruik altijd 22px radius voor primaire kaarten — "de Cohere-kaartrondheid"
3. Geef het lettertype op — CohereText voor koppen, Unica77 voor brood­tekst, CohereMono voor labels
4. Interactieve elementen gebruiken Interactieblauw (#1863dc) alleen bij hover
5. Houd vlakken wit met koele grijze borders — geen warme tinten
6. Paars is voor volbreedte­secties, nooit voor kaartachtergronden