# Kikoff Design System

> High-contrast financial utility anchored by a vibrant electric lime signature against deep obsidian foundations.

**Source:** [https://kikoff.com](https://kikoff.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kikoff employs a high-energy "monochrome+" system where a single chromatic driver, Electric Lime (#b5fc4f), punctuates a strict black-and-white grid. The interface relies on heavy geometric containers with generous 24px to 27px corner radii and high-contrast typography using DM Sans. Surfaces alternate between pure white (#ffffff), light gray (#f7f8f7), and deep black (#131413), creating a clear rhythmic hierarchy for financial products. Buttons are consistently pill-shaped or heavily rounded, often utilizing the primary lime to signal the most critical path to credit building.

## Signature DNA
1. **Electric Lime Punctuation** (#b5fc4f used as the primary action driver for CTAs and highlights against dark backgrounds, seen on all analyzed pages).
2. **Soft-Box Geometry** (Heavy use of 24px-27px border radii on cards and panels to soften the high-contrast financial data, observed on homepage and pricing).
3. **Obsidian Foundations** (Deep #131413 surfaces used for high-impact sections and primary text, providing a 20:1 contrast ratio against white).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#131413` | Primary text, dark section backgrounds, primary buttons | 339 | 1.0 | `--black` |
| `{color.white}` | `#ffffff` | Page canvas, card surfaces, button text | 151 | 1.0 | `--white-border` |
| `{color.grey.light}` | `#f7f8f7` | Secondary section backgrounds, neutral cards | 26 | 1.0 | `--light-grey` |
| `{color.grey.footer}` | `#808187` | Footer text, secondary metadata | 78 | 1.0 | `--footer-grey` |
| `{color.grey.lavender}` | `#eeefee` | Tertiary surfaces, disabled-style backgrounds | 12 | 1.0 | `--lavender` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#b5fc4f` | Primary CTA background, highlights, active borders | 41 | 1.0 | `--green` |
| `{color.accent.navy}` | `#0f0840` | Decorative text, rare borders | 8 | 0.6 | Computed |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| DM Sans | 200, 300, 400, 500, 600, 700 | Heading, Display, UI | DM Sans (Google Fonts) | SIL OFL |
| Raleway | 700 | Body variant (rare) | Raleway (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.xl}` | 100px | 60px | -1px | 700 | Large stats | `div.large-stat-number` |
| `{text.display.lg}` | 64px | 74px | -1.92px | 500 | Main Hero H1 | `h1` |
| `{text.display.md}` | 49px | 64px | -0.735px | 500 | Section Headers | `h2` |
| `{text.heading.md}` | 32px | 40px | -1px | 500 | Feature titles | `div.feature-block-text` |
| `{text.heading.sm}` | 24px | 33.6px | -1px | 600 | Footer/Card titles | `div.footer-title-set` |
| `{text.body.lg}` | 18px | 24px | 0 | 400 | Navigation, UI | `div.navbar-main.w-nav` |
| `{text.body.md}` | 16px | 22.4px | -1px | 300 | Default running text | `div.text-weight-regular` |
| `{text.body.sm}` | 14px | 19.6px | -1px | 400 | Captions, notes | `div.note-style` |
| `{text.caption}` | 12px | 14.4px | 0 | 700 | Tags, badges | `div.step-tag` |

### Principles
1. **Tight Display Leading:** Large display sizes (100px) use significantly reduced line-height (60px) for compact impact.
2. **Negative Tracking on Headings:** All display and heading tokens from 24px up utilize negative letter-spacing (-0.24px to -1.92px).
3. **Weight Contrast:** System pairs Light (300) body text with Medium (500) or Bold (700) headings to maintain hierarchy.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 48 |
| `{space.sm}` | 16px | 35 |
| `{space.md}` | 24px | 23 |
| `{space.lg}` | 40px | 20 |
| `{space.xl}` | 60px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp containers | 572 occurrences |
| `{radius.card}` | 20px | Pricing/Plan cards | Observed on 10 elements |
| `{radius.panel}` | 27px | Feature blocks | Observed on 18 elements |
| `{radius.pill}` | 100px | Primary CTAs | Observed on 34 elements |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.1) 0px 4px 28px 0px` | Floating cards | 10 occurrences |
| `{shadow.heavy}` | `rgba(0, 0, 0, 0.07) 0px 12px 34px 0px` | Hover states | 4 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Build credit fast)
**Pages observed:** All
**Spec:** Background: `{color.primary}` (#b5fc4f) / Text: `{color.black}` (#131413) / Radius: `{radius.pill}` (100px) / Padding: 12px 32px / Typography: `{text.body.lg}` (18px/500)
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Button
**Role:** Alternative actions or dark-mode CTAs
**Pages observed:** All
**Spec:** Background: `{color.black}` (#131413) / Text: `{color.white}` (#ffffff) / Radius: `{radius.pill}` (100px) / Padding: 12px 16px / Typography: `{text.body.md}` (16px/600)
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or steps
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.grey.light}` (#f7f8f7) / Text: `{color.black}` (#131413) / Radius: `{radius.panel}` (27px) / Padding: 20px 24px
**States observed:** Default

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `{color.white}` (#ffffff) / Border: 1px `{color.black}` (#131413) / Radius: `{radius.panel}` (27px) / Padding: 27px 22px
**States observed:** Default

### Tier 3: Surface-specific

#### Step Tag
**Role:** Numbered process indicators
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.primary}` (#b5fc4f) / Text: `{color.black}` (#131413) / Radius: `{radius.panel}` (27px) / Padding: 10.5px 15.5px / Typography: `{text.caption}` (12px/700)
**States observed:** Default

#### Testimonial Card
**Role:** Social proof
**Pages observed:** Homepage
**Spec:** Background: `{color.black}` (#131413) / Text: `{color.white}` (#ffffff) / Radius: `{radius.card}` (20px) / Padding: 45px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 80px - 100px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, reduced display type (approx 40px for H1) |
| Desktop | 1440px | Multi-column grids (3-up for pricing) |

## Imagery & decoration
Kikoff uses clean, high-fidelity product screenshots within mobile frames and stylized 3D icons. Decorative elements include "plus" sparkles and laurel wreaths for social proof. Avoids complex photography in favor of vector-clear graphics.

## Do's
- Use `{color.primary}` (#b5fc4f) for the primary conversion path only.
- Apply `{radius.panel}` (27px) to all major feature containers.
- Pair `{color.black}` (#131413) text with `{color.white}` (#ffffff) backgrounds for maximum legibility.
- Use negative letter-spacing on all headers above 24px.
- Maintain a minimum 80px vertical gap between major landing sections.

## Don'ts
- **Wrong:** Using `#94cf40` (Light Green) as the primary CTA color. **Right:** Use `#b5fc4f`. **Reason:** `#b5fc4f` is the validated primary brand token; other greens are secondary or legacy.
- **Wrong:** Applying sharp 0px corners to interactive cards. **Right:** Use 20px or 27px radii.
- **Wrong:** Using pure `#000000` for body text. **Right:** Use `{color.black}` (#131413).
- **Wrong:** Setting display headers with positive letter-spacing.
- **Wrong:** Using accent colors like `{color.accent.navy}` for primary buttons.

## Similar brands
- Chime
- Current
- Wealthfront
- Monzo

## Quick start

```css
/* CSS Custom Properties */
:root {
  --kikoff-primary: #b5fc4f;
  --kikoff-black: #131413;
  --kikoff-white: #ffffff;
  --kikoff-grey-light: #f7f8f7;
  --kikoff-radius-panel: 27px;
  --kikoff-font-main: 'DM Sans', sans-serif;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #b5fc4f;
  --color-obsidian: #131413;
  --color-canvas: #ffffff;
  --font-display: "DM Sans";
  --radius-xl: 27px;
}
```

## Agent prompt examples
- "Generate a pricing card using Kikoff's design system: white background, 27px border radius, 1px black border, and a pill-shaped button in #b5fc4f."
- "Create a hero section with a #131413 background, DM Sans text in white with -1.92px letter-spacing, and an electric lime primary CTA."
- "Design a feature grid item with #f7f8f7 background, 27px corners, and 16px DM Sans body text at weight 300."

## Known gaps
- Hover and focus states for buttons were not captured in the static evidence.
- Error and success semantic colors (red/green) were not explicitly mapped to tokens in the analyzed pages.
- Mobile-specific spacing tokens were inferred from layout shifts rather than explicit CSS variables.

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