# Wizorbit Design System

> High-contrast corporate utility anchored by safety orange accents and a dual-serif display hierarchy.

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

## TL;DR
Wizorbit utilizes a high-contrast monochrome foundation of pure white (#ffffff) and deep charcoal (#333333) to establish a professional software-consultancy aesthetic. The visual identity is punctuated by a high-voltage safety orange (#ff9900) used for primary calls-to-action and iconography backgrounds. Typography is complex, pairing the modern geometric sans-serif **Raleway** for headers with the highly legible **Source Sans Pro** for body and UI. The system relies on sharp edges (0px radius) for structural containers, reserving soft rounded corners (4px to 10px) exclusively for interactive elements and feature cards.

## Signature DNA
1. **The Orange Pulse** (#ff9900): Used as a singular high-contrast signal for buttons and icon plates against both light and dark backgrounds.
2. **Dual-Role Headers**: Raleway is used for section titles (46px) and subheadings, while Source Sans Pro handles extreme display sizes (50px) for data visualization.
3. **Achromatic Depth**: Large sections of the site use #000000 or dark image overlays to create a "pro-tools" atmosphere, contrasting with the standard white canvas.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, button text | 75 | 0.8 | computed_style |
| `{color.ink.muted}` | `#666666` | Secondary body text | 55 | 0.8 | computed_style |
| `{color.ink.primary}` | `#333333` | Primary text, borders | 6 | 0.6 | computed_style |
| `{color.ink.deep}` | `#000000` | Section backgrounds, text | 9 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#ff9900` | Primary CTA bg, icon plates | 14 | 0.8 | computed_style |
| `{color.accent.blue}` | `#007cc2` | Links, decorative borders | 12 | 0.8 | computed_style |
| `{color.accent.soft-blue}` | `#428bca` | Text links | 10 | 0.6 | computed_style |
| `{color.surface.teal}` | `#269abc` | Feature card backgrounds | 8 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Raleway** | 400, 500, 600, 700 | Section Headings | Raleway (Google) | OFL |
| **Source Sans Pro** | 400, 500, 600, 700 | Body, UI, Data Display | Source Sans 3 | OFL |
| **DM Sans** | 400, 700 | Secondary Headings | DM Sans (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 50px | normal | normal | 700 | Counter numbers | `span.quantity-counter` |
| `{type.display.lg}` | 46px | 50px | normal | 500 | Module titles | `h2.module-title` |
| `{type.heading.md}` | 31px | 34.1px | normal | 600 | Rotating text | `span.rotate` |
| `{type.heading.sm}` | 24px | 32px | normal | 700 | Page titles | `h1.title` |
| `{type.subheading}` | 18px | 19.8px | normal | 600 | Subtitles | `h5.subtitle` |
| `{type.body.lg}` | 18px | 24px | normal | 400 | Nav / Main body | `header#t3-header` |
| `{type.body.md}` | 16px | 23px | normal | 400 | Service blocks | `div.service_block` |
| `{type.label.sm}` | 14px | 20px | 1px | 600 | Small links | `a` |

### Principles
1. **Header Hierarchy**: Raleway is the primary voice for structural headings; Source Sans Pro is reserved for numerical data and functional UI.
2. **Tight Leading**: Display sizes (46px) use a tight 1.08x line-height (50px) to maintain density.
3. **Tracking for Labels**: Small 14px links utilize 1px letter-spacing for improved legibility in navigation contexts.

## Spacing
**Base unit:** 5px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 19 |
| `{space.sm}` | 10px | 5 |
| `{space.md}` | 15px | 15 |
| `{space.lg}` | 20px | 21 |
| `{space.xl}` | 30px | 8 |
| `{space.section}` | 75px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, primary buttons | 176 occurrences |
| `{radius.sm}` | 4px | Inputs, surface accents | 19 occurrences |
| `{radius.md}` | 10px | Feature cards | 8 occurrences |
| `{radius.full}` | 50px | Large panels / Avatars | 7 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All cards and sections | 100% of components |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Request Quote, Click Here)
**Pages observed:** Home, Pricing
**Spec:** Background `#ff9900` / Text `#ffffff` / Border `0px` / Radius `0px` / Typography `16px-20px`
**States observed:** Default: Captured | Hover: Not captured

#### Icon Plate
**Role:** Decorative background for service icons
**Pages observed:** Home
**Spec:** Background `#ff9900` / Text `#ffffff` / Radius `4px` / Padding `0px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service and project highlights
**Pages observed:** Home
**Spec:** Background `#269abc` / Border `1px solid #0000ff` / Radius `10px` / Typography `18px`
**States observed:** Default: Captured

#### Content Surface
**Role:** Text containers with borders
**Pages observed:** Home
**Spec:** Background `transparent` / Border `1px solid rgba(0, 124, 194, 0.6)` / Radius `0px` / Padding `20px 25px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Section
**Role:** High-impact service overview
**Pages observed:** Home
**Spec:** Background `#000000` / Text `#ffffff` / Radius `0px`
**States observed:** Default: Captured

#### Carousel Control
**Role:** Slider navigation
**Pages observed:** Home
**Spec:** Background `transparent` / Text `#ffffff` / Typography `Source Sans Pro 20px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1170px (standard Bootstrap container) |
| Section Padding | 75px vertical |
| Grid | 12-column |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Header switches to hamburger menu; 2-column grids stack to 1-column |
| Desktop | 1440px | Full horizontal navigation visible |

## Do's
- Use `#ff9900` for all primary conversion buttons.
- Apply `Raleway` weight 600 for subheadings to maintain brand consistency.
- Keep container corners sharp (`0px`) for structural sections.
- Use `#666666` for long-form body text to reduce eye strain on white backgrounds.
- Maintain 75px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `#007cc2` (Accent Blue) for primary CTA buttons. **Right:** Use `#ff9900`. **Reason:** Blue is reserved for text links and decorative borders.
- Do not apply border-radius to the main navigation or footer containers.
- Do not use `Source Sans Pro` for main section titles; use `Raleway`.
- Do not use shadows on feature cards; the system is strictly flat.

## Quick start

```css
:root {
  --wiz-primary: #ff9900;
  --wiz-accent-blue: #007cc2;
  --wiz-ink-primary: #333333;
  --wiz-ink-muted: #666666;
  --wiz-canvas: #ffffff;
  --wiz-font-heading: 'Raleway', sans-serif;
  --wiz-font-body: 'Source Sans Pro', sans-serif;
  --wiz-radius-interactive: 4px;
  --wiz-radius-card: 10px;
}
```

## Known gaps
- Hover states for primary buttons were not captured in the static evidence.
- Error and Success semantic colors were not present on the analyzed marketing pages.
- Mobile-specific typography scale for display headers was not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://wizorbit.com | 1440x900 | 2026-06-06 |
| Home (Mobile) | https://wizorbit.com | 390x844 | 2026-06-06 |
| 404 Error | https://wizorbit.com/404 | 1440x900 | 2026-06-06 |