# Kyloepartners Design System

> Geometric precision meets professional clarity, anchored by Europa headlines and a high-contrast berry accent.

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

## TL;DR
Kyloepartners utilizes a structured, achromatic foundation of white (#ffffff) and slate gray (#b9c5c8) punctuated by a vibrant berry accent (#ce0058). The typography system is built on Europa, using a light weight (300) for body and a semi-bold weight (600) for authoritative display headers. UI elements favor soft geometric shapes, specifically 7px and 10px radii for buttons and cards, while larger decorative elements utilize circular (50%) or pill-shaped geometry. The layout is clean and spacious, relying on a custom spacing unit of 5px increments to maintain a rhythmic, professional grid.

## Signature DNA
1. **Europa Typographic Hierarchy** (Semi-bold 600 weight for display headers at 52px paired with light 300 weight for body copy at 16px-20px creates a distinct professional contrast.)
2. **Berry Accent Punctuation** (The use of #ce0058 is strictly reserved for high-priority CTAs, contact actions, and semantic highlights against the neutral canvas.)
3. **Softened Rectilinear Geometry** (A consistent 7px to 10px border radius on interactive components prevents the "industrial" feel of sharp corners while maintaining corporate structure.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background and primary surface | 211 | 1.0 | brand_page |
| `{color.slate}` | `#b9c5c8` | Secondary surface backgrounds | 72 | 0.8 | computed_style |
| `{color.ink}` | `#333f48` | Primary text color | 334 | 0.8 | computed_style |
| `{color.border}` | `#d9e0e2` | Default hairline dividers and card borders | 52 | 0.8 | computed_style |
| `{color.neutral-soft}`| `#f6f6f6` | Subtle section alternating background | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.berry}` | `#ce0058` | Primary CTA, "Contact" button, and brand highlights | 170 | 1.0 | brand_page |
| `{color.purple}` | `#2e1a47` | Secondary text emphasis and dark headers | 80 | 0.8 | computed_style |
| `{color.link}` | `#337ab7` | Standard inline text links | 100 | 0.8 | computed_style |
| `{color.teal}` | `#00af9b` | Decorative surface accents (low frequency) | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Europa | 300, 400, 600 | Display and primary UI | Montserrat | Adobe Fonts |
| Helvetica | 300, 700 | Standard body fallback | Inter | System |
| Verdana | 300 | Legacy body fallback | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 52px | 52px | normal | 600 | Hero H1 | `h1.purpleText` |
| `{type.h2}` | 34px | 40.8px | normal | 600 | Section Header | `h2` |
| `{type.h3}` | 32px | 41.6px | normal | 400 | Sub-section Header | `h3.purpleText` |
| `{type.h4}` | 28px | 36.4px | normal | 300 | Testimonial Titles | `div.testimonialTitles` |
| `{type.h5}` | 24px | 28px | normal | 600 | Feature Titles | `strong` |
| `{type.body-lg}` | 20px | 28px | normal | 300 | Lead paragraphs | `p.cvGsUA` |
| `{type.body}` | 16px | 22.4px | normal | 300 | Default copy | `div.buttons` |
| `{type.caption}` | 12px | 12.2px | normal | 300 | Navigation small text | `span.navSmall` |

### Principles
1. **Display Boldness:** Display headers (H1, H2) must use Europa 600 to establish authority.
2. **Body Lightness:** Running text and lead paragraphs use Europa 300 to maintain a modern, airy feel.
3. **Purple Emphasis:** Darker headers often transition from black to `{color.purple}` (#2e1a47) for brand alignment.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 84 |
| `{space.sm}` | 10px | 138 |
| `{space.md}` | 20px | 119 |
| `{space.lg}` | 40px | 17 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, sharp containers | 536 occurrences |
| `{radius.sm}` | 7px | Primary and secondary buttons | 56 occurrences |
| `{radius.md}` | 10px | Feature cards and surface panels | 51 occurrences |
| `{radius.full}` | 50% | Circular decorative icons | 100 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.3) 5px 5px 10px 0px` | Floating decorative cards | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://kyloepartners.com
**Spec:** Background: transparent (secondary) or `#d30059` (primary) / Text: `#ce0058` or `#ffffff` / Border: 1px `#ce0058` / Radius: 7px / Padding: 7px 20px 8px / Typography: `{type.body}` (16px)
**States observed:** Default | Active: captured

#### Surface
**Role:** Content containers and section wrappers
**Pages observed:** https://kyloepartners.com
**Spec:** Background: `#ffffff` / Text: `#313e48` / Border: 0px / Radius: 0px / Padding: 10px 15px 9px
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific services or testimonials
**Pages observed:** https://kyloepartners.com
**Spec:** Background: `#ffffff` / Text: `#337ab7` / Border: 2px `#d9e0e2` / Radius: 10px / Padding: 40px / Typography: `{type.body-lg}` (20px)
**States observed:** Default: captured

#### Decorative Icon Card
**Role:** Visual brand markers and category icons
**Pages observed:** https://kyloepartners.com
**Spec:** Background: `#b9c5c8` or `#ce0058` / Radius: 50% / Shadow: none / Size: variable (driven by 20px font-size icons)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### US Site Switcher (Modal/Banner)
**Role:** Regional redirection
**Pages observed:** https://kyloepartners.com
**Spec:** Background: `#000000` (overlay) or `#e9e9e9` (surface) / Radius: 0px / Text: `#ffffff`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 40px (`{space.lg}`) |
| Element Gap | 20px (`{space.md}`) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px |
| Desktop | 1440px | Horizontal navigation visible; 40px section padding |

## Imagery & decoration
Kyloepartners uses geometric "dot" patterns and overlapping circles in brand colors (`#ce0058`, `#623d8f`, `#00af9b`). Imagery is professional, often featuring clean, high-contrast photography or logo-centric graphics (e.g., Copello logo in a circular frame).

## Do's
- Use Europa 600 for all primary headings to maintain brand authority.
- Apply a 7px border radius to all interactive buttons.
- Reserve `#ce0058` (Berry) for primary conversion actions only.
- Use `{space.sm}` (10px) and `{space.md}` (20px) for consistent internal component padding.
- Ensure text contrast against the slate background (`#b9c5c8`) is checked for legibility.

## Don'ts
- **Wrong:** Using `#ce0058` as a primary page background. **Right:** Use `#ffffff`. **Reason:** Berry is an accent color, not a foundational surface.
- **Wrong:** Mislabeling sub-brand colors (like Teal `#00af9b`) as the parent primary. **Right:** Use Slate `#b9c5c8` as the parent primary.
- **Wrong:** Using sharp 0px corners for buttons. **Right:** Use 7px radius.
- Do not use Europa 300 for display headers; it lacks the necessary visual weight.
- Avoid using pure black (#000000) for body text; use Ink `#333f48`.

## Similar brands
- Bullhorn (Platform partner)
- Salesforce (Corporate professional)
- HubSpot (SaaS geometric)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-berry: #ce0058;
  --color-slate: #b9c5c8;
  --color-ink: #333f48;
  --color-canvas: #ffffff;
  --font-display: 'europa', sans-serif;
  --radius-button: 7px;
  --radius-card: 10px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-berry: #ce0058;
  --color-slate: #b9c5c8;
  --color-ink: #333f48;
  --font-europa: "europa";
  --radius-control: 7px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Kyloepartners Berry (#ce0058) background, white text, and a 7px border radius."
- "Create a feature card with a 2px border in #d9e0e2, 10px corner radius, and Europa 600 headers."
- "Design a section header using Europa 600 at 34px with a bottom margin of 20px."

## Known gaps
- Hover and Focus states for buttons were not explicitly detailed in the CSS evidence.
- Precise grid column counts (e.g., 12-column vs 10-column) were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://kyloepartners.com | Desktop 1440px | 2026-06-06 |
| Homepage (Mobile) | https://kyloepartners.com | Mobile 390px | 2026-06-06 |