---
version: alpha
name: Tonic Room
description: Near-white lilac paper with a jade that is almost medicinal. Every product is a dose before it is a thing.
meta:
  id: "theme-tonic-room"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:15+09:00"
  updatedAt: "2026-09-02T00:58:15+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: How much, how often, for how long.
  bestFor: Pharmacy and supplements, prescription refills, health commerce, dosing and adherence apps
  avoidFor: Fashion, luxury, anything that sells by aspiration rather than by specification
  defaultMode: light
  surfaceStyle: flat
  accentUse: fill
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: bright
  motion:
    intensity: 2
    duration: 220ms
    ease: "cubic-bezier(0.34, 1.56, 0.64, 1)"
    signature: "Counters step. A quantity that changes ticks to its new value rather than crossfading, because the intermediate number is a lie."
  displayFont: Gabarito
  displayKind: sans
  bodyFont: Manrope
  monoFont: Fira Code
colors:
  background: "#ECEDFF"
  foreground: "#202227"
  card: "#E0E1FB"
  card-foreground: "#202227"
  popover: "#E0E1FB"
  popover-foreground: "#202227"
  primary: "#008B69"
  primary-foreground: "#0C0B1A"
  secondary: "#D3D4F6"
  secondary-foreground: "#202227"
  muted: "#D3D4F6"
  muted-foreground: "#5A5C65"
  accent: "#4B45A9"
  accent-foreground: "#F9FAFF"
  destructive: "#B6322D"
  destructive-foreground: "#F9FAFF"
  border: "#C4C5E3"
  input: "#C4C5E3"
  ring: "#008B69"
  chart-1: "#008867"
  chart-2: "#008D8C"
  chart-3: "#007892"
  chart-4: "#1B9E0E"
  chart-5: "#626C00"
colorsDark:
  background: "#0E0C21"
  foreground: "#D0D5EA"
  card: "#161626"
  card-foreground: "#D0D5EA"
  popover: "#161626"
  popover-foreground: "#D0D5EA"
  primary: "#00EAB3"
  primary-foreground: "#0C0B1A"
  secondary: "#1F1F35"
  secondary-foreground: "#D0D5EA"
  muted: "#1F1F35"
  muted-foreground: "#8289A1"
  accent: "#8B8CF6"
  accent-foreground: "#0C0B1A"
  destructive: "#FFB1A7"
  destructive-foreground: "#0C0B1A"
  border: "#2C2C41"
  input: "#2C2C41"
  ring: "#00EAB3"
  chart-1: "#00DBA8"
  chart-2: "#00CBCA"
  chart-3: "#46D8FF"
  chart-4: "#4FC645"
  chart-5: "#C6D900"
typography:
  display-lg:
    fontFamily: Gabarito
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Gabarito
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.18
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Gabarito
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.32
    letterSpacing: -0.005em
  body-lg:
    fontFamily: Manrope
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.66
  body-md:
    fontFamily: Manrope
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.62
  body-sm:
    fontFamily: Manrope
    fontSize: 13.5px
    fontWeight: 500
    lineHeight: 1.5
  label-caps:
    fontFamily: Manrope
    fontSize: 10.5px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.13em
  label-mono:
    fontFamily: Fira Code
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  numeral-xl:
    fontFamily: Fira Code
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.035em
rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 14px
  xl: 20px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 52px
  gutter: 20px
  margin: 28px
  measure: 64ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.full}"
    padding: 13px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 13px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 22px
  badge-label:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
---

# Tonic Room

## Overview

Tonic Room sells things people put in their bodies, and its one rule is that a
product is a **dose** before it is a product. The first three facts on any
product surface are a quantity, a unit and a period — 500mg, twice daily, 30
days — and the photograph comes after them, not before.

That inverts the usual supplements storefront, which opens on a lifestyle image
and buries the actual specification in a tab. Here the specification *is* the
hero, set at 60px, and it is the thing a customer compares between two products.

The palette is a near-white lilac with a jade that reads clinical rather than
organic. It suits pharmacy, refills, adherence and health commerce. It is wrong
for anything sold on aspiration, because this system has no room above the fold
for a mood.

## Colors

Clean ground, one clinical green, one violet for the thing you already take.

- **Ground:** near-white with a lilac cast. Cool enough to read as clean, not
  so cool that it reads as cold.
- **Primary (jade):** buy, refill, subscribe. Saturated and slightly medicinal —
  closer to a pharmacy cross than to a wellness brand.
- **Accent (violet):** a **fill**, used on dose chips and the "in your plan"
  badge. Filled means the pair is checked as a pair, so the label is always
  legible on it.
- **Neutrals** are lilac-tinted throughout.
- Charts are analogous — adherence over time is one quantity in one hue at
  several strengths, not a rainbow.

## Typography

Gabarito for numbers and headlines, Manrope for reading, Fira Code for anything
a pharmacist would check.

- **Display:** Gabarito at 700. Rounded, confident, with figures that hold their
  shape at 60px — which matters, because the largest thing on most screens here
  is a dose.
- **Body:** Manrope at 15px, 1.62, 64ch. Clear and slightly geometric.
- **Fira Code** carries lot numbers, NDC codes, expiry dates and strengths in
  tables. Its zero is slashed, which is the entire reason it is here.
- **numeral-xl** is the dose figure. It is never used for a price.

## Layout

**Dose-first stack.** Every product surface opens with a three-part
specification block — amount, frequency, duration — laid out as three cells
across the full measure, before any image, on every breakpoint. The photograph
sits below it at 16:9 and is allowed to be small.

Comparison is a first-class layout, not a feature: two or three products render
as parallel specification columns with the differing rows tinted, and the images
are dropped entirely in that view.

A 12-column grid at 1200px with 20px gutters. Generous vertical spacing at 28px;
this is a system people use while unwell and it does not crowd.

## Elevation & Depth

Flat. Cards are a fill and a 1px border, no shadow, in both modes. The only
raised element in the system is the dose reminder sheet, which slides up from
the bottom on mobile and does carry a soft shadow because it genuinely overlays.

Counters step rather than crossfade. When a remaining-doses figure goes from 12
to 11 it ticks; it does not blur through 11.5, because there is no such dose.

## Shapes

Soft — 10px on cards, 14px on panels, pills on every button and badge. The
rounding is the one place this system is allowed to be reassuring.

Photography is bright and high-key: clean surfaces, glass, water, daylight.
Never pills spilled on a table, never a person holding their head.

## Components

- **Specification block:** three cells — amount (numeral-xl), frequency, and
  duration — separated by 1px rules, above the fold, always.
- **Dose chip:** violet fill, pill radius, label-caps. Used for "morning",
  "with food", "8 hourly".
- **Adherence strip:** 30 cells, one per day, filled accent when taken and
  outlined when missed. No colour beyond those two.
- **Refill button:** jade fill, pill, 13px padding, and it always states the
  quantity it will send.
- **Interaction warning:** destructive text on a destructive-tinted ground with
  a 3px left border. It is the one place in the system that uses red.

## Do's and Don'ts

- Do put the dose above the photograph, always.
- Do set codes, lots and expiries in Fira Code.
- Do let the comparison view drop images entirely.
- Don't open a product page on a lifestyle image.
- Don't use numeral-xl for a price; it is reserved for the dose.
- Don't crossfade a changing count.
- Don't use red for anything except an interaction or contraindication warning.