Get Started

Reference

Design system

The tokens and components adna.network is built from — the SS-Ghibli / Tokyo-Night register (ADR-032). Every swatch and sample below renders straight from the live tokens, so the colours and sizes shown can't drift from what the site ships. Toggle the theme to see both registers.

Colour

Surfaces

  • --color-bg page background
  • --color-bg-alt elevated / alt surface
  • --color-surface cards / panels
  • --color-border hairlines / dividers

Text

  • --color-text body copy
  • --color-text-muted secondary / metadata
  • --color-text-heading headings

Brand

  • --color-primary purple — primary / accents
  • --color-link cyan — links / connections
  • --color-accent amber — sparing highlight

Status

  • --color-success success / active
  • --color-info info
  • --color-warning warning
  • --color-error error / deprecated

Typography

Type scale

  • Aa knowledge architecture --text-4xl · hero display
  • Aa knowledge architecture --text-3xl · page title
  • Aa knowledge architecture --text-2xl · section heading
  • Aa knowledge architecture --text-xl · subsection
  • Aa knowledge architecture --text-lg · lead / card title
  • Aa knowledge architecture --text-base · body
  • Aa knowledge architecture --text-sm · secondary / captions
  • Aa knowledge architecture --text-xs · labels / metadata

Font families

  • --font-display — Space Grotesk — display Give your project a knowledge architecture
  • --font-body — Inter — body Files are nodes, wikilinks are edges, AGENTS.md files are the navigation layer.
  • --font-mono — JetBrains Mono — code git clone …/aDNA.git ~/aDNA && cd ~/aDNA && claude

Font weights

  • Regular 400 — --font-weight-regular
  • Medium 500 — --font-weight-medium
  • Semibold 600 — --font-weight-semibold
  • Bold 700 — --font-weight-bold

Spacing

  • --space-1
  • --space-2
  • --space-3
  • --space-4
  • --space-5
  • --space-6
  • --space-8
  • --space-10
  • --space-12
  • --space-16

Radius & elevation

Radius

  • --radius-sm
  • --radius-md
  • --radius-lg
  • --radius-xl
  • --radius-full

Shadow

  • --shadow-sm
  • --shadow-md
  • --shadow-lg

Components

Buttons

Primary action Secondary

Badges

newupdateddeprecatedexperimental

Status pills

active genesis superseded

Callouts