Color System¶

The Carbon Connect color system is built around emerald green as the primary brand color, reflecting sustainability and growth. It is extended with purpose-specific palettes for carbon scopes, semantic states, and a full neutral scale.

Primary Palette: Emerald¶

The emerald palette is the foundation of the Carbon Connect brand. Use the primary shade (#059669) as the dominant accent color. Lighter shades work for backgrounds and hover states; darker shades for text and active states.

Emerald 50
#ecfdf5
Backgrounds, highlights

Emerald 100
#d1fae5
Light backgrounds

Emerald 200
#a7f3d0
Borders, dividers

Emerald 300
#6ee7b7
Icons, illustrations

Emerald 400
#34d399
Secondary buttons

Emerald 500
#10b981
Primary hover

Emerald 600
#059669
PRIMARY

Emerald 700
#047857
Primary active/pressed

Emerald 800
#065f46
Dark accents

Emerald 900
#064e3b
Text on light backgrounds

Emerald 950
#022c22
Headings, highest contrast

Carbon Scope Colors¶

Each GHG Protocol emission scope has a dedicated color to ensure clear visual differentiation in charts, dashboards, and profiles.

Scope 1
Direct Emissions
#f59e0b
Amber 500

Scope 2
Energy Emissions
#0ea5e9
Sky 500

Scope 3
Value Chain Emissions
#8b5cf6
Violet 500

Scope Color Full Palettes¶

Use lighter tints for backgrounds and darker shades for text within scope-specific contexts.

Scope 1 -- Amber

Shade	Hex	Use
Amber 50	`#fffbeb`	Background
Amber 100	`#fef3c7`	Light fill
Amber 200	`#fde68a`	Border
Amber 500	`#f59e0b`	Primary
Amber 700	`#b45309`	Text
Amber 900	`#78350f`	Heading

Scope 2 -- Sky

Shade	Hex	Use
Sky 50	`#f0f9ff`	Background
Sky 100	`#e0f2fe`	Light fill
Sky 200	`#bae6fd`	Border
Sky 500	`#0ea5e9`	Primary
Sky 700	`#0369a1`	Text
Sky 900	`#0c4a6e`	Heading

Scope 3 -- Violet

Shade	Hex	Use
Violet 50	`#f5f3ff`	Background
Violet 100	`#ede9fe`	Light fill
Violet 200	`#ddd6fe`	Border
Violet 500	`#8b5cf6`	Primary
Violet 700	`#6d28d9`	Text
Violet 900	`#4c1d95`	Heading

Semantic Colors¶

Semantic colors communicate meaning and state. These are used consistently for status indicators, alerts, and feedback.

Success
#059669 (Emerald 600)
Confirmations, completed states, positive results

Error / Danger
#dc2626 (Red 600)
Errors, destructive actions, critical alerts

Warning
#d97706 (Amber 600)
Caution states, approaching deadlines, attention needed

Info
#0284c7 (Sky 600)
Informational messages, tips, neutral highlights

Semantic Color Extended¶

Each semantic color has background, border, text, and icon variants:

State	Background	Border	Text	Icon
Success	`#ecfdf5`	`#a7f3d0`	`#065f46`	`#059669`
Error	`#fef2f2`	`#fecaca`	`#991b1b`	`#dc2626`
Warning	`#fffbeb`	`#fde68a`	`#92400e`	`#d97706`
Info	`#f0f9ff`	`#bae6fd`	`#075985`	`#0284c7`

Neutral Palette¶

The neutral palette provides structure, typography colors, and background hierarchy.

50
#fafafa

100
#f5f5f5

200
#e5e5e5

300
#d4d4d4

400
#a3a3a3

500
#737373

600
#525252

700
#404040

800
#262626

900
#171717

950
#0a0a0a

Neutral Usage¶

Use	Color
Page background	Neutral 50 (`#fafafa`) or White (`#ffffff`)
Card background	White (`#ffffff`)
Subtle background	Neutral 100 (`#f5f5f5`)
Borders and dividers	Neutral 200 (`#e5e5e5`)
Placeholder text	Neutral 400 (`#a3a3a3`)
Secondary text	Neutral 500 (`#737373`)
Body text	Neutral 700 (`#404040`)
Headings	Neutral 900 (`#171717`)

Dark Mode Colors¶

Dark mode inverts the background hierarchy while maintaining readability and brand identity.

Element	Light Mode	Dark Mode
Page background	`#ffffff`	`#0a0a0a`
Card background	`#ffffff`	`#171717`
Subtle background	`#f5f5f5`	`#262626`
Border	`#e5e5e5`	`#404040`
Body text	`#404040`	`#d4d4d4`
Heading text	`#171717`	`#fafafa`
Primary accent	`#059669`	`#34d399` (lightened for contrast)
Primary hover	`#047857`	`#10b981`

Dark Mode Scope Colors¶

Carbon scope colors are lightened slightly in dark mode for better contrast:

Scope	Light Mode	Dark Mode
Scope 1 (Amber)	`#f59e0b`	`#fbbf24`
Scope 2 (Sky)	`#0ea5e9`	`#38bdf8`
Scope 3 (Violet)	`#8b5cf6`	`#a78bfa`

Accessibility¶

Contrast Requirements¶

All text and interactive elements must meet WCAG 2.1 AA contrast requirements:

Element	Minimum Contrast Ratio
Normal text (below 18px)	4.5:1
Large text (18px+ or 14px+ bold)	3:1
UI components and graphical objects	3:1

Verified Combinations¶

Foreground	Background	Ratio	Pass
Emerald 600 (`#059669`)	White (`#ffffff`)	4.6:1	AA (normal text)
Emerald 700 (`#047857`)	White (`#ffffff`)	5.9:1	AA (all text)
Emerald 900 (`#064e3b`)	White (`#ffffff`)	10.4:1	AAA
Neutral 700 (`#404040`)	White (`#ffffff`)	7.6:1	AAA
Neutral 900 (`#171717`)	White (`#ffffff`)	16.0:1	AAA
White (`#ffffff`)	Emerald 600 (`#059669`)	4.6:1	AA (normal text)

Color Alone Is Not Enough

Never use color as the sole means of conveying information. Always pair color with text labels, icons, or patterns. For example, use both red color and a warning icon for error states.