# Kaluza Design System

> A soft-industrial canvas of sage and charcoal, where technical precision meets organic sustainability through generous spacing and rounded geometry.

**Source:** https://kaluza.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kaluza utilizes a "monochrome-plus" palette anchored by a light sage canvas `#e5eae1` and deep charcoal typography `#141312`. The system avoids high-contrast white backgrounds in favor of muted, earthy neutrals like beige `#eee8df` and light blue `#e1ebf8` to delineate sections. Typography is exclusively **Aspekta**, a modern sans-serif that balances technical clarity with approachable rounded terminals. Buttons and cards feature a consistent 8px to 16px corner radius, while primary actions use a distinct sage green `#889e82` or solid black `#141312`.

## Signature DNA
1. **The Sage Canvas** (The primary background is almost never pure white, instead using `#e5eae1` to establish a "green-tech" atmosphere across all main landing pages).
2. **Aspekta Display** (Large-scale headings at 52px with tight -1.56px tracking create a high-density, authoritative editorial feel on the homepage and about page).
3. **Soft-Industrial Geometry** (A mix of 8px controls and 16px cards creates a modern, friendly interface that avoids the clinical sharpness of traditional energy utilities).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--_colours---neutrals--black` | `#141312` | Headings, primary buttons, dark section backgrounds | 115 | 1.0 | Computed Style |
| `--_colour-modes---typography--body-colour` | `#3c3a3a` | Default body text | 121 | 1.0 | Computed Style |
| `--_colours---elements--light-bg` | `#e5eae1` | Primary page canvas, card backgrounds | 16 | 1.0 | Computed Style |
| `--_colours---elements--border` | `#e1e1e1` | Secondary button backgrounds, subtle dividers | 2 | 1.0 | Computed Style |
| `white` | `#ffffff` | High-contrast text on dark backgrounds, secondary surfaces | 45 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--_colours---primary--colour-1` | `#889e82` | Primary brand action color (Buttons) | 2 | 1.0 | Computed Style |
| `--_colours---secondary--colour-4` | `#5a7554` | Decorative surface backgrounds (decorative_only) | 2 | 1.0 | Computed Style |
| `--_colours---neutrals--light-tertiary` | `#e1ebf8` | Decorative section background (decorative_only) | 2 | 1.0 | Computed Style |
| `--_colours---neutrals--beige` | `#eee8df` | Decorative section background (decorative_only) | 1 | 1.0 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Aspekta | 400, 500, 600 | All UI, Headings, Body | Inter | Proprietary |
| Material symbols outlined | 400 | Iconography | Material Icons | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{typography.display}` | 52px | 65px | -1.56px | 500 | Hero Headings | `h2.h2` |
| `{typography.heading}` | 38px | 48px | -1.152px | 400 | Section Headings | `h2.h3` |
| `{typography.heading-sm}` | 24px | 33.6px | -0.72px | 400 | Card Titles | `div.h4` |
| `{typography.body-lg}` | 19px | 26.88px | -0.384px | 400 | Intro Paragraphs | `div.h5` |
| `{typography.body}` | 18px | 26.4px | normal | 400 | Standard Body | `section.is-hero` |
| `{typography.button}` | 16px | 23.76px | normal | 400 | Primary CTAs | `a.btn-primary` |
| `{typography.nav}` | 15px | 18.24px | normal | 600 | Navigation Links | `a.navlink` |
| `{typography.caption}` | 14px | 21.6px | normal | 400 | Footer Links | `div#w-node...` |

### Principles
1. **Tight Display Tracking:** Large headings (38px+) always use negative letter-spacing (approx -3% of font size) to maintain visual density.
2. **Weight Restraint:** The system relies on size rather than heavy weights; most headings are 400 or 500, never exceeding 600.
3. **Icon Alignment:** Material symbols are sized to 18px to match the optical height of the 18px body text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{spacing.xs}` | 8px | 89 |
| `{spacing.base}` | 16px | 85 |
| `{spacing.lg}` | 32px | 22 |
| `{spacing.xl}` | 52px | 21 |
| `{spacing.section}` | 100px | 14 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Footers, Full-width sections | Footer component |
| `{radius.control}` | 8px | Buttons, Small cards, Inputs | Rounded Button spec |
| `{radius.card}` | 16px | Feature cards, Testimonials | Card component |
| `{radius.pill}` | 1440px | Specialized badges | Pill Button (observed once) |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `Flat` | none | Default cards and sections | Card component |
| `Floating` | `rgba(80, 80, 80, 0.08) 0px 2px 12px 6px` | Hover states or elevated cards | Card (2 occurrences) |
| `Inset` | `rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset...` | Primary Sage Buttons | Rounded Button spec |

## Components

### Tier 1: Foundational

#### Primary Button (Charcoal)
**Role:** Main site actions (Get a demo, Join us)
**Pages observed:** https://kaluza.com, https://kaluza.com/about
**Spec:** Background `#141312` / Text `#ffffff` / Border `#141312` / Radius 8px / Padding 8px 16px / Typography 15.84px
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Button (Outline)
**Role:** De-emphasized actions (Contact us, About us)
**Pages observed:** https://kaluza.com, https://kaluza.com/about
**Spec:** Background `transparent` / Text `#141312` / Border `#141312` / Radius 8px / Padding 8px 16px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Sage Primary Button
**Role:** High-visibility brand actions
**Pages observed:** https://kaluza.com, https://kaluza.com/about
**Spec:** Background `#889e82` / Text `#ffffff` / Border `none` / Radius 8px / Shadow `inset rgba(255, 255, 255, 0.2)...`
**States observed:** Default | Hover: Not captured

