# Magicbooking.co.uk Design System

> High-contrast deep indigo typography anchored by soft pastel functional zones and rounded geometric containers.

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

## TL;DR
Magicbooking utilizes a "Deep Indigo" (`#120f2c`) as its primary typographic and structural anchor, creating a high-contrast environment against a pure white (`#ffffff`) canvas. The system organizes content through large-radius cards (15px to 30px) and distinct color-coded functional bands (Mint, Sky, Peach). Typography is driven by **Aspekta**, a modern sans-serif used with generous weights (600 for display) and specific lead paragraph treatments (20px at weight 300). Interactive elements follow a dual-track CTA strategy: high-contrast indigo pills for primary actions and soft sky-blue pills for secondary discovery.

## Signature DNA
1. **Functional Color Banding** (Large horizontal sections use full-bleed backgrounds like `#e8ffe4` for parent features or `#acd2ff` for CTA heroes to segment the user journey. Observed on Homepage and About pages.)
2. **Aspekta Display Hierarchy** (The use of Aspekta at 64px/weight 600 for primary heroes paired with 20px/weight 300 "lead" text creates a sophisticated, legible editorial rhythm. Observed across all analyzed pages.)
3. **Softened Geometry** (A consistent application of 15px border-radii on content cards and 30px on larger panels, removing all harsh corners from the interface. Observed in feature grids and testimonial blocks.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.ink}` | `#120f2c` | Primary text, headings, dark button backgrounds | 109 | 1.0 | `--bs-body-color` |
| `{color.canvas}` | `#ffffff` | Primary page background, card surfaces | 17 | 1.0 | `--bs-body-bg` |
| `{color.neutral.soft}` | `#f2f3f5` | Secondary surface backgrounds, inactive cards | 7 | 0.6 | Computed Style |
| `{color.neutral.dark}` | `#212529` | Secondary text, footer labels | 11 | 1.0 | `--bs-secondary-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.brand.blue}` | `#0d6efd` | Links, focus rings, primary brand blue | 36 | 1.0 | `--bs-primary` |
| `{color.brand.sky}` | `#acd2ff` | Secondary CTA background, hero accents | 7 | 0.6 | Computed Style |
| `{color.brand.mint}` | `#e8ffe4` | Success surfaces, parent-facing section backgrounds | 5 | 0.6 | Computed Style |
| `{color.brand.indigo}` | `#1f2456` | Primary CTA background (Deep) | 10 | 0.6 | Computed Style |
| `{color.brand.teal}` | `#e0fafa` | Decorative accents, icon backgrounds | 13 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#198754` | Valid form states, success indicators |
| `{color.error}` | `#dc3545` | Error states, invalid form borders |
| `{color.warning}` | `#ffc107` | Warning alerts, status badges |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| **Aspekta** | 300, 400, 500, 550, 600 | Display, Headings, UI | Inter | Licensed |
| **system-ui** | 400, 500 | Body, Navigation | System Default | OS |
| **Segoe UI** | 400, 500, 700 | Heading Fallback | - | OS |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 64px | 76.8px | normal | 600 | Main Hero H1 | `h1.header.display-3` |
| `{type.display.md}` | 56px | 67.2px | normal | 550 | Section Hero | `h1.display-4` |
| `{type.display.sm}` | 48px | 57.6px | normal | 600 | CTA Titles | `h1.header.display-5` |
| `{type.heading.md}` | 32px | 38.4px | normal | 550 | Accordion Headers | `h2.accordion-header` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 550 | Feature Titles | `h4` |
| `{type.lead}` | 20px | 30px | normal | 300 | Intro Paragraphs | `p.lead` |
| `{type.body.md}` | 16px | 24px | normal | 550 | Buttons, UI Labels | `a.btn.btn-main-blue` |
| `{type.body.sm}` | 14px | 21px | normal | 550 | Muted Text | `small.text-muted` |
| `{type.caption}` | 12px | 12px | normal | 550 | Badges | `small.badge` |

### Principles
1. **Weight Contrast:** Pair heavy 600-weight headings with ultra-light 300-weight lead text for visual hierarchy.
2. **Indigo Dominance:** Use `#120f2c` for all primary headings to maintain brand authority; avoid pure black.
3. **Sans-Serif Only:** No serifs are used in the system; legibility is maintained through generous line heights (1.2x - 1.5x).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 56 |
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 16px | 55 |
| `{space.lg}` | 24px | 7 |
| `{space.xl}` | 48px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 4px | Primary Buttons | `Rounded Button` |
| `{radius.md}` | 6px | Secondary Buttons | `Rounded Button` |
| `{radius.lg}` | 15px | Standard Content Cards | `Card` |
| `{radius.xl}` | 30px | Large Surface Panels | `Card` (About page) |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.075) 0px 2px 4px 0px` | Floating cards on white | `Card` component |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Book Demo, Get Started)
**Pages observed:** Homepage, About
**Spec:** Background: `#1f2456` / Text: `#ffffff` / Radius: `4px` / Padding: `16px` / Typography: `Aspekta 16px 550`
**States observed:** Default | Hover: Captured (darkens) | Active: Captured

