Color

Brand

Teal — primary action

Aqua — accent

The one rule — don't abuse brand color. Brand color is reserved for exactly two jobs: the primary action (CTA) and the one focal or active element the user should notice. Everything else is neutral — surfaces, text, borders, secondary actions, and even the focus ring on a field (that's a neutral grey, not brand). Spend it like it's scarce: aim for roughly one brand-coloured thing per screen. The moment a second teal element competes, neither reads as "the one to tap."

Teal #005E77 carries the primary action and white text on it. Aqua #14DBDB is a sparing accent (and the primary fill on dark backgrounds); aqua is never a white-text fill — too bright to read against.

Why. A first-time, low-literacy user scans for the brightest, most saturated thing and assumes that's what to tap. Keep the screen neutral and spend brand colour on exactly one action, and that instinct becomes correct behaviour — no trainer required.

AI

DayTwo's intelligence gets its own color — a violet → indigo → aqua gradient. Violet appears nowhere else in the system, so the instant a user sees it they know the coach is involved. And because the gradient resolves into our own aqua, it reads as DayTwo's AI, not a generic purple.

Use it for anything AI-driven — the coach mark, an AI-generated suggestion, an "Ask" entry point, a "Generated by AI" label. Reach for color.ai.gradient on a fill (an avatar, a pill, a hero band); use the solid color.ai.fg for inline AI text or a single glyph where a gradient is impractical, and color.ai.tint for a soft AI-flavored surface.

This is a third signal, separate from brand: teal still means "the one action," and violet means "this came from the AI." Keep them apart — don't tint a primary button with the AI gradient, and don't use violet for anything that isn't intelligence. Like brand color, spend it sparingly; if every card glows violet, none of them reads as special.

Neutrals

Most of every screen is neutral. The ramp is faintly teal-tinted so surfaces feel part of the brand without shouting.

Semantic colors

Components never reference the palette above directly — they use these role-based tokens, which resolve per theme. One change re-themes the whole system, and light/dark stay in agreement.

Where brand color is allowed

• The primary CTA — the single most important action on a screen, as a teal button fill. One per screen.
• The focal / active element — a selected tab, the chosen row in a menu, the "you are here" state. The one thing the user should notice.
• Links — an inline link may be teal, since it's an action.

Everything else is neutral — surfaces, text, labels, borders, and secondary actions.

Where it doesn't belong

• ❌ More than one action per screen — two "primary" colors means no primary.
• ❌ Surfaces, headers, or large areas — coloring big regions drowns the signal and slows scanning.
• ❌ Body text and labels — neutral; brand color on plain text is just noise.
• ❌ Focus rings on fields — an active input shows a neutral grey ring, not a brand one. Brand marks focal points, not every interactive state.
• ❌ As a white-text fill in aqua — fails contrast.

What user problem this solves

A first-time shop owner scans for the brightest, most saturated thing and assumes that's what to tap. If color is everywhere, that instinct fails and they hesitate. Keeping the screen neutral and spending brand color on exactly one action turns that instinct into correct behaviour — no trainer required.

Token reference

Semantic tokens

What components actually use. Each resolves per theme — change a value here and every screen follows.

Palette (primitives)

The raw ramps the semantic tokens are built from. Never reference these directly in a component.