Twingate
A dark, engineering-confident Zero Trust security interface built on a near-black canvas (#0e0f11) with a single high-voltage chartreuse-yellow primary CTA (#eef35f), TT Hoves light-weight display headlines, and product-UI fragments rendered inside softly-rounded cards. The system reads as technical and modern — generous whitespace, monochrome dark surfaces, violet/lavender accent moments around product chrome, and pill-shaped action buttons that pop against the dark field.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
55px · 300 · 1.1
The quick brown fox jumps
display-lg
48px · 400 · 1.2
The quick brown fox jumps
title
22px · 400 · 1.5
The quick brown fox jumps
body
16px · 500 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 10px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 40px | |
| section | 48px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 8px | |
| md | 12px | |
| lg | 20px | |
| xl | 24px | |
| pill | 50px | |
| full | 1000px |
FAQ
- What colors does Twingate use?
- Twingate's core palette includes #eef35f, #000000, #0e0f11, #141617, #121315. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Twingate DESIGN.md.
- What font does Twingate use?
- Twingate's primary typeface is TT Hoves Light. 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 Twingate design system?
- A dark, engineering-confident Zero Trust security interface built on a near-black canvas (#0e0f11) with a single high-voltage chartreuse-yellow primary CTA (#eef35f), TT Hoves light-weight display he…