Camellia Overtone

About 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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• Set durations and track counts in Nunito Sans with font-feature-settings: 'tnum'. Right-align these columns in 48px track-list rows.
• Use Literata only through heading-lg (30px), display-md (38px) and display-lg (48px) for album, playlist and page titles.
• Pair every success, warning or destructive badge with an icon or text label (Live, Offline, Failed) so state never depends on color alone.
• 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).
• 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 set body text in Literata or use the display font below heading-lg (30px).
• 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 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 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 use Fira Code for labels, buttons or badges. Limit it to the code token for keys, build IDs and code blocks.