# SKAP design system

The rules behind the prototype. Live samples of everything below: `prototype/system.html`.
Values come from `design-tokens.json` (built into `prototype/assets/css/tokens.css`); this file says
how to use them.

## Direction

A calm Scandinavian wardrobe: real clothes cut out on light mint tiles, a white header,
generous air, one green action per view. Editorial headlines (a fashion serif) over a plain
Norwegian grotesk. Motion glides in and settles; nothing bounces.

## Colour

- **Paper** `--color-paper` (#F2FAF3) is the page; **surface** (white) carries cards, forms, dialogs;
  **tile** (#E6F1E8) is the ground every garment stands on.
- **Green** `--color-green` is for the one main action per view and for "selected/today".
  Text in green uses `--color-green-ink` (AA on paper and white); `--color-green-bright` is the
  selected-garment glow only.
- **Sky** marks Plus. **Danger** and **warn** only for real problems, always with text, never colour alone.
- Every text/background pair passes WCAG AA; `system.html` prints the contrast of each swatch.

## Type

| Role | Face | Weight | Token |
|------|------|--------|-------|
| Display, h1, h2 | Brygada 1918 | 600 | `--font-display`, `--weight-display` |
| Emphasis in headlines | Brygada 1918 italic, green ink | 500 | `<em>` inside h1/h2 |
| h3, h4, UI, body | Schibsted Grotesk | 400 body, 600 labels, 700 headings | `--font-sans` |
| Wordmark | Schibsted Grotesk, caps, tracked 0.42em | 500 | `.wordmark` |

The serif only from about 24px up: dialog titles, card titles and side panels use the sans
(`.h-sans`, `.post-title`, `.dialog-head h2`). A moderate-contrast serif on purpose: Bodoni Moda was
tried first and its thin verticals (H, N, M) were hard to read.

## Space and shape

- 4px steps (`--space-1` … `--space-13`). App pages: 1056px container, header and footer bars
  36px wider on each side (`--header-overhang`), 24px between sections (`--section-gap-app`).
- Radius grows with size: tags 6–10px, inputs and buttons pill, tiles 14px, cards 20px, big panels 28px.
- Shadows are soft and green-black (`--shadow-sm/md/lg`). Garments get a drop-shadow filter, not a box shadow.

## Layout pieces

- **Header:** at the top of the page the bar sits on the top edge (square top corners). Once the
  page scrolls it drops 24px, rounds all corners and floats (`.app-header.is-floating`).
- **Footer:** 64px bar (half the inner air of the Figma bar), about 70px below the content, flush with the bottom edge, top corners round.
  On phones it runs under the tab bar.
- **Phones:** bottom tab bar with a round green "+" in the middle; horizontal shelves scroll with snap.

## Components

Buttons (`.btn-primary` one per view, `.btn-secondary`, `.btn-ghost`, `.btn-ink`, `.btn-plus`, `.btn-danger`),
fields with the label above and the error text below, radio chips, switch, segmented control,
badges (planned, public, private, Plus, ad), notices (info, success, warn, danger), item and outfit
cards. Shared page parts are plain elements with `data-component` (`app-header`, `tabbar`,
`app-footer`, `site-header`, `film`, `auth-visual`), filled in by `ui.js`.

## Photos of garments

Garments always appear cut out on the tile, centred, 82% of the tile (`.garment-tile img`).
An uncut photo shows as a rounded print (`.is-photo`). Adding a garment: tips with line drawings,
then the automatic cut, then "Bruk bildet" or "Rediger utklippet" (tap tools, "Ferdig med redigering").

## Motion

`--ease-out` (expo out) for everything, `--dur-base` 200ms for hover, state and press feedback,
`--dur-slow` 320ms for the header and panels, `--dur-story` 700ms for story moments. Nothing overshoots
or bounces: things glide in and settle.
`prefers-reduced-motion` turns transitions off and starts the films paused on their poster.