# Helder SaaS — DESIGN.md

Rustige landingspagina voor software.

- Versie: 0.1.0
- Licentie: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
- Herkomst: AI-gegenereerd
- Bronvermelding: Vakwerk demo authors — AI-generated fictional catalog metadata for development; no template artifacts supplied.
- Demo-ontwerpsysteem: originele fictieve gegevens, geen gecommissioneerd template.

## Kleurtokens

| Rol | Waarde |
| --- | --- |
| background | #f7f8fa |
| surface | #ffffff |
| text | #1b2330 |
| muted | #4a5568 |
| primary | #2b44c4 |
| onPrimary | #ffffff |
| accent | #0f766e |

Contrast:
- text / background: 14.86:1 (≥ 4.5:1)
- text / surface: 15.79:1 (≥ 4.5:1)
- muted / background: 7.08:1 (≥ 4.5:1)
- onPrimary / primary: 7.70:1 (≥ 4.5:1)
- primary / background: 7.25:1 (≥ 3:1)
- accent / background: 5.15:1 (≥ 3:1)

## Typografie

- Koppen: system-ui, 'Segoe UI', Arial, sans-serif
- Lopende tekst: system-ui, 'Segoe UI', Arial, sans-serif

## Vorm en ruimte

- Hoekafronding: 8px
- Basiseenheid voor ruimte: 8px

## Paginasecties, in volgorde

1. Introductie
2. Functies
3. Prijzen
4. Veelgestelde vragen
5. Contact

## Toon

Rustig, precies en zonder hype. Korte zinnen die uitleggen wat het product doet.

## Opmaak

Brede introductie met één hoofdactie, een raster van drie functies en een eenvoudige prijstabel.

## CSS custom properties

```css
:root {
  --color-background: #f7f8fa;
  --color-surface: #ffffff;
  --color-text: #1b2330;
  --color-muted: #4a5568;
  --color-primary: #2b44c4;
  --color-on-primary: #ffffff;
  --color-accent: #0f766e;
  --font-heading: system-ui, 'Segoe UI', Arial, sans-serif;
  --font-body: system-ui, 'Segoe UI', Arial, sans-serif;
  --radius: 8px;
  --space: 8px;
}
```