# Overgrad Design System

> A structured, high-contrast academic canvas utilizing deep navy anchors and vibrant emerald accents to organize the student journey.

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

## TL;DR
Overgrad employs a "monochrome-plus" system where a deep navy primary (`#00255d`) provides institutional authority against a clean white (`#ffffff`) foundation. The system's "voltage" is carried by a secondary emerald green (`#059669`), used for high-intent CTAs and success indicators. Typography is strictly sans-serif, relying on extreme weight variance—from 400 for utility text to 900 for display headers—to create hierarchy. Layouts are characterized by generous vertical pacing (up to 200px) and a consistent 12px/16px corner radius strategy for interactive cards and buttons.

## Signature DNA
1. **Institutional Anchoring:** The use of `#00255d` (Primary) for headers, footers, and primary buttons creates a "trusted advisor" atmosphere common in educational technology (observed on all pages).
2. **Emerald Intent:** High-contrast emerald (`#059669`) is reserved for "Success" and "Growth" moments, such as the "See how it works" CTA and "Pathways" icons (observed on Homepage and Pricing).
3. **Heavyweight Display:** Use of 900-weight `-apple-system` headers at large scales (72px+) to anchor section starts (observed on Homepage and About).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.bg}` | `#ffffff` | Primary page canvas and card surfaces | 130 | 1 | `css_variable:--color-bg` |
| `{color.text}` | `#1e293b` | Default body text and dark surface text | 196 | 1 | `css_variable:--color-text` |
| `{color.border}` | `#e5e7eb` | Default 1px card and divider lines | 34 | 1 | `css_variable:--color-border` |
| `{color.bg-lighter}` | `#f0fdf4` | Subtle green-tinted section backgrounds | 1 | 1 | `css_variable:--color-bg-lighter` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#00255d` | Institutional navy: Headers, primary CTAs | 21 | 1 | `css_variable:--color-primary` |
| `{color.secondary}` | `#059669` | Emerald: Success CTAs, active borders | 23 | 1 | `css_variable:--color-secondary` |
| `{color.text-muted}` | `#64748b` | Slate: Secondary labels and subtext | 65 | 1 | `css_variable:--color-text-muted` |
| `{color.accent-yellow}` | `#fbbf24` | Decorative only: Highlight text | 3 | 1 | `css_variable:--color-accent-yellow` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#10b981` | Success indicators and hover states |
| `{color.error}` | `#ef4444` | Validation and critical alerts (decorative_only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| -apple-system | 400, 500, 600, 700, 800, 900 | All roles (Display, Heading, Body) | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-mega}` | 80px | 80px | normal | 900 | Stat numbers | `div.stat-number` |
| `{text.display-xl}` | 72px | 75.6px | -1.44px | 900 | Hero H1 | `h1` |
| `{text.display-lg}` | 56px | 89.6px | normal | 900 | Section H2 | `h2` |
| `{text.heading-md}` | 40px | 42px | normal | 800 | Headline H2 | `h2.k20-headline` |
| `{text.heading-sm}` | 24px | 38.4px | normal | 700 | Card titles | `h3` |
| `{text.body-lg}` | 18px | 28.8px | normal | 700 | Primary button text | `a.btn-hero-primary` |
| `{text.body}` | 16px | 25.6px | normal | 400 | Default paragraph | `section.hero` |
| `{text.caption}` | 12px | 19.2px | 0.6px | 700 | Badges | `div.pricing-plan__badge` |

### Principles
1. **Extreme Weight Contrast:** Headers frequently jump from 400 (subtitles) to 900 (headlines) to create immediate visual impact.
2. **Tight Display Tracking:** Large display sizes (72px) utilize negative letter-spacing (-1.44px) to maintain optical density.
3. **Utility Uppercase:** Captions and labels use 1px to 1.4px letter spacing to ensure legibility at small sizes.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 98 |
| `{space.md}` | 24px | 81 |
| `{space.xl}` | 48px | 24 |
| `{space.section}` | 96px | 3 |
| `{space.hero}` | 200px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 6px | Small badges/tags | `Surface (pricing)` |
| `{radius.md}` | 12px | Buttons and small cards | `Rounded Button` |
| `{radius.lg}` | 16px | Feature cards | `Card (homepage)` |
| `{radius.xl}` | 24px | Large containers | `Card (about)` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.2) 0px 20px 40px 0px` | High-intent CTA buttons | `Rounded Button` |
| `{shadow.accent}` | `rgba(16, 185, 129, 0.4) 0px 10px 30px 0px` | Emerald button hover/glow | `Rounded Button` |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#ffffff` / Text: `#047857` / Radius: `12px` / Padding: `28px 72px` / Shadow: `{shadow.card}`
**States observed:** Default | Hover: Captured (Emerald glow)

#### Rounded Button (Ghost)
**Role:** Secondary action on dark/colored backgrounds
**Pages observed:** Homepage, Pricing
**Spec:** Background: `rgba(255, 255, 255, 0.2)` / Text: `#ffffff` / Border: `2px rgba(255, 255, 255, 0.4)` / Radius: `12px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying product capabilities
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` / Border: `1px #e5e7eb` / Radius: `16px` / Padding: `24px 32px`
**States observed:** Default

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Border: `2px #00255d` (for featured) / Radius: `24px` / Padding: `24px`
**States observed:** Default

### Tier 3: Surface-specific
#### Stat Block
**Role:** Highlighting outcomes
**Pages observed:** Homepage, About
**Spec:** Typography: `{text.display-mega}` / Text: `#1e293b` / Alignment: Center
**States observed:** Default

#### Solution Card (Small)
**Role:** Secondary feature grid
**Pages observed:** Homepage
**Spec:** Background: `rgba(255, 255, 255, 0.05)` / Border: `1px rgba(255, 255, 255, 0.1)` / Radius: `16px` / Padding: `32px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Gaps | 160px - 200px |
| Grid | 12-column desktop |

## Do's
- Use `#00255d` for primary institutional navigation and footers.
- Apply `900` weight to display headers above 48px.
- Reserve `#059669` for "Success" pathways and conversion buttons.
- Use `16px` radius for standard content cards.
- Maintain a minimum of `96px` vertical spacing between major sections.

## Don'ts
- **Wrong:** Using `#3b82f6` (Accent Blue) as the primary brand color. **Right:** Use `#00255d`. **Reason:** Blue tokens exist in the system but the brand identity is anchored in the deep navy Primary.
- **Wrong:** Using sharp corners for interactive elements. **Right:** Use `12px` or `16px` radius.
- **Wrong:** Applying shadows to every card. **Right:** Use flat borders (`#e5e7eb`) for standard cards; reserve shadows for buttons.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #00255d;
  --color-secondary: #059669;
  --color-text: #1e293b;
  --color-bg: #ffffff;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-primary: 0px 20px 40px 0px rgba(0, 0, 0, 0.2);
}
```

## Agent prompt examples
- "Create a feature section with a 3-column grid of cards using `#ffffff` backgrounds, `1px #e5e7eb` borders, and `16px` border radius. Headers should be `-apple-system` weight 700 at `24px`."
- "Generate a primary CTA button using `#00255d` background, `#ffffff` text, `12px` border radius, and a `28px 72px` padding."
- "Design a stat section where the number is `#1e293b` at `80px` size with a weight of `900`."

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