Invary
A cool, defense-grade cybersecurity marketing interface built on a pale blue-gray canvas with a single warm coral accent. The system reads as precise and technical — large tight Inter display headlines, light Work Sans body copy, all-caps Roboto Mono UI labels, soft-rounded white cards lit by inner blue-gray glows, and near-black \"secure zone\" bands that punctuate the long-scroll page. Brand voltage comes from the coral CTA (#f7604a) and from a 3-D product-diagram illustration shown directly in the hero rather than from decorative color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
61.44px · 600 · 1.0
The quick brown fox jumps
title
26.88px · 400 · 1.2
The quick brown fox jumps
body
19.2px · 300 · 1.77
The quick brown fox jumps
button
15.36px · 500 · 1.77
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 5px | |
| xs | 7px | |
| sm | 10px | |
| md | 12px | |
| lg | 19px | |
| xl | 29px | |
| xxl | 34px | |
| xxxl | 38px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 3px | |
| sm | 5px | |
| md | 10px | |
| lg | 14px | |
| xl | 17px | |
| xxl | 19px | |
| xxxl | 29px |
FAQ
- What colors does Invary use?
- Invary's core palette includes #f7604a, #ff7662, #434c62, #394045, #5c6479. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Invary DESIGN.md.
- What font does Invary use?
- Invary's primary typeface is Inter Variable. 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 Invary design system?
- A cool, defense-grade cybersecurity marketing interface built on a pale blue-gray canvas with a single warm coral accent. The system reads as precise and technical — large tight Inter display headlin…