Brand kits

Signature red. Display type 24px and up (or 18.66px bold), graphics and fills only; 4.38:1 on `surface-page`, below AA for body text. One decisive red move per view.

Interactive fills that carry a white body-size label (`on-brand`), 5.34:1; also link color on `surface-page`.

Hover state of `brand-action`: darker, never lighter.

Pressed state of `brand-action`.

Brand wash behind brand badges and callouts; text on it is `ink-primary`, `ink-secondary` or `on-container`.

Callout fill, same value as `brand-container`, named for the surface role.

White label on `brand-action`, and display-size type (24px and up) on bright `brand`. Never body size on bright `brand`.

Text on `brand-container`: brand badges and the brand tone of an eyebrow.

Headings and the strongest text on `surface-page`, `surface-subtle` and `surface-sunken`; also body-size text on bright `brand` (4.65:1).

Body copy on `surface-page`, `surface-subtle` and `surface-sunken`.

Labels and captions on `surface-page` (4.63:1); the lightest ink allowed for text. On `surface-subtle` it measures about 4.2:1, so keep it to large or non-essential labels there.

Default page ground; cards sit on it with a `border-default` edge.

Section band that sets one part of the page apart from `surface-page`.

Deeper band and inset wells; same value as `border-subtle`.

1px dividers inside quiet areas.

1px edge of cards and fields; decorative, the label next to it carries the meaning.

Structural rule: the logo divider and section breaks, at `rule-width-strong`.

Semantic alias: headings.

Semantic alias: body copy.

Semantic alias: labels and captions.

Semantic alias: display-size type (24px and up) on bright `brand`.

Semantic alias: body-size text on bright `brand`.

Semantic alias: links on `surface-page`.

Semantic alias: link hover.

Semantic alias: plain card fill.

Semantic alias: section band.

Semantic alias: graphics and large marks in bright red.

Semantic alias: the left accent rule of a callout, at `accent-rule-width`.

Primary brand color, #F69F19 — the same orange as the logo. Logo, primary buttons, the one bright move per view. 9.6:1 on `neutral-primary`; 2.1:1 on white, so on light grounds it is a fill only, never text. Same value in both themes.

Secondary brand color. The dot in the logo, verified states, positive deltas. 8.2:1 on `neutral-primary`; a fill only on white. Same value in both themes.

Neutral (P) from the brand book: the warm near-black. Dark page ground, and the ink on orange and green fills (10:1 and 8.2:1).

Neutral (S) from the brand book: the green-black. Sunken wells and alternate bands in dark mode.

Supporting color. Platinum tier fills and data-viz series. White text on it passes (5.1:1); as text on `neutral-primary` it is 4.0:1, so use `tier-platinum` for text in dark mode.

Supporting color. Gold tier fills, streaks, points. Ink text on it (10.4:1); never text on white.

Supporting color. Silver tier, secondary data-viz series, quiet metadata marks on dark.

Default page ground.

Cards and tiles on `surface-page`. In the light client app, cards are white with a `border-subtle` edge.

Nested panels, hover rows, the active tab pill (dark), and the client app sidebar and header (light).

Inset wells, progress tracks, input fields.

Headings, numbers, primary labels on every surface (15:1 or better in both themes).

Body copy and descriptions on every surface (9.6:1 or better in both themes).

Captions, metadata, inactive tabs on every surface (4.8:1 or better in both themes). Nothing lighter is text.

Decorative hairlines: card edges, dividers. Meaning never rides on it.

Edges of inputs, secondary buttons and toggles; 3.2:1 or better on every surface in both themes.

Primary button fill and the active tab marker.

Hover of `brand-fill`; the label stays `on-brand`.

Label and icon on `brand-fill`, `secondary-fill` and `gold` (8:1 or better). Never white on orange or green.

Orange as text and links: `surface-page`, `surface-card`, `surface-raised` (4.6:1 or better). Light mode deepens it; bright orange is never text on white.

Orange tint: the "Copy link" button fill and highlight badges. Text on it is `brand-text` (5.7:1 dark, 4.6:1 light).

Verified states, accept and confirm fills, the positive delta chip.

Green as text: positive amounts (+$260), 'Verified'. On `surface-page`, `surface-card`, `surface-raised`.

Green tint: the Refer and earn card and "Medical verified" badges. Text on it is `secondary-text` (6.9:1 dark, 4.7:1 light).

Platinum tier text on `surface-card` and `tier-platinum-wash` (5.5:1 or better). Bright `purple` is the tier color in charts and rings.

Gold tier text on `surface-card` and `tier-gold-wash` (5.2:1 or better).

Silver tier text on `surface-card` and `tier-silver-wash` (4.9:1 or better).

Platinum badge fill; text on it is `tier-platinum`.

Gold badge fill; text on it is `tier-gold`.

Silver badge fill; text on it is `tier-silver`.

Errors and destructive actions only, with a word or icon beside it. Not in the brand book; added so apps have an error state.

2px solid focus outline with 2px offset on every interactive element; 4.2:1 or better on every surface.