# Clear SaaS — DESIGN.md

Calm software landing page.

- Version: 0.1.0
- License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
- Provenance: AI-generated
- Attribution: Vakwerk demo authors — AI-generated fictional catalog metadata for development; no template artifacts supplied.
- Demo design system: original fictional metadata, not a commissioned template.

## Colour tokens

| Role | Value |
| --- | --- |
| 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)

## Typography

- Headings: system-ui, 'Segoe UI', Arial, sans-serif
- Body text: system-ui, 'Segoe UI', Arial, sans-serif

## Shape and spacing

- Corner radius: 8px
- Base spacing unit: 8px

## Page sections, in order

1. Hero
2. Features
3. Pricing
4. Frequently asked questions
5. Contact

## Voice

Calm, precise and free of hype. Short sentences that explain what the product does.

## Layout

Wide hero with one primary action, a three-column feature grid and a simple pricing table.

## 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;
}
```