Brand Color System

A unified blue-anchored design language for all product surfaces

Color Tokens

The complete token hierarchy — from raw palette to semantic roles

Primary — Blue Scale

Blue 50 #EFF6FF
Blue 100 #DBEAFE
Blue 200 #BFDBFE
Blue 300 #93C5FD
Blue 400 #60A5FA
Primary Blue 500 #2563EB
Blue 600 #1D4ED8
Blue 700 #1E40AF
Blue 800 #1E3A8A
Blue 900 #1E2F6B

Neutral — Blue-tinted Greys

White #FFFFFF
N 50 #F8FAFC
N 100 #F1F5F9
N 200 #E2E8F0
N 300 #CBD5E1
N 400 #94A3B8
N 500 #64748B
N 600 #475569
N 700 #334155
N 900 #0F172A

Semantic Role Mapping

--color-primary #2563EB · Blue 500 Main CTAs, active states, links
--color-primary-hover #1D4ED8 · Blue 600 Hover states on primary elements
--color-primary-subtle #DBEAFE · Blue 100 Backgrounds, badges, highlights
--color-primary-muted #93C5FD · Blue 300 Secondary accents, icon highlights
--color-bg #F8FAFC · Neutral 50 Page background
--color-surface #FFFFFF · White Cards, panels, modals
--color-border #E2E8F0 · Neutral 200 Dividers, input borders, card edges
--color-text-primary #0F172A · Neutral 900 Headings, primary body text

Buttons

All button variants unified under the blue brand system

Primary Action

Secondary Action

Ghost / Tertiary

Destructive

With Icons

Disabled States

Loading State

States & Inputs

Interactive states — focus rings, active tabs, selected items, progress

Form Inputs

✓ Looks good!
Please enter a valid email address

Tabs

Overview panel — primary tab is highlighted with the brand blue, underline indicator matches --color-primary.

Analytics panel — switching tabs shows the active state transition.

Settings panel content goes here.

Billing panel content goes here.

Progress Indicators

Profile completion72%
Storage used45%
API quota91%

Checkboxes

Radio Buttons

Toggles

Semantic Colors

Status, feedback, and alert colors — all harmonized with the blue system

Success Your changes have been saved successfully.
Warning Your API quota is at 91%. Consider upgrading your plan.
Error Failed to connect. Please check your credentials and try again.
Info A new version is available. Refresh to get the latest features.

Badges & Status Pills

Active In Progress Completed Pending Failed Draft New Beta

Components

Real product components using the full color system

Pro
$29/month

Everything you need to scale your workflow

  • Unlimited projects
  • Advanced analytics
  • Priority support
  • Custom integrations

Notification Feed

JD
James D. commented on your report 2 min ago
SA
Sara A. approved your pull request 14 min ago
SY
System maintenance scheduled for Sunday 1 hour ago
—
Your export is ready to download 3 hours ago

Metric Cards

12,847 Total Users
+12.4%
$84,290 Monthly Revenue
+8.1%
98.7% Uptime
-0.2%

Typography on Color

Text contrast and readability across all brand surfaces

On White

Heading on White

Body text on white surface. Contrast ratio 15.3:1 — AAA compliant.

Linked text →
On Blue 50

Heading on Subtle

Body text on blue-50 background. Used for highlighted sections.

Linked text →
On Primary Blue

Heading on Brand

White text on brand blue. Contrast ratio 4.8:1 — AA compliant.

Linked text →
On Dark

Heading on Dark

Muted text on dark surface. Used for dark mode panels.

Linked text →