Are.na — design system & UI screens
Online software for saving and organizing content and building knowledge collections. The page presents the product's core value proposition through text hierarchy, pricing tiers (Premium at $70/year or $7/month, and a free Guest tier), and visual examples of how users organize their saved content. Below the pricing options is a full-page carousel or gallery showing a sample collection page, followed by sections on long-term vision, philosophy, and calls-to-action.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/are-na.
Decoded design system
Are.na's decoded design system: background #FFFFFF, text #000000, accent #00075F, link #00075F, primary #000000; type scale h1 16px / h2 16px / body 16px; 5px spacing base; 0px base radius. The single interactive/action color is #F7F7F7 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #000000 |
| accent | #00075F |
| link | #00075F |
| button_bg | #F7F7F7 |
| button_text | #333333 |
Using these colors
- Action color
#F7F7F7— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#00075F— one role, not several (the action color).- accent
#00075F— accent for emphasis — keep it rare on the page. - primary
#000000— ≈ the text color — a foreground/text color, not an action color (action = #F7F7F7).
Typography
- Heading: Arial
- Body: Arial
- h1: 16px
- h2: 16px
- body: 16px
Spacing
- base unit: 5px
- scale: 5px, 10px, 15px, 20px, 25px, 35px, 65px, 100px, 130px
Radii
- base: 0px
- button: 3px
Native design tokens
| Token | Value |
|---|---|
--colors-channelPrivate2 | #DFBEBE |
--colors-foregroundLight | rgba(0, 0, 0, 0.6) |
--colors-focus | #3D46C2 |
--colors-red2 | #DFBEBE |
--colors-link | #333 |
--colors-slate | #696969 |
--colors-gray7 | #000 |
--colors-channelClosed3 | #333 |
--colors-channelPublic1 | #F4F8F3 |
--colors-notification | #A87253 |
…and 70 more measured on the page.
Button states (measured)
- primary hover: border
1px solid rgb(222, 222, 222)· color#000000 - primary focus: border
1px solid rgb(61, 70, 194)· color#000000
Layout (measured)
- container max-width:
650px - nav: 55px fixed
- common grid: 12 columns
Motion choreography (measured)
Load order: div.c-iYglRF
Overlay recipe (measured)
dialog panel: #FFFFFF · radius 3px · enter 400ms linear
Themes
dark counterpart: background #000000, text #FFFFFF.
Responsive (measured)
- breakpoints: 520px · 900px · 1800px
- mobile (390px): nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →