---
version: alpha
name: Heliotrope Anthology
description: Near-monochrome media UI with spacious layouts, a single violet accent and a violet-tinted neutral ramp for catalogue and reading screens.
colors:
  background: "#f8f7fc"
  foreground: "#13121a"
  card: "#ffffff"
  card-foreground: "#13121a"
  popover: "#ffffff"
  popover-foreground: "#13121a"
  primary: "#4f48c5"
  primary-foreground: "#ffffff"
  secondary: "#f0eff6"
  secondary-foreground: "#201f2b"
  muted: "#f0eff6"
  muted-foreground: "#63627b"
  accent: "#ebeafd"
  accent-foreground: "#24205a"
  destructive: "#c82d50"
  destructive-foreground: "#ffffff"
  success: "#0c6c4e"
  success-foreground: "#ffffff"
  warning: "#f1db90"
  warning-foreground: "#41300e"
  border: "#e0dfea"
  input: "#c6c5d4"
  ring: "#6762df"
  dark-background: "#13121a"
  dark-foreground: "#f8f7fc"
  dark-card: "#201f2b"
  dark-card-foreground: "#f8f7fc"
  dark-popover: "#201f2b"
  dark-popover-foreground: "#f8f7fc"
  dark-primary: "#8d8aee"
  dark-primary-foreground: "#17143d"
  dark-secondary: "#302f3f"
  dark-secondary-foreground: "#f0eff6"
  dark-muted: "#302f3f"
  dark-muted-foreground: "#c6c5d4"
  dark-accent: "#24205a"
  dark-accent-foreground: "#ebeafd"
  dark-destructive: "#f5738e"
  dark-destructive-foreground: "#3a0c16"
  dark-success: "#45c193"
  dark-success-foreground: "#05271d"
  dark-warning: "#d6a82e"
  dark-warning-foreground: "#271d07"
  dark-border: "#302f3f"
  dark-input: "#4d4c63"
  dark-ring: "#8d8aee"
typography:
  display-lg:
    fontFamily: Space Grotesk
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.04
    letterSpacing: -0.03em
  display-md:
    fontFamily: Space Grotesk
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.025em
  heading-lg:
    fontFamily: Space Grotesk
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.015em
  heading-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.005em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.005em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  code:
    fontFamily: Space Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 2px
  md: 6px
  lg: 10px
  xl: 14px
  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 20px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  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 20px
    height: 44px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 20px
    height: 44px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 44px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 32px
  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
---

# Heliotrope Anthology

## Overview

