The Brain
Ask in plain language and see exactly why each track made the cut.
SynAmp Spectrum · v1
The design system, in one page.
Tokens, type, colour and every component the marketing site and the app share. One gold signal, one spectrum, on a deep slate ground — with AA contrast enforced throughout.
Colour
Four layers: neutrals carry 70–90% of the pixels, one gold signal, a semantic set, and the spectrum — the brand's single decorative asset, reserved for the amp light and the visualizer.
Ground & surfaces
Signal & ink
The spectrum
Accent discipline
At most two visible uses of gold per screen — typically one eyebrow and one primary action. The spectrum appears only in the amp light and the visualizer, never as a page wash or on body text.
Tokens
Spacing is a 4px scale; radii run 4 → 20px; motion uses two easings and four durations and collapses under reduced-motion.
Spacing
--s-2 · 8
--s-4 · 16
--s-5 · 24
--s-6 · 32
--s-7 · 48
Radii & elevation
481220pill
--dur-1 120ms · --dur-2 200ms · --dur-3 320ms · --dur-4 520ms
--ease cubic-bezier(.2,0,0,1)
Typography
Momo Trust Display for headlines (single 400 weight — hierarchy comes from size and colour), Space Grotesk for body and UI, JetBrains Mono for labels, values and ledgers.
Make your library sing
Off the subscriptions first
Describe what you want to hear
A self-hosted music system that understands your library as sound, not just tags.
Body copy sits between 50 and 75 characters per line. Space Grotesk keeps the geometric, gently quirky character of the old brand while staying highly legible at UI sizes.
Self-hosted · AI playlists
BPM 128 · key A min · energy 0.62
Library care & integrity
Type rules
ALL CAPS always carries +0.06em or more. Latin display tightens to −0.02em; CJK stays at 0 tracking with line-height 1.3–1.4, including cover titles. Never fake italics — Momo has one weight and no oblique, so emphasis is colour and weight.
Buttons
One primary action per viewport. Hover moves the background, never the label toward the background. Minimum touch target is 44px.
Variants
Sizes
With icon
Forms
Every control defines focus-visible and error states. Labels are mono, uppercase and tracked; hints use muted ink, errors use the AA-safe danger ink with an icon.
Point your phone here — not Navidrome's own port.
Please enter a valid email address.
/
Chips, tags & badges
Chips filter and toggle; tags label; badges carry status. The same vocabulary runs from the marketing site to the app.
Chips & filters
Upbeat
TagsMergeSetup5 min readRoll-up
Badges
Done
In progress
Next
Planned
Segmented
Cards, panels & callouts
Cards group; panels expose a head and body; callouts carry a single note. No coloured left-border tiles — structure comes from borders and surface steps.
Roll-ups
Shuffle a whole branch of playlists, recursively.
Now playing
Recessed surface for persistent chrome and inputs.
Panel head
0 nodesPanel body content sits below a hairline divider.
Gold callout
For the one thing the reader must not miss on a page.
Warning
This proposal can't be applied as it stands.
Danger
Writing to the library is the riskiest thing SynAmp does.
Data & meters
Progress always shows filled encoding, never an empty outline. Metrics lead with the number; tables are dense but readable.
Analysed5,548▲ 1,204 this week
Unreadable1▼ 2 resolved
Subscriptions after P10
Analysing your library12%
AnalysedQueuedVerified
| Track | BPM | Energy |
|---|---|---|
| Dreams | 121 | 0.48 |
| Weightless | 78 | 0.21 |
| Teardrop | 77 | 0.36 |
| Svefn-g-englar | — | — |
Feedback & overlays
Toasts confirm, dialogs interrupt, tooltips explain, empty states direct. All of them are keyboard reachable and announce politely.
Tooltip target
Select a playlist
Create a playlist to collect tracks, or a folder to group them. Roll-ups turn a whole branch into one live list.
Skeleton & inline code
Run synamp-sync, then press ⌘ K to search.
A quiet note for secondary information.
Logo
A spectrum brain with a music note, tilted −9° with a thin light edge (it straightens on hover and keyboard focus), beside a coral-to-gold wordmark. The mark and the wordmark are separate files (synamp-mark.svg, synamp-wordmark.svg) so either can change on its own (the old combined synamp-logo.svg still has the first mark — don’t use it). Use the mark alone for favicons and app tiles.
- Clear space:
xon all sides, wherexis one quarter of the icon height. - Minimum size: icon 16px; horizontal lockup 120px wide.
- On busy photography, use the icon over a scrim — never place the wordmark directly on a mid-tone image.
- Never recolour the brain. The wordmark may run solid ink for single-colour embossing.
Accessibility
Accessibility is a gate, not a feature. Contrast, focus, motion and touch targets are enforced in the tokens themselves.
| Pair | Ratio | Verdict |
|---|---|---|
| --fg #F1F1F1 on --bg #212637 | 13.3:1 | AAA |
| --muted #9AA1B8 on --bg | 5.84:1 | AA |
| --gold #FFCD00 on --ink #0E0E10 | 12.8:1 | AAA |
| --on-gold on --gold (button text) | 12.8:1 | AAA |
| --coral #FF4A47 on --bg | 4.53:1 | AA · large |
| --faint #6E7690 on --bg | 3.33:1 | Decorative only |
Focus & keyboard
Every focusable element shows a 2px gold focus ring with a 2px offset. The full journey — nav, tabs, accordions, forms, dialogs — is keyboard operable; dialogs trap focus natively and close on Escape.
Motion & data
The visualizer never autoplays sound, and stays still under prefers-reduced-motion, Save-Data or a slow connection, with an explicit opt-in. All transitions collapse to near-zero under reduced-motion.
Targets & text
Interactive targets are 44px minimum. Body text never drops below 15px on mobile; nothing relies on colour alone — status always pairs a dot with a word.
Structure
Landmarks, a skip link, table captions, labelled inputs, descriptive alt text and aria-selected/aria-current state keep the page legible to assistive tech.