HyperDX
A developer-first observability product site built on a near-black canvas (#0f1215) with terminal-green outlined CTAs (#50fa7b) and Inter throughout. The system reads as engineered, dense, and console-like — real product UI (session replays, log streams, status-coded events) is shown directly inside the page rather than abstracted into marketing illustration. Brand voltage comes from the terminal-green accent against deep dark surfaces and from monospaced-feeling product chrome shown at scale.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
48px · 700 · 1.167
The quick brown fox jumps
title
28px · 500 · 1.2
The quick brown fox jumps
subtitle
18px · 500 · 1.5
The quick brown fox jumps
body
13px · 400 · 1.45
The quick brown fox jumps
button
13px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 48px | |
| xxl | 64px | |
| section | 80px | |
| section-lg | 128px | |
| section-xl | 160px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 6px | |
| md | 8px | |
| pill | 25px | |
| xl | 32px |
FAQ
- What colors does HyperDX use?
- HyperDX's core palette includes #50fa7b, #0f1215, #000000, #212529, #373b3e. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the HyperDX DESIGN.md.
- What font does HyperDX use?
- HyperDX's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the HyperDX design system?
- A developer-first observability product site built on a near-black canvas (#0f1215) with terminal-green outlined CTAs (#50fa7b) and Inter throughout. The system reads as engineered, dense, and consol…