Skip to the collection
Trova
Browse Are.na / Spatial Channel PinboardCompare with another family →

Style sheet · 2 references

Are.na / Spatial Channel Pinboard

Minimalist square blocks containing text snippets, URLs, and image uploads connected into collaborative visual thought channels.

Copy CSS :root tokens

Synthesized CSS custom properties derived from this family's dominant surface polarity, highest-contrast WCAG pair, and open-source font stand-ins.

/* Synthesized from Trova family: Are.na / Spatial Channel Pinboard (arena-channel-spatial) */
/* Evidence base: 2 curated reference(s) · Primary contrast 17.4:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f2f2f5;
  --surface-elevated: #71717a;
  --text-primary: #0d0d0f;
  --accent-primary: #1c1b19;
  --border-hairline: color-mix(in srgb, #0d0d0f 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}
Copy as DESIGN.md

The whole sheet as Markdown, every move cited to the reference it came from. Paste it into your DESIGN.md as a starting system.

# Are.na / Spatial Channel Pinboard — style sheet

> Minimalist square blocks containing text snippets, URLs, and image uploads connected into collaborative visual thought channels.

Derived from 2 curated reference(s) in the `arena-channel-spatial` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- ABC Diatype — 1/2
- Inter — 1/2
- Newsreader — 1/2
- Times New Roman — 1/2

## Color

- `#f2f2f5` light neutral — 2/2
- `#0d0d0f` dark neutral — 1/2
- `#1c1b19` dark neutral — 1/2
- `#71717a` mid neutral — 1/2
- `#78756f` mid neutral — 1/2
- `#a3a3ff` chromatic — 1/2

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#0d0d0f` / `#f2f2f5` — 17.4:1
- `#1c1b19` / `#f2f2f5` — 15.4:1
- `#0d0d0f` / `#a3a3ff` — 8.5:1
- `#1c1b19` / `#a3a3ff` — 7.6:1

## Moves

### grid/layout

- Masonry columns maintain a fixed 280px width with 24px gutters while image captions remain hidden at rest and appear in a 12px monospace footer rail only on card focus or hover. — 160-cosmos-spatial-cluster-curated-element-stream
- Two-column hanging-indent resume timeline: a 140px left date column (`2023 — Present`) aligned to the cap-height of the right-hand role description and collaborator chips. — 161-read-cv-posts-quiet-archival-professional-graph

### component pattern

- Clicking 'Connect' on any artifact opens a lightweight inline cluster search rather than a modal, showing which other curators saved the same work. — 160-cosmos-spatial-cluster-curated-element-stream
- Collaborator tags render as 24px pill chips with tiny 16px avatars that preview the co-worker's role on hover, turning a static resume into a verifiable graph. — 161-read-cv-posts-quiet-archival-professional-graph

## References

- 160-cosmos-spatial-cluster-curated-element-stream — Cosmos — Spatial Cluster & Curated Element Stream (exemplar)
- 161-read-cv-posts-quiet-archival-professional-graph — Read.cv / Posts — Quiet Archival Professional Graph

Type

Loadable Open-Source Stand-Ins

  • ABC Diatype (licensed) → Inter

Color

Pairs that read

  • Steal this.#0d0d0f on #f2f2f5 · 17.4:1
  • Steal this.#1c1b19 on #f2f2f5 · 15.4:1
  • Steal this.#0d0d0f on #a3a3ff · 8.5:1
  • Steal this.#1c1b19 on #a3a3ff · 7.6:1

Moves

grid/layout

component pattern

References