# Are.na · Design system migration spec

> Source: https://www.are.na  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in restraint and typography-driven design, making it an excellent reference for editorial and curation-focused interfaces.

## 1. Identity DNA

Are.na is designed as a clean digital zine, a library catalog for the networked age. Its identity is built on restraint, prioritizing the content of a community over the interface itself.

**One-liner:** A minimal, text-first web application for saving, organizing, and connecting digital content.
**Keywords:** minimal · editorial · curation · community · knowledge
**Analogy:** A clean digital zine or library catalog for organizing ideas.

## 2. Color

The color system is one of deliberate absence, using a strictly monochrome palette of white, light gray, and dark ink. A single, deep navy accent appears only in the footer, a quiet signature rather than a loud brand.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f7f7f7` | card background |
| `--bg-quiet` | `#ededed` | quiet area |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#696969` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#00075f` | single accent |
| `--line` | `rgba(222,222,222,1.0)` | divider |

**Color principle:** High-contrast black-and-white with minimal accent usage.

Color is used not for decoration, but to establish a clear hierarchy between the canvas and the content.

## 3. Typography

Typography carries the entire voice of the system, employing a clean, neutral sans-serif family for universal readability. The rules are simple: use bold for emphasis within text, and adjust line-height to distinguish headings from body.

- **Display:** system-sans
- **Body:** system-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 700 | 0px | Page headings |
| body | 16px | 1.5 | 400 | 0px | Primary content |
| small | 12.5px | 1.3 | 400 | 0px | Metadata and secondary text |

**Type rules:**
- Use bold weight for emphasis within body text.
- Use a tight line-height for headings and relaxed for body.

## 4. Spacing

The rhythm of the page is governed by a consistent vertical spacing scale built on 4px increments.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical spacing based on 4px increments.

## 5. Surfaces

Surfaces are flat and devoid of elevation, defined only by the thinnest of borders. Shadows are entirely absent, keeping the focus on the text plane.

- **Radius:** sm 3px · md 5px · lg 8px · pill 999px
- **Borders:** 1px solid #dedede

## 6. Layout

The structural skeleton is a single, centered column that creates a focused, linear reading path. This layout rejects complex grids in favor of generous whitespace and a calm, centered composition.

- **Container max:** 800px
- **Paragraph max:** 680px
- **Grid:** 1 columns, gutter 16px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A single-column centered layout for reading-focused content.

## 7. Motion & Interaction

Motion is employed with purpose and minimalism, used only to smooth the transition of elements into view. Interactions provide subtle, immediate feedback through smooth fade-ins and transforms, never for spectacle.

- **Durations:** micro 125ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.25,0.1,0.25,1)`
- **Patterns:**
  - Smooth fade-in for content reveals.
  - Subtle transform on hover for interactive elements.

- **Hover:** Subtle change in background color or text style.
- **Click:** Immediate response with minimal visual feedback.
- **Transition:** All CSS properties transition over a short duration.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is thoughtful, direct, and slightly philosophical, matching the platform's curation ethos. Headlines are bold and concise, while calls to action are simple, low-emphasis invitations to explore.

- **Tone:** Thoughtful, direct, and slightly philosophical.
- **Headline style:** Bold and concise statements that introduce a concept.
- **CTA style:** Simple, low-emphasis buttons that invite exploration.
- **Avoid:** Avoid loud, aggressive marketing language. / Avoid complex, multi-step user flows in the primary view. / Avoid vibrant, neon colors or complex gradients. / Avoid heavy, decorative imagery that distracts from text. / Avoid rounded corners larger than 8px. / Avoid drop shadows or heavy layering of surfaces.

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows a single, very dark blue accent used sparingly.
- ❌ Don't use decorative serif fonts — screenshot shows a clean, neutral sans-serif family.
- ❌ Don't use large, rounded corners — screenshot shows small, subtle 3px to 5px radius on cards.
- ❌ Don't use heavy drop shadows — screenshot shows completely flat surfaces without elevation.
- ❌ Don't use complex grids or multi-column layouts — screenshot shows a single-column, centered reading path.
- ❌ Don't use vibrant backgrounds — screenshot shows primarily white and very light gray backgrounds.

The system deliberately avoids decorative flourishes, complex flows, and vibrant color to keep the focus purely on the organization and discovery of ideas.

## System Prompt (paste into AI tool)

```
Design for Are.na, a minimal, text-first web application for curating digital content. Use a high-contrast, black-and-white palette with a single dark navy accent (#00075f). Employ a clean, system-native sans-serif font for readability. Keep layouts simple and centered, focusing on typography and whitespace. Critical don'ts: Don't use multiple accent colors, don't use decorative serif fonts, and don't use heavy shadows or complex grids.
```