Foundations · Cassette

Colour

Soft sage and ivory surfaces with one restrained green for actions. Capture state is the only place red and amber appear, and always with a text label beside the colour.

◧

Surfaces and ink

Page, sidebar, secondary controls, selection and line colours. The first :root block is partly overridden by a second block near the end of the file.

apps/desktop/src/styles.css :1-16, :2176

page#f7f7f2root background, styles.css:4

sidebar#f0f1e9.sidebar, styles.css:76

secondary button#fbfbf6.button.secondary

selected nav#dfe5d4.nav-item.selected

line#e5e6de--line, :11

ink#283029--ink, :9

●

Action and brand greens

The primary button and brand accents. Three near-identical primary greens exist (#4d6348, #4b6146, #51664c) because the stylesheet grew in layers.

apps/desktop/src/styles.css :10, :357, brand rules

green#4d6348--green, :10

primary button#4b6146.button.primary

primary hover#3d5239.button.primary:hover

brand period#6c825b.brand-period

private dot#789068.private-pill > span

muted (final)#626b59--muted in the second :root; the first value #868980 is overridden

●

Capture state colours

Ready, recording, paused and error, plus the level meter. Colour never carries the meaning alone: each state also prints its label.

apps/desktop/src/styles.css :1392-1400, :2448-2470

ready dot#52724a.capture-state i

recording / error dot#b54a3e.state-recording i

recording / error text#9b342b.state-recording

paused dot#9d741f.state-paused i

paused text#836019.state-paused

meter lit#8ca777.meter i.lit

meter amber#c9af66.meter i.amber

Type

Georgia serif for page headings and the timer-style display, a system sans for everything else, monospace for paths.

Type faces

The sans stack names Inter first, but no font file ships, so a Windows machine without Inter installed renders Segoe UI. Serif is Georgia.

apps/desktop/src/styles.css :2-15

Library.

Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif (fallback in practice)

--serif: Georgia, "Times New Roman", serif

Type sizes in use

Counts of font-size declarations. Many label sizes sit under 12px, and two 5px declarations exist for cassette artwork. Small label text is a legibility finding against the product brief.

apps/desktop/src/styles.css (declaration counts)

Good ideas deserve a place to land5px · 2 uses

Good ideas deserve a place to land8px · 8 uses

Good ideas deserve a place to land9px · 21 uses

Good ideas deserve a place to land10px · 27 uses

Good ideas deserve a place to land11px · 36 uses

Good ideas deserve a place to land12px · 22 uses

Good ideas deserve a place to land13px · 4 uses

Good ideas deserve a place to land14px · 5 uses

Good ideas deserve a place to land25px · 3 uses

Good ideas deserve a place to land26px · 3 uses

Shape and spacing

Radii are not a clean scale: ten distinct values are in use. The spacing scale is 4/8/12/16/24 and is declared in the second :root block.

▢

Corner radii

Every distinct pixel radius in the stylesheet, plus 50% for dots and reels. Reproduced as shipped.

apps/desktop/src/styles.css (border-radius declarations)

2px

3px

4px

5px

6px

7px

8px

9px

11px

12px

↔

Spacing scale

The five spacing tokens declared in the second :root block. The final sidebar is 208px, the topbar 56px and page padding 24px.

apps/desktop/src/styles.css :2176-2200

--space-xs4px

--space-sm8px

--space-md12px

--space-lg16px

--space-xl24px

Icons and motion

Lucide, imported by name in App.tsx. Motion is limited to a spinner, a level-meter pulse and the optional cassette reels, all stopped by one reduced-motion rule.

◇

Icons in use (lucide-react 0.468)

The 40 icons App.tsx imports, rendered with lucide stroke defaults (24 viewBox, 2px stroke).

apps/desktop/src/App.tsx :6-47

AudioLines

Mic

ArrowUpRight

Search

SlidersHorizontal

Library

FolderInput

Settings

ShieldCheck

ChevronRight

Play

Pause

Square

Upload

Download

Undo2

Redo2

Scissors

Trash2

Repeat2

Split

FileAudio

X

Check

Loader2

MoreHorizontal

Headphones

ArrowLeft

MessageSquare

KeyRound

Volume2

Info

FolderOpen

PanelLeftClose

PanelLeftOpen

Minimize2

Maximize2

Rewind

FastForward

LogOut

◌

Motion and reduced motion

pulse (meter), spin (loaders) and cassette-reel (reels). A single prefers-reduced-motion block disables animation; a separate persisted animation preference also exists.

apps/desktop/src/styles.css :1469, :1790, :2627, :2659

@keyframes pulse@keyframes spin@keyframes cassette-reel

@media (prefers-reduced-motion: reduce) { animation: none }