Northwind DESIGN.md Example

What this file renders to

Computed from the file below when this page is built. Open it in the viewer for the full guideline with navigation and diagnostics.

Lint summary

The same checks as the DESIGN.md linter, run on this file at build time.

• 0 errors
• 1 warning
• 1 info

• warning
  No token data found. Add a YAML frontmatter block (between --- markers) or a fenced yaml code block with your design tokens.
• info
  Enriched 5 colors, 5 spacing tokens from the matching section.

Copy it, edit it, and use it as a starting point for your own file. Nothing is uploaded.

# Northwind: Design Notes

A warm, editorial reading system. No build step, no token compiler. The
source of truth is this document.

## Colors

| Token      | Value     | Role                                  |
| ---------- | --------- | ------------------------------------- |
| --bg       | #FBFAF8   | Page canvas                           |
| --ink      | #1B1A17   | Primary text                          |
| --muted    | #6E6A61   | Secondary text and metadata           |
| --accent   | #2F6BFF   | Links and the single primary action   |
| --line     | #E7E3DB   | Hairline borders                      |

## Spacing

| Step | Value |
| ---- | ----- |
| xs   | 4px   |
| sm   | 8px   |
| md   | 16px  |
| lg   | 24px  |
| xl   | 48px  |

## Typography

We set body copy in a humanist serif at 18px with generous 1.7 line-height,
and labels in a grotesque sans at 12px uppercase. Headlines stay tight.

## Do's and Don'ts

- Do let whitespace do the work; resist the urge to fill it.
- Don't introduce a second accent color without removing the first.

More files: all DESIGN.md examples and templates.