Color

The app frame: side navigation, top bar, and the page itself on mobile. Spectrum background-base (gray-25); dark is close to the logo's near-black.

The main content area on desktop, behind cards. Spectrum background-layer-1 (gray-50).

Behind product pictures (cards, thumbnails, the AI picture picker): light in both themes, so dark gear on a see-through background stays visible and every shot sits on the same studio gray.

Calendar days that are not workdays: a shade darker than the calendar surface in both themes, so the working week stands out.

The rounded page that sits in the frame on desktop, and the page on phones. Panels and cards sit on it.

The app frame on desktop: the gray around the page and behind the side navigation.

A panel that sits on layer-1 without a shadow (a table, a settings group). Spectrum background-layer-2.

Cards, popovers and menus, always with a drop shadow. Spectrum background-elevated.

Headings and titles.

Body copy and control labels.

Secondary text and inactive nav icons.

Metadata, captions, column headers.

Dividers between rows and sections.

Text field border at rest (2px).

The logo's blue. The one call-to-action button per screen, the selected tab on phones, today in a calendar. White text on it: 6.4:1 light, 4.9:1 dark.

Hover and pressed accent fill.

Accent text and icons (links, active tab, selected nav icon) on base, layer-1 and elevated: 6:1 light; 7.4:1 dark, where it takes the logo's sky blue.

Subtle accent fill behind gray-1000 text (informative badges, today in a calendar, icon wells).

Accent marks that are not text: meter fills, status dots. The logo's second blue. 3:1 or better on every background.

Text and icons on accent, negative and positive fills.

Keyboard focus outline: 2px, offset 2px, on every control.

Primary button fill (Spectrum's 'primary' variant is neutral, not blue).

Hover on the neutral fill.

Text on a neutral fill.

Secondary button, action button and selected side-nav fill.

Hover on neutral-subtle.

Neutral status dot.

Solid gray fill for small labels with white text, like day notes on the calendar. White on it holds 4.5:1 in both themes.

Text on label-fill.

Negative fill: destructive buttons, bold overdue badges. on-accent text 4.5:1.

Hover on the negative fill.

Negative text and icons (error messages, overdue counts) on base, layer-1 and elevated.

Subtle negative fill behind gray-1000 text.

Negative dots, bars and alert borders.

Notice fill (orange). Text on it is gray-1000 black in both themes, as Spectrum does.

Text on a notice fill: 6:1 or better.

Subtle notice fill behind gray-1000 text.

Notice dots, bars and alert borders: due soon, waiting on someone.

Positive fill, used only for status (paid, live). Never as a brand color.

Subtle positive fill behind gray-1000 text.

Positive dots and bars.

Informative dots and bars (sent, scheduled). Same blue as the accent.

Green text: 4.5:1 or better on the page, cards and the backdrop in both themes. For the landing page's kickers and other short green labels, never for status alone.

Categorical fill for brand initials and category badges, behind gray-1000 text.

Categorical fill from the logo's orange, for brand initials and category badges, behind gray-1000 text.

Categorical fill for brand initials and category badges, behind gray-1000 text.

Categorical marks, dots and stage colors in cyan (a stage color you can pick). 3:1 on cards in both themes.

Categorical marks, dots and stage colors in yellow (a stage color you can pick). 3:1 on cards in both themes.

The logo's sand yellow. Small moments of delight in the interface: the Today tag, a streak, a highlight. Never for status. Text on it is on-brand-yellow (14:1).

The logo's sky blue. Brand moments only (cover, marketing, illustrations); never interface state.

The logo's mint. Brand moments only (cover, marketing, illustrations); never interface state or a button.

Field fill; text on a neutral (primary) button.

Layer-1 background.

Hover on quiet rows.

Secondary button and action button fill, selected side-nav item, card preview well.

Dividers; hover on gray-100 fills.

Field and outline-button borders. Kept at Spectrum's light value (1.4:1 on white), so a field always carries a visible label or icon.

Disabled text and icons; pressed gray fills.

Neutral status dot and meter track markers. Not for text.

Detail text (labels, metadata) on background-base, layer-1 and elevated: 4.6:1 or better in both themes.

Subdued text and inactive icons on any background.

Body text and default icons; the neutral (primary) button fill.

Headings and titles; hover of the neutral fill; focused field border.

Text on subtle color fills (subtle badges, notice fills). In light it is the logo ink, #080D15.

Illustration line work and solid details.

Illustration paper: documents, screens, the clipboard. Matches the card it sits on.

Object fill from the logo's blue.

Object fill from the logo's mint.

Object fill and sparkles from the logo's sand yellow.

The soft blob behind an illustration, blue.

The soft blob behind an illustration, mint.

The soft blob behind an illustration, sand.

White in both themes, only where something must stay white to work, such as behind a QR code so phones can scan it.

Behind every drawer, dialog and search: one dimming everywhere, so the panel in front has focus.

The edge of a control (a text field, a search field, a button that isn't quiet): 3:1 on any surface, light and dark.

The edge of a container inside a panel (board columns, the calendar's day list), clearer than a divider.

Solid fill for secondary Buttons and ActionButtons that aren't quiet, so they show on a panel without an edge.

Hover for button-fill.

Text and icons on brand-yellow.