# Wirebox.co.uk Design System

> High-contrast deep purple canvas punctuated by vibrant lime and magenta accents, anchored by technical Inter-driven typography.

**Source:** https://wirebox.co.uk | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Wirebox utilizes a "Dark Mode by Default" aesthetic for its primary brand touchpoints, leaning heavily on a deep navy-purple `#161026` foundation. The system voltage is carried by a vibrant primary purple `#6c35fb` and high-visibility functional accents like lime yellow `#d0cf18` and magenta `#cf1993`. Typography is strictly modern, pairing **Inter** for technical precision in headings and UI with **Lato** for high-legibility body prose. Component geometry favors extreme "pill" rounding (`1050px`) for interactive elements, creating a soft, approachable layer over a rigid, technical grid.

## Signature DNA
1. **The Trailing Underscore** (Headings consistently terminate with a literal underscore character, e.g., `our story_`, signaling a terminal-inspired, "always-coding" technical identity. Observed on homepage and about pages.)
2. **Hard-Shadow Offset** (Specific surface elements use a non-blurred, 10.5px offset shadow in light lavender `#d8cdf0` to create tactile, layered depth without using traditional gradients. Observed on feature cards.)
3. **Chromatic Bulleting** (Lists and "formula" steps use a sequence of magenta, lime, and purple solid circles as markers, reinforcing the brand's secondary palette as functional wayfinding. Observed in the "winning formula" section.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas.dark}` | `#161026` | Primary background for heroes and footer; main text color on light surfaces | 288 | High | Computed style |
| `{color.canvas.light}` | `#ffffff` | Page background for content-heavy sections | 56 | High | `--bs-body-bg` |
| `{color.surface.soft}` | `#f8f7fa` | Subtle section backgrounds and alternating bands | 10 | High | `--bs-gray-100` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#6c35fb` | Primary brand color; used for buttons, active states, and decorative icons | 43 | High | `--bs-primary` |
| `{color.accent.magenta}` | `#cf1993` | Secondary accent; used for decorative dots and specific button backgrounds | 14 | High | Computed style |
| `{color.accent.lime}` | `#d0cf18` | High-contrast accent; used for "book a consultation" CTAs and status dots | 6 | Medium | Computed style |
| `{color.shadow.lavender}` | `#d8cdf0` | Hard-offset shadow color for cards | 4 | Medium | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| **Inter** | 300, 400, 500, 600, 700, 900 | Headings, UI, Navigation | Inter (Google Fonts) | SIL Open Font |
| **Lato** | 400, 700 | Body prose, descriptive text | Lato (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 51px | 61.17px | normal | 500 | Main Hero H1 | `h1` |
| `{type.display.lg}` | 42px | 50.4px | normal | 700 | Section Headlines | `h2` |
| `{type.heading.md}` | 37px | 44.1px | normal | 600 | Sub-section titles | `h3` |
| `{type.heading.sm}` | 32px | 37.8px | normal | 600 | Card titles | `h4` |
| `{type.body.lg}` | 21px | 31.5px | normal | 400 | Primary body prose | `p` (Lato) |
| `{type.body.md}` | 19px | 28.5px | normal | 400 | Secondary body | `p.fs-8` |
| `{type.ui.label}` | 20px | 29.9px | normal | 600 | Navigation links | `a.my-3` |
| `{type.caption}` | 14px | 21.0px | normal | 600 | Small labels/links | `a.fs-9` |

### Principles
1. **Headings use Inter exclusively.** Weights range from 500 (Display) to 900 (Emphasis).
2. **Body text uses Lato.** This creates a clear distinction between the "technical" UI/Headings and the "human" readable content.
3. **Underscore Suffix.** All H2 and H3 headlines are followed by a `_` character in the same weight and color.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 12px | 15 |
| `{space.sm}` | 21px | 71 |
| `{space.md}` | 32px | 40 |
| `{space.lg}` | 63px | 16 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Section containers, standard cards | 414 occurrences |
| `{radius.input}` | 5px | Form fields | 8 occurrences |
| `{radius.pill}` | 1050px | Primary CTAs, Pill Buttons | 15 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | Default state | Most surfaces |
| `hard-offset` | `10.5px 10.5px 0px 0px #d8cdf0` | Feature cards on light surfaces | 12 occurrences |
| `soft-float` | `0px 2px 4px 0px rgba(0,0,0,0.1)` | Floating UI elements (chat) | 4 occurrences |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call to action (e.g., "Book a consultation")
**Pages observed:** https://wirebox.co.uk, https://wirebox.co.uk/about
**Spec:** Background: `{color.primary}` (#6c35fb) | Text: `#ffffff` | Radius: `1050px` | Padding: `12px 30px` | Font: Inter 500
**States observed:** Default | Hover: `{color.accent.lime}` (#d0cf18) captured.

#### Secondary Pill Button
**Role:** Alternative actions (e.g., "Learn more")
**Pages observed:** https://wirebox.co.uk
**Spec:** Background: `#f1f0f7` | Text: `{color.primary}` (#6c35fb) | Radius: `1050px` | Padding: `12px 30px`

### Tier 2: Patterns

#### Feature Card (Hard Shadow)
**Role:** Highlighting services or reviews
**Pages observed:** https://wirebox.co.uk
**Spec:** Background: `#ffffff` | Border: `1px #aa8ce7` | Shadow: `10.5px 10.5px 0px 0px #d8cdf0` | Padding: `31.5px`

#### Section Header Group
**Role:** Introducing new content blocks
**Pages observed:** https://wirebox.co.uk, https://wirebox.co.uk/about
**Spec:** Typography: Inter 700 42px | Suffix: `_` | Bottom Margin: `{space.md}` (32px)

### Tier 3: Surface-specific

#### Dark Surface Band
**Role:** Hero and Footer containers
**Pages observed:** https://wirebox.co.uk, https://wirebox.co.uk/about
**Spec:** Background: `#161026` | Text: `#ffffff` | Radius: `0px`

#### Contact Form Input
**Role:** User lead capture
**Pages observed:** https://wirebox.co.uk (footer)
**Spec:** Background: `transparent` | Border-bottom: `1px #ffffff` | Radius: `0px` | Font: Lato 400

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1320px (inferred from standard Bootstrap container) |
| Section Padding (Vertical) | 63px - 96px |
| Grid | 12-column system |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | < 768px | Navigation collapses to hamburger; Pill buttons expand to full width; Font sizes scale down (H1 to ~32px). |

## Do's
- Use the `#161026` deep purple for all footer and hero backgrounds.
- End all primary section headings with a trailing underscore `_`.
- Use `#6c35fb` for primary interactive states.
- Apply the `10.5px` hard shadow to cards on white backgrounds.
- Pair Inter (Headings) with Lato (Body) for all content blocks.

## Don'ts
- **Wrong:** Using `#6c35fb` as a page-wide background. **Right:** Use it for accents and buttons only. **Reason:** Brand legibility requires the deep navy or white canvas for contrast.
- **Wrong:** Using rounded corners on section containers. **Right:** Keep containers at `0px` radius.
- **Wrong:** Adding a blur to the card shadows. **Right:** Use the `0px` blur hard-offset.
- **Wrong:** Forgetting the underscore on an H2. **Right:** Always include the `_`.

## Similar brands
- **Vercel** (Technical, high-contrast, mono-accents)
- **Stripe** (Clean typography, purple-centric palette)
- **Sentry** (Dark-mode default, vibrant functional accents)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --wirebox-primary: #6c35fb;
  --wirebox-bg-dark: #161026;
  --wirebox-bg-light: #ffffff;
  --wirebox-accent-magenta: #cf1993;
  --wirebox-accent-lime: #d0cf18;
  --wirebox-shadow-lavender: #d8cdf0;
  --wirebox-radius-pill: 1050px;
}
```

## Agent prompt examples
- "Generate a service card component with a white background, a 1px border in #aa8ce7, and a hard 10.5px offset shadow in #d8cdf0."
- "Create a section header using Inter 700 at 42px with a trailing underscore in the same style."
- "Design a primary CTA button using a pill shape (1050px radius), #6c35fb background, and white Inter text."

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the trace.
- Mobile-specific typography tokens (exact px values) were inferred from standard responsive scaling rather than direct computed style evidence.
- The specific transition timing for button hover states was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://wirebox.co.uk | 1440px | 2026-06-06 |
| About | https://wirebox.co.uk/about | 1440px | 2026-06-06 |
| Mobile Home | https://wirebox.co.uk | 390px | 2026-06-06 |