Semantic colors
Style every screen with these tokens, never with raw palette values. Each token has a light and a dark value; the names follow Figma, so Colors/surface/raised is bg-surface-raised.
Figma: 01 / Foundations / Semantic colorsUsing the tokens
Prefix the token name with the property: bg- for fills, text- for copy, border- for outlines, fill- and stroke- for SVG.
<div className='rounded-xl border border-border-default bg-surface-raised p-6'>
<h3 className='text-text-primary'>Supporter growth</h3>
<p className='text-text-secondary'>New supporters this month</p>
</div>Surface
Backgrounds, from the page to raised cards and overlays.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/surface/page | surface-page | |||
| Colors/surface/subtle | surface-subtle | |||
| Colors/surface/muted | surface-muted | |||
| Colors/surface/raised | surface-raised | |||
| Colors/surface/overlay | surface-overlay | |||
| Colors/surface/inverse | surface-inverse | |||
| Colors/surface/scrim | surface-scrim |
Border
Dividers, outlines, selection and focus.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/border/subtle | border-subtle | |||
| Colors/border/default | border-default | |||
| Colors/border/strong | border-strong | |||
| Colors/border/selected | border-selected | |||
| Colors/border/focus | border-focus |
Text
Copy, links and text on colored backgrounds.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/text/primary | text-primary | |||
| Colors/text/secondary | text-secondary | |||
| Colors/text/tertiary | text-tertiary | |||
| Colors/text/placeholder | text-placeholder | |||
| Colors/text/disabled | text-disabled | |||
| Colors/text/inverse | text-inverse | |||
| Colors/text/brand | text-brand | |||
| Colors/text/link | text-link | |||
| Colors/text/link-hover | text-link-hover | |||
| Colors/text/on-brand | text-on-brand | |||
| Colors/text/on-color | text-on-color | |||
| Colors/text/selection/background | text-selection-background | |||
| Colors/text/selection/foreground | text-selection-foreground |
Icon
Icons follow the same steps as text.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/icon/primary | icon-primary | |||
| Colors/icon/secondary | icon-secondary | |||
| Colors/icon/tertiary | icon-tertiary | |||
| Colors/icon/hover | icon-hover | |||
| Colors/icon/disabled | icon-disabled | |||
| Colors/icon/inverse | icon-inverse | |||
| Colors/icon/brand | icon-brand | |||
| Colors/icon/selected | icon-selected | |||
| Colors/icon/on-brand | icon-on-brand |
Brand
The GoodUnited green.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/brand/primary | brand-primary | |||
| Colors/brand/strong | brand-strong | |||
| Colors/brand/subtle | brand-subtle | |||
| Colors/brand/foreground | brand-foreground |
Action
Buttons, segmented controls and destructive actions.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/action/primary/default | action-primary | |||
| Colors/action/primary/hover | action-primary-hover | |||
| Colors/action/primary/pressed | action-primary-pressed | |||
| Colors/action/primary/foreground | action-primary-foreground | |||
| Colors/action/secondary/default | action-secondary | |||
| Colors/action/secondary/hover | action-secondary-hover | |||
| Colors/action/secondary/pressed | action-secondary-pressed | |||
| Colors/action/secondary/foreground | action-secondary-foreground | |||
| Colors/action/secondary/border | action-secondary-border | |||
| Colors/action/inverse/default | action-inverse | |||
| Colors/action/inverse/hover | action-inverse-hover | |||
| Colors/action/inverse/foreground | action-inverse-foreground | |||
| Colors/action/segment/track | action-segment-track | |||
| Colors/action/segment/active | action-segment-active | |||
| Colors/action/segment/active-foreground | action-segment-active-foreground | |||
| Colors/action/segment/inactive-foreground | action-segment-inactive-foreground | |||
| Colors/action/destructive/default | action-destructive | |||
| Colors/action/destructive/hover | action-destructive-hover | |||
| Colors/action/destructive/pressed | action-destructive-pressed | |||
| Colors/action/destructive/foreground | action-destructive-foreground | |||
| Colors/action/disabled/background | action-disabled | |||
| Colors/action/disabled/foreground | action-disabled-foreground |
Input
Inputs, selects, checkboxes and radios.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/input/background | input-background | |||
| Colors/input/border | input-border | |||
| Colors/input/border-hover | input-border-hover | |||
| Colors/input/border-focus | input-border-focus | |||
| Colors/input/foreground | input-foreground |
Status
Success, warning, error and info, each as a foreground and a tint.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/status/success/foreground | status-success-foreground | |||
| Colors/status/success/background | status-success-background | |||
| Colors/status/warning/foreground | status-warning-foreground | |||
| Colors/status/warning/background | status-warning-background | |||
| Colors/status/error/foreground | status-error-foreground | |||
| Colors/status/error/background | status-error-background | |||
| Colors/status/info/foreground | status-info-foreground | |||
| Colors/status/info/background | status-info-background |
Progress and avatar
Progress bars, step badges and the avatar placeholder.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/progress/fill | progress-fill | |||
| Colors/progress/track | progress-track | |||
| Colors/progress/step-badge | progress-step-badge | |||
| Colors/progress/avatar/background | avatar-background | |||
| Colors/progress/avatar/foreground | avatar-foreground | |||
| Colors/progress/external/messenger | external-messenger | |||
| Colors/progress/effect/shadow | effect-shadow |
Navigation and top bar
GoodUnited navigation stays dark in both modes.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/nav/background | nav-background | |||
| Colors/nav/divider | nav-divider | |||
| Colors/nav/icon/default | nav-icon | |||
| Colors/nav/icon/hover | nav-icon-hover | |||
| Colors/nav/icon/active | nav-icon-active | |||
| Colors/nav/label/default | nav-label | |||
| Colors/nav/label/hover | nav-label-hover | |||
| Colors/nav/label/active | nav-label-active | |||
| Colors/nav/item/active-background | nav-item-active | |||
| Colors/nav/org-switcher/background | nav-org-switcher | |||
| Colors/nav/org-switcher/foreground | nav-org-switcher-foreground | |||
| Colors/nav/topbar/background | topbar-background | |||
| Colors/nav/topbar/title | topbar-title | |||
| Colors/nav/topbar/section | topbar-section |
Journey
Journey builder nodes and their icons.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/journey/node/message | journey-node-message | |||
| Colors/journey/node/message-24h | journey-node-message-24h | |||
| Colors/journey/node/compliance | journey-node-compliance | |||
| Colors/journey/node/trigger | journey-node-trigger | |||
| Colors/journey/node/time-delay | journey-node-time-delay | |||
| Colors/journey/node/condition | journey-node-condition | |||
| Colors/journey/node/action | journey-node-action | |||
| Colors/journey/icon/time-delay | journey-icon-time-delay | |||
| Colors/journey/icon/website | journey-icon-website | |||
| Colors/journey/icon/trigger | journey-icon-trigger | |||
| Colors/journey/icon/action | journey-icon-action | |||
| Colors/journey/icon/condition | journey-icon-condition | |||
| Colors/journey/icon/no-respond | journey-icon-no-respond | |||
| Colors/journey/icon/comment | journey-icon-comment |
Chart
Nine approved series (start and end of each gradient) and the chart chrome.
| Light | Dark | Figma token | Tailwind | Values |
|---|---|---|---|---|
| Colors/chart/platform/start | chart-platform | |||
| Colors/chart/challenges/start | chart-challenges | |||
| Colors/chart/facebook/start | chart-facebook | |||
| Colors/chart/instagram/start | chart-instagram | |||
| Colors/chart/messenger/start | chart-messenger | |||
| Colors/chart/birthdays/start | chart-birthdays | |||
| Colors/chart/other/start | chart-other | |||
| Colors/chart/negative/start | chart-negative | |||
| Colors/chart/misc/start | chart-misc | |||
| Colors/chart/grid | chart-grid | |||
| Colors/chart/axis-line | chart-axis-line | |||
| Colors/chart/highlight-band | chart-highlight-band | |||
| Colors/chart/axis-text | chart-axis-text | |||
| Colors/chart/label-light | chart-label-light | |||
| Colors/chart/label-dark | chart-label-dark |
shadcn names
The shadcn theme names point at GoodUnited tokens, so any shadcn component picks up the brand automatically.
| shadcn | GoodUnited token |
|---|---|
| background | Colors/surface/page |
| foreground | Colors/text/primary |
| card | Colors/surface/raised |
| popover | Colors/surface/overlay |
| primary | Colors/action/primary/default |
| primary-foreground | Colors/action/primary/foreground |
| secondary, muted | Colors/surface/muted |
| muted-foreground | Colors/text/secondary |
| accent | Colors/surface/subtle |
| destructive | Colors/action/destructive/default |
| border | Colors/border/default |
| input | Colors/input/border |
| ring | Colors/border/focus |
| chart-1 to chart-5 | Colors/chart/platform, facebook, messenger, challenges, instagram |
| sidebar | Colors/nav/background |
| sidebar-primary, sidebar-accent-foreground | Colors/nav/label/active |
| sidebar-accent | Colors/nav/item/active-background |
| sidebar-border | Colors/nav/divider |
