# Wirefox.co.uk Design System

> High-voltage monochrome foundation punctuated by aggressive red flood surfaces and wide-set geometric typography.

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

## TL;DR
Wirefox utilizes a high-contrast "monochrome plus one" strategy, where a pure red (`#ff0000`) acts as both a primary brand signal and a structural background flood. The system relies on the interplay between deep black (`#000000`) and stark white (`#ffffff`) to anchor dense information, while the red creates high-energy section breaks. Typography is dominated by **Poppins** for structural clarity and **Mona Sans** (Wide variants) for high-impact display moments, often utilizing italicized and extra-bold weights to convey movement.

## Signature DNA
1. **The Red Flood** (Large-scale section backgrounds using `#ff0000` with white text overlays to create immediate visual impact on the homepage).
2. **Wide-Set Display Type** (Use of `mona-sansextrabold_wide` at 76px for primary headlines, creating a horizontal, cinematic feel).
3. **Geometric Step-Indicators** (Horizontal line-and-dot progress patterns used to visualize service workflows and agency milestones).

## Family Map
*No sub-brands captured in source topology.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary text on red, button backgrounds | 170 | 1 | `--bs-white` |
| `{color.dark}` | `#212529` | Primary body text, secondary headings | 54 | 1 | `--bs-body-color` |
| `{color.black}` | `#000000` | Emphasis text, deep shadows, border translucent | 2 | 1 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#ff0000` | Primary brand accent, section backgrounds, button text | 5 | 1 | `--primary` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{color.success}` | `#198754` | Valid form states |
| `{color.error}` | `#dc3545` | Invalid form states |
| `{color.warning}` | `#ffc107` | Warning states |
| `{color.info}` | `#0dcaf0` | Informational badges |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Poppins | 300, 400, 500, 600 | General UI, Headings, Body | Poppins (Google Fonts) | OFL |
| mona-sansextrabold_wide | 400, 500 | Hero Display Headlines | Inter Tight (Bold) | Proprietary/Custom |
| mona-sanslight_wide | 400, 500 | Hero Sub-headlines, Emphasis | Inter (Light) | Proprietary/Custom |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 160px | 144px | normal | 400 | Reveal headlines | `span.normal-headline` |
| `{type.display-xl}` | 76px | 80.8px | normal | 500 | Hero H1 | `h1.textMask.h1` |
| `{type.display-lg}` | 58px | 69.12px | normal | 400 | Section intro | `p.main` |
| `{type.display-md}` | 45px | 52px | normal | 500 | Service titles | `h1#ourServicesTitle` |
| `{type.heading-md}` | 32px | 38.4px | normal | 500 | Accordion headers | `h2.accordion-header` |
| `{type.heading-sm}` | 24px | 28.8px | normal | 500 | Subsection titles | `h2.title.mt-5` |
| `{type.body-lg}` | 19px | 24.12px | normal | 600 | Lead paragraphs | `p.ps` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard body | `section#MainSlider` |
| `{type.caption}` | 12px | 22.68px | normal | 500 | Small metadata | `p.pm` |

### Principles
1. **Wide Display Tracking:** Display fonts use wide variants to occupy maximum horizontal space in heroes.
2. **Italicized Emphasis:** Key brand phrases (e.g., "GET RESULTS") use italics to suggest speed and forward momentum.
3. **High Contrast Overlays:** Text on `#ff0000` backgrounds must always be `#ffffff` for maximum legibility.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 21 |
| `{space.sm}` | 16px | 21 |
| `{space.md}` | 48px | 3 |
| `{space.lg}` | 101px | 5 |
| `{space.xl}` | 144px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default surfaces, sharp containers | 172 occurrences |
| `{radius.card}` | 15px | Feature cards | Observed on red service cards |
| `{radius.pill}` | 40px | Secondary buttons, pill containers | Observed on white outline buttons |
| `{radius.full}` | 100px | Circular UI elements, icon backdrops | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.17) 0px 15px 30px 0px` | Floating cards, testimonial blocks | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button (Iconic)
**Role:** Primary site actions (e.g., "Let's Make Something Great")
**Pages observed:** https://wirefox.co.uk
**Spec:** Background: transparent / Text: `#ffffff` / Border: 1px `#ffffff` / Radius: 100px / Typography: Poppins 500
**States observed:** Default | Hover: captured

