← OpenDesign
CURATED · OPEN · FREE
Are.na
A minimal, text-first web application for saving, organizing, and connecting digital content.
tool community minimal
01
Identity DNA
minimal editorial curation community knowledge
A clean digital zine or library catalog for organizing ideas.
02
Color
#00075fAccent
#333333Ink
#696969Ink soft
#ffffffBG
#f7f7f7BG soft
#edededBG quiet
#999999Muted
rgba(222,222,222,1.0)Line
High-contrast black-and-white with minimal accent usage.
03
Typography
system-sans
display 32px · 700body 16px · 400small 12px · 400Use bold weight for emphasis within body text. · Use a tight line-height for headings and relaxed for body.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent vertical spacing based on 4px increments.
05
Surfaces
sm · 3px
md · 5px
lg · 8px
pill · 999px
1px solid #dedede
06
Layout
800 container
1 columns
16px gutter
768 / 1024 breakpoints
A single-column centered layout for reading-focused content.
07
Motion & Interaction
125ms micro
250ms small
400ms medium
cubic-bezier(0.25,0.1,0.25,1) easing
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
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 Captured from the live site · real computed styles
11
System prompt
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.
More from the library
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is a masterclass in restraint and typography-driven design, making it an excellent reference for editorial and curation-focused interfaces.