56 lines
2.2 KiB
Markdown
56 lines
2.2 KiB
Markdown
# 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 `#F4F1E8` for 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`](./bloomberg-businessweek-turley.md) · [`balenciaga-post-2017`](./balenciaga-post-2017.md)
|
||
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)
|