CURATED · OPEN · FREE

Are.na

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

01

Identity DNA

A clean digital zine or library catalog for organizing ideas.

02

Color

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

03

Typography

system-sans

• display32px · 700
• body16px · 400
• small12px · 400

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

04

Spacing

Consistent vertical spacing based on 4px increments.

05

Surfaces

1px solid #dedede

06

Layout

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

07

Motion & Interaction

Smooth fade-in for content reveals. · Subtle transform on hover for interactive elements.

Subtle change in background color or text style. · Immediate response with minimal visual feedback.

08

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.

09

Voice & Don'ts

• Tone Thoughtful, direct, and slightly philosophical.
• Headlines Bold and concise statements that introduce a concept.
• CTAs Simple, low-emphasis buttons that invite exploration.

• 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.
• Avoid: Avoid loud, aggressive marketing language.
• Avoid: Avoid complex, multi-step user flows in the primary view.
• Avoid: Avoid vibrant, neon colors or complex gradients.
• Avoid: Avoid heavy, decorative imagery that distracts from text.
• Avoid: Avoid rounded corners larger than 8px.
• Avoid: Avoid drop shadows or heavy layering of surfaces.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko