Color
Color tells coaches what they can act on, what needs attention, and which product they are in. SuperCoach is Black, White and Electric Green; Coach is orange. Both themes share one set of primitives and one set of semantic token names, so the same component works in either product.
How color is organized
Colors come in two layers, both generated from tokens/tokens.json:
- Primitives are raw values in ramps:
lime-300,neutral-950,orange-500. They never appear in components. - Semantic tokens say what a color is for:
primary,muted-foreground,destructive-subtle. Components use only these, as Tailwind utilities (bg-primary,text-muted-foreground) or CSS variables (var(--primary)).
Each theme maps the semantic names to primitives. SuperCoach is the default; Coach overrides only the tokens that differ, under [data-brand="coach"]. Switch the theme in the header and every example on this page follows.
Semantic colors
Surfaces and text
| Token | SuperCoach light | SuperCoach dark | Coach light | Coach dark | Replaces in coach-admin |
|---|---|---|---|---|---|
| bg-background · text-background | white#FFFFFF | neutral-950#191919 | white#FFFFFF | neutral-950#191919 | #fff / white / #ffffff (1,237 uses incl. near-whites) |
| bg-foreground · text-foreground | neutral-950#191919 | neutral-50#F7F8F9 | neutral-950#191919 | neutral-50#F7F8F9 | brand Black #191919. Replaces $dark-text-color #1d2939, $black-text-color, #292d32, #1e1e1e |
| bg-foreground-secondary · text-foreground-secondarySuperCoach extension | neutral-700#4A4A4A | neutral-300#D4D4D5 | neutral-700#4A4A4A | neutral-300#D4D4D5 | $grey-text-color #4d4d4d, $invoice-ink-secondary #5a6070, $medium-grey-text-color #3e3e3ePending decision #6 |
| bg-card · text-card | white#FFFFFF | neutral-900#252525 | white#FFFFFF | neutral-900#252525 | $card-surface-bg, $overlay-surface-bg, $input-bg |
| bg-card-foreground · text-card-foreground | neutral-950#191919 | neutral-50#F7F8F9 | neutral-950#191919 | neutral-50#F7F8F9 | — |
| bg-popover · text-popover | white#FFFFFF | neutral-900#252525 | white#FFFFFF | neutral-900#252525 | $floating-chip-bg, dropdown panels |
| bg-popover-foreground · text-popover-foreground | neutral-950#191919 | neutral-50#F7F8F9 | neutral-950#191919 | neutral-50#F7F8F9 | — |
| bg-link · text-linkSuperCoach extension | brand-600#2A46CB | brand-300#99B5FF | orange-700#CB2F1F | orange-300#FFB977 | text links and inline actions; primary is a fill, link is its text-safe twin |
Actions
| Token | SuperCoach light | SuperCoach dark | Coach light | Coach dark | Replaces in coach-admin |
|---|---|---|---|---|---|
| bg-primary · text-primary | brand-600#2A46CB | brand-500#466AE9 | orange-500#FF6D38 | orange-500#FF6D38 | $primary-color #2a46cb, $nav-active-color, $checkbox-checked, #2545c7Pending decision #4 |
| bg-primary-foreground · text-primary-foreground | white#FFFFFF | white#FFFFFF | white#FFFFFF | white#FFFFFF | $white-text-color, $nav-active-txt-colorPending decision #3 |
| bg-secondary · text-secondary | lime-300#A7F840 | lime-300#A7F840 | neutral-100#F0F0F2 | neutral-800#333333 | brand Electric Green #a7f840Pending decision #5 |
| bg-secondary-foreground · text-secondary-foreground | neutral-950#191919 | neutral-950#191919 | neutral-800#333333 | neutral-50#F7F8F9 | —Pending decision #5 |
| bg-muted · text-muted | neutral-100#F0F0F2 | neutral-800#333333 | neutral-100#F0F0F2 | neutral-800#333333 | $light-surface-bg #f5f5f7, $scpay-neutral-bg #f2f4f7, $media-surface-bg #f0f0f0 |
| bg-muted-foreground · text-muted-foreground | neutral-600#636363 | neutral-400#A4A4A4 | neutral-600#636363 | neutral-400#A4A4A4 | brand Grey #636363. Replaces $subtitle-text-color #667085, #6b7280, #6c757d |
| bg-accent · text-accent | brand-50#F1F5FE | brand-950#061045 | orange-50#FFF7EF | orange-950#44120E | $light-primary-color (primary @10%), $scpay-primary-tint #eef1fc, $paid-experience-header-bg |
| bg-accent-foreground · text-accent-foreground | brand-700#1F35AA | brand-200#C2D4FF | orange-700#CB2F1F | orange-200#FFD6AB | $scpay-primary-strong #1e3399 |
Status
| Token | SuperCoach light | SuperCoach dark | Coach light | Coach dark | Replaces in coach-admin |
|---|---|---|---|---|---|
| bg-destructive · text-destructive | red-600#DC2626 | red-600#DC2626 | red-600#DC2626 | red-600#DC2626 | $danger-color #ef4444, $error-color #ff6868, #ff0000, red, #dc3545 |
| bg-destructive-foreground · text-destructive-foreground | white#FFFFFF | white#FFFFFF | white#FFFFFF | white#FFFFFF | — |
| bg-destructive-subtle · text-destructive-subtleSuperCoach extension | red-50#FEF2F2 | red-950#450A0A | red-50#FEF2F2 | red-950#450A0A | $danger-bg-color #fee2e2, $light-error-color |
| bg-destructive-text · text-destructive-textSuperCoach extension | red-700#B91C1C | red-300#FCA5A5 | red-700#B91C1C | red-300#FCA5A5 | $danger-text-color #b91c1c |
| bg-success · text-successSuperCoach extension | green-600#16A34A | green-500#22C55E | green-600#16A34A | green-500#22C55E | #4dbd74, #22c55e, $invoice-sar-color |
| bg-success-subtle · text-success-subtleSuperCoach extension | green-50#F0FDF4 | green-950#052E16 | green-50#F0FDF4 | green-950#052E16 | $light-success-color, $invoice-sar-bg |
| bg-success-text · text-success-textSuperCoach extension | green-700#15803D | green-300#86EFAC | green-700#15803D | green-300#86EFAC | $success-text-color #15803d, #138625, $invoice-net-color |
| bg-warning · text-warningSuperCoach extension | amber-500#F59E0B | amber-400#FBBF24 | amber-500#F59E0B | amber-400#FBBF24 | $light-warning-color base (#ffaa00), #fa8607 |
| bg-warning-subtle · text-warning-subtleSuperCoach extension | amber-50#FFFBEB | amber-950#451A03 | amber-50#FFFBEB | amber-950#451A03 | #fffbeb, $invoice-due-row-bg |
| bg-warning-text · text-warning-textSuperCoach extension | amber-800#92400E | amber-300#FCD34D | amber-800#92400E | amber-300#FCD34D | $warning-text-color #92400e, $invoice-warn-text |
| bg-info · text-infoSuperCoach extension | blue-700#1D4ED8 | blue-400#60A5FA | blue-700#1D4ED8 | blue-400#60A5FA | $invoice-usd-color #1d4ed8 |
| bg-info-subtle · text-info-subtleSuperCoach extension | blue-50#EFF6FF | blue-950#172554 | blue-50#EFF6FF | blue-950#172554 | $invoice-usd-bg #eff6ff |
| bg-ai · text-aiSuperCoach extension | violet-ai-500#7C5CBF | violet-ai-300#BDA9F6 | violet-ai-500#7C5CBF | violet-ai-300#BDA9F6 | $ai-accent-color #7c5cbf |
| bg-ai-foreground · text-ai-foregroundSuperCoach extension | violet-ai-700#5F3F9E | violet-ai-300#BDA9F6 | violet-ai-700#5F3F9E | violet-ai-300#BDA9F6 | $ai-accent-text-color #5f3f9e |
Lines and focus
| Token | SuperCoach light | SuperCoach dark | Coach light | Coach dark | Replaces in coach-admin |
|---|---|---|---|---|---|
| bg-border · text-border | neutral-200#E6E7E8 | neutral-800#333333 | neutral-200#E6E7E8 | neutral-800#333333 | $border-color #e4e4e4, $scpay-row-line #eaecf0, #e9ecef, $card-divider-color |
| bg-border-strong · text-border-strongSuperCoach extension | neutral-300#D4D4D5 | neutral-700#4A4A4A | neutral-300#D4D4D5 | neutral-700#4A4A4A | $border-strong-color #c8cdd8, $scpay-control-border #d0d5dd |
| bg-input · text-input | neutral-200#E6E7E8 | neutral-800#333333 | neutral-200#E6E7E8 | neutral-800#333333 | $input-border-color #e0e2ea |
| bg-ring · text-ring | brand-600#2A46CB | brand-400#678DFF | orange-500#FF6D38 | orange-400#FF8948 | $input-focus-shadow (primary @43%) |
Charts
| Token | SuperCoach light | SuperCoach dark | Coach light | Coach dark | Replaces in coach-admin |
|---|---|---|---|---|---|
| bg-chart-1 · text-chart-1 | brand-600#2A46CB | brand-400#678DFF | orange-500#FF6D38 | orange-400#FF8948 | — |
| bg-chart-2 · text-chart-2 | lime-600#52A701 | lime-300#A7F840 | green-700#15803D | green-400#4ADE80 | — |
| bg-chart-3 · text-chart-3 | navy-900#1C3657 | navy-300#AFBFD5 | orange-400#FF8948 | orange-200#FFD6AB | brand Navy |
| bg-chart-4 · text-chart-4 | sand#FFBF51 | sand#FFBF51 | sand#FFBF51 | sand#FFBF51 | brand Sand |
| bg-chart-5 · text-chart-5 | maroon#7D1A31 | beige#CAC4B8 | maroon#7D1A31 | beige#CAC4B8 | brand Maroon |
Sidebar
| Token | SuperCoach light | SuperCoach dark | Coach light | Coach dark | Replaces in coach-admin |
|---|---|---|---|---|---|
| bg-sidebar · text-sidebar | neutral-950#191919 | black#000000 | neutral-900#252525 | black#000000 | brand Black. Replaces the $nav-color navy → black gradientPending decision #7Pending decision #12 |
| bg-sidebar-foreground · text-sidebar-foreground | white#FFFFFF | neutral-50#F7F8F9 | white#FFFFFF | neutral-50#F7F8F9 | $nav-txt-color |
| bg-sidebar-primary · text-sidebar-primary | lime-300#A7F840 | lime-300#A7F840 | orange-500#FF6D38 | orange-500#FF6D38 | $nav-active-color (lime on black, as in the logo tile)Pending decision #7 |
| bg-sidebar-primary-foreground · text-sidebar-primary-foreground | neutral-950#191919 | neutral-950#191919 | neutral-950#191919 | neutral-950#191919 | $nav-active-txt-color |
| bg-sidebar-accent · text-sidebar-accent | neutral-800#333333 | neutral-800#333333 | neutral-800#333333 | neutral-800#333333 | nav hover |
| bg-sidebar-accent-foreground · text-sidebar-accent-foreground | white#FFFFFF | neutral-50#F7F8F9 | white#FFFFFF | neutral-50#F7F8F9 | — |
| bg-sidebar-border · text-sidebar-border | neutral-800#333333 | neutral-800#333333 | neutral-700#4A4A4A | neutral-800#333333 | $nav-border-color #2e3d50 |
| bg-sidebar-ring · text-sidebar-ring | lime-300#A7F840 | lime-300#A7F840 | orange-500#FF6D38 | orange-400#FF8948 | — |
Usage rules
Electric Green is a fill, never text
Lime on white is 1.3:1, far below the 4.5:1 text needs. Use it as a background with brand Black on top (13.5:1), as in the logo tile. For green text or icons, use success-text.
3 new check-ins
3 new check-ins
Coach orange and white text
White on Coach orange is 2.8:1. It passes only for large bold text, so Coach's primary buttons fail WCAG AA today. Brand Black on the same orange is 6.3:1. The tokens keep white until DECISIONS #3 is made, and this site's accessibility tests report every occurrence.
The same orange as text or as a focus ring on white is also 2.8:1. In Coach, use accent-foreground (orange-700, 5.3:1) for links and colored text. See the contrast matrix below for the focus ring.
Status colors
Use the subtle background with its matching text color: bg-success-subtle text-success-text, bg-warning-subtle text-warning-text, bg-destructive-subtle text-destructive-text, bg-info-subtle text-info. Solid status fills only exist for destructive, because white on success and warning fails contrast (QUESTIONS Q2).
Payment received from Omar: SAR 450
Invoice for Lina is due in 3 days
Payout failed. Check your bank details.
Prices show in USD for clients outside Saudi Arabia
Never rely on color alone. Pair a status color with a word or an icon: "Overdue", not just a red dot.
AI features
ai (violet) marks content generated or suggested by AI, in both products. Use ai-foreground for its text. Keep it for AI only, so coaches learn to recognize it.
Text levels
Three text colors, from strongest to weakest: foreground for content, foreground-secondary for supporting text, muted-foreground for metadata and placeholders. All three pass AA on background, card and muted.
Contrast
44 pairs, computed from tokens/tokens.json for both themes. 6 fail in at least one theme: primary-foreground on primary, success-text on muted, primary on background, ring on background, border-strong on background, input on background.
Text on fills
Text needs 4.5:1, or 3:1 for large text (24px, or 18.66px bold).
| Pair | SuperCoach | Coach |
|---|---|---|
card-foreground on card | 17.58:1Pass | 17.58:1Pass |
popover-foreground on popover | 17.58:1Pass | 17.58:1Pass |
primary-foreground on primary | 7.40:1Pass | 2.80:1Fails |
secondary-foreground on secondary | 13.52:1Pass | 11.10:1Pass |
muted-foreground on muted | 5.28:1Pass | 5.28:1Pass |
accent-foreground on accent | 8.95:1Pass | 4.99:1Pass |
destructive-foreground on destructive | 4.83:1Pass | 4.83:1Pass |
sidebar-foreground on sidebar | 17.58:1Pass | 15.33:1Pass |
sidebar-primary-foreground on sidebar-primary | 13.52:1Pass | 6.28:1Pass |
sidebar-accent-foreground on sidebar-accent | 12.63:1Pass | 12.63:1Pass |
Text on surfaces
Text needs 4.5:1, or 3:1 for large text.
| Pair | SuperCoach | Coach |
|---|---|---|
foreground on background | 17.58:1Pass | 17.58:1Pass |
foreground on card | 17.58:1Pass | 17.58:1Pass |
foreground on muted | 15.45:1Pass | 15.45:1Pass |
foreground-secondary on background | 8.86:1Pass | 8.86:1Pass |
foreground-secondary on card | 8.86:1Pass | 8.86:1Pass |
foreground-secondary on muted | 7.79:1Pass | 7.79:1Pass |
muted-foreground on background | 6.01:1Pass | 6.01:1Pass |
muted-foreground on card | 6.01:1Pass | 6.01:1Pass |
info on background | 6.70:1Pass | 6.70:1Pass |
info on card | 6.70:1Pass | 6.70:1Pass |
info on muted | 5.89:1Pass | 5.89:1Pass |
ai-foreground on background | 7.80:1Pass | 7.80:1Pass |
ai-foreground on card | 7.80:1Pass | 7.80:1Pass |
ai-foreground on muted | 6.86:1Pass | 6.86:1Pass |
destructive-text on background | 6.47:1Pass | 6.47:1Pass |
destructive-text on card | 6.47:1Pass | 6.47:1Pass |
destructive-text on muted | 5.68:1Pass | 5.68:1Pass |
success-text on background | 5.02:1Pass | 5.02:1Pass |
success-text on card | 5.02:1Pass | 5.02:1Pass |
success-text on muted | 4.41:1Large text only | 4.41:1Large text only |
warning-text on background | 7.09:1Pass | 7.09:1Pass |
warning-text on card | 7.09:1Pass | 7.09:1Pass |
warning-text on muted | 6.23:1Pass | 6.23:1Pass |
destructive-text on destructive-subtle | 5.91:1Pass | 5.91:1Pass |
success-text on success-subtle | 4.79:1Pass | 4.79:1Pass |
warning-text on warning-subtle | 6.84:1Pass | 6.84:1Pass |
info on info-subtle | 6.16:1Pass | 6.16:1Pass |
accent-foreground on background | 9.78:1Pass | 5.30:1Pass |
primary on background | 7.40:1Pass | 2.80:1Fails |
Focus rings and control borders
Needs 3:1 against what is next to it (WCAG 1.4.11).
| Pair | SuperCoach | Coach |
|---|---|---|
ring on background | 7.40:1Pass | 2.80:1Fails |
border-strong on background | 1.48:1Fails | 1.48:1Fails |
input on background | 1.24:1Fails | 1.24:1Fails |
border on background | 1.24:1Decorative | 1.24:1Decorative |
sidebar-ring on sidebar | 13.52:1Pass | 5.47:1Pass |
Primitive ramps
The SuperCoach neutrals are the brand greys. The blue ramp is coach-admin's current primary and is not in the brand guide (DECISIONS #4). Navy, beige, sand and maroon are the expanded brand palette.
neutral
Brand greys: Black 950, Dark Grey 800, Grey 600, Light Grey 200 and 100. Other steps are filled in between.
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950
brand
SuperCoach blue, built around the current app primary at 600. Not in the brand guide.
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
brand-950
lime
Electric Green, built around the brand value at 300. A fill only: it fails contrast as text on white.
lime-50
lime-100
lime-200
lime-300
lime-400
lime-500
lime-600
lime-700
lime-800
lime-900
lime-950
red
Destructive states.
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-950
green
Success states.
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-950
amber
Warning states.
amber-50
amber-100
amber-200
amber-300
amber-400
amber-500
amber-600
amber-700
amber-800
amber-900
amber-950
blue
Info states only. Kept apart from the brand blue.
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-950
orange
Coach orange, built around the Coach primary at 500.
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-950
navy
Expanded palette, built around brand navy at 900.
violet ai
AI features, shared by both products.
violet-ai-500
violet-ai-700
violet-ai-50
violet-ai-300
violet-ai-950
singles
Expanded palette singles and pure white and black.
white
black
beige
sand
maroon
Full details, with copy buttons for every value, are on the color tokens page.
Migrating from coach-admin
Every SCSS color variable in coach-admin, with the token that replaces it. "Use this token" comes from the semantic tokens; "Nearest primitive" is the audit's closest match by ΔE (under 2 is invisible, under 5 hard to notice). Where they differ, use the semantic token: it is the decision, the primitive is only the nearest color.
127 of 127 variables
| SCSS variable | Today | Use this token | Nearest primitive (ΔE) | Action |
|---|---|---|---|---|
$white-text-color893 uses | #FFFFFF | --primary-foreground | white (0) | keep |
$primary-color464 uses | #2A46CB | --primary | brand-600 (0) | keep |
$black-text-color278 uses | #000000 | --foregroundDiffers from the nearest primitive: the semantic token wins. | black (0) | keep |
$dark-text-color224 uses | #1D2939 | --foregroundDiffers from the nearest primitive: the semantic token wins. | neutral-900 (3.7) | merge |
$grey-text-color165 uses | #4D4D4D | --foreground-secondary | neutral-700 (1.1) | merge |
$subtitle-text-color119 uses | #667085 | --muted-foreground | neutral-600 (5.7) | review |
$todo-text-muted119 uses | #667085 | No semantic token yet | neutral-600 (5.7) | review |
$color118 uses | #3B5998 | No semantic token yet | —social brand (CoreUI social-button loop, $color) | exclude |
$facebook118 uses | #3B5998 | No semantic token yet | —social brand (CoreUI social-button loop, $color) | exclude |
$invoice-ink-secondary90 uses | #5A6070 | --foreground-secondaryDiffers from the nearest primitive: the semantic token wins. | neutral-600 (2.9) | merge |
$secondary-color71 uses | #FF6D38 | No semantic token yet | orange-500 (0) | keep |
$light-surface-bg68 uses | #F5F5F7 | --mutedDiffers from the nearest primitive: the semantic token wins. | neutral-50 (0.8) | merge |
$border-color52 uses | #E4E4E4 | --border | neutral-200 (0.9) | merge |
$invoice-surface-bg42 uses | #F8F9FC | No semantic token yet | neutral-50 (0.4) | merge |
$error-color37 uses | #FF6868 | --destructiveDiffers from the nearest primitive: the semantic token wins. | red-500 (7.5) | review |
$todo-text-sub34 uses | #6B7280 | No semantic token yet | neutral-500 (5.4) | review |
$ai-darker-text33 uses | #1E1E1E | No semantic token yet | neutral-950 (2.2) | merge |
$danger-text-color32 uses | #B91C1C | --destructive-text | red-700 (0) | keep |
$navbar-color31 uses | #536C79 | No semantic token yet | neutral-600 (4) | merge |
$sidebar-nav-link-icon-color31 uses | #536C79 | No semantic token yet | neutral-600 (4) | merge |
$scpay-ink-strong30 uses | #344054 | No semantic token yet | neutral-700 (5.5) | review |
$media-surface-bg29 uses | #F0F0F0 | --muted | neutral-100 (0.3) | merge |
$success-color23 uses | #4DBD74 | No semantic token yet | green-500 (4.6) | merge |
$invoice-muted-text21 uses | #9199A8 | No semantic token yet | neutral-400 (4.4) | merge |
$invoice-warn-text21 uses | #92400E | --warning-text | amber-800 (0) | keep |
$warning-text-color21 uses | #92400E | --warning-text | amber-800 (0) | keep |
$todo-med-badge-fg21 uses | #92400E | No semantic token yet | amber-800 (0) | keep |
$danger-color21 uses | #EF4444 | --destructiveDiffers from the nearest primitive: the semantic token wins. | red-500 (0) | keep |
$todo-overdue-text21 uses | #EF4444 | No semantic token yet | red-500 (0) | keep |
$todo-high-bar21 uses | #EF4444 | No semantic token yet | red-500 (0) | keep |
$scpay-neutral-bg19 uses | #F2F4F7 | --muted | neutral-100 (1.1) | merge |
$warning-bg-color18 uses | #FFFBEB | No semantic token yet | amber-50 (0) | keep |
$warning-color18 uses | #D97706 | No semantic token yet | amber-600 (0) | keep |
$checkbox-unchecked18 uses | #EEEEEE | No semantic token yet | neutral-100 (0.7) | merge |
$input-placeholder-color16 uses | #C0C0C0 | No semantic token yet | neutral-300 (6.2) | review |
$danger-bg-color16 uses | #FEE2E2 | --destructive-subtleDiffers from the nearest primitive: the semantic token wins. | red-100 (0) | keep |
$todo-high-badge-bg16 uses | #FEE2E2 | No semantic token yet | red-100 (0) | keep |
$ai-light-gray-bg15 uses | #F8F8F8 | No semantic token yet | neutral-50 (0.2) | merge |
$sidebar-bg15 uses | #29363D | No semantic token yet | neutral-800 (2.2) | merge |
$navbar-active-color15 uses | #29363D | No semantic token yet | neutral-800 (2.2) | merge |
$aside-menu-color15 uses | #29363D | No semantic token yet | neutral-800 (2.2) | merge |
$input-affix-color13 uses | #91939E | No semantic token yet | neutral-400 (5.6) | review |
$upgrade-gradient13 uses | #982CB1 | No semantic token yet | violet-ai-500 (10) | review |
$upgrade-gradient-hover13 uses | #982CB1 | No semantic token yet | violet-ai-500 (10) | review |
$invoice-sar-bg13 uses | #F0FDF4 | --success-subtle | green-50 (0) | keep |
$success-surface-bg13 uses | #F0FDF4 | No semantic token yet | green-50 (0) | keep |
$invoice-usd-color12 uses | #1D4ED8 | --info | blue-700 (0) | keep |
$success-text-color11 uses | #15803D | --success-text | green-700 (0) | keep |
$invoice-net-color11 uses | #15803D | --success-text | green-700 (0) | keep |
$invoice-sar-color11 uses | #16A34A | --success | green-600 (0) | keep |
$todo-low-badge-fg11 uses | #16A34A | No semantic token yet | green-600 (0) | keep |
$dropdown-divider-bg10 uses | #F0F3F5 | No semantic token yet | neutral-100 (0.7) | merge |
$footer-bg10 uses | #F0F3F5 | No semantic token yet | neutral-100 (0.7) | merge |
$gray-10010 uses | #F0F3F5 | No semantic token yet | neutral-100 (0.7) | merge |
$disable-color10 uses | #B0B0B0 | No semantic token yet | neutral-400 (3.9) | merge |
$invoice-usd-bg9 uses | #EFF6FF | --info-subtleDiffers from the nearest primitive: the semantic token wins. | neutral-50 (1.5) | merge |
$border-strong-color9 uses | #C8CDD8 | --border-strong | neutral-300 (2.7) | merge |
$todo-low-bar9 uses | #22C55E | No semantic token yet | green-500 (0) | keep |
$ai-light-text9 uses | #5F5F5F | No semantic token yet | neutral-600 (1.4) | merge |
$overlay-body-text-color9 uses | #5F5F5F | No semantic token yet | neutral-600 (1.4) | merge |
$checkbox-hover9 uses | #CCCCCC | No semantic token yet | neutral-300 (2.5) | merge |
$invoice-section-line8 uses | #E2E5EC | No semantic token yet | neutral-200 (1) | merge |
$success-text-strong8 uses | #166534 | No semantic token yet | lime-800 (3.7) | merge |
$warning-border-color8 uses | #FDE68A | No semantic token yet | amber-200 (0) | keep |
$ai-secondary-text8 uses | #4A4A4A | No semantic token yet | neutral-700 (0) | keep |
$ai-icon-hover8 uses | #4A4A4A | No semantic token yet | neutral-700 (0) | keep |
$danger-border-color7 uses | #FCA5A5 | No semantic token yet | red-300 (0) | keep |
$invoice-egp-bg7 uses | #FFF7ED | No semantic token yet | orange-50 (0.3) | merge |
$invoice-sar-border7 uses | #86EFAC | No semantic token yet | green-300 (0) | keep |
$success-border-color7 uses | #86EFAC | No semantic token yet | green-300 (0) | keep |
$ai-dark-text7 uses | #777777 | No semantic token yet | neutral-500 (3.1) | merge |
$gray-2007 uses | #C2CFD6 | No semantic token yet | neutral-300 (2.9) | merge |
$sidebar-nav-title-color7 uses | #C2CFD6 | No semantic token yet | neutral-300 (2.9) | merge |
$dropdown-border-color7 uses | #C2CFD6 | No semantic token yet | neutral-300 (2.9) | merge |
$form-row-bg6 uses | #FBFBFD | No semantic token yet | neutral-50 (1) | merge |
$invoice-egp-color6 uses | #C2410C | No semantic token yet | orange-700 (3.4) | merge |
$paid-experience-muted-text-color6 uses | #6F7389 | No semantic token yet | neutral-500 (5.3) | review |
$scpay-primary-tint6 uses | #EEF1FC | --accent | brand-50 (1.1) | merge |
$todo-text-title6 uses | #1A1D23 | No semantic token yet | neutral-950 (2.1) | merge |
$todo-high-badge-fg6 uses | #DC2626 | No semantic token yet | red-600 (0) | keep |
$scpay-row-line6 uses | #EAECF0 | --borderDiffers from the nearest primitive: the semantic token wins. | neutral-100 (1.3) | merge |
$scpay-muted-dot6 uses | #98A2B3 | No semantic token yet | neutral-400 (2.9) | merge |
$scroll-thumb-color6 uses | #C7C6CC | No semantic token yet | neutral-300 (4.2) | merge |
$invoice-egp-border5 uses | #FDBA74 | No semantic token yet | orange-300 (0.6) | merge |
$invoice-usd-border5 uses | #BFDBFE | No semantic token yet | blue-200 (0) | keep |
$timeline-line-color5 uses | #F2F4FA | No semantic token yet | neutral-100 (1.3) | merge |
$medium-grey-text-color-hover4 uses | #232323 | No semantic token yet | neutral-900 (0.8) | merge |
$todo-low-badge-bg4 uses | #DCFCE7 | No semantic token yet | green-100 (0) | keep |
$proof-accent-color4 uses | #7ACA14 | No semantic token yet | lime-500 (2.3) | merge |
$medium-grey-text-color4 uses | #3E3E3E | --foreground-secondaryDiffers from the nearest primitive: the semantic token wins. | neutral-800 (4.3) | merge |
$verification-flag-gradient4 uses | #A324A3 | No semantic token yet | violet-ai-500 (12.1) | review |
$ai-accent-color4 uses | #7C5CBF | --ai | violet-ai-500 (0) | keep |
$verification-pulse-color3 uses | #43D426 | No semantic token yet | lime-500 (2.7) | merge |
$secondary-color-hover3 uses | #EDC2AE | No semantic token yet | red-200 (4.7) | merge |
$todo-med-bar3 uses | #F59E0B | No semantic token yet | amber-500 (0) | keep |
$todo-page-bg3 uses | #F5F6FA | No semantic token yet | neutral-50 (0.6) | merge |
$todo-med-badge-bg3 uses | #FEF3C7 | No semantic token yet | amber-100 (0) | keep |
$invoice-tabby-color3 uses | #6B36C9 | No semantic token yet | —3rd-party brand (Tabby) | exclude |
$invoice-tamara-color3 uses | #B23A1E | No semantic token yet | —3rd-party brand (Tamara) | exclude |
$paid-experience-check-bg3 uses | #EDF2FF | No semantic token yet | brand-50 (1) | merge |
$proof-quote-mark-color3 uses | #C3C8D4 | No semantic token yet | neutral-300 (4.1) | merge |
$scpay-primary-tint-border3 uses | #D6DCF5 | No semantic token yet | blue-200 (3.1) | merge |
$sticky-bg-color3 uses | #F5F7FA | No semantic token yet | neutral-50 (0.4) | merge |
$scroll-thumb-hover-color3 uses | #A7A4AD | No semantic token yet | neutral-400 (1.4) | merge |
$twitter2 uses | #00ACED | No semantic token yet | —social brand | exclude |
$nav-color2 uses | #060606 | --sidebar | neutral-950 (9.1) | review |
$ai-message-text2 uses | #363638 | No semantic token yet | neutral-800 (1.3) | merge |
$todo-grouped-border2 uses | #3B4FCB | No semantic token yet | brand-600 (3) | merge |
$linkedin2 uses | #4875B4 | No semantic token yet | —social brand | exclude |
$ai-accent-text-color2 uses | #5F3F9E | --ai-foreground | violet-ai-700 (0) | keep |
$overlay-muted-text-color2 uses | #64748B | No semantic token yet | navy-500 (4.9) | merge |
$ai-lighter-text2 uses | #727272 | No semantic token yet | neutral-500 (4.8) | merge |
$ai-icon-gray2 uses | #75787F | No semantic token yet | neutral-500 (3) | merge |
$ai-primary-color2 uses | #8A4FFF | No semantic token yet | violet-ai-500 (10.4) | review |
$checkbox-border-color2 uses | #8A93A6 | No semantic token yet | neutral-400 (6.4) | review |
$paid-experience-discount-bg2 uses | #91EC6B | No semantic token yet | lime-300 (5.5) | review |
$scpay-refund-text2 uses | #9A3412 | No semantic token yet | orange-800 (2.6) | merge |
$ai-footer-placeholder2 uses | #B7B7B7 | No semantic token yet | neutral-400 (6.1) | review |
$paid-experience-toggle-bg2 uses | #CFD5DF | No semantic token yet | neutral-300 (1.4) | merge |
$google-plus2 uses | #D34836 | No semantic token yet | red-600 (4.2) | merge |
$cell-border-color2 uses | #EBEDEF | No semantic token yet | neutral-100 (1.1) | merge |
$paid-experience-header-bg2 uses | #EEF2FF | --accent | brand-50 (0.9) | merge |
$invoice-tabby-bg2 uses | #F2EAFE | No semantic token yet | —3rd-party brand (Tabby) | exclude |
$paid-experience-panel-bg2 uses | #F7F7FC | No semantic token yet | neutral-50 (0.5) | merge |
$row-hover-bg2 uses | #FAFAFC | No semantic token yet | neutral-50 (0.7) | merge |
$invoice-tamara-bg2 uses | #FFF0E6 | No semantic token yet | —3rd-party brand (Tamara) | exclude |
$invoice-due-row-bg2 uses | #FFFDF4 | --warning-subtleDiffers from the nearest primitive: the semantic token wins. | white (1.4) | merge |
Related: Accessibility, Data visualization, Color tokens.