Living reference
Styleguide
Every value here is rendered from assets/css/tokens.css. Use the toggle in the header to check both surfaces.
Brand
The temperature arc
warm#C4762B
cool#2F6F6E
signaturegradient
haloshadow
Warm = the human · Cool = the machine · The arc = their collaboration · The halo = a moment of care
Scale & legibility
Evaluation of the transparent mark at canonical micro and macro display sizes across both Stage and Paper surfaces.
Stage surface (Dark · #12100E)
16 px
Browser tab / compact favicon. Silhouette and temperature poles remain distinct.
24 px
Minimum standalone mark size. Infinity crossing and head loop clearly resolve.
32 px
Header brand lockup scale. Full 3D tubular lighting and smooth gradient.
48 px
Card lockup / avatar scale. Rich detail and specular reflections visible.
64 px
Display / feature icon scale. High fidelity rendering.
Paper surface (Light · #F7F3EC)
16 px
Browser tab / compact favicon. Transparent alpha sits cleanly without dark box.
24 px
Minimum standalone mark size. Warm terracotta and cool teal poles contrast on paper.
32 px
Header brand lockup scale. Floating transparent mark on light navigation bar.
48 px
Card lockup / avatar scale. Clean line caps and subtle grounding shadow.
64 px
Display / feature icon scale. Full gradient fidelity without dark fringe.
Colour · raw scales
Palette
Warm — human / care / stage light
warm-50#FBF3E9
warm-100#F6E4CD
warm-200#EFCC9F
warm-300#E5AE6C
warm-400#D9903F
warm-500#C4762B
warm-600#A35C22
warm-700#7E451C
warm-800#5A3116
warm-900#3A2011
Cool — machine / signal / system
cool-50#E9F4F3
cool-100#C9E5E2
cool-200#9DCCC8
cool-300#6DADA9
cool-400#458D8B
cool-500#2F6F6E
cool-600#235757
cool-700#1B4343
cool-800#142F30
cool-900#0E2021
Neutral — warm graphite
neutral-0#FFFFFF
neutral-50#F7F3EC
neutral-100#EDE7DE
neutral-200#D9D1C6
neutral-300#B8AFA3
neutral-400#8A8177
neutral-500#6B6157
neutral-600#4A4138
neutral-700#332C25
neutral-800#241F1A
neutral-850#1B1815
neutral-900#12100E
neutral-950#0A0908
Colour · roles
Semantic tokens
--bg
app background
--surface
cards, panels
--surface-raised
code, raised
--text
primary text
--text-secondary
secondary text
--text-muted
muted text
--accent
warm pole · human
--accent-hover
accent hover
--signal
cool pole · machine
--border
hairline
--focus-ring
focus outline
Type
Typography
Display · Spectral
Human–machine collaboration
Body · Inter
The tools being built here are means to an end: technical artists, empowered by rapid prototyping and clear theoretical grounding, working with machine learning and creative code in live performance.
Mono · IBM Plex Mono
const listener = new LatentListener({ stage })
Scale
4xl — 44px
2xl — 30px
lg — 20.3px
md — 18px body copy at 1.7 line-height
Space
Spacing scale
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9
--space-10
Shape & depth
Radius & elevation
radius-xs
radius-sm
radius-md
radius-lg
radius-xl
radius-pill
shadow-sm
shadow-md
shadow-lg
Components
Buttons & cards
Tool card
Cards use the surface token, a hairline border, and lift 2px on hover.
Static card
Same shell, no link.
Motion
Durations & easing
--duration-fast140ms · state changes
--duration-base220ms · transitions
--duration-slow360ms · entrances
--ease-standardcubic-bezier(0.2, 0, 0, 1)
--ease-outcubic-bezier(0.16, 1, 0.3, 1)
Motion collapses to 0ms under prefers-reduced-motion.