# Identix Design System — "Isora"

**Status:** publiek · **Bron:** dezelfde tokens als onze eigen tools (IM Search, Company Enrichment, IM Assistent Pro) · Machine-leesbaar: [`tokens.json`](tokens.json)

Wij publiceren ons design system omdat we vinden dat openheid een kenmerk is van goed techniek. De website, de sandbox-tools en de apps delen één visuele taal.

## Kernprincipes

1. **Licht eerst.** De default is licht (`#fafafa`), met een volwaardig donker thema (`#09090b`) via `[data-theme="dark"]`. Beide zijn first-class.
2. **Eén accent: indigo.** `#6366f1` (500) voor actie, `#4f46e5` (600) voor hover/tekst-accent in licht, `#818cf8` (400) als tekst-accent in donker.
3. **Zinc-neutrals.** De volledige grijsschaal komt uit de zinc-familie (`#18181b` → `#a1a1aa`), niet uit puur zwart/wit.
4. **Inter + JetBrains Mono.** Inter voor interface en proza; JetBrains Mono voor cijfers, labels en code.
5. **Strakke radii.** Buttons 8px, kaarten 12px, chips volledig rond. Geen decoratieve vormen.
6. **Zachte elevation.** Schaduwen zijn subtiel en functioneel (`sm/md/lg`), geen glow — behalve een lichte accent-glow op primaire acties.

## Kleuren

| Rol | Licht | Donker |
|---|---|---|
| Pagina | `#fafafa` | `#09090b` |
| Kaart | `#ffffff` | `#18181b` |
| Inset / controle | `#f4f4f5` | `#27272a` |
| Tekst primair | `#18181b` | `#fafafa` |
| Tekst secundair | `#3f3f46` | `#d4d4d8` |
| Tekst muted | `#71717a` | `#a1a1aa` |
| Border subtiel | `#e4e4e7` | `#27272a` |
| Accent-actie | `#6366f1` | `#6366f1` |

## Type-schaal

| Niveau | Grootte |
|---|---|
| Display XL | `clamp(38px, 5vw, 62px)` |
| Display | `clamp(30px, 3.6vw, 44px)` |
| H1 | `clamp(26px, 3vw, 36px)` |
| H2 | `clamp(22px, 2.4vw, 27px)` |
| H3 | `18px` |
| Lead | `clamp(17px, 1.6vw, 19.5px)` |
| Body | `16px` |

## Componenten (samenfassung)

- **Buttons:** primair = accent-vlak met witte tekst, hover naar 600 + zachte schaduw; ghost = transparant met border. Radius 8px.
- **Kaarten:** witte/donkere surface, 1px subtiële border, 12px radius, `shadow-sm`, hover → `shadow-md`.
- **Status-chips:** pilvormig, 10px mono-caps — groen (live), amber (binnenkort), indigo (bèta).
- **Datatabellen:** mono-koppen in caps, 1px rij-scheidingen, geen zebra.
- **Eyebrow:** JetBrains Mono, uppercase, accentkleur, met korte accent-streep ervoor.

## Toepassing

- Website: `identix.org/assets/css/site.css` (tokens in `:root` en `html[data-theme="dark"]`)
- Tools: `monetra.css` op onze applicatieserver
- Machine-leesbaar: [`tokens.json`](tokens.json)