# Are.na — Marketing Site Design Spec

> Source: are.na (live DOM, computed styles), 2026-07-30 (desktop 1512px). All stylesheets readable (`sheetsBlocked: 0`) — coverage is complete.
> Coverage: logged-out homepage. Publishes a real `--colors-*` token set (captured in full). Signed-in app (channels/blocks grid): behind login, `needs-dashboard`.
> Reality check: the queue hint ("austere text-first grid, near-zero chrome") is accurate and, if anything, understated. Sharpening it: the default surface is near-BLACK (not the light theme), the ENTIRE page lives between 12.5px and 16px with NO display type at all (the largest text anywhere is 16px — hierarchy comes from weight 400/700 and position, never size), and depth is refused outright: zero shadows, zero gradients, zero raster/canvas/video, structure carried by a single 3px radius and 1px `#4f4f4f` hairlines. The one flash of the brand is a published channel-status colour triad.

## 1. Visual Theme & Atmosphere

The quietest, most text-first surface in the library — a flat near-black page that reads like a plain-text document with a couple of framed cards. There is no hero image, no gradient, no shadow and no display headline; the homepage is a single left-aligned column of 16px prose ("Are.na is: 1. online software for saving and organizing the content that is important to you…") set in one custom neo-grotesque, with a tiny `**` asterisk mark standing in for a logo. What little chrome exists is a published `--colors-*` design token set whose signature is a channel-status triad — green for open, red for private, blue for links — kept almost entirely off the marketing page. Emphasis is by weight (700) and by brightening grey text toward white, never by scale or colour. Feels: austere, literary, calm, unbranded.

## 2. Color Palette & Roles

Are.na ships a semantic `--colors-*` system on top of a numbered grey ramp (dark theme captured).

### Grey ramp
| Token | Hex | Role / usage |
|---|---|---|
| gray0 | `#000000` | Canvas / `--colors-background` |
| gray1 | `#1a1a1a` | Cards, secondary button fill |
| gray2 | `#333333` | Inset panels |
| gray3 | `#4f4f4f` | Hairline borders |
| gray4 | `#696969` | Faint dividers / disabled |
| gray5 | `#b2b2b2` | Muted / tertiary text |
| gray6 | `#e5e5e5` | Primary text + `--colors-link` |
| gray7 | `#ffffff` | Emphasis / hover text / `--colors-foreground` |

### Channel-status triad + tints (the brand signature)
| Token | Hex | Role / usage |
|---|---|---|
| green3 | `#98dc89` | Open channels |
| green2 / green1 | `#2a4c29` / `#121d12` | Open-channel fills / deep tints |
| red3 | `#eb6864` | Private / closed channels |
| red2 / red1 | `#412020` / `#1a0404` | Private-channel fills / deep tints |
| blue2 | `#5e6dee` | Links / interactive, primary-button active |
| blue3 | `#e2dfe9` | Pale lavender — primary button fill (rest) |
| blue1 | `#191d52` | Deep blue tint |

### Semantic
| Token | Hex | Role / usage |
|---|---|---|
| alert | `#ff7a30` | Alerts / warnings |
| notification | `#ac7556` | Notifications |

Rule: chrome is the grey ramp; the green/red/blue triad is reserved for channel status and links, never decoration. Emphasis is grey6 → grey7 (brighten toward white), not colour.

## 3. Typography Rules

- Font stack: **areal** — Are.na's custom neo-grotesque (154×), with **Times** for occasional italic/quote emphasis (6×). No mono. (Preview substitutes Helvetica Neue / Arial for `areal` and a Times serif — recorded here so the spec never implies the real face.)
- Body: 16px / 23.2px (1.45) / 400 / `#e5e5e5`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Body / list | 16 / 23.2 | 400 | normal |
| Heading (h3) | 16 / 23.2 | 700 | normal |
| Inline emphasis | 16 | 700 | normal |
| Nav / button | 12.5 / — | 700 | normal |
| Muted / caption | 12.5–14 | 400 | normal `#b2b2b2` |

Pattern: **there is no display type.** The largest text on the page is 16px; the h1/hero role is simply bold 16px body. Hierarchy is built from weight (400 vs 700), colour brightness (grey6 vs grey7) and vertical position. Tracking is normal at every size.

## 4. Component Stylings

### Buttons (small, 24px)
- **Primary (Sign up)**: bg blue3 `#e2dfe9`, text `#000000`, radius 3px, h 24px, padding `0 10px`, 12.5px/700. Hover: bg → gray7 `#ffffff`. Active: bg → blue2 `#5e6dee`. Focus-visible: bg → blue3 `#e2dfe9`.
- **Secondary (Log in)**: bg gray1 `#1a1a1a`, text gray6 `#e5e5e5`, radius 3px, h 24px. Hover/active: text brightens to gray7 `#ffffff`, bg stays gray1. Focus-visible: `outline: none`, text `#ffffff`.

### Cards (pricing / channel)
- bg gray1 `#1a1a1a` (or transparent), 1px `#4f4f4f` hairline, 3px radius, NO shadow. Pricing rows carry small dark toggle pills ($70/year | $7/month) at the same 3px radius.

### Inputs
- No inputs on the marketing homepage (search + block inputs live in the app). Not captured for this surface.

### Nav
- Minimal top bar: a `**` asterisk mark, and right-aligned Log in / Sign up buttons. In-app, a `Are.na / <channel>` breadcrumb replaces it.

