Color Tokens

Colors define the visual identity of the CTD Learns App. Every color lives as a named token in theme.js. Never hardcode hex values in your components. Tokens keep the app consistent and make dark mode work. Click any swatch to copy its hex. Use the copy icon next to a token name to copy its full reference path.

Brand

Color

Name

Token

Hex

Usage

primary

tokens.color.primary

#E8541A

Primary CTA buttons, links, active states

primaryLight

tokens.color.primaryLight

#FDEEE8

Button hover states, selected backgrounds

primaryDark

tokens.color.primaryDark

#C4420E

Button active/pressed states

navy

tokens.color.navy

#12284C

Headings, primary text, navigation

navyLight

tokens.color.navyLight

#1A3A6B

Dark mode surfaces, secondary navy elements

Usage

// In MUI sx prop or styled components:
color: theme.palette.primary.main        // #E8541A
color: theme.palette.primary.dark        // #C4420E
backgroundColor: theme.palette.navy      // #12284C

Grays

Color

Name

Token

Hex

Usage

gray50

tokens.color.gray50

#F7F7F8

Page background (light mode)

gray100

tokens.color.gray100

#F0F0F1

Subtle surfaces, striped table rows

gray200

tokens.color.gray200

#E2E2E4

Borders, dividers

gray300

tokens.color.gray300

#C8C8CB

Placeholder text, disabled borders

gray400

tokens.color.gray400

#9E9EA3

Placeholder text, inactive icons

gray500

tokens.color.gray500

#6B6B72

Secondary text, captions

gray600

tokens.color.gray600

#4A4A50

Body text

gray900

tokens.color.gray900

#141414

Primary text (light mode)

Usage

// Borders & dividers
borderColor: tokens.color.gray200        // #E2E2E4

// Secondary text
color: "text.secondary"              // #6B6B72

// Primary text
color: "text.primary"              // #141414

Semantic

Color

Name

Token

Hex

Usage

success

tokens.color.success

#22C55E

Active states, success feedback

successLight

tokens.color.successLight

#DCFCE7

Success badge backgrounds

successDark

tokens.color.successDark

#15803D

Success badge text, dark contrast

warning

tokens.color.warning

#F59E0B

Paused states, warnings

warningLight

tokens.color.warningLight

#FEF3C7

Warning badge backgrounds

warningDark

tokens.color.warningDark

#B45309

Warning badge text, dark contrast

danger

tokens.color.danger

#EF4444

Destructive actions, errors

dangerLight

tokens.color.dangerLight

#FEE2E2

Error backgrounds

dangerDark

tokens.color.dangerDark

#B91C1C

Error text, dark contrast

info

tokens.color.info

#3B82F6

Hyperlinks, info highlights

infoLight

tokens.color.infoLight

#EFF6FF

Info badge backgrounds

Usage

// Success chip
backgroundColor: tokens.color.successLight  // #DCFCE7
color: tokens.color.successDark             // #15803D

// Error state
color: theme.palette.error.main             // #EF4444
backgroundColor: tokens.color.dangerLight   // #FEE2E2

Surfaces

surfaceLight

#FFFFFF

Cards, modals, sidebar (light mode)

bgLight

#F3F4F6

Page background (light mode)

surfaceDark

#1E1E20

Cards, modals (dark mode)

bgDark

#0B0C0C

Page background (dark mode)

Home Typography