# Kwanko Design System

> High-contrast performance marketing interface defined by bold Montserrat headlines, vibrant magenta-pink accents, and ultra-rounded geometric containers.

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

## TL;DR
Kwanko utilizes a high-energy "Performance" aesthetic that pairs a neutral grayscale foundation with a high-saturation primary accent (#e92f61). The system is anchored by Montserrat, used at extreme weights (300 to 900) to create a clear information hierarchy. Visual interest is generated through geometric "pill" shapes—seen in buttons and large-scale section containers—and a recurring background motif of subtle gray triangles and crosshairs. The canvas is predominantly white (#ffffff) or light gray (#f6f6f7), allowing the primary magenta to serve as the singular driver for all conversion and interactive elements.

## Signature DNA
1. **The Performance Magenta** (#e92f61) (The primary brand voltage used for all CTAs, iconography backgrounds, and active states across all pages).
2. **Extreme Montserrat Hierarchy** (Heavy 800-900 weight headings contrasted against light 300 weight body text to signal authority and data-driven professionalism).
3. **Pill-Shaped Geometry** (The use of large radii, specifically 27px for buttons and up to 100px for decorative panels, creating a modern, approachable tech feel).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Page background, button text, card surface | 178 | 1 | `css_variable:--white` |
| `{color.light}` | #f6f6f7 | Secondary section backgrounds, card surfaces | 28 | 1 | `css_variable:--light` |
| `{color.dark}` | #212529 | Primary body text, footer text | 41 | 0.8 | `computed_style` |
| `{color.black}` | #000000 | Surface backgrounds, emphasized text | 57 | 0.8 | `computed_style` |
| `{color.gray}` | #787878 | Muted text, secondary descriptions | 28 | 0.8 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | #e92f61 | Primary CTA background, icon plates, active text | 45 | 0.8 | `computed_style` |
| `{color.link}` | #007bff | Hyperlinks, secondary accents | 78 | 1 | `css_variable:--primary` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | #28a745 | Success states (declared token) |
| `{color.error}` | #dc3545 | Error states (declared token) |
| `{color.warning}` | #ffc107 | Warning states (declared token) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 300, 400, 500, 600, 700, 800, 900 | All roles (Display, Heading, Body, UI) | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 46px | 69px | normal | 700 | Hero titles | `p.title` |
| `{text.h2}` | 36px | 46px | normal | 800 | Section headers | `h2.text-center` |
| `{text.h2-alt}` | 26px | 31.2px | normal | 800 | Sub-section headers | `h2` |
| `{text.h3}` | 22px | 24px | normal | 700 | Card titles | `h3` |
| `{text.body-lg}` | 18px | 27px | normal | 500 | Large buttons, intro text | `button.btn` |
| `{text.body}` | 16px | 24px | normal | 400 | Standard links, body text | `a` |
| `{text.body-sm}` | 14px | 21px | normal | 300 | Footer lists, captions | `li#local_address` |
| `{text.caption}` | 12px | 18px | normal | 300 | Legal text, small labels | `p.p-0` |

### Principles
- **Weight Contrast:** Headlines must be at least 300 units heavier than the accompanying body text.
- **Center Alignment:** Primary marketing sections use centered typography for display and h2 levels.
- **Magenta Emphasis:** Use the primary magenta (#e92f61) for keywords within headlines to draw focus.

## Spacing
**Base unit:** 5px (inferred from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 40 |
| `{space.sm}` | 15px | 24 |
| `{space.md}` | 20px | 46 |
| `{space.lg}` | 40px | 18 |
| `{space.xl}` | 50px | 10 |
| `{space.section}` | 100px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sharp sections, square buttons | 303 occurrences |
| `{radius.sm}` | 13px | Compact rounded buttons | Rounded Button component |
| `{radius.md}` | 27px | Primary pill buttons | Rounded Button component |
| `{radius.lg}` | 60px | Feature cards | Card (observed once) |
| `{radius.full}` | 100px | Decorative panels, large containers | Panel role |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state for most cards/buttons | Component specs |
| `{shadow.soft}` | rgba(0, 0, 0, 0.15) 0px 1px 10px 0px | Elevated surfaces on pricing/about pages | Surface component |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call-to-action (Get Started, Contact Us)
**Pages observed:** All
**Spec:** Background: `{color.primary}` (#e92f61) / Text: `{color.white}` (#ffffff) / Radius: 27px / Padding: 8px 40px / Typography: 17px Montserrat 500
**States observed:** Default | Hover: Not captured | Active: Captured

#### Outline Button
**Role:** Secondary actions on light backgrounds
**Pages observed:** Pricing, About
**Spec:** Background: transparent / Text: `{color.primary}` (#e92f61) / Border: 1px `{color.primary}` (#e92f61) / Radius: 27px / Padding: 8px 40px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Icon Plate
**Role:** Visual representation of services
**Pages observed:** Home, About
**Spec:** Background: `{color.primary}` (#e92f61) / Radius: 100% (pill) / Icon color: `{color.white}` (#ffffff)
**States observed:** Default

#### Service Card
**Role:** Grouping content in the "360 partner" section
**Pages observed:** Home
**Spec:** Background: `{color.white}` (#ffffff) / Text: `{color.dark}` (#212529) / Radius: 0px / Padding: 50px 15px 0px / Shadow: `{shadow.soft}`
**States observed:** Default

### Tier 3: Surface-specific

#### Header Navigation
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background: `{color.white}` (#ffffff) / Text: `{color.gray}` (#787878) / Typography: 16px Montserrat 400
**States observed:** Default | Active: `{color.primary}` (#e92f61)

#### Footer
**Role:** Global site footer
**Pages observed:** All
**Spec:** Background: `{color.black}` (#000000) / Text: `{color.white}` (#ffffff) / Typography: 14px Montserrat 300
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1140px |
| Section Gap | 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Navigation collapses to hamburger; Hero text reduces to 32px; Buttons become full-width. |
| Desktop | 1440px | Standard 12-column grid layout; 100px section padding. |

## Imagery & decoration
- **Geometric Overlays:** Subtle gray triangles and "+" crosshair markers used as background textures.
- **Desaturated Photography:** Circular "Advertiser/Publisher" portraits are rendered in grayscale to maintain focus on the magenta UI elements.
- **Avoidance:** No drop shadows on text; no gradients on primary buttons.

## Do's
- Use Montserrat 800 or 900 for all primary section headings.
- Apply `{color.primary}` (#e92f61) to all conversion-oriented buttons.
- Maintain a 100px vertical gap between major content sections.
- Use pill-shaped containers (Radius: 27px+) for interactive elements.
- Keep body text weight at 300 or 400 for maximum contrast with headers.

## Don'ts
- **Wrong:** Using `{color.link}` (#007bff) for primary action buttons. **Right:** Use Magenta (#e92f61). **Reason:** Blue is an accent/link color, not the primary brand driver.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use `{shadow.soft}` or no shadow. **Reason:** The brand relies on flat geometry and high contrast.
- **Wrong:** Mixing serif fonts into the system. **Right:** Use Montserrat exclusively. **Reason:** The brand identity is strictly geometric sans-serif.

## Similar brands
- HubSpot (High-contrast typography, clear primary accent)
- Adjust (Data-focused, clean sans-serif hierarchy)
- AppsFlyer (Tech-heavy, bold primary color usage)

## Quick start

### CSS Custom Properties
```css
:root {
  --kwanko-primary: #e92f61;
  --kwanko-blue: #007bff;
  --kwanko-white: #ffffff;
  --kwanko-light: #f6f6f7;
  --kwanko-dark: #212529;
  --kwanko-font-main: 'Montserrat', sans-serif;
  --kwanko-radius-pill: 27px;
  --kwanko-shadow-soft: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #e92f61;
  --color-accent-blue: #007bff;
  --font-montserrat: "Montserrat";
  --radius-pill: 27px;
  --shadow-soft: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}
```

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the source evidence.
- Mobile-specific typography scale for h1/display roles was not fully quantified.
- Form input field styles (borders, focus rings) were not present on the analyzed pages.

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