Heliotrope Anthology

• DisplaySpace Grotesk
• BodyInter
• MonoSpace Mono

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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• 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.
• Separate major desktop sections with space.24 (96px) or space.16 (64px). On mobile, step down to space.12 (48px).
• Set runtimes, prices and credit counts in Inter with font-feature-settings: 'tnum', and right-align them in list rows.
• Show focus as a 2px ring token with a 2px offset on every interactive element, including cards that act as links.
• 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 place a second chromatic accent in a view. Poster and cover imagery is the only extra colour allowed.
• Don't give cards anything above shadow.sm. Separate them with card-on-background tonal lift and a 1px border instead.
• Don't set body text in #000000 or #ffffff. Use foreground (neutral.950 light, neutral.50 dark).
• 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 shrink list rows below 56px, buttons and inputs below 44px, or desktop section gaps below space.12 (48px).