Theme v0 · placeholder brand
Design system
All colors, type, spacing, shapes and motion come from tokens in src/design-system. Change a value there and every screen follows. Both themes are shown side by side; the switch sets the rest of the app.
Light
Surfaces
- bgPage background
- bg-subtleQuiet bands
- surfaceCards, sheets, inputs
- surface-sunkenWells, placeholders
- surface-hoverHovered rows
Text and lines
- fgPrimary text
- fg-mutedSecondary text
- fg-subtleHints, metadata
- fg-inverseText on fg
- borderDividers, outlines
- border-strongHovered outlines
Accent
- accentPrimary actions
- accent-hoverHovered primary
- accent-fgText on accent
- accent-softHighlights
- accent-soft-fgText on soft accent
- focusFocus ring
Status
- successActive, free
- success-softSuccess background
- warningEnding, preview
- warning-softWarning background
- dangerDestructive, errors
- danger-softDanger background
Media and cast
- mediaPlayer background
- media-fgText on video
- media-scrimOverlays on video
- cast-1Character slot 1
- cast-2Character slot 2
- cast-3Character slot 3
- cast-4Character slot 4
- cast-5Character slot 5
- cast-6Character slot 6
- cast-7Character slot 7
- cast-8Character slot 8
Social logos
- instagram-fgGlyph on Instagram's gradient
- tiktokTikTok tile
- tiktok-fgTikTok note
- tiktok-cyanTikTok note offset
- tiktok-redTikTok note offset
Type scale
- 7xlLeg Day
- 6xlNoah Park
- 5xlPick a story
- 4xlNoah Park
- 3xlSpotter Wanted
- 2xlSection heading
- xlCard heading
- lgLead paragraph
- baseBody text for reading
- smSecondary text and labels
- xsCaptions and fine print
- 2xsBadges and eyebrows
Radii and shadows
- xs
- sm
- md
- lg
- xl
- button
- input
- chip
- card
- media
- sheet
- sm
- md
- lg
Components
NeutralE5 newActiveEndingFailedAI character
Hint text sits under the field.
Enter an email address like name@example.com.
Media surface with a caption
Settings list
- Static rowWith a descriptionValue
Dark
Surfaces
- bgPage background
- bg-subtleQuiet bands
- surfaceCards, sheets, inputs
- surface-sunkenWells, placeholders
- surface-hoverHovered rows
Text and lines
- fgPrimary text
- fg-mutedSecondary text
- fg-subtleHints, metadata
- fg-inverseText on fg
- borderDividers, outlines
- border-strongHovered outlines
Accent
- accentPrimary actions
- accent-hoverHovered primary
- accent-fgText on accent
- accent-softHighlights
- accent-soft-fgText on soft accent
- focusFocus ring
Status
- successActive, free
- success-softSuccess background
- warningEnding, preview
- warning-softWarning background
- dangerDestructive, errors
- danger-softDanger background
Media and cast
- mediaPlayer background
- media-fgText on video
- media-scrimOverlays on video
- cast-1Character slot 1
- cast-2Character slot 2
- cast-3Character slot 3
- cast-4Character slot 4
- cast-5Character slot 5
- cast-6Character slot 6
- cast-7Character slot 7
- cast-8Character slot 8
Social logos
- instagram-fgGlyph on Instagram's gradient
- tiktokTikTok tile
- tiktok-fgTikTok note
- tiktok-cyanTikTok note offset
- tiktok-redTikTok note offset
Type scale
- 7xlLeg Day
- 6xlNoah Park
- 5xlPick a story
- 4xlNoah Park
- 3xlSpotter Wanted
- 2xlSection heading
- xlCard heading
- lgLead paragraph
- baseBody text for reading
- smSecondary text and labels
- xsCaptions and fine print
- 2xsBadges and eyebrows
Radii and shadows
- xs
- sm
- md
- lg
- xl
- button
- input
- chip
- card
- media
- sheet
- sm
- md
- lg
Components
NeutralE5 newActiveEndingFailedAI character
Hint text sits under the field.
Enter an email address like name@example.com.
Media surface with a caption
Settings list
- Static rowWith a descriptionValue