#### Secondary Button
**Role:** Soft discovery actions (Free Trial)
**Pages observed:** Homepage, About
**Spec:** Background: `#acd2ff` / Text: `#1f2456` / Radius: `6px` / Typography: `Aspekta 16px 550`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying benefits or features in a grid
**Pages observed:** Homepage, About
**Spec:** Background: `#f2f3f5` / Text: `#120f2c` / Radius: `15px` / Shadow: `none`
**States observed:** Default

#### Testimonial Card
**Role:** Customer social proof
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` / Text: `#120f2c` / Radius: `30px` / Shadow: `{shadow.subtle}`
**States observed:** Default

### Tier 3: Surface-specific
#### Success Band
**Role:** Parent-facing feature highlight
**Pages observed:** Homepage
**Spec:** Background: `#e8ffe4` / Text: `#120f2c` / Radius: `15px` / Padding: `15px`
**States observed:** Default

#### Accordion Item
**Role:** Collapsible content for FAQs or feature lists
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Border: `1px solid #dee2e6` / Radius: `0px` (Sharp) / Typography: `Aspekta 24px 600`
**States observed:** Default | Active: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1320px |
| Section Gutter | 24px |
| Vertical Section Gap | 80px - 120px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | H1 scale to 40px; Nav collapses to hamburger; Stacked cards. |
| Desktop | >1200px | 12-column grid; 64px display type enabled. |

## Imagery & decoration
- **Iconography:** Uses thick-stroke indigo icons often placed within circular or rounded square containers of `#e0fafa` (Teal) or `#acd2ff` (Sky).
- **Photography:** Features high-quality, bright lifestyle photography of people (staff/parents) interacting with mobile devices, usually with background removal or soft-focus environments.
- **Avoids:** Hard shadows, neon gradients, and thin-stroke "wireframe" icons.

## Do's
- Use **Aspekta 300** for lead paragraphs following an H1.
- Apply `#120f2c` for all primary text to ensure 18.6:1 contrast.
- Use the **15px radius** for all standard UI cards.
- Segment long pages using full-width background bands of `#e8ffe4` or `#acd2ff`.
- Use the indigo pill (`#1f2456`) for the single most important action on a screen.

## Don'ts
- **Don't** use pure black (`#000000`) for body text; use Indigo (`#120f2c`).
- **Don't** mix border radii on a single row of cards; stick to the 15px standard.
- **Don't** use `#0d6efd` (Primary Blue) for large background surfaces; it is reserved for interactive accents and links.
- **Don't** use sharp corners (0px) for buttons; they must have at least a 4px radius.

## Similar brands
- **Brightwheel** (Education SaaS, similar use of soft pastels and high-contrast type)
- **Kangarootime** (Childcare management, rounded geometry and friendly sans-serifs)
- **ClassDojo** (Educational platform, heavy use of indigo and rounded containers)

## Quick start
```css
/* CSS Variables */
:root {
  --magic-indigo: #120f2c;
  --magic-sky: #acd2ff;
  --magic-mint: #e8ffe4;
  --magic-white: #ffffff;
  --radius-card: 15px;
  --font-main: 'Aspekta', system-ui, sans-serif;
}
```

## Agent prompt examples
- "Create a feature grid using 15px rounded cards with a background of #f2f3f5 and Aspekta headings in #120f2c."
- "Generate a CTA section with a full-width background of #acd2ff and a primary indigo button (#1f2456) with 4px corners."
- "Design a testimonial block using a white card with a 30px radius and a subtle shadow of rgba(0,0,0,0.075) 0px 2px 4px."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token set.
- Mobile-specific typography line-height adjustments for the 64px display size were not fully sampled.
- Form input validation states (focus vs error) were inferred from standard Bootstrap tokens present in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://magicbooking.co.uk | 1440px | 2026-06-06 |
| About | https://magicbooking.co.uk/about | 1440px | 2026-06-06 |
| Pricing | https://magicbooking.co.uk/pricing | 1440px | 2026-06-06 |