Semantic Colors

Semantic color tokens provide purpose-driven color assignments that adapt automatically across brands and themes. Use these tokens instead of direct color values for consistent, maintainable designs.

Why Semantic Tokens?

Brand Flexibility

Automatically adapts to each brand's color palette without code changes

Theme Support

Seamlessly switches between light and dark modes with proper contrast

Maintainability

Update colors globally by changing token values, not individual components

Core Semantic Tokens

accent

var(--color-accent)

Primary brand color for CTAs, links, and highlights

ButtonsLinksActive statesBrand elements

TpGROUP

#194A8D

Light

#194A8D

Dark

#1A4181

TpGroup

#ED6A02

TpMIS

#1180D0

FambulTik

#B94A0D

TpESTATE

#008080

TpLEARN

#6028D0

TellStoryAgent

#294273

Kent Resort

#008080

text.primary

var(--color-text.primary)

Primary text color for body content and headings

HeadingsBody textLabelsPrimary content

TpGROUP

#1A1A1A

Light

#1A1A1A

Dark

#FFFFFF

TpGroup

#1A1A1A

TpMIS

#1A1A1A

FambulTik

#1A1A1A

TpESTATE

#1A1A1A

TpLEARN

#1A1A1A

TellStoryAgent

#1A1A1A

Kent Resort

#1A1A1A

text.secondary

var(--color-text.secondary)

Secondary text color for supporting content

CaptionsHelper textMetadataSubtitles

TpGROUP

#666666

Light

#666666

Dark

#A0A0A0

TpGroup

#666666

TpMIS

#666666

FambulTik

#666666

TpESTATE

#666666

TpLEARN

#666666

TellStoryAgent

#666666

Kent Resort

#666666

surface

var(--color-surface)

Background color for cards and elevated surfaces

CardsModalsPopoversDropdowns

TpGROUP

#FFFFFF

Light

#FFFFFF

Dark

#1A1A1A

TpGroup

#FFFFFF

TpMIS

#FFFFFF

FambulTik

#FFFFFF

TpESTATE

#FFFFFF

TpLEARN

#FFFFFF

TellStoryAgent

#FFFFFF

Kent Resort

#FFFFFF

border

var(--color-border)

Border color for dividers and outlines

Input bordersDividersCard bordersTable borders

TpGROUP

#E0E0E0

Light

#E0E0E0

Dark

#333333

TpGroup

#E0E0E0

TpMIS

#E0E0E0

FambulTik

#E0E0E0

TpESTATE

#E0E0E0

TpLEARN

#E0E0E0

TellStoryAgent

#E0E0E0

Kent Resort

#E0E0E0

State Colors

State colors are consistent across all brands to maintain clear communication and user expectations.

Success

success

Success messages, confirmations, positive states

#10B981

Warning

warning

Warning messages, caution states, alerts

#F59E0B

Error

error

Error messages, destructive actions, failures

#EF4444

Info

info

Informational messages, neutral notifications

#3B82F6

Usage Examples

✅ Correct Usage

/* Use semantic tokens */
color: var(--color-text-primary);
background: var(--color-accent);
border: 1px solid var(--color-border);

✓ Adapts to brand and theme changes automatically

✓ Maintains proper contrast ratios

✓ Easy to update globally

❌ Avoid

/* Don't use direct hex values */
color: #1A1A1A;
background: #194A8D;
border: 1px solid #E0E0E0;

✗ Doesn't adapt to brand or theme changes

✗ May break contrast in dark mode

✗ Difficult to maintain at scale

Code Example

/* CSS Custom Properties */
--color-accent: #194A8D;           /* Changes per brand */
--color-text-primary: #1A1A1A;     /* Changes per theme */
--color-surface: #FFFFFF;          /* Changes per theme */

/* React Component */
<button style={{
  backgroundColor: 'var(--color-accent)',
  color: 'var(--color-surface)'
}}>
  Primary Action
</button>

/* Tailwind (with custom tokens) */
<div className="bg-accent text-surface">
<p className="text-primary">
<div className="border-border">

Token Reference

Token Name	Purpose	Adapts To
accent	Primary brand color	Brand
text.primary	Main text color	Theme
text.secondary	Supporting text	Theme
surface	Card/modal backgrounds	Theme
border	Dividers and outlines	Theme
success	Success states	Fixed
warning	Warning states	Fixed
error	Error states	Fixed

Semantic Color Guidelines

• Always use semantic tokens instead of direct color values in components
• Test semantic colors in all brand contexts to ensure they work universally
• Verify WCAG 2.2 AA contrast ratios (4.5:1) for all text-on-background combinations
• Document any new semantic tokens with clear purpose and usage guidelines
• State colors (success, warning, error) remain consistent across all brands