The most austere, text-first surface in the library — a flat near-black document with no hero image, no gradient, no shadow and no display headline at all. The logged-out 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 (areal; a Helvetica/Arial stand-in), with a tiny asterisk-pair standing in for a logo and Times used only for the occasional italic quote. The defining move is a total refusal of scale: the ENTIRE page lives between 12.5px and 16px, so the largest text anywhere is 16px and hierarchy is built purely from weight (400 body vs 700 heading) and vertical position, never size or colour — emphasis is delivered by brightening grey6 #e5e5e5 text toward white #ffffff. It publishes a real --colors-* token system on a numbered grey ramp (gray0 #000000 through gray7 #ffffff) whose one flash of brand is a channel-status colour triad kept almost entirely off the marketing page: open green #98dc89, private red #eb6864 and link/interactive blue #5e6dee, plus a pale blue3 #e2dfe9 that fills the primary Sign-up button. Buttons are tiny — 24px tall, 12.5px/700, 3px radius — the primary going from #e2dfe9 to white on hover and #5e6dee on active, the secondary #1a1a1a with #e5e5e5 text brightening to white. Depth is refused outright: zero box-shadows, zero gradients, zero raster or canvas or video anywhere, with a single 3px radius and 1px #4f4f4f hairlines carrying all structure. Motion is a short transform/opacity 0.25s ease-out transition plus one 60s icon rotation, behind a reduced-motion block; layout steps at 520/900/1200/1800 with three container queries.
⚠ needs-dashboard
Browse Are.na in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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#4f4f4fhairlines. The one flash of the brand is a published channel-status colour triad.
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.
Are.na ships a semantic --colors-* system on top of a numbered grey ramp (dark theme captured).
| 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 |
| 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 |
| 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.
areal and a Times serif — recorded here so the spec never implies the real face.)#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.