# Wizer-training Design System

> High-contrast educational canvas anchored by safety-orange prompts and deep indigo technical accents.

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

## TL;DR
Wizer-training utilizes a high-contrast palette where a pure white canvas (#ffffff) meets deep charcoal (#222222) and indigo (#484d61) typography. The system's "voltage" is concentrated in a specific orange-to-red spectrum, primarily using a bold primary orange (#d74a10) for critical CTAs and a lighter decorative orange (#f5671f) for accents. Typography is strictly geometric, relying on Greycliff CF across all hierarchies, with a notable preference for heavy weights (700-800) in interactive elements. Layouts are structured with a 4px base unit, featuring generous 40px vertical rhythms and distinctive 12px rounded corners on primary interface containers.

## Signature DNA
1. **The Safety-Orange Anchor** (Primary actions use #d74a10, often paired with a custom stacked shadow `rgb(185, 44, 0) 0px 4px 0px 0px` to create a tactile, "pressable" button feel, visible on the homepage and pricing pages).
2. **Geometric Heavyweight Type** (Greycliff CF is pushed to weight 800 for buttons and weight 700 for navigation, creating a high-authority, legible educational environment).
3. **Indigo-Slate Neutrality** (Instead of pure gray, secondary text and UI elements use #484d61 and #949bb3, providing a softer, more professional contrast against the white canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background and surface | 4 | 1.0 | `--bs-body-bg` |
| `{color.ink.primary}` | `#222222` | Primary body text | 28 | 0.8 | Computed Style |
| `{color.ink.deep}` | `#000000` | High-contrast text and borders | 1 | 1.0 | `--bs-black` |
| `{color.surface.soft}` | `#f5f6fa` | Secondary section backgrounds | 3 | 1.0 | `--bs-light` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.brand.primary}` | `#d74a10` | Primary CTA background | 2 | 1.0 | `--wYellow-800` |
| `{color.brand.deep}` | `#b92c00` | Emphasis text and shadow base | 5 | 1.0 | `--wYellow-900` |
| `{color.brand.light}` | `#f5671f` | Decorative text (decorative_only) | 2 | 1.0 | `--wYellow-700` |
| `{color.indigo.text}` | `#484d61` | Secondary headings and labels | 17 | 0.8 | Computed Style |
| `{color.slate.text}` | `#949bb3` | Muted descriptions and icons | 15 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Greycliff CF | 400, 500, 600, 700, 800 | All-purpose (Heading/Body/UI) | Montserrat | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.button.lg}` | 18px | 18px | normal | 800 | Primary CTAs | `a.w-btn.w-btn--primary` |
| `{type.nav.link}` | 16px | 32px | normal | 500 | Main navigation items | `li.hs-menu-item` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard body copy | `nav#w-header` |
| `{type.link.bold}` | 16px | 24px | normal | 800 | Inline emphasized links | `a` |
| `{type.link.ui}` | 16px | 20px | normal | 700 | UI labels and buttons | `a` |
| `{type.link.md}` | 16px | 20px | normal | 500 | Secondary UI links | `a` |

### Principles
1. **Interactive Weighting:** Buttons and primary links consistently use weights 700 or 800 to ensure clear affordance.
2. **Indigo for Hierarchy:** Subheadings and secondary labels shift from #222222 to #484d61 to create visual depth without using size changes.
3. **Tight Button Leading:** Primary buttons use a 1:1 ratio (18px size / 18px line-height) to maintain a compact, pill-like appearance.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xxs}` | 4px | 9 |
| `{space.xs}` | 8px | 17 |
| `{space.sm}` | 16px | 18 |
| `{space.md}` | 20px | 3 |
| `{space.lg}` | 40px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default section containers | 63 occurrences |
| `{radius.md}` | 12px | Cards and interactive controls | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.tactile}` | `rgb(245, 103, 31) 0px 1px 0px 0px, rgb(185, 44, 0) 0px 4px 0px 0px` | Primary Orange Buttons | 2 occurrences |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Instant Free Access")
**Pages observed:** Homepage, About
**Spec:** Background: #d74a10 | Text: #ffffff | Radius: 12px | Typography: Greycliff CF 18px/800 | Shadow: `{shadow.tactile}`
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

#### Global Header
**Role:** Primary navigation
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: #ffffff | Text: #222222 | Height: 64px (approx) | Typography: Greycliff CF 16px/500
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### FAQ Accordion
**Role:** Disclosure of information
**Pages observed:** Homepage, Pricing
**Spec:** Background: #f5f6fa | Text: #484d61 | Border: 1px #dee2e6 (inherited)
**States observed:** Default | Active: captured

#### Pricing Card
**Role:** Tiered product display
**Pages observed:** Pricing
**Spec:** Background: #ffffff | Radius: 12px | Border: 1px #dee2e6 | Accent: #d74a10
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific
#### Training Category Badge
**Role:** Categorization of courses
**Pages observed:** Homepage
**Spec:** Background: #ffda40 (from `--wYellow-400`) | Text: #b92c00 | Radius: 4px
**States observed:** Default

#### Testimonial Card
**Role:** Social proof
**Pages observed:** Homepage, About
**Spec:** Background: #ffffff | Text: #484d61 | Left-border accent: #d74a10
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Padding | 40px (vertical) |
| Grid | Flexbox-based 12-column |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px |
| Desktop | 1440px | Max-width container active; multi-column pricing grids |

## Imagery & decoration
Wizer-training uses illustrative, friendly 2D graphics with a focus on security metaphors (locks, shields, laptops). It avoids stock photography in favor of custom vector illustrations that utilize the brand's yellow-to-orange palette. Decorative "squiggles" and geometric shapes are used as background elements to break up white space.

## Do's
- Use #d74a10 for the primary "Instant Free Access" button.
- Apply Greycliff CF at weight 800 for high-priority UI links.
- Use #f5f6fa for alternating section backgrounds to maintain rhythm.
- Ensure all cards use a 12px border radius.
- Use #484d61 for secondary body text to reduce visual fatigue.

## Don'ts
- **Wrong:** Using #0d6efd (Bootstrap Blue) for primary buttons. **Right:** Use #d74a10. **Reason:** The brand identity is built on safety-orange, not default framework colors.
- **Wrong:** Labeling #f5671f as the primary button color. **Right:** Use #d74a10. **Reason:** #f5671f is a decorative accent with lower contrast.
- **Wrong:** Using sharp 0px corners on interactive cards. **Right:** Use 12px. **Reason:** The brand uses rounded controls for a modern, approachable feel.
- Do not use weights below 400 for body copy.
- Do not use pure black (#000000) for long-form body text; use #222222.

## Similar brands
- KnowBe4
- NinjaOne
- Snyk
- Vanta

## Quick start

### CSS Custom Properties
```css
:root {
  --w-primary: #d74a10;
  --w-primary-deep: #b92c00;
  --w-canvas: #ffffff;
  --w-surface-soft: #f5f6fa;
  --w-ink: #222222;
  --w-ink-indigo: #484d61;
  --w-radius-md: 12px;
  --w-font-main: 'Greycliff CF', sans-serif;
}
```

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated trace.
- Specific mobile-only typography tokens were not distinct from desktop in the provided evidence.
- Error and Success semantic colors were not observed on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://wizer-training.com | 1440px | 2026-06-06 |
| Pricing | https://wizer-training.com/pricing | 1440px | 2026-06-06 |
| About | https://wizer-training.com/about | 1440px | 2026-06-06 |