COLOR SYSTEM: Production color system from Figma
PALETTE: 4 Brand Colors | 5 Utility Colors | Neutral System | Special Colors
SHADES: Tailwind-style numbering (100-950)

This color system uses descriptive naming with common sense semantics (red = critical, green = positive) rather than enforced semantic meaning, making colors suitable for both UI and data visualization. Each color has 10 shades plus semantic aliases for convenient use.

Brand Colors

Brand Colors: Core colors defining the platform's visual identity. Each has a designated base shade (500) and 10 total shades for hierarchical use. 4 ramps: Primary (navy), Secondary (sky-blue), Accent (legacy orange-red, project-only), Blue (true-blue).

Primary - Dark Blue (Main signature color)

100
200
300
400
500
base
600
700
800
900
950

Used for main actions across the system. Aliases: --color-primary → --color-primary-500

Secondary - Sky-Blue (Figma "Brand Secondary")

100
200
300
400
500
base
600
700
800
900
950

Sky-blue brand secondary. Base 500: #35A7E7. Matches Figma "Brand Secondary". Used for hero banners, accent tints, and info accents.

Accent (Project-only, legacy orange-red — NOT in Figma)

100
200
300
400
500
base
600
700
800
900
950

Legacy orange-red ramp inherited from A-Plus. Preserved as project-specific extension; NOT in Applicaa One Identity Figma. Base 500: #EC634B.

Blue - True-Blue (Figma "Blue", separate from Secondary sky)

100
200
300
400
500
base
600
700
800
900
950

True-blue brand accent. Base 500: #3478F6. Matches Figma "Blue". Distinct from Secondary sky-blue. Alias: --color-info → --color-blue-500. For navy-leaning info badges use --color-state-info-*.

Link Blue (Navy-leaning, separate family)

Link Blue: Distinct hue from --color-blue-*. Used for links, focus rings, focused-input border, and primary CTAs.

--color-link

#2C7ECD · links, focus rings, primary CTA

--color-link-hover

#2664BB · link / CTA hover

--color-link-subtle

#DCEBFB · link-flavored chip / pill bg

Utility Colors

Utility Colors: Common sense colors for UI feedback and data visualization. Red = critical, Green = positive, Yellow = caution/warning, Orange = saturated brand accent, Magenta = data expansion.

Yellow (Figma "Yellow" — was --color-orange-* pre-Round-1.5)

100
200
300
400
500
base
600
700
800
900
950

Warning/caution amber. Base 500: #FFA940. Matches Figma "Yellow". Use dark text for contrast. --color-warning alias points here.

Orange - Saturated (Figma "Orange")

100
200
300
400
500
base
600
700
800
900
950

Saturated orange brand accent for promo treatments. Base 500: #F06500. Matches Figma "Orange". Distinct from Yellow.

Red (Negative/Critical)

100
200
300
400
500
600
700
800
900
950

Aliases: --color-danger → --color-red-500

Green (Positive/Success)

100
200
300
400
500
600
700
800
900
950

Aliases: --color-success → --color-green-500

Magenta (Data Visualization)

100
200
300
400
500
600
700
800
900
950

Additional color for data visualization expansion.

Neutral System

Neutral Colors: Universal colors for backgrounds and text hierarchy. Solid neutrals plus translucent variants for overlays and subtle UI elements.

Neutral (Solid)

0
100
200
300
400
500
600
700
800
900
950

Aliases: --color-light → --color-neutral-100, --color-dark → --color-neutral-900

Neutral Translucent (Blue-tinted, for overlays/shadows/borders)

100
200
300
400
500
600
700
800
900
950

Base: rgba(37, 58, 106, opacity). Used for texts, shadows, lines, borders, and neutral button appearances.

Special Purpose Colors

Special Colors: Specifically tuned for dedicated uses in the platform.

Background

.bg-background

For page backgrounds only. --color-background

Table Header

.bg-table-header

For table headers only. --color-table-header

