# Kalo.de Design System

> Deep teal foundations anchored by high-contrast sky blue actions and mint green accents.

**Source:** https://kalo.de | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kalo.de utilizes a professional, energy-sector palette dominated by a deep teal foundation `#004a5a` and a vibrant sky blue `#4fbeef` for primary interactions. The system relies on the **Rubik** sans-serif family, maintaining a clean, accessible aesthetic with generous vertical spacing (32px units) and a mix of sharp and rounded geometries. Primary CTAs are distinctive 24px rounded pills in sky blue, while content containers use a softer 8px radius. The visual language is punctuated by mint green `#64dca0` used for secondary highlights and iconography, creating a "clean energy" atmosphere.

## Signature DNA
1. **Teal-to-Sky Contrast** (The primary visual driver is the high-contrast pairing of deep teal `#004a5a` backgrounds with sky blue `#4fbeef` interactive elements, visible across the homepage hero and feature blocks.)
2. **Rounded Pill Actions** (Primary buttons and interactive tags utilize a consistent 24px border radius, contrasting against the sharp 0px edges of the primary site sections.)
3. **Rubik Typography** (A strictly sans-serif environment using Rubik for both massive 64px display headers and 16px functional body text, ensuring a modern, approachable utility feel.)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--bs-body-bg` | `#ffffff` | Page background and primary surface | 49 | 1 | `css_variable` |
| `--bs-body-color` | `#004a5a` | Primary text and deep section backgrounds | 86 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--bs-info` | `#4fbeef` | Primary CTA background, links, and active states | 42 | 1 | `css_variable` |
| `--bs-primary` | `#64dca0` | Secondary accents, icons, and menu highlights | 11 | 1 | `css_variable` |
| `--frame-link-hover-color` | `#3f98bf` | Hover state for sky blue elements | 2 | 0.8 | `css_variable` |

### Semantic
| Token | Hex | Role | Source |
|------|-----|------|--------|
| `--bs-yellow` | `#ffc107` | Warning / Attention | `declared_token_colors` |
| `--bs-red` | `#dc3545` | Error / Danger | `declared_token_colors` |
| `--bs-green` | `#198754` | Success | `declared_token_colors` |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Rubik | 400, 700 | All roles (Display, Heading, Body) | Rubik (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-lg}` | 64px | 64px | normal | 400 | Hero headers | `h2.element-header.text-center` |
| `{text.display-md}` | 48px | 48px | normal | 400 | Section headers | `h2.element-header.text-center` |
| `{text.heading}` | 32px | 32px | normal | 400 | Card titles | `a.card-item-wrap-link` |
| `{text.heading-sm}` | 24px | 24px | normal | 400 | Small card titles | `h2.card-title-custom.h5` |
| `{text.body-lg}` | 18px | 24.75px | normal | 400 | Large intro text | `p.text-large` |
| `{text.button}` | 18px | 19.8px | normal | 700 | CTA labels | `a.btn.btn-secondary` |
| `{text.body}` | 16px | 22px | normal | 400 | Default body | `article.card.card-default` |
| `{text.label}` | 16px | 22px | normal | 700 | Emphasized labels | `span.card-label` |

### Principles
1. **Weight over Style**: Rubik is used exclusively; hierarchy is created through size and weight (400 vs 700) rather than font switching.
2. **Tight Line Heights**: Display sizes (48px+) use a 1:1 line height ratio for a compact, architectural feel.
3. **Teal Default**: All body text defaults to `#004a5a` rather than pure black to maintain brand cohesion.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.sm}` | 12px | 13 |
| `{space.md}` | 16px | 3 |
| `{space.lg}` | 24px | 20 |
| `{space.xl}` | 32px | 18 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, sharp surfaces | `role: sharp` |
| `{radius.md}` | 8px | Content cards | `role: control` |
| `{radius.pill}` | 24px | Primary buttons, interactive tags | `role: panel` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | All observed components | `shadow: none` |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call to action
**Pages observed:** https://kalo.de
**Spec:** Background `#4fbeef` / Text `#004a5a` / Border `2px #4fbeef` / Radius `24px` / Padding `12px 32px` / Typography `18px Bold`
**States observed:** Default | Hover: Not captured

