# Carbonsaver Design System

> High-contrast environmental reporting defined by deep maritime blues, typewriter-inspired display type, and a rigid 4px-based grid.

**Source:** https://carbonsaver.org | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Carbonsaver utilizes a high-contrast palette of Maritime Blue (#1668b1) and Forest Green (#00a145) set against a stark white foundation. The system is characterized by an unusual typographic pairing: **Special Elite**, a heavy typewriter face (weight 900) used for large-scale display quotes, and **Open Sans** for all functional UI and body text. Layouts are strictly modular, utilizing cards with 4px radii and significant 16px-24px internal gutters. Primary actions are consistently rendered as small-radius blue buttons with white text, while section transitions rely on solid background floods in Maritime Blue.

## Signature DNA
1. **Typewriter Display** (Special Elite weight 900 used at 56px for hero quotes, creating a "dossier" or "official report" aesthetic on https://carbonsaver.org).
2. **Maritime Floods** (Full-width section backgrounds using #1668b1 to anchor data-heavy sections like "Savings" and "Footer").
3. **Sharp-Soft Geometry** (A mix of 0px sharp edges for section containers and 4px soft radii for interactive cards and buttons).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, card surface | 57 | 1.0 | `--white` |
| `{color.dark}` | `#212529` | Primary body text | 57 | 0.8 | Computed |
| `{color.black}` | `#000000` | Section borders, heavy dividers | 6 | 0.6 | Computed |
| `{color.light}` | `#f8f9fa` | Secondary button text, subtle borders | 4 | 1.0 | `--light` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#1668b1` | Primary button BG, section floods, headings | 19 | 0.8 | Computed |
| `{color.success}` | `#00a145` | Accent text, success indicators | 13 | 0.8 | Computed |
| `{color.primary-dark}` | `#00508b` | Button borders, hover states | 9 | 0.6 | Computed |
| `{color.success-dark}` | `#00813a` | Emphasized success text | 4 | 0.6 | Computed |
| `{color.primary-light}` | `#abcde6` | Decorative surface backgrounds | 3 | 0.6 | decorative_only |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--green` | `#28a745` | Success (Declared) |
| `--red` | `#dc3545` | Error (Declared) |
| `--yellow` | `#ffc107` | Warning (Declared) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Special Elite | 900 | Display/Quotes | N/A (Google Font) | OFL |
| Open Sans | 300, 400, 500, 600, 700, 900 | Body, UI, Headings | N/A (Google Font) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 56px | 67.2px | normal | 900 | Hero Quotes | `p.display-4.color-csgreen-normal` |
| `{type.display-lg}` | 40px | 60px | normal | 300 | Section Titles | `div#0101` |
| `{type.heading-sm}` | 24px | 24px | normal | 700 | Modal Buttons | `button#closeNewsletterBtn` |
| `{type.title-md}` | 20px | 24px | normal | 900 | Card Titles | `h5.card-title` |
| `{type.lead}` | 20px | 30px | normal | 300 | Intro Text | `p.lead` |
| `{type.body-lg}` | 18px | 26.4px | normal | 300 | Standard Body | `div#newsletter` |
| `{type.body-md}` | 16px | 24px | normal | 500 | Nav/Header | `nav.header` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Small Buttons | `a.btn.btn-sm` |
| `{type.caption}` | 13px | 19.2px | normal | 300 | Footer Text | `div#footer` |

### Principles
1. **Display Weight Contrast:** Hero quotes use maximum weight (900) while section headers use minimum weight (300) for a light, airy feel.
2. **Tight Heading Leading:** Small headings (20px-24px) use a 1.0x line-height ratio for compact labeling.
3. **Uppercase Utility:** H6 and subheadings (16px) are strictly uppercase to differentiate from body prose.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 9 |
| `{space.sm}` | 8px | 22 |
| `{space.md}` | 16px | 50 |
| `{space.lg}` | 24px | 17 |
| `{space.xl}` | 48px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, full-width bands | 111 occurrences |
| `{radius.sm}` | 3px | Primary buttons | `Rounded Button` component |
| `{radius.md}` | 4px | Cards, inputs, secondary buttons | `Card` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.15) 0px 8px 16px 0px` | Floating content cards | Observed on 6 cards |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Main call-to-action (e.g., "More...")
**Pages observed:** https://carbonsaver.org
**Spec:** Background: `#1668b1` | Text: `#ffffff` | Border: `1px solid #00508b` | Radius: `3.2px` | Padding: `4px 8px` | Type: `14px Open Sans`
**States observed:** Default | Hover: Captured (darker blue)

#### Rounded Button (Ghost)
**Role:** Secondary actions on dark backgrounds
**Pages observed:** https://carbonsaver.org
**Spec:** Background: `transparent` | Text: `#f8f9fa` | Border: `1px solid #f8f9fa` | Radius: `4px` | Padding: `6px 12px` | Type: `16px Open Sans`

### Tier 2: Patterns
#### Card
**Role:** Service and feature highlights
**Pages observed:** https://carbonsaver.org
**Spec:** Background: `#ffffff` | Text: `#212529` | Border: `1px solid rgba(0, 0, 0, 0.125)` | Radius: `4px` | Shadow: `{shadow.card}` | Padding: `0px` (internal content uses 16px)

#### Surface Section
**Role:** Content grouping
**Pages observed:** https://carbonsaver.org
**Spec:** Background: `#ffffff` | Text: `#212529` | Radius: `0px` | Padding: `16px 15px`

### Tier 3: Surface-specific
#### Newsletter Band
**Role:** Lead capture
**Pages observed:** https://carbonsaver.org
**Spec:** Background: `#1668b1` | Text: `#ffffff` | Type: `18px Open Sans 300`

## Layout
| Property | Value |
|---|---|
| Max-width | 1140px |
| Gutter | 30px (15px per side) |
| Section Gap | 48px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Cards stack vertically; display type scales to 32px |
| Desktop | 1440px | 3-column card grids; full-width maritime floods |

## Imagery & decoration
- **Thematic Overlays:** Uses technical blueprints (solar panels, wind turbines) as low-opacity background images.
- **Iconography:** Simple line-art icons (2px stroke) for "Savings" metrics.
- **Accents:** Small green checkmarks (#00a145) for list items.

## Do's
- Use **Special Elite** only for blockquotes or high-impact hero statements.
- Apply `{shadow.card}` to all white cards sitting on light gray or white backgrounds.
- Ensure all primary buttons have the `#00508b` 1px border.
- Use `#1668b1` for full-width section floods to break up long pages.
- Maintain 15px horizontal padding on all container-level elements.

## Don'ts
- **Wrong:** Using `#007bff` (standard Bootstrap blue) for buttons.
  **Right:** Use `{color.primary}` (#1668b1).
  **Reason:** Brand identity relies on the specific Maritime Blue shade.
- **Wrong:** Rounding section containers.
  **Right:** Keep container radius at 0px.
- **Wrong:** Using Special Elite for body copy.
  **Right:** Use Open Sans weight 300 for body.
- **Wrong:** Applying shadows to buttons.
  **Right:** Buttons remain flat with 1px borders.

## Similar brands
- Carbon Trust
- Energy Saving Trust
- IEA (International Energy Agency)

## Quick start
### CSS Custom Properties
```css
:root {
  --cs-primary: #1668b1;
  --cs-primary-dark: #00508b;
  --cs-success: #00a145;
  --cs-white: #ffffff;
  --cs-dark: #212529;
  --cs-radius-sm: 3px;
  --cs-radius-md: 4px;
  --cs-shadow-card: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
}
```

## Agent prompt examples
- "Create a service card using a white background, a 1px border of rgba(0,0,0,0.125), and a 4px border radius. Title should be 20px Open Sans 900 in #1668b1."
- "Generate a hero section with a large quote in Special Elite 56px weight 900, colored in #00a145."
- "Design a primary button with #1668b1 background, white text, 4px vertical padding, and a 3px border radius."

## Known gaps
- Hover states for navigation links were not explicitly captured in the computed style evidence.
- Form validation states (error/warning) are declared in tokens but not observed in page components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://carbonsaver.org | 1440x900 | 2026-06-06T05:03:12Z |