---
version: alpha
name: Camellia Overtone
description: "Clinical-calm music UI: orchid-rose actions on cool slate, dark-first neutrals, Literata titles and legible Nunito Sans text."
colors:
  background: "#f5f7fa"
  foreground: "#10151e"
  card: "#ffffff"
  card-foreground: "#10151e"
  popover: "#ffffff"
  popover-foreground: "#10151e"
  primary: "#b1307c"
  primary-foreground: "#ffffff"
  secondary: "#e9edf2"
  secondary-foreground: "#1b222e"
  muted: "#e9edf2"
  muted-foreground: "#535e6f"
  accent: "#ffe1f0"
  accent-foreground: "#501235"
  destructive: "#c0381f"
  destructive-foreground: "#ffffff"
  success: "#17704f"
  success-foreground: "#ffffff"
  warning: "#f8d991"
  warning-foreground: "#422c02"
  border: "#d5dce5"
  input: "#b5bfcc"
  ring: "#d1489a"
  dark-background: "#10151e"
  dark-foreground: "#f5f7fa"
  dark-card: "#1b222e"
  dark-card-foreground: "#f5f7fa"
  dark-popover: "#1b222e"
  dark-popover-foreground: "#f5f7fa"
  dark-primary: "#e970b5"
  dark-primary-foreground: "#33091e"
  dark-secondary: "#2a3341"
  dark-secondary-foreground: "#e9edf2"
  dark-muted: "#2a3341"
  dark-muted-foreground: "#b5bfcc"
  dark-accent: "#501235"
  dark-accent-foreground: "#ffe1f0"
  dark-destructive: "#f57a62"
  dark-destructive-foreground: "#3b0c05"
  dark-success: "#4cbc92"
  dark-success-foreground: "#052a1d"
  dark-warning: "#d1a33e"
  dark-warning-foreground: "#291a01"
  dark-border: "#2a3341"
  dark-input: "#3e4959"
  dark-ring: "#e970b5"
typography:
  display-lg:
    fontFamily: Literata
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.022em
  display-md:
    fontFamily: Literata
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.018em
  heading-lg:
    fontFamily: Literata
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.012em
  heading-md:
    fontFamily: Nunito Sans
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.005em
  heading-sm:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.01em
  caption:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: Fira Code
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 24px
---

# Camellia Overtone

## Overview

Camellia Overtone is for people who spend hours inside music software: listeners, producers, label staff and mixing engineers. The system is built for long sessions, often at night. It uses cool slate neutrals and few decorative elements. One orchid accent (primary) marks the current action, the focus ring and the now-playing indicator. Dark mode is the primary design target. Light mode uses the same tokens with the lightness roles reversed. Hues and contrast pairings are unchanged between the two modes.

Moods: clinical, calm, reassuring. Built for: music, audio-streaming, creator-tools. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Orchid (brand, hue about 325–335) is the only action color. It is used for primary, ring and the now-playing indicator. Light mode uses brand.600 for primary (about 5.9:1 against white). Dark mode uses brand.400 for primary (about 6.4:1 on neutral.950) with brand.950 text. Neutrals are a slate ramp with a low-chroma blue cast, so they read cool next to the warm-pink accent. Dark surfaces stack from background neutral.950 to card neutral.900 to muted and secondary neutral.800. Destructive is a coral-red at roughly 35° in LCh, pushed further from orchid than the previous red. The two stay clearly apart in both modes (ΔE2000 above 20): danger.600 in light mode and danger.400 in dark mode. Success is a deep teal-green and warning is a honey amber. Both share the brand's chroma curve: soft at 50–200, saturated at 400–600 and dense at 800–950. All three scales darken monotonically from 50 to 950.

