# Kizeo Design System

> Deep navy foundations anchored by Lexend Deca typography and vibrant geometric accents.

**Source:** https://kizeo.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** Kizeo Forms, Kommunity by Kizeo

## TL;DR
Kizeo utilizes a "Deep Navy" (#001438) as its primary structural anchor, appearing in headers, footers, and primary headings to establish professional authority. This is contrasted against a clean white (#ffffff) canvas and a secondary slate text color (#425466). The system is characterized by the heavy use of **Lexend Deca**, a geometric sans-serif that maintains high legibility across display and body scales. Visual interest is injected via a specific "Teal-to-Cyan" decorative palette (#3dbed6, #1dc2d9) and a "Success Green" (#55c96b) used for iconography and borders. Geometry is predominantly sharp (0px radius), with high-radius "panels" (50px) reserved for specific UI containers like the cookie consent or newsletter blocks.

## Signature DNA
1. **Navy Structural Anchoring** (The use of #001438 for both global navigation backgrounds and primary H1/H2 typography creates a unified frame around content across all pages.)
2. **Geometric Clarity** (Lexend Deca paired with 0px border-radii on most surfaces creates a precise, "digital-first" aesthetic.)
3. **Accent Underlining** (Short, thick horizontal rules in #55c96b or #3dbed6 placed under section headings to signal content starts.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Kizeo Forms | #3dbed6 | Geometric lines | Typography, Navy Footer | Primary Accent |
| Kommunity by Kizeo | Not captured | Not captured | Typography, Navy Footer | Not captured |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#001438` | Header/Footer BG, H1-H6 Text, Primary Links | 110 | 1 | `--primary_color` |
| `{color.text.body}` | `#425466` | Default running text, secondary headings | 109 | 1 | `--body_typography-color` |
| `{color.canvas}` | `#ffffff` | Primary page background | 37 | 1 | `--content_bg_color` |
| `{color.surface.alt}` | `#f5f5f5` | Alternating sections, testimonial backgrounds | 5 | 1 | `--bg_color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.green}` | `#55c96b` | Section underlines, list icons, borders | 13 | 1 | `--awb-custom_color_1` |
| `{color.accent.teal}` | `#3dbed6` | Button gradients, progress bars, decorative icons | 2 | 1 | `--button_gradient_top_color` |
| `{color.accent.cyan}` | `#1dc2d9` | Secondary text highlights | 6 | 0.6 | Computed Style |
| `{color.decorative.red}` | `#d33738` | Decorative only (footer dividers) | 2 | 1 | `--footer_divider_color` |
| `{color.decorative.orange}`| `#ef660a` | Decorative only | 2 | 1 | `--awb-custom_color_2` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Lexend Deca | 400, 600, 700 | All UI, Headings, and Body | Lexend (Google Fonts) | OFL |
| awb-icons | 400 | UI Iconography | FontAwesome | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.error}` | 170px | 170px | 0.24px | 700 | 404 Page Error | `div.error-message` |
| `{type.display.hero}` | 56px | 78.4px | -0.84px | 700 | Main Hero H1 | `h1.fusion-title-heading` |
| `{type.h2}` | 38px | 53.2px | -0.57px | 700 | Section Headings | `h2.fusion-title-heading` |
| `{type.h3}` | 31px | 43.4px | -0.465px | 700 | Sub-section Headings | `h3.fusion-responsive-typography` |
| `{type.h3.sm}` | 20px | 28px | -0.3px | 700 | Card Headings | `h3.content-box-heading` |
| `{type.body.lg}` | 16px | 27.52px | 0.24px | 400 | Default Body Text | `section#content` |
| `{type.button}` | 16px | 19.2px | 0.24px | 600 | CTA Labels | `a.fusion-button` |
| `{type.body.sm}` | 14px | 24.08px | 0.24px | 400 | Captions/Counters | `div.counter-box-content` |

### Principles
1. **Tight Display Tracking**: Large headings (56px) use negative letter-spacing (-0.84px) to maintain visual density.
2. **Generous Body Leading**: Standard body text (16px) uses a 1.72x line-height (27.52px) for readability.
3. **Geometric Weight**: Bold weights (700) are strictly reserved for structural headings and numerical data.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 6px | 17 |
| `{space.sm}` | 11px | 17 |
| `{space.md}` | 20px | 40 |
| `{space.lg}` | 30px | 24 |
| `{space.xl}` | 60px | 7 |
| `{space.section}` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Buttons, Sections, Cards | `radius: 0px` |
| `{radius.md}` | 10px | Pricing Cards, Testimonials | `radius: 10px` |
| `{radius.panel}` | 50px | Newsletter blocks, Modals | `radius: 50px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Standard Cards | `shadow: none` |
| Raised | `rgba(59, 59, 59, 0.1) 0px 4px 6px 0px` | Hovered Cards | pricing page cards |

## Components

### Tier 1: Foundational

#### Global Header
**Role:** Primary site navigation
**Pages observed:** All
**Spec:** Background: `#001438` | Text: `#ffffff` | Height: 100px | Typography: `{type.body.lg}`
**States observed:** Default | Hover: `#f2f3f5` background on sub-menus

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://kizeo.com
**Spec:** Background: `#3dbed6` | Text: `#ffffff` | Radius: `0px` | Typography: `{type.button}`
**States observed:** Default | Hover: `#293058` | Active: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits
**Pages observed:** https://kizeo.com
**Spec:** Background: `transparent` | Border: `1px solid #f0f1f6` | Radius: `10px` | Shadow: `0px 4px 6px rgba(59,59,59,0.1)`
**States observed:** Default | Hover: Captured

#### Section Underline
**Role:** Visual emphasis for headings
**Pages observed:** All
**Spec:** Background: `#55c96b` | Height: 5px | Width: 60px | Margin-top: 20px
**States observed:** Static

### Tier 3: Surface-specific

#### Text Input
**Role:** Form entry
**Pages observed:** https://kizeo.com/pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #f2f3f5` | Radius: `6px` | Padding: `0px 15px`
**States observed:** Default | Focus: Border `#001438`

#### Newsletter Block
**Role:** Footer conversion
**Pages observed:** All
**Spec:** Background: `#001438` | Radius: `50px` (top-right decorative) | Text: `#ffffff`
**States observed:** Static

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 120px (vertical) |
| Column Gap | 30px |

## Do's
- Use `#001438` for all primary structural backgrounds (Header/Footer).
- Apply Lexend Deca 700 for all headings H1-H3.
- Use negative letter-spacing on display text above 40px.
- Use `#55c96b` for decorative underlines and success indicators.
- Maintain 0px border-radius on primary CTA buttons.

## Don'ts
- **Wrong:** Using `#3dbed6` (Teal) as a page background. **Right:** Use `#ffffff` or `#f5f5f5`. **Reason:** Teal is a decorative accent/CTA color only.
- **Wrong:** Labeling `#3dbed6` as the Kizeo Parent primary color. **Right:** The primary is `#001438`. **Reason:** Navy is the dominant structural brand signal.
- Do not use rounded corners on primary navigation elements.
- Do not use weights lighter than 400 for Lexend Deca body text.

## Quick start

### CSS Variables
```css
:root {
  --kizeo-navy: #001438;
  --kizeo-slate: #425466;
  --kizeo-green: #55c96b;
  --kizeo-teal: #3dbed6;
  --kizeo-white: #ffffff;
  --font-main: 'Lexend Deca', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #001438;
  --color-secondary: #425466;
  --color-accent: #55c96b;
  --font-sans: 'Lexend Deca';
  --radius-panel: 50px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#001438` background, Lexend Deca 700 white text, and a `#3dbed6` primary button with 0px radius."
- "Create a feature grid using white cards with a 10px border-radius and a subtle `rgba(59, 59, 59, 0.1)` shadow."
- "Design a section heading with a 5px thick `#55c96b` underline and 120px vertical padding."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the CSS variable trace.
- Mobile-specific typography scaling for H1 was inferred but not explicitly declared in tokens.

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