#### Service Card
**Role:** Highlighting specific agency offerings
**Pages observed:** https://wirefox.co.uk
**Spec:** Background: `#ff0000` / Text: `#ffffff` / Border: 1px `#ffffff` / Radius: 15px / Padding: 24px
**States observed:** Default: captured

### Tier 2: Patterns

#### Step Indicator
**Role:** Visualizing a 1-2-3 process
**Pages observed:** https://wirefox.co.uk
**Spec:** Line: 1px `#ffffff` / Dot: 8px circle `#ffffff` / Typography: Poppins 600 (Numbers)
**States observed:** Default: captured

#### Location Card
**Role:** Displaying regional office contact info
**Pages observed:** https://wirefox.co.uk
**Spec:** Background: transparent / Text: `#ffffff` / Border-top: 1px `#ffffff` / Radius: 0px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Testimonial Block
**Role:** Customer social proof
**Pages observed:** https://wirefox.co.uk
**Spec:** Background: `#ffffff` / Text: `#212529` / Radius: 0px / Shadow: `{shadow.deep}`
**States observed:** Default: captured

#### Newsroom Card
**Role:** Blog and article previews
**Pages observed:** https://wirefox.co.uk
**Spec:** Background: `#ffffff` / Text: `#212529` / Border: 1px `#dee2e6` / Radius: 0px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1320px (Bootstrap container default) |
| Section Padding | 100px - 180px (Vertical) |
| Grid | 12-column system |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Display type scales down (e.g., 160px -> 80px); 1-column stack |
| Desktop | >1200px | Full horizontal display width; multi-column service grids |

## Imagery & decoration
- **Cut-out Photography:** High-fashion or conceptual photography with backgrounds removed, placed against solid red or black.
- **Geometric Accents:** Use of thin 1px lines and circular "dots" to guide the eye through vertical content.
- **Avoids:** Soft gradients, pastel colors, or rounded "bubbly" UI.

## Do's
- Use `#ff0000` for primary section backgrounds to create brand "voltage."
- Pair `mona-sansextrabold_wide` with italicized Poppins for a sense of urgency.
- Maintain a 21:1 contrast ratio by using white text on red or black backgrounds.
- Use sharp 0px corners for structural containers and 100px pills for interactive elements.
- Utilize generous vertical spacing (100px+) between major content blocks.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for primary buttons. **Right:** Use `#ffffff` or `#ff0000`. **Reason:** Blue is a default framework color and violates the Wirefox monochrome+red identity.
- Don't use rounded corners on main section containers; keep the "Red Flood" edge-to-edge and sharp.
- Don't mix saturated colors; the only allowed non-achromatic color is `#ff0000`.
- Don't use standard-width Poppins for hero headlines; always opt for the Wide variants of Mona Sans.

## Similar brands
- Red Bull (High-energy red/white/black palette)
- Adobe (Clean monochrome with aggressive red accent)
- Supreme (Heavy use of red flood and bold white typography)

## Quick start

```css
/* CSS Variables */
:root {
  --primary: #ff0000;
  --white: #ffffff;
  --dark: #212529;
  --black: #000000;
  --font-main: 'Poppins', sans-serif;
  --font-display: 'mona-sansextrabold_wide', sans-serif;
  --shadow-deep: rgba(0, 0, 0, 0.17) 0px 15px 30px 0px;
}
```

## Agent prompt examples
- "Create a hero section with a `#ff0000` background, featuring a headline in `mona-sansextrabold_wide` at 76px in `#ffffff`."
- "Generate a service card with a 15px border radius, a `#ff0000` background, and white Poppins text."
- "Design a contact section using a 1px white top border and white Poppins typography on a red background."

## Known gaps
- Hover states for the main navigation menu were not explicitly detailed in the computed evidence.
- Mobile-specific font size transitions for the 160px display type were inferred from standard responsive behavior but not captured as discrete tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://wirefox.co.uk | 1440x900 | 2026-06-06 |