# Wizlearn Design System

> Airy enterprise educational canvas anchored by light-weight Poppins headlines and a dominant achromatic foundation.

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

## TL;DR
Wizlearn utilizes a clean, professional aesthetic defined by a monochrome foundation of #556665 (Slate Green) and #687377 (Steel Gray) against a pure white canvas. The system's signature move is the use of **Poppins** at a light weight (300) for all major display and section headings, creating an editorial feel that avoids the heavy "tech-bold" standard. While the core system is achromatic, it uses a vibrant teal-blue accent (#57bce2) for iconography and secondary surfaces to signal educational "energy" without overwhelming the professional layout.

## Signature DNA
1. **Lightweight Display Serif-Alternative** (Poppins at weight 300 is used for all H2 and H3 headings, providing a sophisticated, breathable hierarchy across the homepage).
2. **Soft-Shadow Floating Cards** (Content blocks use a specific `rgba(0, 0, 0, 0.1) 0px 0px 25px 0px` shadow to create depth without harsh borders, as seen in the "Why WizLearn?" section).
3. **Achromatic Professionalism** (The primary text and brand identity are carried by #556665 and #687377, ensuring high contrast and a corporate-stable feel).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Wizlearn (Parent) | #556665 | Clean grids, circular icons | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink.primary}` | #556665 | Primary brand text / logo | 5 | 0.6 | Computed Style |
| `{color.ink.secondary}` | #687377 | Body text / UI labels | 92 | 0.8 | Computed Style |
| `{color.canvas.white}` | #ffffff | Page background / Card fill | 53 | 1.0 | CSS Variable |
| `{color.canvas.light}` | #f5f5f5 | Secondary section background | 2 | 1.0 | CSS Variable |
| `{color.border.default}` | #e0e5e9 | Card and divider lines | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.teal}` | #57bce2 | Icon backgrounds / UI accents | 32 | 0.8 | Computed Style |
| `{color.accent.navy}` | #00324c | Emphasis text / Deep accents | 48 | 0.8 | Computed Style |
| `{color.accent.muted}` | #8d9ca8 | Deemphasized labels | 12 | 0.8 | Computed Style |
| `{color.decorative.blue}` | #007bff | Decorative only (low usage) | 1 | 1.0 | CSS Variable |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 300, 400, 500, 700 | Primary Brand & UI | Poppins (Google Fonts) | OFL |
| icomoon | 400 | Iconography | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 36px | 45px | normal | 300 | Section Headings | `h2` |
| `{type.display.md}` | 32px | 70px | normal | 400 | Icon glyphs | `span.icon` |
| `{type.display.sm}` | 24px | 28.8px | normal | 300 | Feature titles | `h4` |
| `{type.title.md}` | 22px | 28px | normal | 300 | Sub-section heads | `h3` |
| `{type.nav.active}` | 16px | 26px | normal | 500 | Active Navigation | `a.nav-link.active` |
| `{type.body.md}` | 16px | 22px | normal | 300 | Feature descriptions | `h4` |
| `{type.body.sm}` | 14px | 26px | normal | 400 | UI labels / Header | `header.opt2` |
| `{type.caption}` | 12px | 26px | normal | 400 | Footer / Legal | `div.bottom` |

### Principles
1. **Lightweight Hierarchy:** Always prefer weight 300 for headings larger than 20px to maintain the brand's "airy" feel.
2. **High Contrast Body:** Body text uses #687377 on white, ensuring legibility without the harshness of pure black.
3. **Iconography as Type:** Icons are treated as typographic elements (icomoon) with specific line-heights (70px) to align with text blocks.

## Spacing
**Base unit:** 5px (inferred from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 4 |
| `{space.sm}` | 15px | 43 |
| `{space.md}` | 20px | 41 |
| `{space.lg}` | 30px | 48 |
| `{space.xl}` | 45px | 7 |
| `{space.section}` | 60px | 29 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Buttons / Layout containers | 172 occurrences |
| `{radius.md}` | 5px | Form inputs / Cards | 6 occurrences |
| `{radius.full}` | 50px | Icon circles / Pill elements | 32 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 0px 25px 0px` | Feature cards | Why WizLearn? section |

## Components

### Tier 1: Foundational
#### Icon Circle
**Role:** Visual anchor for feature lists.
**Pages observed:** https://wizlearn.com
**Spec:** Background `{color.accent.teal}` (#57bce2) / Radius `{radius.full}` (50px) / Size 70px x 70px.
**States observed:** Default: captured | Hover: not captured.

### Tier 2: Patterns
#### Feature Card
**Role:** Grouped content for value propositions.
**Pages observed:** https://wizlearn.com
**Spec:** Background #ffffff / Border 1px `{color.border.default}` (#e0e5e9) / Radius `{radius.md}` (5px) / Shadow `{shadow.card}`.
**States observed:** Default: captured | Hover: not captured.

### Tier 3: Surface-specific
#### Navigation Link
**Role:** Primary site navigation.
**Pages observed:** https://wizlearn.com
**Spec:** Typography `{type.body.sm}` (14px/400) / Active state `{type.nav.active}` (16px/500).
**States observed:** Default | Active: captured.

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px |
| Section Padding | 60px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Feature cards stack vertically; Section padding reduces to 30px. |

## Imagery & decoration
Wizlearn uses high-quality product screenshots within device frames (MacBook, iPhone) to ground the software. Decorative elements are limited to circular icons with simple white glyphs. The brand avoids complex gradients or photography, relying on UI-as-illustration.

## Do's
- Use Poppins 300 for all headlines above 24px.
- Apply `{shadow.card}` to all white containers on white backgrounds to ensure separation.
- Use #57bce2 strictly for iconography and secondary UI highlights.
- Maintain a minimum of 60px vertical spacing between major sections.
- Ensure all text links use Poppins 400 at 14px for consistency.

## Don'ts
- **Wrong:** Using #007bff for primary buttons. **Right:** Use #556665 or brand-specific accent colors. **Reason:** #007bff is a legacy decorative token, not the primary brand driver.
- **Wrong:** Using bold (700) weights for display headings. **Right:** Use weight 300. **Reason:** Bold weights break the editorial "Wizlearn" signature.
- **Wrong:** Applying sharp corners to feature cards. **Right:** Use `{radius.md}` (5px). **Reason:** The brand uses soft rounding to appear approachable.

## Similar brands
- Coursera (clean, type-driven edu-tech)
- Instructure/Canvas (enterprise LMS focus)
- LinkedIn Learning (professional, achromatic foundation)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --wiz-primary: #556665;
  --wiz-text: #687377;
  --wiz-accent: #57bce2;
  --wiz-bg: #ffffff;
  --wiz-shadow: rgba(0, 0, 0, 0.1) 0px 0px 25px 0px;
  --font-main: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Generate a feature grid using Poppins 300 for titles and Poppins 400 for body text, with cards using a 5px radius and a 25px soft shadow."
- "Create a navigation bar using #687377 for links, with the active state set to Poppins 500 at 16px."
- "Design a hero section with an H1 in Poppins 300 and a primary CTA using a sharp border radius."

## Known gaps
- Hover and focus states for buttons were not captured in the primary viewport.
- Error and Success semantic colors were not present on the analyzed homepage.
- The full icomoon glyph set was not mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://wizlearn.com | 1440x900 | 2026-06-06T05:25:38Z |