- **Primary** `#b1307c` / dark `#e970b5`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f5f7fa` / dark `#10151e` on `#10151e` / dark `#f5f7fa`: page surface and body text.
- **Card** `#ffffff` / dark `#1b222e`: raised surfaces.
- **Secondary** `#e9edf2` / dark `#2a3341`: secondary buttons and quiet controls.
- **Muted** `#e9edf2` / dark `#2a3341` with **muted-foreground** `#535e6f` / dark `#b5bfcc`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffe1f0` / dark `#501235`: highlights, selected rows, badges.
- **Destructive** `#c0381f` / dark `#f57a62`, **Success** `#17704f` / dark `#4cbc92`, **Warning** `#f8d991` / dark `#d1a33e`: status only, always paired with an icon or label.
- **Border** `#d5dce5` / dark `#2a3341`, **Input** `#b5bfcc` / dark `#3e4959`, **Ring** `#d1489a` / dark `#e970b5`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The type scale uses a ratio of about 1.25 (major third) from a 16px body: 12, 14, 16, 18, 20, 24 (unused), 30, 38 and 48. Literata is used only for heading-lg (30), display-md (38) and display-lg (48), so album and playlist names stand apart from functional text. Letter spacing tightens as size grows: -0.012em at 30px, -0.018em at 38px and -0.022em at 48px. Nunito Sans sets all functional text: lists, forms, buttons and metadata. Body-md is 16/1.55 and body-lg is 18/1.6, and its large x-height keeps 12–14px labels readable on dark surfaces. Fira Code (400 and 500) is used only for API keys, build IDs, log timestamps and code samples. Every weight listed is shipped by its family on Google Fonts.

- Display: **Literata** (fallback Georgia, serif)
- Interface: **Nunito Sans** (fallback system-ui, sans-serif)
- Mono: **Fira Code** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Literata | 48px | 1.08 | 600 |
| display-md | Literata | 38px | 1.12 | 600 |
| heading-lg | Literata | 30px | 1.2 | 500 |
| heading-md | Nunito Sans | 20px | 1.3 | 700 |
| heading-sm | Nunito Sans | 16px | 1.4 | 700 |
| body-lg | Nunito Sans | 18px | 1.6 | 400 |
| body-md | Nunito Sans | 16px | 1.55 | 400 |
| body-sm | Nunito Sans | 14px | 1.5 | 400 |
| label | Nunito Sans | 14px | 1.25 | 600 |
| caption | Nunito Sans | 12px | 1.4 | 600 |
| code | Fira Code | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid. Track-list rows are 48px (space.12) so artwork, title and duration each have room. Content columns cap at 1120px. Player chrome keeps a fixed 8px (space.2) gutter. Controls are 40px tall, and badges are 24px to stay on the grid.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Elevation is low by default. Cards separate from the background with a 1px border token and shadow.sm. Popovers and menus use shadow.md. Dialogs and the now-playing sheet use shadow.lg. In dark mode, separation comes mainly from the surface steps (neutral.950, then neutral.900, then neutral.800), because shadows show up weakly on deep backgrounds.

- sm: `0 1px 2px rgba(16, 21, 30, 0.08)`
- md: `0 4px 12px -2px rgba(16, 21, 30, 0.20)`
- lg: `0 16px 40px -8px rgba(16, 21, 30, 0.36)`

## Shapes

Rounding is soft but precise: radius.md (8px) on buttons and inputs, and radius.lg (12px) on cards and artwork containers. radius.full (pill) is used only for status badges such as Live, Explicit and Offline. All other shapes stay rectilinear.

Radius scale: sm 4px, md 8px, lg 12px, xl 16px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use the primary token for one filled button per view, the now-playing indicator and the 2px focus ring (ring) only. Render other actions as secondary or ghost buttons.
- **Do:** Set durations and track counts in Nunito Sans with font-feature-settings: 'tnum'. Right-align these columns in 48px track-list rows.
- **Do:** Use Literata only through heading-lg (30px), display-md (38px) and display-lg (48px) for album, playlist and page titles.
- **Do:** Pair every success, warning or destructive badge with an icon or text label (Live, Offline, Failed) so state never depends on color alone.
- **Do:** Design dark mode first: put the page on background (neutral.950), cards and popovers on card (neutral.900), and inset or hover areas on muted (neutral.800).
- **Do:** Use muted-foreground (neutral.600 in light mode, neutral.300 in dark mode) for durations, timestamps and helper text. Both pass 5:1 on background and on muted.
- **Don't:** Don't use primary for errors, delete actions or failed uploads. Use destructive: danger.600 in light mode, danger.400 in dark mode.
- **Don't:** Don't set body text in Literata or use the display font below heading-lg (30px).
- **Don't:** Don't use #000000 or #ffffff as page backgrounds. Use neutral.950 (dark) and neutral.50 (light). #ffffff is allowed only for card and popover in light mode.
- **Don't:** Don't give cards more than shadow.sm. Reserve shadow.md for popovers and menus, and shadow.lg for dialogs and the now-playing sheet.
- **Don't:** Don't place more than one line of body text on the accent surface (brand.100 light, brand.900 dark). Accent is for selected rows and highlights.
- **Don't:** Don't use Fira Code for labels, buttons or badges. Limit it to the code token for keys, build IDs and code blocks.