---
name: Evm Elektramontreal Ca
description: "This site is worth including as a prime example of a clear, accessible, and well-structured utility/error page design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#404040"
  neutral: "#999999"
  line: "rgba(64,64,64,0.1)"

typography:
  display:
    fontFamily: system-sans
    fontSize: 60px
    lineHeight: 1.25
    fontWeight: 300
    letterSpacing: "0"
  heading:
    fontFamily: system-sans
    fontSize: 30px
    lineHeight: 1.3
    fontWeight: 300
    letterSpacing: "0"
  body:
    fontFamily: system-sans
    fontSize: 16px
    lineHeight: 1.625
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A utilitarian error page providing clear diagnostic information through visual icons and concise text.

*A clear, utilitarian system status dashboard for a network error.*

## Colors

High-contrast neutral palette with semantic color accents for status.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#404040`)** — uses `ink` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(64,64,64,0.1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Standard 4px base grid with generous vertical spacing for clarity.

## Elevation & Depth

- Borders: Subtle light gray gradient background for the status diagram section.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** No visible buttons, only links.
- **card:** Three-column status diagram with icons and labels.
- **chip:** Small, pill-shaped error code badge with a light gray background.
- **input:** No form inputs visible.
- **hero:** Large, light-weight headline with a subtext link and timestamp.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```