Hex
A data-platform marketing surface built on a near-monochrome deep-violet ink palette with an editorial display voice — a wide grotesque \"PP Formula\" headline face paired with a serif-italic flourish and an ultralight \"Cinetype\" body. The system reads as precise and engineered: sharp 1–3px corners, thin hairline borders, heavily-floated product-UI cards (real Hex notebooks shown in-page), and a viridis data-viz spectrum that supplies the only chromatic voltage inside charts. Brand energy comes from typographic contrast and embedded product chrome rather than from UI accent color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
51.2px · 700 · 1.3
The quick brown fox jumps
heading-lg
28px · 800 · 1.3
The quick brown fox jumps
heading-md
20px · 600 · 1.3
The quick brown fox jumps
eyebrow
16px · 600 · 1.4
The quick brown fox jumps
body
24px · 300 · 1.5
The quick brown fox jumps
button
14px · 400 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 10px | |
| md | 12px | |
| lg | 16px | |
| xl | 18px | |
| xxl | 20px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sharp | 1px | |
| xs | 2px | |
| sm | 3px | |
| md | 4px | |
| lg | 6px | |
| xl | 8px | |
| input | 7px | |
| pill | 99px | |
| full | 9999px |
FAQ
- What colors does Hex use?
- Hex's core palette includes #01011b, #31263b, #43394c, #717a94, #5e6687. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Hex DESIGN.md.
- What font does Hex use?
- Hex's primary typeface is PP Formula SemiExtended. 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 Hex design system?
- A data-platform marketing surface built on a near-monochrome deep-violet ink palette with an editorial display voice — a wide grotesque "PP Formula" headline face paired with a serif-italic flourish…