Colour System - ERS Energy | Brand values which defines us

Overview

A comprehensive 12-step color system where each step serves a specific purpose in the UI hierarchy, from subtle backgrounds to high-contrast text.

The 12-Step Philosophy

1-2

Backgrounds

App & subtle BG

3-5

Interactive

UI elements

6-7

Borders

Subtle & solid

8

Hover

Solid hover

9-10

Solid

Buttons & fills

11-12

Text

Low & high contrast

3-Tier Token Architecture (v2)

Tier 1: Reference

Raw primitive values. The foundation.

--orange-9 --charcoal-10

Tier 2: Semantic

Purpose-based tokens for layouts.

--color-brand-primary --color-text-primary

Tier 3: Component

Component-specific tokens.

--button-bg-primary --card-radius

Brand Colors

Three core colors, each with 12 carefully tuned steps. Click any swatch to copy its hex value.

Orange Primary

1#fffcfa

2#fff5ee

3#ffe8d9

4#ffdbc4

5#ffcba8

6#f9c1a7

7#f7a37a

8#f4844e

9#F26522

10#d9581e

11#c04f1a

12#6b2a0d

Teal Secondary

1#f8fcfc

2#f0f7f7

3#e0eaea

4#d0dede

5#c2d5d5

6#a3c1c1

7#85adac

8#669998

9#669998

10#5a8a89

11#4e7b7a

12#2d4847

Charcoal Neutral

1#fafafa

2#f5f5f5

3#ebebeb

4#e0e0e0

5#d5d5d5

6#c4c4c4

7#acacac

8#838283

9#5a595a

10#313032

11#282728

12#1a1a1a

Primary Colors at a Glance

Quick reference cards with color specifications.

Orange

Primary Brand Color

#F26522

RGB
242, 101, 34

CMYK
0, 74, 99, 0

Teal

Secondary Brand Color

#669998

RGB
102, 153, 152

CMYK
63, 26, 39, 0

Charcoal

Neutral & Text

#313032

RGB
49, 48, 50

CMYK
70, 65, 61, 60

Status Colors

Semantic feedback colors, each with a full 12-step scale.

Success Positive

1

2

3

4

5

6

7

8

9

10

11

12

Error Destructive

1

2

3

4

5

6

7

8

9

10

11

12

Warning Caution

1

2

3

4

5

6

7

8

9

10

11

12

Info Informational

1

2

3

4

5

6

7

8

9

10

11

12

Contrast Checker

WCAG accessibility compliance for common text/background combinations.

White on Dark-12

15.3:1 AAA

White on Orange-9

4.6:1 AA

White on Teal-8

4.5:1 AA

Dark-12 on White

15.3:1 AAA

Orange-9 on White

4.6:1 AA

Orange-11 on Orange-2

7.2:1 AAA

Interactive Contrast Calculator

Background:

Foreground:

15.3:1

AA Pass AAA Pass

Sample Text

Color Blindness Simulator

See how the ERS brand colors appear to people with different types of color vision deficiency. This helps ensure our designs remain accessible and distinguishable.

Vision Type

Orange

#F26522

Teal

#669998

Dark

#313032

Normal Vision: Full color perception. This is how most people see the ERS brand colors.

Semantic Tokens

Map raw colors to semantic purposes for consistent application.

Token Reference

Token	Value	Use Case
Background	–dark-1	Main app background
Surface	–dark-2	Cards, panels, modals
Border	–dark-6	Subtle borders & dividers
Text Primary	–dark-12	Headings, body text
Text Secondary	–dark-11	Captions, descriptions
Primary Action	–orange-9	Buttons, links, CTAs
Primary Hover	–orange-10	Hovered buttons & links
Secondary Action	–teal-9	Secondary buttons
Highlight	–orange-3	Selection, focus rings

Usage Guidelines

Best practices for using 12-step color system.

Quick Reference

Use steps 1-2 for page and component backgrounds
Use steps 3-5 for interactive element states
Use steps 6-7 for borders and separators
Use step 9 as primary solid color
Use step 10 for hover states
Use steps 11-12 for text

Dark Mode Tip

For dark mode, simply reverse the scale: use steps 12-11 for backgrounds and steps 1-2 for text. The 12-step system is designed to be invertible. Try the dark mode toggle in the navbar!

CSS Variables

Copy and paste these variables into your stylesheet.

Complete Color Variables

:root {
  /* Brand Colors – 12 Step Scale */
  –orange-1: #fffcfa;
  –orange-2: #fff5ee;
  –orange-3: #ffe8d9;
  –orange-4: #ffdbc4;
  –orange-5: #ffcba8;
  –orange-6: #f9c1a7;
  –orange-7: #f7a37a;
  –orange-8: #f4844e;
  –orange-9: #F26522;
  –orange-10: #d9581e;
  –orange-11: #c04f1a;
  –orange-12: #6b2a0d;

  –teal-1: #f8fcfc;
  –teal-2: #f0f7f7;
  –teal-3: #e0eaea;
  –teal-4: #d0dede;
  –teal-5: #c2d5d5;
  –teal-6: #a3c1c1;
  –teal-7: #85adac;
  –teal-8: #669998;
  –teal-9: #669998;
  –teal-10: #5a8a89;
  –teal-11: #4e7b7a;
  –teal-12: #2d4847;

  –dark-1: #fafafa;
  –dark-2: #f5f5f5;
  –dark-3: #ebebeb;
  –dark-4: #e0e0e0;
  –dark-5: #d5d5d5;
  –dark-6: #c4c4c4;
  –dark-7: #acacac;
  –dark-8: #838283;
  –dark-9: #313032;
  –dark-10: #282728;
  –dark-11: #5a595a;
  –dark-12: #1a1a1a;

  /* Status Colors */
  –success-9: #2e7d32;
  –error-9: #c62828;
  –warning-9: #ef6c00;
  –info-9: #1565c0;
}