# Keends Design System

> Deep navy intelligence anchored by high-contrast mint actions and soft sky-blue surfaces.

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

## TL;DR
Keends utilizes a high-contrast "monochrome-plus" system where a deep navy foundation (#002b66) meets a vibrant mint primary action color (#33cc80). The interface is characterized by generous whitespace and a tiered blue-scale background system, ranging from pure white (#ffffff) to a very pale "Ice" blue (#f0f7fe) and a mid-tone "Sky" blue (#ddedfc). Typography is dominated by **Plus Jakarta Sans**, utilizing weights from 400 to 800 to create a clear information hierarchy without shifting font families. Geometry is consistently soft, with a 16px radius for cards and 8px for standard controls, occasionally extending to full pill shapes (999px) for secondary badges or specific UI indicators.

## Signature DNA
1. **The Mint Pivot** (The use of #33cc80 as the exclusive high-voltage action color against a conservative #002b66 navy foundation, seen on all primary CTAs across keends.com and keends.com/pricing).
2. **Blue-Scale Layering** (The systematic use of #f0f7fe and #ddedfc for section backgrounds to separate content blocks without using harsh dividers, observed on the homepage and about pages).
3. **Jakarta Display** (Plus Jakarta Sans at 500-600 weight for large display type, often reaching 80px or 54px, providing a modern, tech-forward authority).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.navy}` | `#002b66` | Primary brand color, footer background, headings | 187 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Primary canvas, card backgrounds | 201 | 1.0 | css_variable |
| `{color.charcoal}` | `#333333` | Primary body text, borders | 277 | 0.8 | computed_style |
| `{color.ice}` | `#f0f7fe` | Subtle section backgrounds, card borders | 34 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.mint}` | `#33cc80` | Primary CTA background, success states | 31 | 0.8 | computed_style |
| `{color.sky}` | `#ddedfc` | Secondary section backgrounds, decorative cards | 32 | 0.8 | computed_style |
| `{color.electric-blue}` | `#367ee2` | Text links, accent icons, secondary surfaces | 56 | 0.8 | computed_style |
| `{color.deep-ink}` | `#00131c` | High-contrast button text, secondary text | 44 | 0.8 | computed_style |
| `{color.soft-blue}` | `#c2e1fb` | Decorative backgrounds (decorative_only) | 16 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Plus Jakarta Sans | 400, 500, 600, 700, 800 | Display, Heading, Body, UI | Plus Jakarta Sans (Google Fonts) | OFL |
| Montserrat | 700 | Specific CTA buttons | Montserrat | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-mega}` | 80px | 80px | normal | 500 | Hero display | `p` |
| `{type.display-lg}` | 54px | 64.8px | normal | 600 | Section headers | `h2.elementor-heading-title` |
| `{type.display-md}` | 48px | 57.6px | normal | 600 | Page titles | `h1.elementor-heading-title` |
| `{type.heading-lg}` | 38px | 45.6px | normal | 600 | Feature headings | `h2.elementor-heading-title` |
| `{type.heading-md}` | 24px | 28.8px | normal | 600 | Card titles | `h3.elementor-heading-title` |
| `{type.body-lg}` | 18px | 30.24px | normal | 400 | Primary body text | `header.elementor` |
| `{type.body-md}` | 16px | 20px | normal | 400 | Navigation links | `a.elementor-item` |
| `{type.body-sm}` | 14px | 23.52px | normal | 400 | Footer/Small text | `p` |

### Principles
1. **Weight-Driven Hierarchy:** Uses Plus Jakarta Sans weight shifts (400 to 800) rather than font-family shifts to distinguish roles.
2. **Generous Leading:** Body text at 18px maintains a 1.68x line-height (30.24px) for high readability.
3. **Tight Display:** Large display sizes (48px+) use a tighter 1.2x line-height.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 12px | 32 |
| `{space.md}` | 16px | 85 |
| `{space.lg}` | 24px | 21 |
| `{space.xl}` | 32px | 22 |
| `{space.section}` | 96px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers | 559 occurrences |
| `{radius.sm}` | 8px | Buttons, form inputs | 42 occurrences |
| `{radius.md}` | 16px | Content cards, feature blocks | 99 occurrences |
| `{radius.pill}` | 999px | Badges, specific UI markers | 20 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All cards and surfaces | Observed across all pages |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Get a demo)
**Pages observed:** All
**Spec:** Background `{color.mint}` (#33cc80) / Text `{color.navy}` (#002b66) / Border `{color.mint}` (#33cc80) / Radius `{radius.sm}` (8px) / Padding 10px 28px / Typography `{type.body-md}` (16px, 600)
**States observed:** Default | Hover: captured

#### Secondary Button
**Role:** Ghost/Outline actions (Start a free trial)
**Pages observed:** All
**Spec:** Background transparent / Text `{color.navy}` (#002b66) / Border `{color.navy}` (#002b66) 2px / Radius `{radius.sm}` (8px) / Padding 10px 28px / Typography `{type.body-md}` (16px, 600)
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Content Card (White)
**Role:** Feature and resource listings
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.charcoal}` (#333333) / Border `{color.ice}` (#f0f7fe) 1px / Radius `{radius.md}` (16px) / Padding 0px 16px
**States observed:** Default

#### Feature Card (Sky)
**Role:** Highlighted content blocks
**Pages observed:** https://keends.com
**Spec:** Background `{color.sky}` (#ddedfc) / Text `{color.charcoal}` (#333333) / Border none / Radius `{radius.md}` (16px) / Padding 16px 32px
**States observed:** Default

### Tier 3: Surface-specific
#### Navy Footer
**Role:** Global site navigation footer
**Pages observed:** All
**Spec:** Background `{color.navy}` (#002b66) / Text `{color.white}` (#ffffff) / Radius `{radius.none}` / Padding 48px 0px 0px
**States observed:** Default

#### Section Surface (Ice)
**Role:** Alternating section background
**Pages observed:** All
**Spec:** Background `{color.ice}` (#f0f7fe) / Text `{color.charcoal}` (#333333) / Radius `{radius.none}` / Padding 96px 36px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (estimated) |
| Section Vertical Padding | 96px |
| Card Grid Gap | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding-inline reduced to 16px; display type scales down. |

## Do's
- Use `{color.mint}` (#33cc80) exclusively for the primary conversion action.
- Layer `{color.ice}` (#f0f7fe) and `{color.sky}` (#ddedfc) to create visual hierarchy in long-form pages.
- Maintain a 16px radius (`{radius.md}`) for all content-containing cards.
- Use Plus Jakarta Sans weight 600 for all interactive labels and headings.
- Ensure body text uses `{color.charcoal}` (#333333) on white backgrounds for optimal contrast.

## Don'ts
- **Wrong:** Using `{color.electric-blue}` (#367ee2) for primary buttons. **Right:** Use `{color.mint}` (#33cc80). **Reason:** Mint is the designated high-priority action signal; blue is an accent/link color.
- Do not use drop shadows; the system is strictly flat with border-based containment.
- Do not use sharp corners (0px) for interactive elements; buttons must use `{radius.sm}` (8px).
- Avoid using pure black (#000000) for text; use `{color.charcoal}` (#333333) or `{color.navy}` (#002b66).

## Similar brands
- Segment
- Mixpanel
- Fivetran
- Heap

## Quick start
```css
:root {
  --keends-navy: #002b66;
  --keends-mint: #33cc80;
  --keends-white: #ffffff;
  --keends-charcoal: #333333;
  --keends-ice: #f0f7fe;
  --keends-sky: #ddedfc;
  --keends-electric-blue: #367ee2;
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
}
```

## Agent prompt examples
- "Create a feature section with a `{color.ice}` background, a `{type.heading-lg}` title in `{color.navy}`, and a 3-column grid of `{radius.md}` white cards."
- "Design a primary CTA button using `{color.mint}` background and `{color.navy}` text with an 8px border radius."
- "Generate a pricing table where the 'Pro' tier uses a `{color.sky}` background and a `{color.mint}` primary button."

## Known gaps
- Hover and Active states for buttons were not fully tokenized in the source.
- Mobile-specific typography scale for display sizes was not explicitly captured in the evidence.
- Specific shadow tokens were not found; the system appears to rely on flat colors and borders.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://keends.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://keends.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://keends.com/about | Desktop 1440 | 2026-06-06 |