# Webol.co.uk Design System

> High-contrast digital engineering aesthetic defined by deep obsidian canvases, vibrant magenta accents, and soft-radius geometric containers.

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

## TL;DR
Webol.co.uk utilizes a high-voltage "Dark Mode" foundation, where a deep purple-black `#14042c` serves as the primary canvas and action color. This is punctuated by a high-saturation accent palette of magenta `#ff0071` and red-orange gradients. Typography is led by **Red Hat Display**, used at heavy weights (700-800) for display and headings to project technical authority. Layouts rely on a 0px sharp base for sections, while interactive components and cards adopt a soft 10px to 28px radius. The system balances dense, information-rich technical content with generous vertical spacing and high-contrast white-on-dark text.

## Signature DNA
1. **The Obsidian Canvas** (The use of `#14042c` as both a primary background and a high-contrast button fill across all pages).
2. **Heavy Display Geometry** (**Red Hat Display** at weight 800 for primary headlines, often paired with 0px sharp section transitions and 28px pill-shaped buttons).
3. **Chromatic Punctuation** (Vibrant magenta `#ff0071` used sparingly for text accents and icon details to break the monochrome dark-mode rhythm).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#14042c` | Primary canvas, button background, and footer surface. | 53 | High | Computed Style |
| `{color.white}` | `#ffffff` | Primary text on dark, button text, and light section backgrounds. | 114 | High | CSS Variable |
| `{color.black}` | `#000000` | Secondary text and shadow definitions. | 64 | High | CSS Variable |
| `{color.gray.dark}` | `#1f2124` | Alternative text color for high-density UI. | 20 | Medium | Computed Style |
| `{color.gray.mid}` | `#7a7a7a` | Muted text and secondary borders. | 11 | Medium | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.magenta}` | `#ff0071` | Key text highlights and decorative UI elements. | 15 | High | Computed Style |
| `{color.accent.red}` | `#ff0035` | Secondary highlights and error-adjacent states. | 9 | Medium | Computed Style |
| `{color.accent.blue}` | `#0000ee` | Tertiary link color (decorative only). | 4 | Low | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Red Hat Display** | 400, 500, 600, 700, 800 | Display, Headings, Buttons | Red Hat Display (Google Fonts) | OFL |
| **Inter** | 300, 400, 500 | Subheadings, Body text, Counters | Inter (Google Fonts) | OFL |
| **Arial** | 400 | Form inputs, Fallback body | Arial (System) | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 67px | 67px | normal | 700 | Counter numbers | `span.elementor-counter-number` |
| `{type.display.lg}` | 55px | 55px | normal | 800 | Hero H1 | `h1.elementor-heading-title` |
| `{type.display.md}` | 46px | 64px | normal | 800 | Section H2 | `h2.elementor-heading-title` |
| `{type.heading.lg}` | 33px | 43px | normal | 700 | Bold paragraph leads | `p b` |
| `{type.heading.md}` | 30px | 30px | normal | 700 | Card titles | `h3.elementor-image-box-title` |
| `{type.heading.sm}` | 22px | 22px | normal | 700 | Small section heads | `h2.elementor-heading-title` |
| `{type.body.lg}` | 18px | 24px | normal | 400 | Primary body copy | `p` |
| `{type.body.md}` | 16px | normal | normal | 400 | Navigation, labels | `header#masthead` |
| `{type.caption}` | 12px | normal | normal | 500 | Footer fine print | `p.footer-para` |

### Principles
1. **Weight as Hierarchy:** Use weight 800 for primary intent and weight 300 (Inter) for descriptive blocks to create maximum contrast.
2. **Tight Display Leading:** Display sizes (46px+) use 1:1 or near 1:1 line-height to maintain block-like density.
3. **Sans-Serif Exclusivity:** No serifs are present in the UI; technical authority is derived from geometric sans-serifs.

## Spacing
**Base unit:** 4px (Inferred from 12px, 16px, 20px clusters)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 17 |
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 16px | 12 |
| `{space.lg}` | 20px | 8 |
| `{space.xl}` | 25px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, containers | 230 occurrences |
| `{radius.sm}` | 5px | Form inputs | `input#fname` |
| `{radius.md}` | 10px | UI Controls, small cards | Component Surface |
| `{radius.lg}` | 28px | Primary Buttons | Rounded Button component |
| `{radius.full}` | 50px | Avatars, large pills | Component Surface |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px` | Feature cards on light backgrounds | Surface component |
| `{shadow.none}` | `none` | Buttons and dark-mode surfaces | Rounded Button |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action (Schedule, Start Project)
**Pages observed:** https://webol.co.uk, https://webol.co.uk/about
**Spec:** 
- **Background:** `#14042c`
- **Text:** `#ffffff`
- **Border:** 1px solid `#ffffff`
- **Radius:** `28px`
- **Padding:** `16px 29.5px`
- **Typography:** Red Hat Display, 18px, 700
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Contact form fields
**Pages observed:** https://webol.co.uk
**Spec:** 
- **Background:** `#ffffff`
- **Text:** `#000000`
- **Border:** 2px solid `#767676`
- **Radius:** `5px`
- **Padding:** `12px 25px`
- **Typography:** Arial, 15px
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Surface Card
**Role:** Feature highlights and service descriptions
**Pages observed:** https://webol.co.uk, https://webol.co.uk/about
**Spec:** 
- **Background:** `transparent` (rendered over white)
- **Border:** 0px
- **Shadow:** `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px`
- **Padding:** `20px 18px`
- **Radius:** `0px` (Note: Inner content often uses icons)
**States observed:** Default

#### Footer Section
**Role:** Site-wide navigation and contact anchor
**Pages observed:** https://webol.co.uk, https://webol.co.uk/about
**Spec:** 
- **Background:** `#14042c`
- **Text:** `#ffffff`
- **Typography:** Red Hat Display (Headings 50px)
- **Padding:** 0px (Full bleed)

### Tier 3: Surface-specific

#### Counter Block
**Role:** Social proof and statistics
**Pages observed:** https://webol.co.uk
**Spec:** 
- **Text:** `#000000`
- **Typography:** Red Hat Display 67px (700)
- **Sub-label:** Inter 16px (300)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Padding (Vertical) | 80px - 100px |
| Column Gap | 20px |

## Do's
- Use `#14042c` for all primary button backgrounds.
- Set display headlines to **Red Hat Display** at weight 800.
- Apply a `28px` radius to interactive pill elements.
- Maintain high contrast by using `#ffffff` text on all dark surfaces.
- Use **Inter** at weight 300 for long-form descriptive text to ensure legibility.

## Don'ts
- **Wrong:** Using `#000000` as a primary section background. **Right:** Use `#14042c`. **Reason:** The brand identity is built on the deep purple-black obsidian tone, not pure black.
- **Wrong:** Applying shadows to buttons on dark backgrounds. **Right:** Use 1px white borders. **Reason:** Elevation is not visible on the obsidian canvas.
- **Wrong:** Using serif fonts for any UI element. **Reason:** The brand is strictly geometric sans-serif.

## Quick start

### CSS Custom Properties
```css
:root {
  --webol-primary: #14042c;
  --webol-accent: #ff0071;
  --webol-white: #ffffff;
  --webol-font-display: 'Red Hat Display', sans-serif;
  --webol-font-body: 'Inter', sans-serif;
  --webol-radius-button: 28px;
  --webol-shadow-card: rgba(0, 0, 0, 0.15) 0px 0px 10px 0px;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific navigation menu transitions were not sampled.
- Error states for form validation were not present in the analyzed pages.

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