---
name: Are.na
description: "This site is a masterclass in restraint and typography-driven design, making it an excellent reference for editorial and curation-focused interfaces."
version: alpha

colors:
  background: "#ffffff"
  primary: "#333333"
  secondary: "#696969"
  tertiary: "#00075f"
  neutral: "#999999"
  bg-soft: "#f7f7f7"
  bg-quiet: "#ededed"
  line: "rgba(222,222,222,1.0)"

typography:
  display:
    fontFamily: system-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: system-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: system-sans
    fontSize: 12.5px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 3px
  md: 5px
  lg: 8px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimal, text-first web application for saving, organizing, and connecting digital content.

*A clean digital zine or library catalog for organizing ideas.*

## Colors

High-contrast black-and-white with minimal accent usage.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#696969`)** — uses `ink-soft` token
- **Accent (`#00075f`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(222,222,222,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

A single-column centered layout for reading-focused content.

*Rhythm:* Consistent vertical spacing based on 4px increments.

## Elevation & Depth

- Borders: 1px solid #dedede

## Shapes

- `sm`: 3px
- `md`: 5px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** A simple button with subtle border and neutral background, or minimal text-only.
- **card:** A bordered container for grouping related content like pricing tiers.
- **chip:** A minimal, rounded tag for metadata or status.
- **input:** A clean text field with a subtle border, used for search or login.
- **hero:** A text-heavy introductory section with centered, bold statements.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```