Design System · v0.1
Every token, every component, on one page.
This is the Musy Design System vitrine. Palette, typography, spacing, radii, elevation, and the components they compose. Every swatch and sample on this page is bound to a CSS variable in app/globals.css.
01 · Colors
Neutrals
Zinc is the default cool-neutral. Slate is the alternative, slightly bluer. Signal is the near-black / near-white interactive colour that flips with the theme.
Zinc · default neutral
Slate · alternative
Signal · interactive
signal (light)
var(--zinc-950)
signal (dark)
var(--zinc-50)
02 · Typography
Type ramp
Inter for UI and display. Source Serif 4 for editorial quotes and italic emphasis. Geist Mono for metadata, paths, counts.
Display / H1
Curation is building.
Body — sans
A collection is a manifest of sources — videos, albums, repositories, papers, files — held together with notes, versions, and a clear record of who touched it and when.
Body — serif (editorial)
A collection is a place to build, not a feed to scroll.
Meta — mono
collection.json · 2.4 kb · v27 · sha 9f2c01a
Eyebrow
Public collection · edited 3h ago
03 · Radii
Corner scale
sm 4 · md 8 · lg 12 · xl 20. Pills use 999. No other radii are allowed.
sm
4px
md
8px
lg
12px
xl
20px
full
999px
04 · Elevation
Shadow scale
Flat, short, slightly cool shadows. Elev-0 is the default. Elev-3 is reserved for floating panels like the galaxy-nav.
elev-0
flat
elev-1
soft, short, cool
elev-2
soft, short, cool
elev-3
soft, short, cool
05 · Spacing
4px base scale
Every gap, padding, and offset lands on a multiple of 4. No exceptions.
06 · Components
Buttons
Shadcn/UI button variants, bound to Signal.
Variants
Sizes
07 · Components
Badges
Pills for status and tags. Uppercase-tracked for status, lowercase for labels.
08 · Components
Inputs
Shadcn inputs at the Musy density — 13px body, rounded-md.
09 · Icons
Lucide at 1.75 stroke
All icons use strokeWidth 1.75. 16px for inline, 18px for buttons, 20px for section headers.
10 · Motion
Ease & durations
One standard ease cubic-bezier(0.2, 0, 0, 1). Five durations — hover 120, press 180, panel 240, page 320, sun 480.