#### Feature Card
**Role:** Content grouping and testimonials
**Pages observed:** https://kaluza.com, https://kaluza.com/about
**Spec:** Background `#e5eae1` / Text `#3c3a3a` / Border `none` / Radius 16px / Padding 52px 32px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Site Footer
**Role:** Global navigation and legal
**Pages observed:** https://kaluza.com, https://kaluza.com/about
**Spec:** Background `#141312` / Text `#e3ebf2` / Border `none` / Radius 0px / Padding 100px 52px
**States observed:** Default

#### Elevated Card
**Role:** Interactive or highlighted content
**Pages observed:** https://kaluza.com, https://kaluza.com/about
**Spec:** Background `#ffffff` / Text `#141312` / Radius 8px / Shadow `rgba(80, 80, 80, 0.08) 0px 2px 12px 6px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1440px |
| Section Padding (Vertical) | 100px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Hero padding reduces to 52px; Buttons stack vertically. |

## Imagery & decoration
Kaluza uses large-scale organic vector patterns (leaf-like or wave-like motifs) in `#5a7554` over `#e5eae1` backgrounds. Photography is focused on clean energy infrastructure and diverse professional teams, often presented in rounded containers.

## Do's
* Use `#e5eae1` as the default canvas for long-form content.
* Apply negative letter-spacing to any Aspekta text above 24px.
* Use 8px radius for interactive elements (buttons) and 16px for static containers (cards).
* Ensure primary buttons use the `#141312` charcoal or `#889e82` sage green.
* Maintain 100px vertical rhythm between major page sections.

## Don'ts
* **Wrong:** Using pure white `#ffffff` as the primary background for all sections. **Right:** Use `#e5eae1` or `#eee8df`. **Reason:** The brand identity relies on muted, earthy neutrals.
* **Wrong:** Using a sub-brand accent color (like a bright blue) for a primary Kaluza button. **Right:** Use `#889e82`. **Reason:** Kaluza parent is strictly monochrome-sage.
* **Wrong:** Applying sharp 0px corners to content cards. **Right:** Use 16px radius. **Reason:** Rounded geometry is a core brand signal.
* Do not exceed weight 600 for Aspekta headings.
* Do not use standard Material Icons without the "outlined" style.

## Similar brands
* OVO Energy (Shared parentage, similar green-tech focus)
* Octopus Energy (Clean tech, approachable sans-serif typography)
* Rivian (Outdoor/Industrial aesthetic, muted earth tones)

## Quick start

```css
/* CSS Variables */
:root {
  --kaluza-sage: #e5eae1;
  --kaluza-charcoal: #141312;
  --kaluza-primary-green: #889e82;
  --kaluza-text-body: #3c3a3a;
  --font-main: 'Aspekta', sans-serif;
  --radius-control: 8px;
  --radius-card: 16px;
}
```

## Agent prompt examples
* "Generate a hero section with a `#e5eae1` background, a 52px Aspekta heading with -1.56px tracking, and a primary button in `#141312` with 8px corners."
* "Create a 3-column grid of cards using 16px border radius, `#e5eae1` background, and 32px internal padding."
* "Design a footer with `#141312` background and `#e3ebf2` text using 15px Aspekta at weight 400."

## Known gaps
* Hover and Active states for buttons were not explicitly captured in the provided evidence.
* Form input styles (focus states, validation) were not present in the analyzed pages.
* Mobile-specific typography scale for display sizes was not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://kaluza.com | 1440px | 2026-06-06 |
| About Page | https://kaluza.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://kaluza.com | 390px | 2026-06-06 |