### States
- Focus: `button:focus-visible` uses `outline` swaps rather than a ring on the primary; recommend a visible `2px #5e6dee` outline for reconstruction since the native rule sets `outline:none` on some controls.

## 5. Layout Principles

- Single left-aligned column of prose; content sits at a comfortable reading measure with very generous surrounding whitespace on a full-black page.
- No grid on the marketing page — it is a document. The app itself is a channels/blocks grid (captured separately when logged in).
- Section rhythm is paragraph spacing, not bands; the only framed elements are the two pricing cards and an embedded app screenshot at the foot.
- Breakpoints step the column/margins at 520 / 900 / 1200 / 1800px; 3 container queries handle component-level reflow.

## 6. Depth & Elevation

- Radii: `3px` dominant (buttons, cards, pills, 10×), `50%` for avatars only. No other radius.
- Shadows: **none** — zero box-shadows on the entire page.
- Borders: 1px `#4f4f4f` (gray3) hairlines do all structural separation; most borders are 1px transparent placeholders.
- Philosophy: the flattest system in the library — depth is refused; a hairline and a 3px corner are the whole vocabulary.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| transform, opacity | 0.25s / 0.125s | ease-out / ease-in | reveals, hovers |
| (spinner) | 60s | cubic-bezier(0,1,1,1) | the rotating Premium mark |

- House transition is a short `transform, opacity` pair; the one infinite animation is a slow 60s rotation on the Premium icon.
- 7 hashed `@keyframes` (`k-dNOWux`, `k-cLjNWA`, …) — vanilla-extract generated names; triggers are subtle icon/reveal motions.
- No JS animation library detected. Ships **1 `prefers-reduced-motion` block** (`reducedMotionBlocks: 1`).
- Everything else is static — the page deliberately does not move.

## 8. Backgrounds, Effects & WebGL

- **None** — flat solid black. No gradients, no background raster layers, no canvas/WebGL, no video, no grain/noise, no backdrop-filter anywhere. This is the point: the surface is a plain document ground.

## 9. Do's and Don'ts

### Do
- Keep the canvas near-black `#000000` and text grey6 `#e5e5e5`; brighten to `#ffffff` for emphasis.
- Set the entire page in ONE family, weights 400/700, everything between 12.5px and 16px — no display type.
- Reserve the green/red/blue triad (`#98dc89` / `#eb6864` / `#5e6dee`) for channel status and links only.
- Use a single 3px radius and 1px `#4f4f4f` hairlines for all structure; keep buttons tiny (24px, 12.5/700).
- Refuse depth: no shadows, no gradients, no imagery in the chrome.
- Ship a reduced-motion block; keep motion to short transform/opacity transitions.

### Don't
- Don't add a display headline or push any text above 16px — hierarchy is weight and position.
- Don't add shadows, gradients, background imagery or blur.
- Don't colour the chrome — the triad is status only; emphasis is white text, not accent fills.
- Don't round beyond 3px or introduce a second type family (Times is italic-quote emphasis only).

## 10. Responsive Behavior

- Breakpoints (max-width): 520, 900, 1200, 1800px — column measure and margins step at each.
- Container queries: 3 (component-level reflow, e.g. pricing cards).
- `darkSchemeBlocks: 0` — the site does not switch on `prefers-color-scheme`; it ships a manual light/dark theme toggle inside the app, and the marketing page defaults to the dark theme captured here.
- Captured at desktop 1512px; mobile collapses to the single column earlier.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#e5e5e5` · Muted `#b2b2b2` · Border `#4f4f4f` · Emphasis `#ffffff`
- Font: `areal` (Helvetica/Arial stand-in) · Body: 16px · Radius: 3px everywhere · Button height: 24px
- Focus: recommend `2px #5e6dee` outline · Hover: brighten text to `#ffffff`
- Status triad: open `#98dc89` · private `#eb6864` · link `#5e6dee`

<arena-marketing_design_language>
Use the Are.na design language: an austere, text-first near-black document. Canvas #000000, primary text grey6 #e5e5e5 on a numbered grey ramp (#1a1a1a / #333333 / #4f4f4f / #696969 / #b2b2b2 / #ffffff), with emphasis delivered by brightening text to #ffffff rather than by scale or colour. ONE custom neo-grotesque (areal; substitute Helvetica Neue/Arial), weights 400 and 700 only, with Times for the occasional italic quote — and NO display type at all: the whole page lives between 12.5px and 16px, so the hero is simply bold 16px, hierarchy built from weight and position. Reserve the published channel-status triad — open green #98dc89, private red #eb6864, link/interactive blue #5e6dee, plus a pale blue3 #e2dfe9 primary-button fill — for status and links only, never decoration. Buttons are tiny (24px tall, 12.5px/700, 3px radius): primary is blue3 #e2dfe9 with black text going white on hover and #5e6dee on active; secondary is #1a1a1a with #e5e5e5 text brightening to white. Depth is refused entirely — zero shadows, zero gradients, zero background imagery or blur — with a single 3px radius and 1px #4f4f4f hairlines carrying all structure, on a flat solid ground. Motion is a short transform/opacity 0.25s transition plus one 60s icon rotation, with a reduced-motion block. Feels: austere, literary, calm, unbranded. Avoid: any display headline or text above 16px, a second type family, shadows/gradients/imagery in the chrome, colouring the UI beyond the status triad, or radii larger than 3px.
</arena-marketing_design_language>