# Cronovelo Design System v1

Version: 1.0.0  
Dato: 2026-07-02

## 1) Designprincipper
- Nordisk ro: lyse flader, tydelig luft, få men stærke kontraster.
- Funktion før pynt: hver komponent skal have et klart formål.
- Konsistent handling: samme action har samme udtryk i hele platformen.

## 2) Design Tokens

### Farver
- `--bg`: `#f4f8f4`
- `--surface`: `#ffffff`
- `--text`: `#10311f`
- `--muted`: `#4b6656`
- `--line`: `#d5e3d8`
- `--green-1`: `#0f6a3b`
- `--green-2`: `#2d8c57`
- `--green-3`: `#dff5e6`
- `--danger`: `#ad2f2f`
- `--warning`: `#8a5b15`

### Typografi
- Primær tekst: Manrope
- Display/headings: Plus Jakarta Sans

Skala:
- Display XL: 64/800
- H1: 48/800
- H2: 34/800
- H3: 24/700
- Body L: 19/500
- Body M: 16/500
- Label S: 12/700

### Spacing
- `4, 8, 12, 16, 24, 32, 48, 64`

### Radius
- Sm: `10px`
- Md: `16px`
- Lg: `20px`
- Pill: `999px`

### Shadows
- Surface: `0 16px 40px rgba(13, 64, 36, 0.08)`
- Elevated CTA: `0 10px 24px rgba(15, 106, 59, 0.28)`

## 3) Komponentstandard

### Knapper
- Primær: grøn gradient (`--green-1` -> `--green-2`), hvid tekst.
- Sekundær: hvid flade, grøn border, grøn tekst.
- Disabled: 40% opacity, ingen hover/active motion.

### Navigation links
- Tekstlinks med diskret underline ved hover/aktiv.
- Aktiv link farve: `--text`, normal: `--muted`.

### Cards
- Lys glasflade med let blur, `1px` line, medium radius.
- Bruges til app-overblik, metrics, aktivitetsfeed.

### Tags
- Standard tag: `--green-3` baggrund, grøn tekst.
- Dependency tag: lysere grøn baggrund med tydelig border.
- Kritisk tag: rød nuance med høj kontrast.

### Formfelter
- Input-højde: `44px`
- Border: `1px solid --line`
- Focus: `2px` ring med `rgba(15,106,59,.22)`

## 4) Layoutstandard
- Desktop grid: 12 kolonner.
- App Shell: venstresidebar + topbar + content-grid.
- Max contentbredde i marketing: `1100px`.

## 5) Motionstandard
- Reveal ved scroll: `550ms ease`.
- Hover lift på handlingskomponenter: `translateY(-1px)`.
- Undgå overdrevet micro-interactions i datatunge views.

## 6) Accessibility baseline
- Minimum kontrast: WCAG AA.
- Fokusmarkering må ikke fjernes.
- Klikmål minimum `40x40`.

## 7) Versionering
- Alle designændringer versioneres semantisk.
- Breaking designændringer kræver migration notes i release.