# Cooleaf Design System

> Clean, corporate utility anchored by a vibrant ITA light blue and high-contrast Poppins typography on a stark white canvas.

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

## TL;DR
Cooleaf utilizes a high-contrast, professional palette dominated by ITA Light Blue (#0086d6) and deep charcoal grays (#414043, #2d2e2e) against a pure white background (#ffffff). The typography system is built exclusively on Poppins, favoring a weight of 400 for both large display headers (40px) and body text (16px), which creates a consistent, approachable geometric feel. Interactive elements are defined by generous 500px "pill" radii and significant internal padding (16px 32px). The visual rhythm is spacious, relying on 8px-grid-aligned spacing (16px, 32px) and a total absence of box shadows, resulting in a flat, modern digital aesthetic.

## Signature DNA
1. **The ITA Pill** (A signature 500px border-radius applied to primary CTAs, creating a soft, friendly interaction point against otherwise sharp layout lines. Seen on all analyzed pages.)
2. **Geometric Display** (Large 40px Poppins headers at a surprising 400 weight with tight -1.6px letter spacing, prioritizing modern geometry over traditional bold emphasis. Evidence: `h2` elements across cooleaf.com.)
3. **Chromatic Restraint** (The interface is strictly monochrome gray until an action is required, at which point ITA Light Blue #0086d6 is used as the sole functional signifier for links and buttons.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| Cooleaf (Parent) | #0086d6 | Geometric Pill | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | #ffffff | Page background, button text | 3 | 0.6 | Computed Style |
| `{color.ink.primary}` | #414043 | Primary body text | 6 | 0.6 | Computed Style |
| `{color.ink.dark}` | #2d2e2e | Heading and footer text | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | #0086d6 | Primary CTA background, links | 9 | 1.0 | `--ita-light-blue` |
| `{color.accent.orange}` | #e57200 | Decorative/Secondary (ITA brand) | 1 | 0.8 | `--ita-orange` |
| `{color.accent.navy}` | #242263 | Decorative/Secondary (ITA brand) | 1 | 0.8 | `--ita-dark-blue` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 400, 600, 700 | Universal (Display, Body, UI) | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 40px | 48px | -1.6px | 400 | Section Headings | `h2` |
| `{type.body.lg}` | 16px | 24px | normal | 400 | Hero/Intro Text | `section.section-hero-home` |
| `{type.body.lg.bold}` | 16px | 24px | normal | 700 | Emphasis | `strong` |
| `{type.button}` | 14px | 24px | normal | 600 | Primary CTA Label | `a.button-primary` |
| `{type.body.md}` | 14px | 24px | normal | 400 | Standard Body | `p` |
| `{type.nav.link}` | 14px | 24px | normal | 400 | Header Navigation | `.nav-link` |
| `{type.footer.label}` | 12px | 18px | normal | 400 | Legal/Footer | `footer` |
| `{type.caption}` | 10px | 14px | 0.5px | 600 | Small labels | Not captured |

### Principles
1. **Weight Parity:** Headers and body text often share the 400 weight, relying on scale (40px vs 16px) rather than thickness for hierarchy.
2. **Tight Display Tracking:** Large headers use negative letter spacing (-1.6px) to maintain visual tension in the geometric letterforms.
3. **Vertical Rhythm:** Line heights are consistently 1.5x the font size (e.g., 16/24, 40/48) for comfortable reading.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 1 |
| `{space.sm}` | 15px | 3 |
| `{space.md}` | 16px | 3 |
| `{space.lg}` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers, images | 15 occurrences |
| `{radius.pill}` | 500px | Buttons, interactive pills | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | Standard state for all cards and buttons | Universal |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Learn More, Get Started)
**Pages observed:** All
**Spec:** Background: `{color.primary}` (#0086d6) / Text: `{color.canvas}` (#ffffff) / Radius: `{radius.pill}` (500px) / Padding: 16px 32px / Typography: `{type.button}` (14px, 600)
**States observed:** Default: Captured | Hover: Not captured | Focus: Not captured

#### Text Link
**Role:** Inline navigation and secondary actions
**Pages observed:** All
**Spec:** Text: `{color.primary}` (#0086d6) / Typography: Inherited body / Decoration: none
**States observed:** Default: Captured

### Tier 2: Patterns

#### Navigation Bar
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `{color.canvas}` (#ffffff) / Height: Not captured / Link Typography: `{type.nav.link}` (14px, 400) / Link Color: `{color.ink.primary}` (#414043)
**States observed:** Default: Captured

#### Section Header Group
**Role:** Introducing new content blocks
**Pages observed:** All
**Spec:** Heading: `{type.display.lg}` (#2d2e2e) / Margin-bottom: `{space.lg}` (32px)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Feature List
**Role:** Listing product benefits
**Pages observed:** Homepage, About
**Spec:** Text: `{color.ink.primary}` (#414043) / Typography: `{type.body.md}` (14px) / Bullet: Dash (-)
**States observed:** Default: Captured

#### Footer
**Role:** Global legal and secondary navigation
**Pages observed:** All
**Spec:** Background: `{color.canvas}` (#ffffff) / Border-top: 1px solid (light gray) / Text: `{color.ink.primary}` (#414043) / Typography: 12px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max content width | ~1200px |
| Section Padding | 60px - 80px (estimated) |
| Grid | 12-column (implied) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Horizontal split layouts (Image left, Text right) |
| Mobile | 390px | Stacked layout; centered text alignment in hero |

## Imagery & decoration
Cooleaf uses high-fidelity product screenshots (MacBook/iPhone mockups) to ground the software. Decorative elements include speech-bubble callouts in orange (#e57200) and green (#00bcb5) to represent "recognitions." The system avoids shadows and gradients, favoring flat color blocks.

## Do's
- Use **Poppins** for all text layers.
- Apply **#0086d6** for all primary action backgrounds.
- Set button border-radius to **500px** for a pill shape.
- Use **400 weight** for large headers to maintain the geometric brand feel.
- Maintain a **pure white (#ffffff)** background for all main content sections.

## Don'ts
- **Wrong:** Using #00bcb5 (Light Sea Green) as the primary CTA background. **Right:** Use #0086d6. **Reason:** #00bcb5 is a secondary accent for specific UI illustrations, not a brand-level action color.
- Do not apply box shadows to buttons or cards; the brand is strictly flat.
- Do not use bold (700) weights for display headers; stay with 400.
- Do not use serif fonts as fallbacks; Poppins is the singular typographic voice.
- Do not use #0086d6 for body text; reserve it for interactive elements.

## Similar brands
- Zendesk (Clean, type-focused, specific blue accent)
- Lattice (HR-tech, geometric sans-serif, high-contrast white space)
- Culture Amp (Professional, clean utility, pill-based CTAs)

## Quick start

### CSS Custom Properties
```css
:root {
  --cooleaf-primary: #0086d6;
  --cooleaf-ink: #414043;
  --cooleaf-ink-dark: #2d2e2e;
  --cooleaf-canvas: #ffffff;
  --cooleaf-font-main: 'Poppins', sans-serif;
  --cooleaf-radius-pill: 500px;
}
```

### Style Dictionary
```json
{
  "color": {
    "brand": { "primary": { "value": "#0086d6" } },
    "base": {
      "white": { "value": "#ffffff" },
      "gray": {
        "dark": { "value": "#2d2e2e" },
        "medium": { "value": "#414043" }
      }
    }
  }
}
```

## Agent prompt examples
- "Create a primary button using Poppins 600 at 14px, with a #0086d6 background and a 500px border radius."
- "Design a hero section with a 40px Poppins 400 header in #2d2e2e and -1.6px letter spacing."
- "Build a feature list using 14px Poppins 400 text in #414043 with 24px line height."

## Known gaps
- Hover and active states for buttons were not captured in the static analysis.
- Specific mobile breakpoint values (e.g., 768px) were not explicitly declared in tokens.
- Success/Error semantic colors were not present on the analyzed marketing pages.

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