Heliotrope Anthology serves media products where the content leads: streaming catalogues, editorial magazines, and screening and listening apps. The system stays restrained. Roughly 90% of any screen is violet-tinted neutral (background, card, muted, border). The violet primary appears only on the one action or selection that matters in a view, such as Play, Subscribe or the active tab. Dark mode is the reference mode. Its surfaces are deep violet-black (neutral.950 #13121a, card neutral.900 #201f2b) rather than grey, so artwork and posters carry the colour.

Moods: quiet, luxurious, restrained, calm. Built for: media, streaming, publishing. Density: spacious.

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

brand is one violet-indigo ramp. Saturation peaks at 500–600, and both ends taper evenly, so 50–200 read as tints and 800–950 as shades with no muddy mid-steps. neutral uses the same hue at very low chroma: red sits 1–2 points above green in every step, which keeps greys from going cold blue. Status scales are shifted toward the cool brand temperature. success is a muted jade (700 #0c6c4e), not a neon emerald. warning is a dry ochre. danger is a rose-crimson about 70° away from the violet in hue, which keeps primary and destructive above ΔE 18 in both modes. Measured contrast: primary-foreground on primary is 6.8:1 light and 5.6:1 dark. primary on background is 6.2:1 light and 6.0:1 dark. muted-foreground on muted is 5.1:1 light and 7.8:1 dark. destructive-foreground on destructive is 5.3:1 light and 6.3:1 dark. ring on background is 4.4:1 light and 6.0:1 dark.

- **Primary** `#4f48c5` / dark `#8d8aee`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f8f7fc` / dark `#13121a` on `#13121a` / dark `#f8f7fc`: page surface and body text.
- **Card** `#ffffff` / dark `#201f2b`: raised surfaces.
- **Secondary** `#f0eff6` / dark `#302f3f`: secondary buttons and quiet controls.
- **Muted** `#f0eff6` / dark `#302f3f` with **muted-foreground** `#63627b` / dark `#c6c5d4`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ebeafd` / dark `#24205a`: highlights, selected rows, badges.
- **Destructive** `#c82d50` / dark `#f5738e`, **Success** `#0c6c4e` / dark `#45c193`, **Warning** `#f1db90` / dark `#d6a82e`: status only, always paired with an icon or label.
- **Border** `#e0dfea` / dark `#302f3f`, **Input** `#c6c5d4` / dark `#4d4c63`, **Ring** `#6762df` / dark `#8d8aee`.

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

## Typography

Display and heading-lg use Space Grotesk at weight 500 on a 1.4 ratio (28 → 40 → 56px). Tracking tightens as size grows: -0.015em at 28px, -0.025em at 40px, -0.03em at 56px. Inter sets everything from heading-md (20px) down, on a minor-third-like body ladder (12, 14, 16, 18px). Body uses 1.6 line height at 16–18px and 1.55 at 14px. Inter's tabular figures keep runtimes, credits and prices aligned. Space Mono 400 is limited to typography.code (13px) for timecodes, catalogue IDs and technical specs.

- Display: **Space Grotesk** (fallback system-ui, sans-serif)
- Interface: **Inter** (fallback system-ui, sans-serif)
- Mono: **Space Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Space Grotesk | 56px | 1.04 | 500 |
| display-md | Space Grotesk | 40px | 1.1 | 500 |
| heading-lg | Space Grotesk | 28px | 1.2 | 500 |
| heading-md | Inter | 20px | 1.35 | 600 |
| heading-sm | Inter | 16px | 1.4 | 600 |
| body-lg | Inter | 18px | 1.6 | 400 |
| body-md | Inter | 16px | 1.6 | 400 |
| body-sm | Inter | 14px | 1.55 | 400 |
| label | Inter | 14px | 1.3 | 500 |
| caption | Inter | 12px | 1.4 | 500 |
| code | Space Mono | 13px | 1.5 | 400 |

## Layout

Spacious density on a 4px grid. Section gaps run from space.8 (32px) to space.24 (96px). Content columns max out at 1280px, and body copy at about 68 characters (body-md at 16px is roughly 640px). List rows are at least 56px tall, so title (heading-sm) and metadata (body-sm) sit on separate lines without crowding.

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

## Elevation & Depth

Near-flat. Cards separate from background through tonal lift: white on neutral.50 in light mode, neutral.900 on neutral.950 in dark mode. A 1px border token supports the lift. shadow.sm is for cards floating over imagery. shadow.lg is reserved for dialogs and playback overlays. All shadows are tinted rgb(24, 20, 56), so they read as violet depth, not grey smudge.

- sm: `0 1px 2px rgba(24, 20, 56, 0.06)`
- md: `0 6px 16px -4px rgba(24, 20, 56, 0.12)`
- lg: `0 20px 48px -12px rgba(24, 20, 56, 0.28)`

## Shapes

Controls use radius.md (6px) and cards use radius.lg (10px), so forms read as precise rather than playful. radius.xl (14px) is for dialogs and sheets. radius.full is limited to badges, avatars and the play button.

Radius scale: sm 2px, md 6px, lg 10px, xl 14px, full 9999px.

## Components

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

## Do's and Don'ts

- **Do:** Use the primary token (brand.600 light, brand.400 dark) for exactly one button per view, such as Play or Subscribe. Render other actions as secondary or ghost buttons.
- **Do:** Set page titles in typography.display-lg (56px) or display-md (40px), using Space Grotesk 500 with the token's letterSpacing (-0.03em / -0.025em). Never use positive tracking on display sizes.
- **Do:** Separate major desktop sections with space.24 (96px) or space.16 (64px). On mobile, step down to space.12 (48px).
- **Do:** Set runtimes, prices and credit counts in Inter with font-feature-settings: 'tnum', and right-align them in list rows.
- **Do:** Show focus as a 2px ring token with a 2px offset on every interactive element, including cards that act as links.
- **Do:** Pair every success, warning and destructive badge or alert with an icon or text label, so status never relies on colour alone.
- **Don't:** Don't use primary, accent or any brand step for errors, deletions or negative states. Use destructive (danger.600 light, danger.400 dark).
- **Don't:** Don't place a second chromatic accent in a view. Poster and cover imagery is the only extra colour allowed.
- **Don't:** Don't give cards anything above shadow.sm. Separate them with card-on-background tonal lift and a 1px border instead.
- **Don't:** Don't set body text in #000000 or #ffffff. Use foreground (neutral.950 light, neutral.50 dark).
- **Don't:** Don't use Space Grotesk below 28px (heading-lg) or at weights other than 500 or 600. Use Inter from heading-md (20px) down.
- **Don't:** Don't shrink list rows below 56px, buttons and inputs below 44px, or desktop section gaps below space.12 (48px).