# Are.na — Design System

## North Star
> An 'Internet memory palace' for connected knowledge collectors — quiet, text-first, the opposite of an algorithm.

**Theme:** light
**Category:** creative
**Tags:** `cool` · `serif-heavy` · `minimal` · `type-first` · `achromatic` · `dense` · `editorial` · `creative`

## Description
Are.na's marketing site is almost defiantly plain — system-style sans, near-white canvas, narrow centered single-column layout, and a deep navy footer. No imagery, no illustration, no hero animation. Pricing tiers, manifesto text, and a single product screenshot are the entire surface. The personality is post-internet quiet — the design system says 'we trust the reader' rather than 'we want your attention'.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-700 | `#333333` | neutral | neutral step 700 | — |
| neutral-50-1 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-50-2 | `#f7f7f7` | neutral | neutral step 50 | `neutral-100` (Δ0.006) |
| blue-800 | `#00075f` | blue | blue step 800 | — |
| neutral-500 | `#696969` | neutral | neutral step 500 | — |
| red-200 | `#dfbebe` | red | red step 200 | — |
| violet-600 | `#3d46c2` | violet | violet step 600 | — |
| neutral-100-1 | `#dedede` | neutral | neutral step 100 | `zinc-200` (Δ0.02) |
| green-500 | `#238020` | green | green step 500 | `green-700` (Δ0.012) |
| neutral-100-2 | `#ebecf7` | neutral | neutral step 100 | `violet-100` (Δ0.014) |
| green-200 | `#b4d6b3` | green | green step 200 | — |
| red-500 | `#b93d3d` | red | red step 500 | — |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#ebecf7` | Cards / elevated panels |
| 2 | surface-2 | `#dedede` | Elevation tier 2 |
| 3 | surface-3 | `#696969` | Elevation tier 3 |
| 4 | surface-floor | `#333333` | Elevation tier 4 |

**Elevation philosophy.** Two tiers only — flat content body and the navy footer band. No shadows. The footer's color shift IS the elevation device.

## Typography

### Times New Roman — weight 400
*serif*

### areal — weight 400
*body*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `body` | 16px | 1 |  |
| `h3` | 16px | 1.45 |  |
| `h4` | 16px | 1.45 |  |
| `link` | 16px | 1 |  |
| `ui-action` | 12.5px |  |  |

## Spacing & Radius

**Radius**
- `none`: 0
- `sm`: 3px

**Spacing**
- `base`: 100px

## Layout
A narrow single-column flow centered on the page: small logo, tier cards, a screenshot, manifesto-style paragraphs, then the deep-navy footer. Vertical rhythm is unhurried.

## Imagery
None on the marketing surface. A single product screenshot of the canvas is allowed mid-page; otherwise the page is text.

## Do
- Use a centered single-column reading layout with comfortable line length
- Default to a system or near-system sans; let the words be the design
- Anchor the page with a deep navy footer band — the only color moment
- Keep buttons text-first with a thin border, no fills, no gradients

## Don't
- Don't add hero imagery, illustration, or color blocks above the fold
- Don't use display-scale typography; mid-size body text is the personality
- Don't shadow or elevate cards — flat surfaces only
- Don't introduce a second accent — navy footer is the only color moment