Never rely on color alone
An outgoing amount is shown with a minus sign as well as color. A failed state has an icon and a message, not just a red border. Roughly one in twelve men has some form of color-vision deficiency.
Colors
Brand colors, primitive palettes and status colors, and how to use them in money-moving interfaces.
Brand
Two brand colors carry the Thanawi identity. Teal is for primary actions and key highlights. Navy is for headings, secondary emphasis and the logo.
Primitive palettes
Primitives are named --th-<palette>-<stop>. They are the raw material for semantic tokens. Don’t use them in components. A hatched swatch means that stop isn’t defined in @thanawi/tokens yet.
neutral
teal
navy
green
amber
red
blue
Status colors
Status colors communicate meaning: success, caution, failure or neutral information. Use them only for status, never for decoration.
| Status | Surface | Content | Use for |
|---|---|---|---|
| Info | --th-surface-info, --th-surface-info-subtle | --th-content-info | Neutral notices, pending reviews, tips |
| Positive | --th-surface-positive, --th-surface-positive-subtle | --th-content-positive | Completed transfers, incoming funds, verified states |
| Warning | --th-surface-warning, --th-surface-warning-subtle | --th-content-warning | Expiring documents, limits nearly reached, unsaved changes |
| Negative | --th-surface-negative, --th-surface-negative-subtle | --th-content-negative | Failed payments, validation errors, destructive actions |
Contrast
All text meets WCAG 2.2 AA at minimum: 4.5:1 for body text and 3:1 for large text and UI boundaries. These pairs are the ones to reach for:
| Foreground | Background | Use |
|---|---|---|
--th-content-default | --th-surface-base | Body text |
--th-content-muted | --th-surface-raised | Secondary text, descriptions |
--th-content-on-primary | --th-surface-primary | Primary buttons |
--th-content-negative | --th-surface-negative-subtle | Inline error messages |
--th-border-focus | any surface | Focus ring (3:1 or more) |