Swiss Grid

# DESIGN.md - Swiss Grid

International Typographic Style. A visible, strict grid. Neutral sans type. One red accent. Nothing decorative earns its place; every element aligns.

## Palette (tokens)

| Token | Value | Use |
| --- | --- | --- |
| `--white` | #FFFFFF | Background |
| `--black` | #000000 | Text, rules, most UI |
| `--red` | #E4002B | The single accent, used sparingly |
| `--gray` | #6E6E6E | Secondary text |
| `--rule` | #000000 | Grid rules and dividers |

Color is black and white plus red. Red marks one thing at a time: an active state, a key figure, a call to action.

## Type scale

- Family: Helvetica, Helvetica Neue, or Inter as a substitute. One family, many weights.
- Set flush left, ragged right. No justification.
- Tight leading on headings, comfortable leading on body.
- Scale (rem): 0.75, 0.875, 1, 1.5, 2, 3, 4, 6. Big jumps, clear hierarchy.

## Spacing grid

A visible 12-column grid with a consistent gutter (24px). All elements snap to columns and baseline. Section rhythm on a baseline grid (for example 8px baseline). Container max-width 75rem.

## Corners and borders

- Corner radius: 0. Always.
- Rules: 1px to 2px solid black horizontal rules separate sections. The rule is a primary design element, use it.
- No shadows. The grid provides structure, not depth.

## Component patterns

- Buttons: black fill white text, or bordered black, square, flat. Red fill reserved for the single most important action on a page.
- Cards: defined by rules and alignment, not borders on all sides. Often just a top rule and aligned content.
- Sections: a numbered or lettered label, a large flush-left headline, columned body.

## Banned patterns

- Gradients and shadows of any kind.
- Rounded corners.
- Center-aligned body text.
- More than one red element competing in the same view.
- Emojis. Em dashes (use a hyphen with spaces).