Unparalleled software observability

Design Specification — Unparalleled software observability

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#654DBE). Display headings use a distinct face ("Source Serif Pro:Regular") over the body stack ("Radio Canada Big:Medium",sans-serif). Detected font weights: 400, 500, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://daemon.dev/_assets/v11/6e3b7d134b9c553a088115bb2c779d31d5ea17b3.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Typography

Primary typeface: Radio Canada Big:Medium — stack: "Radio Canada Big:Medium",sans-serif

Display / heading typeface: "Source Serif Pro:Regular" (used for large headings; body uses the primary stack)

Font stacks (most used first)

• "Radio Canada Big:Medium",sans-serif
• "Radio Canada Big:Medium"
• "Radio Canada Big:Regular"
• "Geist:Medium"
• "Inter:Semi Bold"
• "Geist:Bold"
• "Inter:Bold"
• "Geist Mono:Regular"
• "Source Serif Pro:Regular"
• "Geist Mono:Medium"

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0px 4px 8px 0px rgba(0,0,0,0.02),0px 12px 32px 0px rgba(0,0,0,0.04)

Layout

Container max-width: 1200px

Breakpoints

• 1px
• 600px
• 799px
• 800px
• 1280px

Animation & Motion

Easing curves

• var(--timing-function)

Keyframes

@keyframes scroll { 0%{transform:translateX(0%)}100%{transform:translateX(-100%)} }

Animations

• scroll var(--duration) linear var(--delay) var(--iteration-count)
• none

Effects

• backdrop-filter: blur(32px)

Source Design Tokens (CSS custom properties)

:root {
  --banner-height: 48px;
  --banner-height-v2: 40px;
  --full-height-with-banner: calc(100dvh - var(--banner-height));
  --100dvw: 100vw;
  --100dvh: 100vh;
  --content-min-width: 100%;
  --content-min-height: var(--100dvh);
  --letter-spacing: 0px;
  --responsive-font-size: 36px;
  --responsive-letter-spacing: -0.0972px;
  --responsive-line-height: 1.2;
}

Do's and Don'ts

Do

• Do reserve the accent #654DBE for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in "Source Serif Pro:Regular" with tight tracking (-0.48px), and body copy in the primary stack.
• Do stick to the detected font weight(s): 400, 500, 600, 700.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-primary: #B0A2E3;
  --color-accent: #654DBE;
  --color-background: #FFFFFF;
  --color-surface: #F6F8FB;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #C0DFFF;
  --color-border: #DBE0EC;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: "Radio Canada Big:Medium",sans-serif;
  --font-size-display: 80px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-md: 0px 4px 8px 0px rgba(0,0,0,0.02),0px 12px 32px 0px rgba(0,0,0,0.04);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 56px;
  --font-display: "Source Serif Pro:Regular";
  --tracking-display: -0.48px;
  --container-max: 1200px;
}