2.2 KiB
2.2 KiB
are-na — Are.na (Honest Web)
- School: Brutalist / Raw
- Vibe: System fonts on purpose, content > chrome, the web of the late 90s but considered
- Best for: Indie tools, creative platforms, "research-flavored" products, artist communities
- Touchstone: are.na, the Are.na annual
Palette
- Ground:
#FFFFFF - Ink:
#000000 - Are.na blue link:
#0000EE(the classic browser-default blue, used unironically) - Visited link:
#551A8B(also classic browser-default) - Hairline:
#CCCCCC - Optional: warm cream surface
#F4F1E8for cards
Typography
- Display & body: system serif (Times / Georgia) and / or system sans (the OS's default sans) on purpose
- No custom font loading — the recipe leans on letting the browser pick
- Body at 14–16px, line-height ~1.45
- Italic and underlined links (also browser-default)
Spacing: 4 / 8 / 16 / 24 / 32. Tight. Content-dense.
Radius: 0
Shadow: none
Motion: none, or instant
Signature moves
- Underlined blue links, visited purple — left as browser default
- Headings are just larger versions of body type, no special font
- Tables, lists, and prose all flow without ornament
- Footers are tiny, plain, link-rich (the early-web "all links" footer)
- Cards (if used) are flat rectangles with a 1px gray border and no shadow
Avoid
- Custom fonts of any kind
- Color other than the blue / purple link colors and the ink + ground
- Hover animations, transitions of any kind
- Modals, tooltips, micro-interactions
- Any sense of "polish"
AI prompt seed
Found-photograph collage on plain white paper, mixed sources, no Photoshop polish, slight imperfection, hand-cut feel, 4:3.
Don't use when
- The brand needs to feel "premium" — Are.na's recipe explicitly rejects premium signaling
- The audience expects modern SaaS UX cues — they may bounce, reading the page as broken
- Half-measures will be tempted — commit fully or pick another recipe; partial Are.na looks broken, not curated
Same school — Brutalist / Raw:
bloomberg-businessweek-turley·balenciaga-post-2017
Browse all 25 recipes: INDEX.md