# Neo-Swiss — AI design spec

> Strict modular grid, variable weight, one red accent.
>
> Style page: https://www.aiwebstyle.com/styles/neo-swiss.html · Live preview: https://www.aiwebstyle.com/previews/neo-swiss.html
>
> Drop this file at the root of a project and point your coding agent at it. Every value is copied from the working stylesheet, not estimated.

## 1. What this style is

Neo-Swiss keeps the International Typographic Style's core beliefs — grid as structure, sans-serif as neutral voice, one accent doing all emphasis — and updates the execution with variable fonts and screen-native spacing. Where the original relied on a single cut of Helvetica, this version moves weight continuously to create hierarchy without changing size. The discipline is unchanged: a hard baseline grid, left-aligned ragged-right text, and an accent colour used perhaps twice per screen. The generosity of whitespace is not decoration; it is what makes the grid legible.

**Signature rules**

- grid: 12 col / 24px
- type: 1 variable sans
- weights: 300–800
- accent: 1 red
- align: ragged right
- rhythm: 8px

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `#ffffff` | Page background (solid fallback) |
| `--page-bg-gradient` | `none` | Page background gradient; overrides the solid unless `none` |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `#1a1a1a` | Body text |
| `--heading-color` | `#000000` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#e2001a` | Link and inline accent |

### Borders

| Token | Value | Purpose |
|---|---|---|
| `--border-color` | `#d6d6d6` | Dividers and input borders |

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `#ffffff` | Card surface |
| `--card-border-radius` | `0` | Card corner radius |
| `--card-shadow` | `none` | Card at rest |
| `--card-hover-shadow` | `none` | Card on hover |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `#ffffff` | Sticky header surface |
| `--header-text-color` | `#000000` | Header text and nav links |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `#000000` | Primary button fill |
| `--button-text-color` | `#ffffff` | Primary button label |
| `--button-hover-bg` | `#e2001a` | Primary button hover fill |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `#f4f4f4` | Code / prompt block surface |
| `--prompt-text-color` | `#1a1a1a` | Code / prompt block text |

### Type

| Token | Value | Purpose |
|---|---|---|
| `--base-font` | `var(--font-helvetica)` | Body font stack |
| `--heading-font` | `var(--font-helvetica)` | Heading font stack |

## 3. Do

- Drive every color, radius and shadow from the tokens below. No literal hex values in component code.
- Reuse the `--card-*` tokens for any elevated surface (card, panel, modal, dropdown) so elevation stays consistent.
- Keep header and footer on `--header-*` / `--footer-*` even when the page background is a gradient.
- Design studios, architecture practices and any brand that sells precision.
- Data-dense pages where hierarchy must be unambiguous.
- Documentation and reference material — the grid scales to dozens of entries.

## 4. Don't

- Do not blend tokens from another style in this library — one page, one token set.
- Do not invent a hover state: every interactive element has a `*-hover-*` token above.
- Playful consumer products where warmth is part of the value.
- Pages with photography as the lead — the grid fights full-bleed imagery.
- If you cannot hold the alignment. Sloppy Swiss is worse than no Swiss.

## 5. Using this with a coding agent

Place this file at the project root as `DESIGN.md`, then instruct the agent:

> Follow `DESIGN.md` for all UI. Every color, radius and shadow comes from its token table. If you need a state that is not listed, derive it from the nearest listed token and add the new token to `DESIGN.md` instead of hard-coding a value.

If the project already has a token layer (Tailwind config, CSS custom properties, a theme file), map these tokens onto it one-to-one and keep the names unchanged.

## 6. Original prompt

```text
Design a neo-Swiss layout. A 12-column grid with a 24px gutter and a consistent outer margin. Place headline across columns 1-9, standfirst across 7-12, body copy across 1-6. The deliberate overlap creates the asymmetry.
```

---

*Generated from the `neo-swiss` theme in `style.css`. Token values are verbatim — regenerate rather than edit by hand.*