# MapleLMS Design System

> A high-contrast corporate canvas where sky-blue accents and safety-orange CTAs punctuate a structured, Poppins-led information hierarchy.

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

## TL;DR
MapleLMS utilizes a clean, professional aesthetic grounded in a white foundation (#ffffff) with deep slate text (#212529). The system’s "voltage" is concentrated in its functional color use: a vibrant sky blue (#00a1e0) defines the primary brand presence and secondary surfaces, while a high-visibility orange (#ffae01) is reserved strictly for high-conversion actions and critical UI highlights. Typography relies on the geometric clarity of Poppins for headers and Roboto for high-density body content, maintaining a strict 700-weight for all display levels to ensure authority.

## Signature DNA
1. **The "Action Orange" Anchor:** High-contrast orange (#ffae01) is used exclusively for primary CTAs and star ratings, creating a clear behavioral path against the blue and white backdrop.
2. **Geometric Header Hierarchy:** A rigid use of Poppins at weight 700 across all heading levels (from 40px display to 20px subheads) creates a consistent, structured rhythm.
3. **Sky-Blue Sectioning:** Large-scale background blocks in #00a1e0 or #007fb0 are used to transition between content themes, often paired with white text for maximum legibility.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, card surfaces, button text | 43 | 1.0 | Computed |
| `{color.ink.primary}` | `#212529` | Primary body text, section descriptions | 110 | 0.8 | Computed |
| `{color.ink.black}` | `#000000` | Tooltip backgrounds, footer headers | 41 | 1.0 | Computed |
| `{color.surface.muted}` | `#f1f1f1` | Subtle section backgrounds, alternating bands | 8 | 0.6 | Computed |
| `{color.border.light}` | `#ebeffc` | Card borders, subtle dividers | 6 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.brand.primary}` | `#00a1e0` | Primary brand accent, icons, section headers | 151 | 0.8 | Computed |
| `{color.brand.deep}` | `#007fb0` | Hover states, dark-mode section backgrounds | 20 | 0.8 | Computed |
| `{color.action.primary}` | `#ffae01` | Primary CTAs, "Book a Demo" buttons | 3 | 0.6 | Computed |
| `{color.action.secondary}` | `#283a57` | Deep navy text for specific emphasis | 3 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.success}` | `#28a745` | Success states (declared token) |
| `{color.error}` | `#dc3545` | Error states (declared token) |
| `{color.warning}` | `#ffc107` | Warning states (declared token) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Poppins | 400, 700 | Display, Headings | Poppins (Google) | OFL |
| Roboto | 400, 700 | Body, Navigation, Buttons | Roboto (Google) | OFL |
| Arial | 400 | Fallback body | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 41px | 49.2px | normal | 700 | Hero H1 | `h1.item--title.st-default` |
| `{type.display.lg}` | 40px | 48px | normal | 700 | Section Display | `h1.item--title.st-line-left2` |
| `{type.heading.lg}` | 36px | 47.9px | normal | 700 | Section Headers | `h3.item--title.st-line-left2` |
| `{type.heading.md}` | 30px | 36px | normal | 700 | Sub-section titles | `h3.item--title` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 700 | Feature titles | `h4.item--title.st-default` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Lead paragraphs | `span:nth-of-type(1)` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard body | `article#post-3193` |
| `{type.body.sm}` | 15px | 21.3px | normal | 400 | Footer/Captions | `div.item--description` |

### Principles
1. **Bold Authority:** All headings (H1-H4) must use Poppins at weight 700.
2. **Body Clarity:** Roboto is the workhorse for all text over 2 lines to ensure legibility at 16px.
3. **Vertical Rhythm:** Line heights are strictly 1.2x for display and 1.5x for body text.

## Spacing
**Base unit:** 5px (derived from 50px/55px patterns)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 6 |
| `{space.sm}` | 15px | 15 |
| `{space.md}` | 30px | 11 |
| `{space.lg}` | 40px | 18 |
| `{space.xl}` | 50px | 22 |
| `{space.section}` | 66px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Cards, Section containers | 333 occurrences |
| `{radius.sm}` | 4px | Primary Buttons | `Rounded Button` component |
| `{radius.full}` | 100% | Pagination dots, Avatars | `Rounded Button` (variant) |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `0 26px 47px rgba(12, 12, 12, 0.1)` | Floating feature cards | Surface component |
| `{shadow.button}` | `0 7px 16px rgba(12, 12, 12, 0.22)` | Primary CTA buttons | Rounded Button component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://maplelms.com
**Spec:** Background `{color.action.primary}` (#ffae01) / Text `{color.canvas}` (#ffffff) / Radius 4px / Padding 6px 12px / Font 16px Roboto.
**States observed:** Default | Hover: captured (shadow increases) | Focus: not captured.

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** https://maplelms.com
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.primary}` (#212529) / Border 1px `{color.border.light}` (#ebeffc) / Shadow `{shadow.card}`.
**States observed:** Default: captured.

### Tier 3: Surface-specific
#### Sky Section
**Role:** Full-width content transition
**Pages observed:** https://maplelms.com
**Spec:** Background `{color.brand.deep}` (#007fb0) / Text `{color.canvas}` (#ffffff) / Padding 0px 50px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1140px (standard container) |
| Section Padding | 50px - 66px (vertical) |
| Grid Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px; H1 scales to ~32px. |
| Desktop | 1440px | Standard 12-column layout; 50px section gutters. |

## Imagery & decoration
- **Iconography:** Uses thin-stroke blue icons (#00a1e0) on white circular or square backgrounds.
- **Badges:** Trust badges (awards) are presented in a grayscale or original color grid with 50px spacing.
- **Avoid:** Do not use soft gradients or organic shapes; the brand is strictly geometric and flat.

## Do's
- Use Poppins 700 for all headlines to maintain hierarchy.
- Apply #ffae01 only to the most important conversion buttons.
- Ensure all cards use the 1px #ebeffc border when sitting on white backgrounds.
- Maintain 50px vertical padding between major content sections.
- Use Roboto 400 for all multi-line descriptive text.

## Don'ts
- **Wrong:** Using #00a1e0 for primary "Book a Demo" buttons. **Right:** Use #ffae01. **Reason:** Orange is the designated high-conversion action color.
- **Wrong:** Applying border-radius to section containers. **Right:** Keep section backgrounds at 0px radius.
- **Wrong:** Using Roboto for H1 or H2 titles. **Right:** Use Poppins 700.
- **Wrong:** Mislabeling #00a1e0 as the "Action" color. **Reason:** #00a1e0 is the brand accent; #ffae01 is the functional action color.

## Similar brands
- Salesforce (Blue/White corporate structure)
- TalentLMS (LMS category, similar blue-primary palette)
- SAP (Structured, high-contrast corporate UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-brand-primary: #00a1e0;
  --color-action-primary: #ffae01;
  --color-ink-primary: #212529;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-button: 4px;
  --shadow-card: 0 26px 47px rgba(12, 12, 12, 0.1);
}
```

## Agent prompt examples
- "Create a feature section with a Poppins 700 header in #212529, followed by a 3-column grid of white cards with 1px #ebeffc borders and a subtle #00a1e0 icon."
- "Generate a primary CTA button using #ffae01 background, white Roboto text, and a 4px border radius."
- "Design a full-width section with a #007fb0 background and white Poppins 700 text centered."

## Known gaps
- Hover states for navigation links were not explicitly captured in the computed style tokens.
- Form input validation states (error/success) are declared in tokens but were not observed on the analyzed homepage.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://maplelms.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://maplelms.com | 390x844 | 2026-06-06 |