# Emonster.ca Design System

> Corporate engineering blue anchored by heavy Manrope display type and high-contrast white surfaces.

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

## TL;DR
Emonster.ca utilizes a high-trust "Enterprise Blue" palette dominated by `#253056` (Ink) and `#3e76fe` (Action Blue). The system is characterized by a "Heavy Display" typographic signature, using **Manrope** at weight 800 for primary heroes and **Inter** for structured technical content. Layouts rely on clean white canvases (`#ffffff`) with subtle ice-blue sectioning (`#f5faff`) and soft-shadowed cards. Components use a strict 4px or 8px border radius, avoiding the "pill" trend in favor of professional, geometric precision.

## Signature DNA
1. **Heavy Display Contrast** (Manrope 800 at 60px paired with Inter 400. This creates a clear hierarchy between "Marketing Promise" and "Technical Detail" across all pages.)
2. **Ice-Blue Sectioning** (Alternating pure white `#ffffff` with very light blue `#f5faff` backgrounds to define service boundaries without using harsh dividers.)
3. **The Blue Gradient Action** (Primary CTAs use `#3e76fe` as a high-voltage blue that stands out against the deep ink `#253056` text used for secondary headings.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 32 | 1.0 | Computed style |
| `{color.canvas.alt}` | `#f5faff` | Subtle section backgrounds (Services, Testimonials) | 11 | 0.8 | Computed style |
| `{color.ink.deep}` | `#0c0e0f` | Primary body text for maximum legibility | 6 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink.primary}` | `#253056` | Primary heading color and brand anchor | 75 | 0.8 | Computed style |
| `{color.action.primary}` | `#3e76fe` | Primary button background and link color | 16 | 0.8 | Computed style |
| `{color.ink.secondary}` | `#363e4a` | Secondary headings and sub-labels | 48 | 0.8 | Computed style |
| `{color.ink.muted}` | `#687887` | Tertiary text and deemphasized descriptions | 17 | 0.8 | Computed style |
| `{color.border.light}` | `#e1ebff` | Soft dividers and card outlines | 3 | 0.6 | Computed style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Manrope | 800 | Hero Display | Manrope (Google Fonts) | SIL OFL |
| Inter | 400, 500, 600, 700, 800 | UI, Body, Headings | Inter (Google Fonts) | SIL OFL |
| Plus Jakarta Sans | 700 | Secondary Display | Plus Jakarta Sans | SIL OFL |
| Poppins | 600 | Button Labels | Poppins | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 60px | 70px | -1.28px | 800 | Main Hero H1 | `h1.ld-fh-element` |
| `{type.display.lg}` | 48px | 60px | normal | 700 | Section Intro | `p.ld-fh-element` |
| `{type.display.md}` | 40px | 50px | -1.28px | 700 | Section Headings | `h2.ld-fh-element` |
| `{type.heading.md}` | 28px | 37.8px | normal | 700 | Sub-section Headings | `h3.ld-fh-element` |
| `{type.heading.sm}` | 24px | 30px | normal | 500 | Card Titles | `h3.elementor-heading-title` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Lead Paragraphs | `p` |
| `{type.body.md}` | 16px | 28px | -0.4px | 400 | Default Body | `p` |
| `{type.button}` | 16px | 24px | normal | 600 | CTA Labels | `a.elementor-button` |
| `{type.caption}` | 13px | 20px | normal | 400 | Small Metadata | `p.ld-fh-element` |

