Chainguard
A high-trust developer-security marketing surface built on white canvas with near-black ink, electric-violet primary actions, and bold Gellix display headlines set with tight negative tracking. The system reads as engineered and confident — square-cornered violet CTAs, generously padded white stat and product cards on 16px-radius surfaces, a pastel-violet announcement bar, and a deep near-black footer that closes the page. Brand voltage comes from the violet accent and the heavy Gellix display face rather than from decorative imagery.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
64px · 400 · 1.0
The quick brown fox jumps
heading
40px · 400 · 1.2
The quick brown fox jumps
body
14px · 400 · 1.714
The quick brown fox jumps
button
14px · 500 · 1.429
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 6px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| ml | 20px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 40px | |
| section | 48px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| lg | 16px |
FAQ
- What colors does Chainguard use?
- Chainguard's core palette includes #0d161c, #6226fb, #3200af, #9d7af6, #3443f4. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Chainguard DESIGN.md.
- What font does Chainguard use?
- Chainguard's primary typeface is Gellix. 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 Chainguard design system?
- A high-trust developer-security marketing surface built on white canvas with near-black ink, electric-violet primary actions, and bold Gellix display headlines set with tight negative tracking. The s…