# Evm Elektramontreal Ca · Design system migration spec

> Source: https://evm.elektramontreal.ca/en  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a clear, accessible, and well-structured utility/error page design.

## 1. Identity DNA

This error page is not an interruption; it is a service, like a well-organized tool bench in a workshop. Its identity is built entirely from diagnostic clarity, providing immediate, actionable information in a calm, utilitarian format that prioritizes function over form.

**One-liner:** A utilitarian error page providing clear diagnostic information through visual icons and concise text.
**Keywords:** error · diagnostic · informative · utility · clarity
**Analogy:** A clear, utilitarian system status dashboard for a network error.

## 2. Color

The palette operates with the stark, high-contrast efficiency of a technical schematic. It uses a foundational white and dark gray for absolute legibility, reserving semantic red and green exclusively for system status signals.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#404040` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(64,64,64,0.1)` | divider |

**Color principle:** High-contrast neutral palette with semantic color accents for status.

Color is used not for decoration but as a direct, non-decorative carrier of critical system information.

## 3. Typography

Typography here is purely systemic, employing a highly legible sans-serif stack that communicates with the voice of a technical manual. A dramatic contrast in scale defines the hierarchy, with a very light-weight display headline making a calm, declarative statement above the body text.

- **Display:** system-sans
- **Body:** system-sans
- **Mono:** system-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.25 | 300 | 0 | Main error headline |
| heading | 30px | 1.3 | 300 | 0 | Section headings |
| body | 16px | 1.625 | 400 | 0 | Body text and explanations |

## 4. Spacing

Spacing follows a strict 4px base grid, establishing a reliable, predictable rhythm that allows generous vertical margins to create clarity between informational sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with generous vertical spacing for clarity.

## 5. Surfaces

Surfaces are flat and purposeful, avoiding depth to maintain a clean, document-like interface. The only subtle dimension is a light gray gradient background that defines the status diagram section without adding complexity.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Subtle light gray gradient background for the status diagram section.

## 6. Layout

The core layout is a centered, three-column diagnostic diagram that maps system components horizontally, creating a clear visual flow. On smaller viewports, this structure gracefully collapses into a single vertical stack, preserving its informational sequence.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Three-column horizontal status diagram that collapses to a single-column vertical stack on mobile.

## 7. Motion & Interaction

Motion is minimal and strictly functional, confined to standard CSS transitions on interactive elements. The philosophy is one of quiet confirmation—hover states provide a subtle color shift as acknowledgment, nothing more.

- **Durations:** micro 150ms · small 0ms · medium 0ms
- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`
- **Patterns:**
  - Standard CSS transitions for link hover states.

- **Hover:** Subtle color change on links.
- **Click:** Standard link navigation.
- **Transition:** All elements use a 0.15s transition.
- **Keyboard:** Standard browser focus outlines.

## 8. Voice & Don'ts

The editorial voice is direct, technically precise, and informational, using headlines as declarative statements and links for navigation. It avoids playful language, unexplained jargon, and dense paragraphs, trusting the clarity of its structured layout.

- **Tone:** Direct, informative, and technically precise.
- **Headline style:** Large, light-weight, and declarative.
- **CTA style:** Informational links rather than call-to-action buttons.
- **Avoid:** Jargon without explanation / Playful or informal language / Dense, unbroken paragraphs of text / Vague instructions / Overuse of bold or strong emphasis

### Don'ts
- ❌ Don't use decorative fonts — screenshot shows a highly legible system sans-serif stack.
- ❌ Don't add complex shadows or depth — screenshot shows a flat design with only a subtle gradient background.
- ❌ Don't use a dark color scheme — screenshot shows a bright white background with dark gray text.
- ❌ Don't hide the error code — screenshot shows it prominently in a small, distinct badge next to the headline.
- ❌ Don't use multiple accent colors — screenshot uses a limited palette where red and green are strictly for status icons.
- ❌ Don't create a cluttered layout — screenshot shows generous whitespace and a clear visual hierarchy with a large title.

The design deliberately forgoes decorative elements, complex shadows, dark modes, and prominent call-to-action buttons, adhering to a strict utility-first principle.

## System Prompt (paste into AI tool)

```
This is a utilitarian error page design focused on clarity and information delivery. The palette is neutral, using #FFFFFF for background and #404040 for primary ink, with semantic green and red for status. Typography is a system sans-serif stack, with a very light 60px display weight for the main headline. The layout is a centered container that switches from a 3-column status diagram to a vertical stack on mobile. Critical donts: don't use decorative fonts, don't add complex shadows, and don't hide the specific error code. The design prioritizes immediate recognition of a system failure and provides clear, actionable instructions.
```
