Design tokens
The shared token layer — the same Tailwind v4 + FlyonUI + Spotify-theme vocabulary the app is built from. The live preview is resolved from the running stylesheet; the catalog below is generated from source, never hand-edited.
Live preview · ui-kit island
A real Angular component (@simoops/ui-kit), hydrated on the static build. Toggle the theme — the swatches recolour live from the cascade.
Live theme preview Resolved from the running stylesheet · theme spotify
Primary
--color-primaryPrimary content
--color-primary-contentBase 100
--color-base-100Base 200
--color-base-200Base 300
--color-base-300Base content
--color-base-contentNeutral
--color-neutralSuccess
--color-successWarning
--color-warningError
--color-errorInfo
--color-infoSelection
--color-selectionBrand
--color-primaryoklch(0.70 0.18 153.85)Spotify brand-green--color-primary-contentoklch(0.21 0.02 153.85)dark text on the bright green--color-primary-hoveroklch(0.76 0.17 153.85)brighter green on hoverSurfaces
--color-base-200oklch(0.245 0.017 268.77)raised surfaces--color-base-300oklch(0.30 0.018 268.77)sunken / borders--color-neutraloklch(0.42 0.02 268.77)emphasis surface / strong borderAccent
--color-selectionoklch(0.72 0.15 185)Radius
--radius-sm0.125rem2px — hairline / inner clip--radius-md0.25rem4px — controls / fields--radius-lg0.375rem6px — cards / panels / dropdowns--radius-xl0.5rem8px — modals / overlays--radius-2xl0.75rem12px — centred auth / landing cards--radius-full9999pxpills / avatars--radius-field0.25rem--radius-selector0.25rem--radius-box0.375remSpacing
--spacing0.25remType
Ag
--font-sans"Inter", system-ui, -apple-system, sans-serifAg
--font-weight-normal400Ag
--font-weight-medium500Ag
--font-weight-semibold600Ag
--font-weight-bold700