Colors

Overview

WEC Design System uses Telkomsel brand colors with a comprehensive palette for semantic communication. Our color system ensures accessibility, visual consistency, and brand alignment.

Primary Colors

Token	Value	Usage
Telkomsel Red	`#FF0025`	Primary actions, links, CTAs, brand emphasis
Dark Blue	`#001A41`	Headings, dark backgrounds, secondary brand
Black	`#000000`	Text, borders, high contrast
White	`#ffffff`	Backgrounds, text on dark

Neutral Colors (Grey Scale)

Token	Value	Usage
Grey 10	`#FAFAFB`	Very light backgrounds, subtle surfaces
Grey 20	`#EDECF0`	Light backgrounds, dividers
Grey 40	`#CCCFD3`	Borders, disabled states
Grey 50	`#79838D`	Secondary text, icons
Grey 60	`#99A0A7`	Placeholder text, disabled content
Grey 80	`#66707A`	Body text alternatives
Grey 90	`#5F6368`	Secondary content
Grey 100	`#4E5764`	Primary body text

Semantic Colors

Success (Valid)

Token	Value	Usage
Light	`#EDFCF0`	Success background, valid state bg
Base	`#008E53`	Success text, icons, valid indicators
Dark	`#005C36`	Success borders, dark mode

Info

Token	Value	Usage
Light	`#E9F6FF`	Info background
Base	`#0050AE`	Info text, links, focus states
Dark	`#002D7D`	Info borders, dark mode

Warning

Token	Value	Usage
Light	`#FEF3D4`	Warning background
Base	`#FDA22B`	Warning text, icons, alerts
Dark	`#D9801F`	Warning borders

Error (Danger)

Token	Value	Usage
Light	`#FDDDD4`	Error background
Base	`#BC1D42`	Error text, destructive actions
Dark	`#9D1440`	Error borders, dark mode

Additional Brand Colors

Name	Value	Usage
Mustard/Golden	`#FDA22B`	Badges, highlights, warnings
Green (Success)	`#008E53`	Success states, confirmations
Sunset Orange	`#FE6E00`	Special offers, promotions
Forest Green	`#1D9940`	Alternative success state
Warning Orange	`#D44000`	Critical warnings

Gradients

Gradient	Value	Usage
Primary Red	Red gradient (horizontal flow)	CTAs, primary buttons, headers
Secondary Blue	Blue gradient (horizontal flow)	Secondary CTAs, headers

Color Usage Guidelines

Primary Actions

Use Telkomsel Red (#FF0025) for:

Primary buttons (Buy Now, Continue, Submit)
Active navigation items
Important links
Brand elements

Secondary Actions

Use Dark Blue (#001A41) for:

Secondary buttons
Headings and subheadings
Footer text
Less prominent links

Text Colors

Context	Color	Value
Primary text	Grey 100	`#4E5764`
Secondary text	Grey 50	`#79838D`
Disabled text	Grey 60	`#99A0A7`
On dark backgrounds	White	`#ffffff`

Background Colors

Context	Color	Value
Default background	White	`#ffffff`
Subtle background	Grey 10	`#FAFAFB`
Section background	Grey 20	`#EDECF0`
Dark background	Dark Blue	`#001A41`

Accessibility & Contrast

All color combinations meet WCAG 2.1 Level AA requirements:

Foreground	Background	Contrast Ratio	Passes
Grey 100 (`#4E5764`)	White (`#ffffff`)	8.2:1	✅ AA + AAA
Telkomsel Red (`#FF0025`)	White (`#ffffff`)	4.5:1	✅ AA
Dark Blue (`#001A41`)	White (`#ffffff`)	13.5:1	✅ AA + AAA
Success (`#008E53`)	Success Light (`#EDFCF0`)	5.1:1	✅ AA
Error (`#BC1D42`)	Error Light (`#FDDDD4`)	4.8:1	✅ AA
Info (`#0050AE`)	Info Light (`#E9F6FF`)	6.2:1	✅ AA + AAA

Focus States

Use these colors for focus indicators:

Context	Color	Value
Primary focus	Blue	`#0050AE`
Secondary focus	Red	`#FF0025`

/* Example focus styles */
.button:focus-visible {
  outline: 2px solid #0050AE;
  outline-offset: 2px;
}

.button-primary:focus-visible {
  outline: 2px solid #FF0025;
  outline-offset: 2px;
}

CSS Variables

:root {
  /* Primary Colors */
  --color-primary: #FF0025;
  --color-secondary: #001A41;
  --color-black: #000000;
  --color-white: #ffffff;

  /* Neutral Colors */
  --color-grey-10: #FAFAFB;
  --color-grey-20: #EDECF0;
  --color-grey-40: #CCCFD3;
  --color-grey-50: #79838D;
  --color-grey-60: #99A0A7;
  --color-grey-80: #66707A;
  --color-grey-90: ##5F6368;
  --color-grey-100: #4E5764;

  /* Semantic Colors - Success */
  --color-success-light: #EDFCF0;
  --color-success-base: #008E53;
  --color-success-dark: #005C36;

  /* Semantic Colors - Info */
  --color-info-light: #E9F6FF;
  --color-info-base: #0050AE;
  --color-info-dark: #002D7D;

  /* Semantic Colors - Warning */
  --color-warning-light: #FEF3D4;
  --color-warning-base: #FDA22B;
  --color-warning-dark: #D9801F;

  /* Semantic Colors - Error */
  --color-error-light: #FDDDD4;
  --color-error-base: #BC1D42;
  --color-error-dark: #9D1440;

  /* Gradients */
  --gradient-primary: linear-gradient(76.81deg, #B90024 15.71%, #FF0025 68.97%, #FD195E 94.61%);
  --gradient-secondary: linear-gradient(75.07deg, #001A41 17.5%, #0E336C 105.9%);
}

Usage Examples

Buttons

// Primary button - Telkomsel Red gradient
<button className="bg-gradient-to-r from-[#B90024] via-[#FF0025] to-[#FD195E] text-white">
  Buy Now
</button>

// Secondary button - White with red border
<button className="bg-white border-2 border-[#FF0025] text-[#FF0025]">
  Learn More
</button>

Status Indicators

// Success
<div className="bg-[#EDFCF0] text-[#008E53]">Payment successful</div>

// Error
<div className="bg-[#FDDDD4] text-[#BC1D42]">Payment failed</div>

// Warning
<div className="bg-[#FEF3D4] text-[#FDA22B]">Session expiring soon</div>

// Info
<div className="bg-[#E9F6FF] text-[#0050AE]">New features available</div>

Text Styles

// Heading
<h1 className="text-[#001A41]">Page Title</h1>

// Body text
<p className="text-[#4E5764]">Body text goes here...</p>

// Secondary text
<p className="text-[#79838D]">Secondary information</p>

// Disabled text
<p className="text-[#99A0A7]">Disabled state</p>

Best Practices

✅ Do	❌ Don’t
Use semantic colors for their intended purpose	Use red for non-destructive actions
Ensure 4.5:1 contrast ratio for normal text	Use light gray text on white backgrounds
Use color + icons for status indicators	Rely on color alone to convey meaning
Test with color blindness simulators	Assume everyone sees color the same
Support both light and dark modes	Hardcode colors without alternatives

Testing

Before using colors in production:

Check contrast ratios with WebAIM Contrast Checker
Test with color blindness simulator (e.g., Chrome DevTools)
Verify in both light and dark modes
Test focus states are visible
Ensure color is not the only indicator of state