Colors

Page background. Tailwind: bg-background.

Primary text on background, card and popover (18:1 light, 16:1 dark).

Card and raised panel background. Tailwind: bg-card.

Text inside a card.

Background of popovers, menus, the open Select and tooltips.

Text inside a popover.

Secondary buttons and surfaces. Tailwind: bg-secondary.

Text on secondary.

Quiet backgrounds: table row hover, Skeleton, empty areas.

Secondary text, descriptions, placeholders, metadata. Reads on background, card and muted (≥5.3:1).

Hover and highlight for menu items, ghost buttons and selected rows.

Text on accent (10:1).

Dividers and card borders. Decorative: carries no meaning on its own.

Field borders (Input, Select, Checkbox, Switch off). Strong enough to reach 3:1.

Focus ring: 2px solid + 2px offset on background. ≥6:1 in both themes.

The PUI brand color (deep teal). Primary action, active item, links. As text it reads on background and card (6.4:1 / 8.9:1). One primary action per area.

Text and icons on primary (6.1:1 / 8:1). Dark text in the dark theme: never hard-code white on primary.

Destructive actions and errors. As text it reads on background (5.3:1 / 6.6:1).

Text on destructive (≥5.3:1 in both themes).

Success and confirmation states. Always pair it with an icon or a word.

Text on success.

Warnings and pending states. Always pair it with an icon or a word.

Text on warning.

Chart series 1 (the brand).

Chart series 2.

Chart series 3.

Chart series 4.

Chart series 5 ("other").

Sidebar background.

Sidebar text.

Active sidebar item.

Text on sidebar-primary.

Sidebar item hover.

Text on sidebar-accent.

Sidebar borders.

Sidebar focus.