Brand Guidelines

Our comprehensive design system ensures visual consistency across the Zero to Green Pledge platform. Explore our color palettes, typography, spacing, and component guidelines.

Core Colors

Primary colors used throughout the application for backgrounds, text, and key interface elements.

Background

Main application background color

#ffffff

hsl(0 0% 100%)

var(--background)

Foreground

Primary text and content color

#020817

hsl(222.2 84% 4.9%)

var(--foreground)

Primary

Brand primary color for buttons, links, and highlights

#0f172a

hsl(222.2 47.4% 11.2%)

var(--primary)

Primary Foreground

Text color for primary elements

#f8fafc

hsl(210 40% 98%)

var(--primary-foreground)

Secondary

Secondary background for subtle elements

#f1f5f9

hsl(210 40% 96.1%)

var(--secondary)

Secondary Foreground

Text color for secondary elements

#0f172a

hsl(222.2 47.4% 11.2%)

var(--secondary-foreground)

Muted

Muted background for disabled or secondary content

#f1f5f9

hsl(210 40% 96.1%)

var(--muted)

Muted Foreground

Muted text color for less important content

#64748b

hsl(215.4 16.3% 46.9%)

var(--muted-foreground)

Accent

Accent color for highlights and interactive elements

#f1f5f9

hsl(210 40% 96.1%)

var(--accent)

Accent Foreground

Text color for accent elements

#0f172a

hsl(222.2 47.4% 11.2%)

var(--accent-foreground)

System Colors

Functional colors for states, feedback, and system elements.

Destructive

Color for error states and dangerous actions

#ef4444

hsl(0 84.2% 60.2%)

var(--destructive)

Destructive Foreground

Text color for destructive elements

#f8fafc

hsl(210 40% 98%)

var(--destructive-foreground)

Border

Default border color

#e2e8f0

hsl(214.3 31.8% 91.4%)

var(--border)

Input

Border color for form inputs

#e2e8f0

hsl(214.3 31.8% 91.4%)

var(--input)

Ring

Focus ring color for accessibility

#020817

hsl(222.2 84% 4.9%)

var(--ring)

Card

Background color for card components

#ffffff

hsl(0 0% 100%)

var(--card)

Card Foreground

Text color for card content

#020817

hsl(222.2 84% 4.9%)

var(--card-foreground)

Popover

Background color for popover components

#ffffff

hsl(0 0% 100%)

var(--popover)

Popover Foreground

Text color for popover content

#020817

hsl(222.2 84% 4.9%)

var(--popover-foreground)

Climate Theme (Sidebar)

Specialized green color palette for navigation and climate-focused interfaces.

Sidebar Background

Custom color token

#f6fef9

hsl(142 76% 98%)

var(--sidebar-background)

Sidebar Foreground

Custom color token

#1b3223

hsl(142 30% 15%)

var(--sidebar-foreground)

Sidebar Primary

Custom color token

#157f3c

hsl(142 72% 29%)

var(--sidebar-primary)

Sidebar Primary Foreground

Custom color token

#ffffff

hsl(0 0% 100%)

var(--sidebar-primary-foreground)

Sidebar Accent

Custom color token

#e4fbed

hsl(142 76% 94%)

var(--sidebar-accent)

Sidebar Accent Foreground

Custom color token

#126e34

hsl(142 72% 25%)

var(--sidebar-accent-foreground)

Sidebar Border

Custom color token

#cbecd7

hsl(142 47% 86%)

var(--sidebar-border)

Sidebar Ring

Custom color token

#157f3c

hsl(142 72% 29%)

var(--sidebar-ring)

Metric Colors

Color-coded system for climate data visualization and metrics display.

Metric Emissions Background

Custom color token

#fff0f0

hsl(0 100% 97%)

var(--metric-emissions-background)

Metric Emissions Border

Custom color token

#fac7c7

hsl(0 84% 88%)

var(--metric-emissions-border)

Metric Emissions Text

Custom color token

#750a0a

hsl(0 84% 25%)

var(--metric-emissions-text)

Metric Emissions Icon

Custom color token

#eb1414

hsl(0 84% 50%)

var(--metric-emissions-icon)

Metric Target Background

Custom color token

#f2fdf6

hsl(142 76% 97%)

var(--metric-target-background)

Metric Target Border

Custom color token

#c9f8da

hsl(142 76% 88%)

var(--metric-target-border)

Metric Target Text

Custom color token

#126e34

hsl(142 72% 25%)

var(--metric-target-text)

Metric Target Icon

Custom color token

#1daf52

hsl(142 72% 40%)

var(--metric-target-icon)

Metric Progress Background

Custom color token

#f1f5fe

hsl(221 83% 97%)

var(--metric-progress-background)

Metric Progress Border

Custom color token

#c7d7fa

hsl(221 83% 88%)

var(--metric-progress-border)

Metric Progress Text

Custom color token

#0b2c75

hsl(221 83% 25%)

var(--metric-progress-text)

Metric Progress Icon

Custom color token

#1659e9

hsl(221 83% 50%)

var(--metric-progress-icon)

Metric Achievement Background

Custom color token

#f8f2fd

hsl(271 76% 97%)

var(--metric-achievement-background)

Metric Achievement Border

Custom color token

#e1c9f8

hsl(271 76% 88%)

var(--metric-achievement-border)

Metric Achievement Text

Custom color token

#410f70

hsl(271 76% 25%)

var(--metric-achievement-text)

Metric Achievement Icon

Custom color token

#831fe0

hsl(271 76% 50%)

var(--metric-achievement-icon)