Are.na — Quiet Knowledge Commons

---
version: alpha
name: Are.na — Quiet Knowledge Commons
colors:
  background: "#FFFFFF"
  foreground: "#333333"
  primary: "#00075F"
  on-primary: "#FFFFFF"
  surface: "#F7F7F7"
  muted: "#999999"
  border: "#DEDEDE"
typography:
  body:
    fontFamily: areal, Arial, Helvetica, sans-serif
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 1.45
  section:
    fontFamily: areal, Arial, Helvetica, sans-serif
    fontSize: 19.2px
    fontWeight: 700
    lineHeight: 1.45
  button:
    fontFamily: areal, Arial, Helvetica, sans-serif
    fontSize: 14.4px
    fontWeight: 700
  small:
    fontFamily: areal, Arial, Helvetica, sans-serif
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.35
spacing:
  mobile-gutter: 15px
  button-gap: 10px
rounded:
  control: 3px
components:
  primary-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.control}"
  secondary-button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.foreground}"
  prose:
    textColor: "{colors.foreground}"
    backgroundColor: "{colors.background}"
    typography: "{typography.body}"
  quiet-label:
    textColor: "{colors.muted}"
---

## Overview

Are.na's public home reads like a short, considered letter rather than a promotional billboard. A small paired-star mark introduces “Are.na is,” followed by an alphabetic definition list, a community paragraph and two practical actions. Preserve the modest typographic scale, exceptionally generous whitespace and product-led evidence. The reference is the light-theme desktop page at 1440 × 1000 with a 1440 × 5532 full-page capture, plus the 390 × 844 mobile opening. This documents one captured product-demonstration state, not all its animations or interactions.

## Colors

Measured backgrounds are white, near-white #F7F7F7 and deep navy #00075F. Main prose is #333333. Reserve navy for the sign-up action and the broad footer; it should feel scarce in the otherwise grayscale page. Keep secondary actions near-white with dark labels. #999999 appears in small footer section labels; do not promote that subdued label treatment to essential body copy on white. #DEDEDE supplies quiet boundaries. The collected content and editorial thumbnails provide the color variety, not decorative page gradients.

## Typography

The measured custom family is `areal`, with Arial/Helvetica fallbacks. The first heading is only 19.2px, weight 400, with 27.84px leading: intentionally the same scale as the prose. Section labels use the same size at weight 700. Introduce hierarchy through bold passages, list markers and space rather than giant headlines. Buttons are 14.4px bold; small supporting copy is 12.5px/16.875px. The source buttons report zero CSS line-height because their labels are centered in fixed-height controls; implement centered labels with flex alignment instead of treating zero as a general text token. Keep the custom font if licensed; the fallback is not an exact substitute.

## Layout

At 1440px the opening prose column measures 647.5px, beginning at x=396.25, centered in the page. A faint rule separates this letter-like introduction from the demonstration. “How it works” aligns with that prose column while the browser mockup grows much wider and a phone overlaps its lower-left edge. A slim step rail sits to the right. Alternate narrow explanatory passages with broad product imagery, then return to narrow long-term-vision, API and numbered advice sections. A horizontal editorial strip precedes the full-width navy footer.

At 390px the prose measures 360px with 15px side gutters; the 19.2px body scale stays intact and wraps naturally. Sign-up and app-download buttons change from a horizontal desktop pair to full-width stacked controls, each measured 47px high with a 10px gap. A bottom navigation bar exposes the mark, search, login and signup. Keep content clear of this mobile navigation. Only the mobile opening was visually inspected; the full mobile page and intermediate breakpoints are not certified. Large section gaps are visibly around 100px or more, an estimate rather than a recovered spacing scale.

## Elevation & Depth

The page itself is flat. Faint borders and diffuse shadows lift the browser and phone demonstration, whose overlap creates the main depth cue. The second product montage fades into white at its lower edge; this is presentation imagery, not an instruction to reduce the opacity of reading text. Do not add raised marketing cards or broad drop shadows to the prose sections. Shadow blur and opacity were not measured.

## Shapes

Controls have measured 3px corner radii, not pill silhouettes. Rules are fine and understated. Larger device/mock-browser corners are visibly rounded but were not measured as page tokens. Retain the paired-star mark's small footprint and the restrained square plus control in the opening list. Most content blocks remain rectangular.

## Components

- **Definition-led hero:** small mark, body-sized heading, alphabetic list, one paragraph, primary and secondary actions. Preserve its editorial reading order.
- **Action pair:** navy signup with white label beside a near-white download control. Desktop widths are 85px and 163px; use content-sized desktop buttons and 360px-wide controls at the observed mobile width.
- **Product explainer:** large browser surface, overlapping phone and a five-item rail. “Capture” is emphasized in this captured state; switching behavior was not tested.
- **Principle sections:** bold body-sized headings followed by short prose; the API section uses thin outlined resource links.
- **Editorial strip and footer:** compact thumbnail-and-title entries, then a navy field with a brand statement and four navigation groups. Small gray category labels subordinate the white links.

## Do's and Don'ts

Do keep body copy legible and narrow. Do let authentic product screenshots explain the interface. Do repeat the same restrained action pair near the end. Do retain the change from compact desktop actions to comfortably tall mobile controls.

Don't enlarge the headline into a generic SaaS hero. Don't turn every sentence into a bordered card. Don't spread navy across all sections. Don't infer hover, focus, menu or demonstration-transition behavior from a still image; design and test accessible states independently.