Void Navy
#041734Page background, hero canvas, section bands — the deep-space base on which all other UI floats
Checkly
checklyhq.comWebsite preview
The design language
Checkly lives in deep midnight-navy — a near-black cosmic canvas where white type floats like HUD readouts and one vivid electric blue acts as the signal accent. The system is deliberately sparse: hairline light-gray borders define structure instead of heavy shadows, product UI is shown as floating light-themed cards suspended on the dark void, and code blocks are treated as first-class content in JetBrains Mono. Inter at weight 300 gives headlines a whisper-quiet authority that lets the technical subject matter do the talking, while weight 500–600 carries operational UI. The overall feel is mission control at altitude — minimal chrome, maximal legibility, one accent doing all the semantic work.
Color palette
brand
Signal Blue
#0075ffBlue text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
Hub Navy
#002652Secondary surface tint, logo wordmark — a slightly lighter shade of the void used for depth
accent
Probe Cyan
#008ef0Hover/active accent variant for buttons and interactive states
Status Green
#4ade80Green text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color
neutral
Orbit Slate
#0f172aCard surfaces, inset panels, terminal block backgrounds — the next level up from the void
Deck Charcoal
#1a1f36Elevated card surfaces, nested panel backgrounds — sits above Orbit Slate for layered depth
Deep Hull
#1f2937Borders on dark surfaces, section dividers within dark bands
Steel Edge
#374151Borders and dividers on cards and panels — the most common structural border
Console Gray
#445458Secondary body text, muted labels, icon fills — readable on dark without competing with white headings
Slate Mute
#64748bHelper text, captions, tertiary metadata — drops information below the primary read
Mist
#a7babeDe-emphasized text, disabled labels, low-priority inline content
Halo
#e5e7ebHairline borders on dark surfaces, subtle dividers, the dominant structural line color
Pure White
#ffffffPrimary text, filled button background, logo fills — maximum contrast against the void
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
60px · 500 · 1 · -2.4px trackingThe quick brown fox jumps
heading-lg
48px · 500 · 1.2 · -1.2px trackingThe quick brown fox jumps
heading
32px · 500 · 1.25 · 0px trackingThe quick brown fox jumps
text-30
30px · 600 · 1.2The quick brown fox jumps
heading-sm
24px · 500 · 1.33 · 0px trackingThe quick brown fox jumps
subheading
20px · 700 · 1.4 · 0px trackingThe quick brown fox jumps
text-18
18px · 500 · 1.56The quick brown fox jumps
body
16px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 300, 400, 500, 600, 700
- Sizes
- 10, 12, 14, 16, 18, 20, 24, 30, 32, 48, 60
- Line height
- 1.20–1.63 (display 1.20, body 1.50, small 1.43)
- Letter spacing
- -0.0400em at 60px, -0.0250em at 48px, 0.0500em at 10–12px (tracked-out micro-labels)
- Fallback
- Inter (Google Fonts)
- Features
- "ss01" on, "cv11" on
Primary UI and heading typeface. Weight 300 for display headlines creates whisper-quiet authority; weight 400 for body; weight 500–600 for nav, buttons, and labels.
Additional typeface
JetBrains Mono
- Weights
- 400
- Sizes
- 10, 12, 16
- Line height
- 1.50–1.63
- Fallback
- JetBrains Mono (JetBrains), or Fira Code
Code blocks, terminal output, CLI commands like `npx checkly init`. The custom font signal 'this is executable'.
Additional typeface
ui-monospace
- Weights
- 400, 500
- Sizes
- 11, 12, 14
- Line height
- 1.33–1.63
- Fallback
- SF Mono, Menlo, Consolas, monospace
System monospace fallback for inline code, tab indicators, secondary code contexts
Additional typeface
Consolas
- Weights
- 400
- Sizes
- 10px
- Line height
- 1.5
Consolas — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 12px
Border radius
tags
9999pxcards
12pxinputs
8pxbuttons
8pxcode-blocks
12pxSpacing scale
1px2px4px5px6px8px10px12px14px16px20px24px32px40px41px48px56px64px72px73px80px96px104px112px144px183px224pxGuidelines
Do
- Use weight 300 Inter at 48–60px for display headlines — the whisper-weight is the signature
- Use #0075ff Signal Blue exclusively for accent text, highlighted words, icon strokes, and interactive links — never for backgrounds
- Use 9999px radius for all status pills, environment tags, and inline badges
- Use 8px radius for all buttons and 12px for cards — the 8/12 split is consistent across the system
- Use #e5e7eb at low opacity (or #374151 on dark surfaces) for hairline borders instead of heavy shadows
- Use JetBrains Mono for any code, CLI commands, or terminal output — never let Inter render code
- Use white (#ffffff) filled buttons as the primary CTA on the dark canvas — they read as 'switched on' controls
Don’t
- Don't use shadows as the primary structural method — use hairline borders in #374151 or #e5e7eb instead
- Don't use #0075ff as a large filled background — it's an accent, not a surface
- Don't use weight 700 or 800 for headlines — the system speaks at weight 300, not weight 900
- Don't use rounded radii above 16px on cards or panels — the 8/12/16 progression is the system
- Don't introduce new chromatic colors beyond Signal Blue, Status Green, and syntax-token colors
- Don't use Inter for code — always JetBrains Mono or system monospace
- Don't add gradients to UI surfaces — the system is flat with one subtle white-to-blue wash as the only gradient
Components
Primary CTA Button (White Filled)
Main conversion action — 'Start for free', 'Book a demo'White (#ffffff) background, Void Navy (#041734) text, 8px radius, Inter weight 500 at 14–16px, padding 10px 20px. Inverts against the dark canvas like a lit control panel switch.
Secondary CTA Button (Outlined)
Alternative action alongside primary CTATransparent background, 1px border in #cfdfec or #041734, white text, 8px radius, padding 10px 20px. Low-emphasis companion that defers to the filled button.
Pill Badge / Status Tag
Environment labels, status indicators, inline tags9999px radius, 4–8px vertical padding, 10–12px horizontal padding. Background varies: green (#4ade80) for 'passing/available', dark navy for 'test/staging/prod' code blocks, subtle gray for category labels. Inter at 10–12px weight 500, letter-spacing 0.05em.
Terminal / CLI Block
Code snippets, install commands, config examplesOrbit Slate (#0f172a) background, 12px radius, padding 16–24px. JetBrains Mono at 12–16px, line-height 1.63. White text with green (#4ade80) and light blue (#bfdbfe) syntax accents. Often prefixed with a copy icon.
Embedded Product Screenshot Card
Dashboard previews, feature demonstrations, product evidenceWhite (#ffffff) background, 12–16px radius, subtle box-shadow rgba(0,0,0,0.25) 0px 25px 50px -12px. Floats on the dark canvas as a bright window into the product. Contains light-themed UI (charts, tables, status badges in green/red).
Navigation Bar
Top-level site navigationTransparent or slightly tinted dark background, Inter weight 500 at 14px, white text, 24px horizontal padding on nav items, 8px vertical padding. Logo left, links center, auth actions right. Sticky on scroll.
Section Heading with Blue Accent Words
Display-level section titlesInter weight 300 at 48–60px, white (#ffffff), letter-spacing -0.025em to -0.04em. Select words rendered in Signal Blue (#0075ff) to create semantic emphasis without underlining. Line-height 1.00–1.20.
Feature Card (Dark Surface)
Three-column feature highlights, capability summariesOrbit Slate (#0f172a) or Deck Charcoal (#1a1f36) background, 12px radius, 24px padding, 1px border in #374151. Heading in white weight 500 at 20–24px, body in Console Gray (#445458) at 16px.
Trust Logo Bar
Social proof — customer/partner logosSingle row or two-row grid of company logos in white or light gray on the dark background. Logos desaturated to grayscale or rendered in white. No borders or containers — logos float directly on the section.
Code Syntax Token
Inline and block code highlightingColored tokens within terminal blocks: keywords in #d8b4fe (purple), strings in #4fd785 (green), numbers in #fde047 (yellow), function names in #bfdbfe (light blue), comments in #6094c1 (muted blue). Against the Orbit Slate background.
Command Input Pill
CLI install command display in heroDark rounded container with a copy affordance, monospace text showing the install command. Centered below hero CTAs as a secondary call-to-action. 12px radius, subtle border.
Chat Widget Bubble
Support chat launcher (bottom-right)Signal Blue (#0075ff) circular button with a blue glow shadow rgb(0,117,255) 0px 25px 50px -12px. Fixed position bottom-right corner.
Surfaces & elevation
Level 0
Void
#041734Page and section background — the deep-space base
Level 1
Orbit
#0f172aCard surfaces, terminal blocks, code panels
Level 2
Deck
#1a1f36Elevated nested panels, tab content backgrounds
Level 3
Product Light
#ffffffEmbedded product screenshot cards — light-themed UI floating on the dark canvas
The system is intentionally low-elevation. Structural separation comes from hairline borders (1px in #374151 or #e5e7eb) and surface color stepping (#041734 → #0f172a → #1a1f36), not from shadow depth. Shadows appear only on embedded product cards that need to visually 'float' as windows into the light-themed product UI, and on the chat widget. Everything else is flat with borders.
Embedded product card
rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
Standard surface card
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
Chat widget
rgb(0, 117, 255) 0px 25px 50px -12px
Inset dark 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
Layout & imagery
Layout
The page is full-bleed dark navy with max-width 1200px content containers centered within sections. The hero is a centered text stack (headline → subhead → dual CTA → CLI command) with the raccoon illustration radiating connection lines as the visual anchor. Below the hero, sections alternate between text-left/visual-right 2-column patterns and 3-column feature card grids. Product screenshots are embedded as light cards spanning 2/3 to full width. The trust logo bar sits as a full-width band. Navigation is a top bar with logo left, links center, auth actions right. The overall rhythm is generous vertical breathing room (80px section gaps) with dense information packed into each section. Sections are separated by slight background color shifts within the navy family rather than hard dividers.
Imagery
The visual language is predominantly iconographic and abstract rather than photographic. The hero features a stylized illustration of the raccoon mascot at the center of a network of curved connection lines radiating outward to floating tool/tech icons (GitHub, Slack, browser logos). Customer logos appear as monochrome white wordmarks in a trust bar. Product evidence comes from embedded light-themed dashboard screenshots that float as cards on the dark canvas. No lifestyle photography, no human faces, no real-world environments — the aesthetic is diagrammatic and infrastructural.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (primary), #445458 (secondary), #64748b (muted) - background: #041734 (page), #0f172a (card), #1a1f36 (elevated) - border: #374151 (structural), #e5e7eb (hairline on dark) - accent: #0075ff - primary action: #041734 (filled action) **Example Component Prompts** 1. *Hero section*: #041734 background. Display headline at 60px Inter weight 300, #ffffff, letter-spacing -2.4px. Subhead at 18px Inter weight 400, #445458. White filled button (8px radius, 10px 20px padding, #041734 text) beside a outlined button (1px #cfdfec border, #ffffff text). CLI command in a dark pill below using JetBrains Mono 14px. 2. *Feature card grid*: 3-column grid on #041734 background. Each card: #0f172a background, 12px radius, 24px padding, 1px #374151 border. Heading at 20px Inter weight 500, #ffffff. Body at 16px Inter weight 400, #445458. 3. *Terminal code block*: #0f172a background, 12px radius, 16px padding. JetBrains Mono 12px, line-height 1.63. Keywords in #d8b4fe, strings in #4fd785, function names in #bfdbfe, base text #ffffff. 4. *Embedded product screenshot card*: #ffffff background, 16px radius, shadow rgba(0,0,0,0.25) 0px 25px 50px -12px. Contains light-themed dashboard UI with green (#4ade80) status bars and gray data tables. 5. *Status pill badge*: 9999px radius, 4px 10px padding, #4ade80 background for 'passing' or #0f172a for 'test/staging/prod'. Inter 10px weight 500, letter-spacing 0.5px, dark or white text.
Gradient System
The system uses exactly one gradient: a subtle white-to-blue wash (linear-gradient(rgb(255,255,255), rgba(96,148,193,0.2))) applied as a soft atmospheric overlay. No other gradients are used in UI surfaces. Signal Blue (#0075ff) is always rendered as a solid color, never as a gradient fill. This restraint is intentional — the dark canvas should feel like empty space, not a colored backdrop.
Similar brands
Vercel
Same near-black canvas with white type and a single vivid accent color for interactive emphasis, same flat low-elevation aesthetic
Linear
Same developer-tool dark UI with weight-300 display headlines, hairline borders, and Inter typography at whisper volumes
Railway
Same deep navy infrastructure-tool aesthetic with code-as-first-class content and minimal chrome
PlanetScale
Same dark-mode devtools pattern with floating product screenshots as evidence cards on a dark background
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
