---
title: "Checkly design system"
variant: extended
source: https://www.checklyhq.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/checklyhq-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Checkly · Design System

> A dark, developer-first canvas for reliability tooling

**Theme:** dark · **Industry:** devtools · **Source:** https://www.checklyhq.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Checkly’s homepage pairs a deep navy canvas with crisp white typography and restrained blue accents. Product interfaces, code samples, and structured content make the monitoring platform feel technical, active, and approachable.

## North star

Keep a deep navy foundation and let clear type, working product UI, and selective blue signals explain the product.

## Overview

A nearly continuous deep navy canvas establishes a focused developer-tool atmosphere across the page. White headlines carry the hierarchy, while muted blue-gray copy stays readable without competing; vivid blue selectively emphasizes linked words, product capabilities, and interface details. Inter is the main voice: large, tightly tracked headlines contrast with compact, practical body text. Monospace captions and code panels introduce a recognizable engineering vocabulary. The hero uses a balanced two-column composition, pairing plain-language messaging and calls to action with a dark product-interface montage. Below, generous vertical section breaks alternate text-led introductions with bordered feature panels, product screenshots, customer proof, and integration tiles. Hairline blue borders define cards and section edges rather than heavy containers. Interfaces remain dark and detailed, with restrained colored status indicators that clarify product behavior instead of turning the page into a bright illustration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Reliability Navy | `#041734` | `--color-reliability-navy` | brand | Dominant page canvas across the hero, section backgrounds, navigation, and footer. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary headings, navigation labels, body text, and high-contrast CTA surfaces. |
| Mist Slate | `#a7babe` | `--color-mist-slate` | neutral | Muted supporting copy and secondary labels on the dark canvas. |
| Border Blue | `#163051` | `--color-border-blue` | surface | Fine borders around cards, links, badges, and interface panels. |
| Signal Blue | `#0075ff` | `--color-signal-blue` | accent | Highlighted headline words, links, navigation details, and small emphasis states. |
| Frost Tint | `#e5eef5` | `--color-frost-tint` | neutral | Subtle pale text and gradient detail; use as a restrained supporting tone. |
| Panel Midnight | `#0a1728` | `--color-panel-midnight` | surface | Dark card and badge surfaces, including subtle gradient transitions. |
| Deep Ink | `#061020` | `--color-deep-ink` | surface | Near-black inset areas within cards and product-interface treatments. |
| Action Blue | `#008ef0` | `--color-action-blue` | accent | Bright blue filled action inside product UI; not the main homepage CTA treatment. |
| Status Green | `#4caf7d` | `--color-status-green` | semantic | Small successful or available status indicators, especially within interface imagery. |
| Badge Violet | `#7c3aed` | `--color-badge-violet` | semantic | Isolated badge or product-interface accent, not a defining page color. |
| Badge Umber | `#984d1b` | `--color-badge-umber` | semantic | Isolated badge accent inside measured interface details, not a brand surface. |
| Card Navy | `#0f2340` | `--color-card-navy` | surface | Raised navigation and card surfaces that remain close to the main navy canvas. |
| Layered Blue | `#102f5f` | `--color-layered-blue` | accent | Subtle blue gradient and interface-panel detail, rather than a large CTA fill. |
| Muted Graphite | `#445458` | `--color-muted-graphite` | neutral | Low-emphasis text or incidental interface detail; not prominent in the screenshot. |
| Pale Code Blue | `#bfdbfe` | `--color-pale-code-blue` | neutral | Light blue text detail in product or code-related content. |
| Terminal Black | `#020b1a` | `--color-terminal-black` | surface | Deep inset card background used to add depth to dark interface panels. |

### Semantic aliases

`--color-canvas` → `#041734` (Reliability Navy) · `--color-surface` → `#ffffff` (Signal White) · `--color-surface-2` → `#0f2340` (Card Navy) · `--color-surface-3` → `#0a1728` (Panel Midnight) · `--color-surface-4` → `#020b1a` (Terminal Black) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#a7babe` (Mist Slate) · `--color-border` → `#163051` (Border Blue) · `--color-accent` → `#0075ff` (Signal Blue) · `--color-accent-2` → `#008ef0` (Action Blue) · `--color-accent-3` → `#102f5f` (Layered Blue) · `--color-on-accent` → `#ffffff` (Signal White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#041734` | 17.84:1 | AAA |
| `#ffffff` | `#0f2340` | 15.73:1 | AAA |
| `#ffffff` | `#0a1728` | 18.01:1 | AAA |
| `#a7babe` | `#041734` | 8.84:1 | AAA |
| `#a7babe` | `#ffffff` | 2.02:1 | fail |
| `#a7babe` | `#0f2340` | 7.8:1 | AAA |
| `#a7babe` | `#0a1728` | 8.93:1 | AAA |
| `#0075ff` | `#041734` | 4.24:1 | AA-large |
| `#0075ff` | `#ffffff` | 4.21:1 | AA-large |
| `#0075ff` | `#0f2340` | 3.74:1 | AA-large |