Semantic Aliases (Backward Compatibility)

Semantic Names: Convenient aliases for common use cases. All point to shade 500 of their respective colors.

primary

→ primary-500

success

→ green-500

danger

→ red-500

warning

→ yellow-500 (amber, post-Round-1.5)

info

→ blue-500

light

→ neutral-100

dark

→ neutral-900

Note about Secondary (Round 1.5 change):

After Round 1.5, --color-secondary now points to sky-blue (secondary-500 = #35A7E7), matching Figma "Brand Secondary". The legacy orange-red is preserved at --color-accent-*. For component variants like .tw-btn-secondary, neutral colors are used regardless to maintain usability. The --color-warning alias now points to --color-yellow-500 (amber), not the new saturated orange.

Data Visualization Guidelines

Color Pairing: Recommended color combinations for charts and data visualization. See the full analysis document for detailed guidance.

2-Color Categorical (High contrast, brand-aligned)

Primary
Secondary

3-Color Categorical (Clear distinction)

Blue
Green
Orange

5-Color Categorical (Full range)

Primary
Blue
Green
Orange
Magenta

Diverging (Negative ← Neutral → Positive)

Red
Neutral
Green

Accessibility Notes:

  • Always pair color with another indicator (pattern, label, icon)
  • Avoid red-green only combinations for colorblind accessibility
  • Maintain 3:1 minimum contrast ratio between adjacent colors
  • Test palettes with colorblind simulation tools

State Trios (bg / border / ink)

State Trios: Fixed three-value palette per state. Use for badges, callouts, validation. Tokens: --color-state-{success|danger|warning|info}-{bg|border|ink}.

Success — bg #F6FFED · border #B7EB8F · ink #237804
Danger — bg #FFF1F0 · border #FFA39E · ink #A8071A
Warning — bg #FFF7E6 · border #FFE7BA · ink #D46B08
Info — bg #E6F4FF · border #91CAFF · ink #002C8C

Ofsted Rating Aliases

Ofsted Bands: Convenience aliases for the four Ofsted rating bands used on school cards / profiles.

Outstanding

#237804

Good

#2C7ECD (= --color-link)

Requires

#D46B08

Inadequate

#A8071A

Primary Ink + Display (additive aliases)

Primary Ink/Display: Additive aliases on top of --color-primary (#263C91 action navy). Use ink for body headings, display for hero / display headings.

--color-primary

#263C91 · action navy (unchanged)

--color-primary-ink

#253A6A · body headings

--color-primary-display

#09326A · display headings

Line + Surface Tokens

Lines + Surfaces: Named tokens for the most common borders and surface backgrounds across the design system.

--color-line-card

#E2E6ED · card / input border

--color-line-divider

#DDDDDD · section dividers

--color-line-muted

#F3F4F7 · row hover / muted bg

--color-surface

#FFFFFF · default surface

--color-surface-tint

#F0F8FF · hero wash

--color-surface-muted

#F3F4F7 · muted surface

Custom Singletons

Singletons: Single-shade tokens with a dedicated purpose. Not part of a numbered ramp.

--color-black

#000000 (Figma "Custom Colors")

--color-background

#EEF1F6 (production exact)

--color-table-header

#C9D6EC

--color-neutral-0

#FFFFFF

Quick Reference

Brand: primary (navy) | secondary (sky-blue) | accent (legacy orange-red, project-only) | blue (true-blue)
Utility: yellow (caution/warning) | orange (saturated) | red | green | magenta
Neutral: neutral-0 through neutral-950 | neutral-translucent-100 through neutral-translucent-950
Special: background | table-header | black
Semantic Aliases: primary | success (green) | danger (red) | warning (yellow) | info (blue) | light | dark
Utilities: .bg-{color}-{shade} | .text-{color}-{shade} | .border-{color}-{shade}
CSS Variables: var(--color-{name}-{shade}) (e.g., var(--color-primary-500))