# Electude Design System

> High-contrast technical education interface defined by deep forest greens, high-voltage orange accents, and ultra-lightweight Inter Tight headlines.

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

## TL;DR
Electude utilizes a high-contrast "monochrome-plus-accent" system. The interface is anchored by a deep near-black green `#11262b` (Brand 5) used for primary text and backgrounds, contrasted against a warm off-white foundation `#ebe4db` (Brand 2). A high-saturation orange `#ff491c` (Brand 1) serves as the primary action signal, appearing in CTAs and critical headings. The typographic signature is **Inter Tight** at an exceptionally light weight (300) for display headers, often reaching sizes of 106px. Component geometry is characterized by extreme pill-shaped rounding (100px) for interactive elements, while structural containers remain sharp (0px).

## Signature DNA
1. **Lightweight Display Typography** (Inter Tight at weight 300 for display headers up to 106px, creating an airy, technical feel despite large scales. Observed on Homepage and About pages.)
2. **High-Contrast Earth & Fire Palette** (The pairing of deep `#11262b` forest green with high-voltage `#ff491c` orange for CTAs. Observed across all primary navigation and hero sections.)
3. **Pill-to-Sharp Geometry** (Interactive buttons use a `100px` radius, while content sections and cards maintain a `0px` sharp edge, creating a clear distinction between "action" and "content." Observed on all page sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--wp--preset--color--brand-5` | `#11262b` | Primary text, dark backgrounds, footer | 394 | 1 | Computed Style |
| `--wp--preset--color--white` | `#ffffff` | Page canvas, text on dark backgrounds | 83 | 1 | Computed Style |
| `--wp--preset--color--brand-2` | `#ebe4db` | Secondary surface background, navigation | 6 | 1 | Computed Style |
| `--wp--preset--color--black` | `#000000` | Secondary text, deep shadows | 40 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--wp--preset--color--brand-1` | `#ff491c` | Primary CTA background, accent headings | 34 | 1 | Computed Style |
| `--wp--preset--color--brand-3` | `#3e4532` | Tertiary button background, section surfaces | 9 | 1 | Computed Style |
| `--wp--preset--color--brand-4` | `#bdd2de` | Accent borders, light backgrounds | 5 | 1 | Computed Style |
| `--wp--preset--color--brand-4-75` | `#d3e1ea` | Decorative only (surface background) | 1 | 1 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Inter Tight | 300, 400, 600, 700 | Display, Headings, Body | Inter Tight (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 106px | 180.2px | normal | 300 | Hero display | `p.wp-block-paragraph` |
| `{type.display-xl}` | 96px | 96px | normal | 600 | Primary H1 | `h1.wp-block-heading` |
| `{type.display-lg}` | 80px | 136px | normal | 600 | Section headers | `p.has-text-align-left.large` |
| `{type.display-md}` | 56px | 56px | normal | 600 | Secondary headers | `p.h2.wp-block-paragraph` |
| `{type.heading-md}` | 28px | 28px | normal | 400 | Subsection titles | `h4.wp-block-heading` |
| `{type.heading-sm}` | 25px | 25px | normal | 600 | Feature titles | `h3.title` |
| `{type.body-lg}` | 19px | 32.3px | normal | 400 | Lead paragraph | `p.wp-block-paragraph` |
| `{type.body-md}` | 16px | 27.2px | normal | 400 | Standard body | `p.wp-block-paragraph` |
| `{type.body-bold}` | 16px | 27.2px | normal | 700 | Strong emphasis | `strong` |

### Principles
1. **Weight Contrast:** Use weight 300 for the largest display sizes to maintain elegance; shift to 600 for standard H1/H2 headers to ensure impact.
2. **Tight Leading on Display:** Large headers (96px) use 1:1 line height to keep word blocks cohesive.
3. **Generous Body Leading:** Standard body text (16px) uses 1.7x line height (27.2px) for high readability in educational contexts.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 15 |
| `{space.sm}` | 10px | 12 |
| `{space.md}` | 20px | 73 |
| `{space.lg}` | 35px | 17 |
| `{space.xl}` | 60px | 33 |
| `{space.section}` | 160px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, cards, images | 441 occurrences |
| `{radius.pill}` | 100px | Primary and secondary buttons | 23 occurrences |
| `{radius.soft}` | 50px | Secondary UI elements | 20 occurrences |

## Elevation
Not captured in source. The system is visually flat, relying on color blocking and 2px borders for depth.

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background: `#ff491c` | Text: `#ffffff` | Border: None | Radius: `100px` | Padding: `17.5px 30px` | Typography: `16px/600`
**States observed:** Default | Hover: Not captured

#### Rounded Button (Outline)
**Role:** Secondary action
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` | Text: `#ffffff` | Border: `2px solid #bdd2de` | Radius: `100px` | Padding: `17.5px 30px` | Typography: `16px/400`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** Homepage, About
**Spec:** Background: `#ebe4db` | Text: `#11262b` | Border: None | Radius: `0px` | Padding: `0px 0px 200px` (bottom offset)
**States observed:** Default | Active: Not captured

#### Testimonial Card
**Role:** Social proof
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Text: `#11262b` | Border: None | Radius: `0px` | Padding: `60px 70px`
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Surface Section
**Role:** High-impact content block
**Pages observed:** Homepage, About
**Spec:** Background: `#3e4532` | Text: `#ffffff` | Border: None | Radius: `0px` | Padding: `160px 0px`
**States observed:** Default

#### Light Surface Section
**Role:** Standard content block
**Pages observed:** Homepage, About
**Spec:** Background: `#ebe4db` | Text: `#11262b` | Border: None | Radius: `0px` | Padding: `160px 0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Vertical Padding | 160px |
| Horizontal Gutter | 70px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Display type scales down; padding reduces to 20px; buttons become full-width. |

## Imagery & decoration
Electude uses high-quality photography of automotive students and instructors. Decorative elements include thin white or dark line-art "paths" that connect sections, often ending in geometric shapes like diamonds or circles.

## Do's
- Use **Inter Tight 300** for display text larger than 80px.
- Use `#ff491c` exclusively for primary actions and critical emphasis.
- Maintain **0px radius** for all structural containers and images.
- Apply **160px vertical spacing** between major content sections.
- Ensure text on `#11262b` or `#3e4532` backgrounds is always `#ffffff`.

## Don'ts
- **Don't** use `#ff491c` for body text; it is reserved for headers and CTAs.
- **Don't** apply border-radius to images or testimonial cards.
- **Don't** use standard Inter; the system specifically requires the **Inter Tight** variant.
- **Don't** mix the sub-brand accent colors (if any existed) with the parent primary `#11262b`.
- **Don't** use shadows; the brand relies on flat color blocks for hierarchy.

## Similar brands
- Volvo (typographic restraint, automotive focus)
- Masterclass (large-scale display type, dark surfaces)
- Coursera (educational structure, clean grid)

## Quick start

```css
/* CSS Variables */
:root {
  --brand-orange: #ff491c;
  --brand-dark-green: #11262b;
  --brand-olive: #3e4532;
  --brand-beige: #ebe4db;
  --brand-blue-grey: #bdd2de;
  --font-display: 'Inter Tight', sans-serif;
  --radius-pill: 100px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#3e4532` background, using Inter Tight 300 at 106px for the headline and a `#ff491c` pill button."
- "Create a content grid with `#ffffff` cards, 0px border radius, and `#11262b` text."
- "Design a navigation bar using `#ebe4db` background and `#11262b` links in Inter Tight 400."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific typography scale for mid-range headers (H3-H4) was not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://electude.com | 1440px | 2026-06-06 |
| About | https://electude.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://electude.com | 390px | 2026-06-06 |