Undiscovered One

Cel & Stage

A hand-drawn animation-cel design language: ink lines, flat fills, warm diffused elevation, and springy squash-and-stretch feedback.

Color & contrast

Every background has a fixed foreground pairing — white or the dark platform background. Never white text on Video, Blogging, Limited Releases, Connections or Success.

Music

#003566 · White foreground

Gaming

#7B2CBF · White foreground

TV & Movies

#A4133C · White foreground

Video & Live Streaming

#F48C06 · Dark foreground

Books & eBooks

#2D6A4F · White foreground

Blogging

#D65DB1 · Dark foreground

Limited Releases

#FFC300 · Dark foreground

Connections

#00A6FB · Dark foreground

Creators

#00A896 · White foreground

Accounts

#596275 · White foreground

Error / Destructive

#FF4621 · White foreground

Success / Confirmation

#04E762 · Dark foreground

Light Mode Background

#F7F7F5 · Dark foreground

Dark Mode Background

#17191D · White foreground

Music · subtle tintGaming · subtle tintTV & Movies · subtle tintVideo & Live Streaming · subtle tintBooks & eBooks · subtle tintBlogging · subtle tint

Typography

Bricolage Grotesque never below SemiBold; Satoshi never above Medium.

Display — Bricolage ExtraBold · 64/1.05 · -1%

Undiscovered talent, on stage.

H1 — Bricolage Bold · 40/1.1 · -1%

Undiscovered talent, on stage.

H2 — Bricolage Bold · 28/1.15

Undiscovered talent, on stage.

H3 — Bricolage SemiBold · 20/1.2

Undiscovered talent, on stage.

H4 / Eyebrow — Bricolage Medium · 16/1.25 · uppercase +2%

Undiscovered talent, on stage.

Body Large — Satoshi Regular · 18/1.5

Undiscovered talent, on stage.

Body — Satoshi Regular · 16/1.5

Undiscovered talent, on stage.

Body Small — Satoshi Regular · 14/1.45

Undiscovered talent, on stage.

Caption — Satoshi Medium · 12/1.4 · +2.5%

Undiscovered talent, on stage.

Button / UI Label — Satoshi Bold · 14–16/1.2

Undiscovered talent, on stage.

Spacing & radius

8px base grid. No arbitrary in-between values. Radius is a separate, equally fixed token set.

space-14px · Tight internal spacing (icon-to-label, badge padding)
space-28px · Base unit; small component padding
space-312px · Compact input/button padding
space-416px · Standard padding (cards, inputs, buttons)
space-524px · Gaps between related components
space-632px · Section-internal spacing
space-748px · Spacing between distinct groups
space-864px · Large structural spacing
squircle 12px
squircle-lg 22px
tooltip 7px
pill 999px

Grid: 12 columns desktop/tablet, 4 on mobile · gutters 24px / 16px · page margins 32px / 16px · max content width 1280px · breakpoints 600px and 1024px.

Elevation & ink line

Soft, warm, diffused shadows layered with the ink outline — never replacing it.

Resting

shadow-resting

Raised

shadow-raised

Floating

shadow-floating

1.5px — dense data / small icons
2px — default UI
3px — illustrated characters

Iconography

One library (Lucide), 2px stroke, rounded caps, no fill — visually distinct from the 3px illustrated characters.

16px
20px
24px
32px

Hero gradient

Company-level signal only: all six roster colors as a blurred stage-lighting wash, fading to flat background before content begins.

Company-level identity

The whole roster, together.

70% opacity in light mode, 45% in dark, with a 75-second drift.

Buttons

Squircle at ~12px on a 46px base. Press compresses 4% and loosens the corner. Pills are reserved for chips.

Form inputs

Squircle like buttons, 46px tall, Caption labels above, Error stroke plus helper text, disabled at 40% opacity.

Enter a valid email address.

Body copy stays Satoshi Regular at 16px.

Badges & tags

Full pill, flat fill, Caption text, no elevation. Solid for service/status, subtle tint for low emphasis.

MusicGamingTV & MoviesVideo & Live StreamingBooks & eBooksBlogging
MusicGamingTV & MoviesVideo & Live StreamingBooks & eBooksBlogging
LiveFailedLimitedMetadata

Cards & imagery

Service cards may take a full color background; content cards stay neutral and let the artwork carry the color. Framed imagery matches the card radius.

Music

Artists, releases, and playback.

TV & Movies

Series, films, and festival cuts.

Video & Live

Streams, clips, and live sets.

New

Static Bloom

Nova Ardent · 3:34

Night Chorus

Halcyon Field · 4:12

Interactive card

Resting → raised on hover, with a squash on press.

Modals & tooltips

Modal: 22px squircle, floating elevation, dark 65% backdrop in both modes. Tooltip: always dark, resting only, 120ms fade.

Avatars

Squircle, not circle. Radius scales with size; 2px ink line from medium up; initials fallback in the service color.

NANAHFUO

Tabs & dividers

Underline tabs matching the top nav's active-link language. Dividers are a 1px hairline used only where spacing is not enough.

Static Bloom3:34
Night Chorus3:34
Paper Lanterns3:34

Empty, loading & error

Illustration for empty and page-level errors; functional indicators for loading; inline errors stay text and stroke only.

Your library is quiet

Save a track or album and it will show up here.

We couldn't load this section

Something interrupted the request. Give it another go.

Loading indicators

Toasts

Release published

Static Bloom is live now.

Upload failed

The file exceeded 200 MB.

Draft saved

We'll keep this for 30 days.

Music player

Floating elevation. The circular play button is the one sanctioned break from squircle; the equalizer marks the playing state.

1:21
-2:13
1:21
-2:13