# Mhelpdesk Design System

> High-contrast utility meets airy professional service management, anchored by deep navy surfaces and a signature light-weight Arial display.

**Source:** https://mhelpdesk.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Mhelpdesk utilizes a high-contrast palette of deep navy (#15212d) and crisp white (#ffffff), punctuated by a functional primary blue (#3276b1). The typography is strictly Arial, but achieves distinction through a signature 300-weight display style for large headlines, contrasting with heavy 700-weight subheads. Layouts rely on generous vertical rhythm (88px section padding) and soft-shadowed cards (8px radius) to organize complex service data. The system is functional and utilitarian, prioritizing legibility and clear calls to action over decorative flourishes.

## Signature DNA
1. **Lightweight Display Typography** (Arial at weight 300 for H1 and H2 display roles creates a sophisticated, airy feel for a technical product, observed on all analyzed pages.)
2. **Deep Navy Foundations** (The use of #15212d for full-width surface bands provides a high-contrast anchor for white text and primary blue accents.)
3. **Soft-Shadowed Floating Cards** (Content is organized into white cards with a 1px #e4e8ec border and a subtle 24px-blur shadow, creating depth against light gray #f7f9fb backgrounds.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background, card surfaces, button text | 96 | 1 | Computed Style |
| `{color.text}` | `#333333` | Primary body text and headings | 138 | 1 | `--text` |
| `{color.surface.light}` | `#f7f9fb` | Alternating section backgrounds | 6 | 1 | `--light` |
| `{color.border}` | `#e4e8ec` | Card outlines and dividers | 39 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#3276b1` | Primary CTA text, links, and brand accents | 48 | 1 | `--blue` |
| `{color.surface.dark}` | `#15212d` | High-contrast section backgrounds (Footer/Hero) | 3 | 0.6 | Computed Style |
| `{color.text.inverse}` | `#d8ecff` | Deemphasized text on dark surfaces | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Arial | 300, 400, 700 | All roles (Display, Heading, Body) | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.mega}` | 82px | 83.64px | normal | 300 | Primary Hero H1 | `h1` |
| `{text.display.lg}` | 52px | 57.2px | normal | 300 | Section H2 | `h2` |
| `{text.heading.md}` | 36px | 39.6px | normal | 700 | Strong emphasis | `strong` |
| `{text.heading.sm}` | 22px | 34.1px | normal | 700 | Card/Sub-section titles | `h3` |
| `{text.body.md}` | 16px | 24.8px | normal | 400 | Default body copy | `section.hero` |
| `{text.eyebrow}` | 16px | 24.8px | 1.28px | 700 | Section labels (Caps) | `div.eyebrow` |
| `{text.button}` | 16px | 24.8px | normal | 700 | CTA labels | `a.button.light` |
| `{text.caption}` | 14px | 20px | normal | 400 | Footer/Small labels | `footer` |

### Principles
1. **Display weight is always 300.** Large headlines must never use bold weights to maintain the "airy" brand signature.
2. **Eyebrows use wide tracking.** Section labels are set in 700 weight with 1.28px letter spacing for clear hierarchy.
3. **High contrast for legibility.** Text on dark backgrounds (#15212d) must be white or high-tint blue (#d8ecff).

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 30 |
| `{space.sm}` | 13px | 12 |
| `{space.md}` | 16px | 63 |
| `{space.lg}` | 28px | 39 |
| `{space.section}` | 88px | 21 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 177 occurrences |
| `{radius.sm}` | 3px | Buttons and inputs | Rounded Button spec |
| `{radius.md}` | 8px | Content cards | Card component spec |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.04) 0px 8px 24px 0px` | Floating content cards | Card component |

## Components

### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All analyzed pages
**Spec:** Background: `#ffffff` | Text: `#3276b1` | Border: 2px `#ffffff` | Radius: `3px` | Padding: `13px 22px` | Typography: `16px/700`
**States observed:** Default | Hover: Not captured | Active: Not captured

### Tier 2: Patterns
#### Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** All analyzed pages
**Spec:** Background: `#ffffff` | Text: `#333333` | Border: 1px `#e4e8ec` | Radius: `8px` | Padding: `28px` | Shadow: `{shadow.card}`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific
#### Surface (Light)
**Role:** Alternating content sections
**Pages observed:** All analyzed pages
**Spec:** Background: `#f7f9fb` | Text: `#333333` | Padding: `88px 0px` | Radius: `0px`
**States observed:** Static

#### Surface (Dark)
**Role:** High-impact bands and footers
**Pages observed:** All analyzed pages
**Spec:** Background: `#15212d` | Text: `#ffffff` | Padding: `88px 0px` | Radius: `0px`
**States observed:** Static

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Padding | 88px (Vertical) |
| Card Grid Gap | 28px |

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

## Imagery & decoration
Mhelpdesk uses high-quality photography of service professionals in the field, often overlaid with dark gradients to ensure text legibility. UI screenshots are used frequently to demonstrate product value, always contained within the standard 8px rounded card pattern.

## Do's
- Use Arial 300 for all H1 and H2 headlines.
- Apply the 8px radius and subtle shadow to all content-bearing cards.
- Maintain 88px vertical spacing between major page sections.
- Use #3276b1 for primary interactive elements like text links and button labels.
- Ensure all white cards sit on either #f7f9fb or #ffffff surfaces.

## Don'ts
- **Wrong:** Using Arial 700 for H1 headlines. **Right:** Arial 300. **Reason:** The lightweight display is a core brand signature.
- **Wrong:** Using #3276b1 as a full-width background color. **Right:** Use #15212d for dark bands. **Reason:** Blue is reserved for functional accents.
- **Wrong:** Applying shadows to buttons. **Right:** Keep buttons flat with 2px borders. **Reason:** Shadows are reserved for card-level elevation only.

## Similar brands
- Jobber
- ServiceTitan
- Housecall Pro

## Quick start

### CSS Custom Properties
```css
:root {
  --blue: #3276b1;
  --text: #333333;
  --light: #f7f9fb;
  --navy: #15212d;
  --border: #e4e8ec;
  --radius-card: 8px;
  --shadow-card: 0px 8px 24px 0px rgba(0, 0, 0, 0.04);
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "primary": { "value": "#3276b1" },
    "font": { "main": { "value": "#333333" } },
    "surface": {
      "light": { "value": "#f7f9fb" },
      "dark": { "value": "#15212d" }
    }
  }
}
```

## Agent prompt examples
- "Create a feature section with a #f7f9fb background, 88px vertical padding, and three 8px rounded white cards with #e4e8ec borders."
- "Generate a hero section using a background image, a navy #15212d overlay, and an H1 headline in Arial 300 at 82px."
- "Design a primary button with a white background, #3276b1 text, and a 3px border radius."

## Known gaps
- Hover and active states for buttons were not captured in the source evidence.
- Specific mobile-only typography tokens were not explicitly declared in the CSS variables.
- Semantic colors (Success/Error) were not observed on the marketing pages analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://mhelpdesk.com | 1440px | 2026-06-06 |
| Pricing | https://mhelpdesk.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://mhelpdesk.com | 390px | 2026-06-06 |