### Gradients

- `radial-gradient(118% 88% at 0px 0px, rgba(96, 148, 193, 0.16) 0px, rgba(96, 148, 193, 0.05) 38%, rgba(96, 148, 193, 0) 68%)`
- `linear-gradient(145deg, rgb(10, 23, 40) 0%, rgb(6, 16, 32) 100%)`
- `radial-gradient(at 50% 100%, rgba(59, 130, 246, 0.22) 0%, rgba(0, 0, 0, 0) 70%)`
- `linear-gradient(rgb(10, 25, 41), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 300, 600, 700 | Primary interface font for headings, body copy, navigation, links, and buttons. | Inter |
| ui-monospace | `--font-mono` | system | 400, 700, 600, 500 | Code samples, command snippets, and compact technical captions. | Roboto Mono |
| -apple-system | `--font-apple-system` | system | 400, 700, 500, 600 | Fallback font appearing in captured product-interface cards. | Inter |

- **Inter:** Use measured regular-to-bold weights; headlines have tight negative tracking, while the eyebrow uses uppercase lettering.
- **ui-monospace:** Keep monospaced text compact and practical, with regular weight for code and small labels.
- **-apple-system:** System sans-serif appears in embedded UI captures; keep it visually subordinate to the site’s Inter typography.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1 | -0.04em | — | Inter | Hero headline, large and tightly tracked. |
| h2 | 30px | 500 | 1.2 | 0 | — | Inter | Major section headings introducing product themes. |
| h3 | 20px | 400 | 1.4 | 0 | — | Inter | Feature and content-card headings. |
| h4 | 18px | 400 | 1.56 | 0 | — | Inter | Smaller supporting headings within sections. |
| body | 14px | 400 | 1.63 | 0 | — | Inter | Explanatory copy, descriptions, and supporting paragraphs. |
| caption | 12px | 400 | 1.63 | 0 | — | ui-monospace | Compact monospace labels and technical metadata. |
| button | 14px | 400 | 1.43 | 0 | — | Inter | CTA labels and compact action text. |
| nav | 13px | 500 | 1.54 | 0 | — | Inter | Top-level navigation and menu labels. |
| link | 14px | 500 | 1.43 | 0 | — | Inter | Inline and standalone action links. |
| eyebrow | 11px | 600 | 1.82 | 0.05em | uppercase | Inter | Small uppercase section labels above headings. |
| code | 12px | 400 | 1.63 | 0 | — | ui-monospace | Commands and code snippets in product demonstrations. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 40 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width —.

Use a centered content area with broad horizontal margins and a clear desktop two-column hero. Align headlines and copy to the left; let product UI occupy the opposing column or span a feature area. Long-form sections follow a deliberate vertical rhythm, alternating text-led introductions with screenshot panels, feature grids, and bordered content bands. Keep information density comfortable: ample separation between major blocks, compact spacing inside technical cards, and no invented fixed widths where measurements are unavailable.

## Shape & elevation

- Radius: button `8px` · card `12px` · badge `4px` · nav `6px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `inset` (nav): `rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset, rgba(0, 8, 20, 0.72) 0px 24px 60px -12px, rgba(0, 8, 20, 0.6) 0px 8px 24px -8px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.18) 0px 8px 24px 0px, rgba(0, 0, 0, 0.32) 0px 32px 72px 0px`
- Shadow `inset-2` (card): `rgba(0, 0, 0, 0.25) 0px 4px 12px 0px, rgba(0, 0, 0, 0.15) 0px 1px 3px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset`
- Shadow `xl-2` (nav): `rgba(0, 0, 0, 0) 0px 0px 100px -20px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.5) 0px 2px 12px 0px`
- Shadow `xl-3` (card): `rgba(0, 0, 0, 0.55) 0px 2px 20px 0px, rgba(59, 130, 246, 0.15) 0px 0px 40px -16px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with depth concentrated in product mockups and navigation. Use fine blue borders to define cards and section edges, then reserve soft, deep shadows for floating interface panels. Dark inset surfaces create layered UI without bright elevation effects; avoid applying heavy shadows to every content block.

## Imagery

The page relies on product imagery rather than lifestyle photography: terminal windows, monitoring dashboards, code snippets, status tiles, and integration marks. Frame screenshots as dark, detailed interface panels against the navy canvas, with subtle blue glows or connectors where visible. Small green, red, and other status accents belong to the product UI and should remain subordinate to the brand palette. Avoid decorative imagery that distracts from the working-tool narrative.

## Components

### Primary navigation

White Inter labels sit directly on the navy canvas; compact dropdown cues and a contrasting white Start for free button anchor the right side.

### Hero actions

Pair an outlined Book a demo action with a white Start for free CTA, followed by a dark monospace command chip.

### Product-interface montage

Stack dark terminal and monitoring panels with fine blue borders, compact technical text, and small status-color details.

### Feature cards

Use dark navy surfaces, hairline blue borders, concise headings, and product content; retain a technical rather than decorative feel.

### Section eyebrow

Set a small uppercase Inter label above major headings to mark themes without adding visual weight.

### Integration tiles

Arrange partner marks and concise descriptions in a dense, bordered grid over the dark canvas.

### Code snippet

Present commands and code in compact ui-monospace text on a near-black inset surface.

### Measured component styles

- **Primary button** (“Root Cause Analysis”): background #008ef0 · text #ffffff · radius 6px · padding 6px 12px · 500 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(59, 130
- **Secondary button** (“Product”): transparent background · text #ffffff · border 1px solid · radius 8px · padding 10px 16px · 400 14px Inter
- **Link** (“Slack Real-time alerts in your team chan”): transparent background · text #e2e8f0 · border 1px solid #163051 · radius 0px · padding 20px · 400 16px Inter
- **Input** (“Create a Playwright check for /payments,”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Inter
- **Card** (“Claude Code claude-opus-4 Monitor our ch”): background #0e0d0c · text #e2e8f0 · border 1px solid #162742 · radius 12px · padding 0px · 400 16px -apple-system · shadow rgba(0, 0, 0, 0.5) 0px 2px 12px 0px
- **Badge** (“Status”): transparent background · text #4b5563 · border 1px solid #192736 · radius 4px · padding 2px 8px · 400 9px Inter
- **Navigation item** (“Product DETECT Uptime Monitoring Measure”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Inter

## Do

- Use Reliability Navy as the continuous page foundation.
- Reserve Signal Blue for links and focused emphasis.
- Set large headlines in Inter with tight tracking.
- Use monospace only for code and technical metadata.
- Frame product screenshots with restrained borders and shadows.
- Keep status colors small and inside product UI.
- Separate major content blocks with generous vertical breathing room.

## Don't

- Do not introduce bright full-width section backgrounds.
- Do not use gradients as the primary visual identity.
- Do not turn every card into a strongly elevated panel.
- Do not use status colors as broad decorative fills.
- Do not replace the product UI with lifestyle photography.
- Do not make secondary copy compete with the headlines.
- Do not invent measured spacing, radii, or container widths.

## Agent prompt

Build a new developer-tool page on a deep Reliability Navy (#041734) canvas. Use Signal White (#ffffff) for primary headings and controls, Mist Slate (#a7babe) for supporting copy, and Signal Blue (#0075ff) sparingly for links and emphasis. Set the main interface in Inter, reserving monospace for commands and code. Establish a clear headline-and-copy column beside a dark product screenshot or interface composition. Organize lower content into spaced sections with concise introductions, bordered feature cards, practical code panels, and restrained integration tiles. Use Border Blue (#163051) for hairlines and Panel Midnight (#0a1728) or Terminal Black (#020b1a) for inset surfaces. Keep shadows subtle and focused on product panels. Let small green or other semantic colors appear only as meaningful UI statuses. Avoid decorative clutter and oversized gradients.

## Source CSS custom properties (selected)

```css
--m-ease: cubic-bezier(0.585,-0.195,0.245,1.25);
--radius: 0.5rem;
--tw-text-opacity: 1;
--shiki-color-text: #eeeeee;
--tw-bg-opacity: 1;
--tw-border-opacity: 1;
--hubspot-form-bg: rgba(255,255,255,0.1);
--hubspot-form-border: rgba(128,187,255,0.2);
--hubspot-form-text: white;
--hubspot-form-button-bg: #0068e0;
--hubspot-form-radius: 8px;
--font-inter: 'Inter', 'Inter Fallback';
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/checklyhq-com