#### Ghost Button
**Role:** Secondary actions on white backgrounds
**Pages observed:** https://kalo.de
**Spec:** Background `transparent` / Text `#4fbeef` / Border `0px` / Radius `0px` / Padding `0px` / Typography `18px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Highlighting services on teal backgrounds
**Pages observed:** https://kalo.de
**Spec:** Background `#004a5a` / Text `#ffffff` / Border `2px transparent` / Radius `8px` / Padding `0px` / Typography `16px`
**States observed:** Default | Hover: Not captured

#### Feature Card (Light)
**Role:** Standard content grid items
**Pages observed:** https://kalo.de
**Spec:** Background `#ffffff` / Text `#004a5a` / Border `2px #ffffff` / Radius `8px` / Padding `0px` / Typography `16px`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Teal Surface Section
**Role:** Full-width layout container for high-impact content
**Pages observed:** https://kalo.de
**Spec:** Background `#004a5a` / Text `#ffffff` / Border `0px` / Radius `0px` / Padding `0px`
**States observed:** Default

#### White Surface Section
**Role:** Standard content container
**Pages observed:** https://kalo.de
**Spec:** Background `#ffffff` / Text `#004a5a` / Border `0px` / Radius `0px` / Padding `0px 0px 32px`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | Not captured |
| Section Gap | 32px |
| Card Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Stacked cards, centered typography, simplified navigation |

## Imagery & decoration
Kalo.de uses thin-stroke technical illustrations in teal and mint green. Imagery focuses on smart home hardware (thermostats) and lifestyle photography with cool, natural lighting. Avoids heavy drop shadows or complex gradients.

## Do's
- Use `#004a5a` for all primary text to ensure brand depth.
- Apply `{radius.pill}` (24px) to all primary action buttons.
- Maintain a 32px vertical rhythm between major content blocks.
- Pair Rubik 700 with `#4fbeef` for interactive labels.
- Use mint green `#64dca0` exclusively for iconography and secondary highlights.

## Don'ts
- **Wrong:** Using `#64dca0` (Mint) for primary CTA backgrounds. **Right:** Use `#4fbeef` (Sky Blue). **Reason:** Mint is an accent/status color, not an action driver.
- **Wrong:** Applying shadows to cards. **Right:** Use 2px borders or flat color fills. **Reason:** The system is strictly flat.
- **Wrong:** Mixing serif fonts into the display hierarchy. **Right:** Use Rubik for all levels.
- **Wrong:** Using pure black `#000000` for text. **Right:** Use `--bs-body-color` (`#004a5a`).

## Similar brands
- Viessmann
- tado°
- Bosch Home Comfort
- Comdirect

## Quick start

### CSS Variables
```css
:root {
  --kalo-teal: #004a5a;
  --kalo-sky: #4fbeef;
  --kalo-mint: #64dca0;
  --kalo-white: #ffffff;
  --font-main: 'Rubik', sans-serif;
  --radius-pill: 24px;
  --radius-card: 8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #004a5a;
  --color-action: #4fbeef;
  --color-accent: #64dca0;
  --font-sans: 'Rubik', sans-serif;
  --radius-pill: 24px;
  --radius-card: 8px;
}
```

## Agent prompt examples
- "Create a feature section with a `#004a5a` background, white Rubik text, and a `#4fbeef` pill button with 24px radius."
- "Design a content card with an 8px border radius, white background, and teal `#004a5a` Rubik 400 body text."
- "Generate a navigation bar using Rubik 700 and `#004a5a` text on a white background."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile breakpoint specific pixel values (beyond 390px) were not provided.
- Container max-width was not explicitly defined in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://kalo.de | 1440px | 2026-06-06 |
| Pricing | https://kalo.de/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://kalo.de | 390px | 2026-06-06 |