### Principles
1. **Tight Display Tracking:** All headings above 36px utilize negative letter-spacing (-1.28px) to maintain visual density.
2. **High-Contrast Ink:** Headings never use pure black; they use `#253056` to maintain brand warmth.
3. **Weight Pairing:** Pair Manrope 800 (Display) with Inter 400 (Body) for a modern engineering aesthetic.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 11 |
| `{space.base}` | 16px | 16 |
| `{space.md}` | 24px | 22 |
| `{space.lg}` | 32px | 9 |
| `{space.xl}` | 48px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, footer | 205 occurrences |
| `{radius.sm}` | 4px | Primary Buttons | `Rounded Button` component |
| `{radius.md}` | 8px | Standard Cards | `Card` (About page) |
| `{radius.lg}` | 12px | Feature Cards | `Card` (Home page) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(163, 195, 207, 0.25) 0px 4px 14.4px 0px` | Interactive Cards | About page cards |
| `{shadow.deep}` | `rgba(38, 80, 178, 0.06) 0px 16px 20px 0px` | Floating Surfaces | Home page feature blocks |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://emonster.ca, https://emonster.ca/about
**Spec:** 
- **Background:** `#ffffff` (Secondary) or `#3e76fe` (Primary)
- **Text:** `#255bdf`
- **Border:** 1px solid `#255bdf`
- **Radius:** 4px
- **Padding:** 16px 26px
- **Typography:** Poppins 600 (16px)
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured

### Tier 2: Patterns

#### Service Card
**Role:** Grouping technical service offerings
**Pages observed:** https://emonster.ca
**Spec:** 
- **Background:** `#f5faff`
- **Text:** `#253056`
- **Radius:** 12px
- **Padding:** 16px 24px
- **Typography:** Inter 500 (18px)
**States observed:** Default | Hover: captured (shadow increase)

### Tier 3: Surface-specific

#### Testimonial Card
**Role:** Social proof display
**Pages observed:** https://emonster.ca/about
**Spec:** 
- **Background:** `#ffffff`
- **Border:** 1px solid `rgba(9, 25, 72, 0.08)`
- **Radius:** 8px
- **Padding:** 20px
- **Shadow:** `{shadow.card}`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 80px - 100px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Display type scales from 60px to 32px; 1-column stack |
| Desktop | 1440px | 3-column grid for service cards |

## Imagery & decoration
- **Iconography:** Uses blue diamond bullets for lists.
- **Graphics:** Connected node diagrams (blue/white) to visualize AI and ecosystem integration.
- **Avoids:** Rounded "blob" shapes or organic photography; prefers structured, tech-centric diagrams.

## Do's
- Use **Manrope 800** for all primary page titles.
- Apply **-1.28px letter spacing** to any text larger than 32px.
- Use `#f5faff` for large background sections to break up white space.
- Keep button corners sharp at **4px radius**.
- Use `#3e76fe` for primary "Call to Action" moments.

## Don'ts
- **Wrong:** Using `#000000` for headings. **Right:** Use `#253056`. **Reason:** Pure black breaks the "Enterprise Blue" brand harmony.
- **Wrong:** Using "Pill" (999px) radius for buttons. **Right:** Use 4px. **Reason:** The brand identity is geometric and engineering-focused, not consumer-soft.
- **Wrong:** Using Manrope for body text. **Right:** Use Inter. **Reason:** Manrope's character is too heavy for long-form legibility.

## Similar brands
- IBM (Blue/White engineering focus)
- Stripe (Technical typography and clean sectioning)
- Intercom (Structured card-based layouts)

## Quick start

```css
:root {
  --color-ink-primary: #253056;
  --color-action-primary: #3e76fe;
  --color-canvas-white: #ffffff;
  --color-canvas-ice: #f5faff;
  
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --radius-button: 4px;
  --radius-card: 12px;
  
  --shadow-card: 0px 4px 14.4px 0px rgba(163, 195, 207, 0.25);
}
```

## Agent prompt examples
- "Create a hero section with a `#253056` heading in Manrope 800, 60px size, and a primary button with `#3e76fe` background and 4px border radius."
- "Design a 3-column service grid using cards with `#f5faff` background, 12px border radius, and Inter 500 titles."
- "Generate a section background using a subtle alternate color `#f5faff` to separate it from the white `#ffffff` main canvas."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated crawl.
- Semantic colors (Success/Error) were not present on the marketing pages analyzed.

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