Signal Violet
#b6abffBrand accent — highlighted phrases, feature body text, link emphasis, inline brand moments
Twingate
twingate.comWebsite preview
The design language
Twingate operates as a midnight command center: an almost pure-black canvas layered with charcoal surfaces, where electric violet and chartreuse act as live-signal accents rather than decoration. The system speaks in quiet, light-weight typography — large headlines sit at TT Hoves Light with tight negative tracking, body text at TT Hoves Regular — letting the type architecture carry the weight while color is used as functional punctuation. Components feel instrument-panel: pill buttons, hairline-inset highlights replacing drop shadows, and rounded-but-not-soft 8–12px radii that read as engineered hardware rather than soft material. The result is a dark, security-grade interface that feels more like a control surface than a marketing page: every chromatic moment earns its screen real estate.
Color palette
brand
Live Wire
#eef35fGreen supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
accent
Circuit Teal
#00cbaaDecorative icon and illustration accent — network node strokes, lock/connection diagrams, graphic highlights
neutral
Void Black
#000000Page canvas, hero backgrounds, full-bleed sections
Obsidian
#0e0f11Card surfaces, elevated panels, content containers above the page
Carbon
#141617Secondary surface layer, input fields, nested containers
Graphite
#1d2023Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Slate
#21223aSubtle violet-tinted surface for spotlight/featured cards
Ash
#303438Hairline borders and dividers, very low-contrast separation
Steel
#3a3d40Slightly stronger borders, subtle outer shadow tint
Fog
#61626bMuted helper text, disabled labels, low-priority metadata
Smoke
#8d8d96Secondary icons, inactive navigation items, tertiary text
Cloud
#a1a1aaBody text secondary, link text in resting state, icon strokes
Silver
#cfcfd3Body text default, paragraph copy, description text
Bone
#999999Captions, fine print, decorative text
Paper White
#ffffffPrimary headings, button text on dark fills, high-emphasis text
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
68px · 400 · 1.1 · -0.018px trackingThe quick brown fox jumps
text-62
62px · 300 · 1.1The quick brown fox jumps
heading-lg
55px · 300 · 1.2 · -0.009px trackingThe quick brown fox jumps
text-54
54px · 400 · 1.2The quick brown fox jumps
heading
48px · 400 · 1.2 · -0.007px trackingThe quick brown fox jumps
heading-sm
32px · 400 · 1.27 · -0.02px trackingThe quick brown fox jumps
text-24
24px · 400 · 1.3The quick brown fox jumps
text-22
22px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
TT Hoves Light
- Weights
- 300, 400
- Sizes
- 22px, 24px, 48px, 54px, 55px, 62px, 68px
- Line height
- 1.10–1.50
- Letter spacing
- -0.018em at 68px, -0.016em at 62px, -0.010em at 55px, -0.009em at 54px, -0.007em at 48px
- Fallback
- Söhne, Inter Light, Manrope Light
Display and headline — all large hero/section headlines (48–68px) use weight 300 with tight negative tracking (-0.018em to -0.007em). The whisper-weight at huge sizes is the brand's signature: confidence through restraint, not volume.
Additional typeface
TT Hoves Medium
- Weights
- 400, 500
- Sizes
- 11px, 12px, 13px, 14px, 15px, 16px, 17px, 20px, 32px
- Line height
- 1.04–1.50
- Letter spacing
- -0.020em to +0.023em (wider tracking on small caps-style labels like eyebrow text)
- Fallback
- Söhne, Inter, Manrope
Subheadings, feature card titles, navigation, button labels — the workhorse of the system. 32px appears as a mid-tier section heading, 20px as card titles.
Additional typeface
TT Hoves Regular
- Weights
- 400
- Sizes
- 11px, 12px, 14px, 15px, 16px, 17px
- Line height
- 1.14–1.70
- Letter spacing
- -0.010em to +0.014em
- Fallback
- Söhne, Inter, Manrope
Body text and long-form copy — paragraph text at 16px with generous 1.5–1.7 line-height, smaller annotations at 11–14px
Additional typeface
Basis Grotesque Mono Pro
- Weights
- 400
- Sizes
- 13px, 21px
- Line height
- 1.20–1.60
- Fallback
- JetBrains Mono, IBM Plex Mono, Berkeley Mono
Code snippets, terminal-style text, and technical labels — used sparingly as a technical accent, never for body copy
Additional typeface
Inter
- Weights
- 400, 500
- Sizes
- 12px, 14px, 16px
- Line height
- 1.00–1.50
- Letter spacing
- -0.010em to +0.010em
- Fallback
- System sans-serif
Secondary body text and supporting UI labels (appears as a fallback/supplement to TT Hoves Regular in some contexts)
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 32px
- Element gap
- 20px
Border radius
cards
12pxbadges
50pximages
12pxinputs
8pxbuttons
50pxSpacing scale
2px3px4px6px7px8px10px12px14px15px16px18px20px24px25px26px32px40px48px54px60px64px74px80px100px120px160px180px200pxGuidelines
Do
- Use weight 300 (TT Hoves Light) for all display headlines 48px and above — the whisper-weight is the signature
- Use #eef35f (Live Wire) for the single primary CTA on any given screen, and for one emphasis word in the largest headline
- Apply tight negative letter-spacing on all large text: -0.018em at 68px, scaling to 0 at 14px
- Use 50px (pill) border-radius for all buttons, badges, and pill-shaped chips
- Use 12px radius for product cards and image containers; 8px for inputs and smaller interactive elements
- Distinguish surfaces through tonal stacking (#000000 → #0e0f11 → #141617 → #1d2023) rather than drop shadows
- Reserve Signal Violet (#b6abff) for inline brand emphasis within body text and for the top onboarding utility bar
Don’t
- Never use drop shadows for elevation — the system communicates depth through inset hairline highlights and stacked dark surfaces
- Never use more than one filled chartreuse CTA per viewport — it is a single-action accent
- Never set body text below 14px or use weight 300 for body — light weights are reserved for large displays
- Never add decorative gradients — the system is flat dark with chromatic accents, not glossy
- Never use pure black (#000000) text on dark surfaces — text on dark should always be white or a silver tone (#cfcfd3 minimum)
- Never break the 50px pill convention for buttons — outlined or ghost variants must also use the full pill radius
- Never introduce photography with a warm or colorful treatment — all imagery is monochrome, vector, or UI-screenshot
Components
Primary CTA Button (Pill)
Main conversion action — 'Try Twingate for Free'Filled chartreuse (#eef35f) background, black (#000000) text at 14px TT Hoves Medium weight 500, 50px border-radius (fully pill), padding 12px 24px. Inner highlight: inset 0 2.5px 0 -2px rgba(255,255,255,0.1). No border, no outer shadow. Trailing arrow icon.
Secondary Text Link Button
Low-emphasis action — 'Request a Demo'Transparent background, white (#ffffff) text at 14px TT Hoves Medium, 50px pill radius, padding 12px 16px. Trailing arrow icon. Inset hairline highlight on hover: rgba(255,255,255,0.1).
Nav Pill Button (Header)
Header actions — 'Request Demo', 'Try for Free'White (#ffffff) text on transparent resting, becomes a white-fill with black-text style on the 'Request Demo' button (pill, 50px radius, 12px 20px padding, 14px Medium). Sits inside a dark header with inset hairline highlight rgba(255,255,255,0.1) 0px 0px 0px 0.5px.
Feature Card
Mid-page feature/benefit block in 3-column gridObsidian (#0e0f11) or transparent background, no visible border. Bold subheading at 20px TT Hoves Medium, white. Body text at 16px TT Hoves Regular, Silver (#cfcfd3) or Signal Violet (#b6abff) for emphasized phrases, line-height 1.7. No card radius, no shadow — cards are typographic blocks, not containers.
Eyebrow Pill Badge
Small context label above headlines — 'New: Twingate MSP Portal'Dark Graphite (#1d2023) background, white text at 12px TT Hoves Medium, 50px pill radius, padding 6px 12px, with a subtle border or inset highlight. Trailing chevron icon.
Testimonial Card
Customer quote in a grid layoutObsidian (#0e0f11) surface, 12px radius, 32px padding. Quote text at 16px TT Hoves Regular in Silver (#cfcfd3), customer photo (circular, 40px), name at 14px Medium white, role/title at 12px regular in Smoke (#8d8d96). No visible card border.
G2 Review Widget (Floating)
Social proof callout — '4.9 ★★★★★'Pill-shaped dark card with rounded ends, Obsidian background, 50px radius, inset white highlight. Large score '4.9' at 32px TT Hoves Medium white, five white stars, 'Based on 50+ G2 reviews' caption at 12px, G2 logo on the right.
Customer Logo Strip
Social proof band of customer logosTransparent dark background, single row of monochrome white logos (hat, Confluent, Charlotte Tilbury, Blend, PayU, Windsurf, bitpando, Breeze, etc.) evenly spaced with generous gaps. Logos sit on the void canvas with no container or dividers.
Product Showcase Card
Product UI screenshot with branded surroundChartreuse-tinted (#eef35f at low opacity) background panel with 12px radius, containing a product UI mockup (dark interface with email field, user avatar, URL). Category eyebrow text in green above the card title.
Network Diagram (Hero Illustration)
Decorative hero visual — privileged access networkConcentric circles on near-black background with Circuit Teal (#00cbaa) strokes and lock icons at nodes. Central hexagonal node filled with teal gear icon and a small green check badge. A laptop icon in the center. All line weights appear consistent at ~1.5px.
Onboarding Banner (Top Bar)
Persistent utility strip above navigationSolid violet (#b6abff) background bar at ~40px height, black text reading 'Twingate Live Onboarding' with workshop/ongoing tags, and a 'Register >' link on the right. High-saturation violet against the dark page is the page's loudest chromatic moment.
Header Navigation Bar
Primary site navigationTransparent or near-black background, logo left (white Twingate mark), nav links in center (white, 14px Medium), Sign in + Request Demo (white pill) + Try for Free (white pill, dark text) on right. 16px row padding, 10–12px column gap between nav items.
Link with Arrow (Inline Action)
Inline text link ending in a chevron — section footersWhite or Signal Violet text at 14–16px TT Hoves Medium with letter-spacing ~0.012em, followed by a right-pointing chevron icon in the same color. No underline. Used to link to detailed pages.
Surfaces & elevation
Level 0
Void
#000000Page canvas — hero, full-bleed sections, body background
Level 1
Obsidian
#0e0f11Primary card/panel surface above the page
Level 2
Carbon
#141617Nested containers, input fields, secondary cards
Level 3
Graphite
#1d2023Button resting fills, elevated chips, hover surfaces
Level 4
Slate
#21223aSpotlight/featured surface with violet undertone for hero product cards
Twingate rejects drop shadows entirely. Depth is communicated through stacked surface levels (five dark tones from #000000 to #21223a) and hairline inset highlights (rgba 0.1–0.15 white). The metaphor is an LCD instrument panel in a dark room: components are distinguished by subtle inner glow and slight tonal shifts, not by floating above the surface.
Buttons and links
inset 0 0 0 0.5px rgba(255, 255, 255, 0.1) — hairline inner highlight, no outer drop shadow
Primary CTA fill
inset 0 2.5px 0 -2px rgba(255, 255, 255, 0.1) — subtle top inner highlight giving a subtle beveled-LED appearance
Decorative borders
inset 0 2.5px 0 -2px rgba(255, 255, 255, 0.15), inset 0 0 0 0.5px rgba(255, 255, 255, 0.15)
Layout & imagery
Layout
Full-bleed dark layout with a max content width of ~1200px. The hero is a split composition: large left-aligned headline stack (4 lines, the last accented in chartreuse) with a right-aligned diagram visual. Below the hero, sections are full-width bands with 80px vertical padding and centered or left-aligned content stacks. Feature cards are arranged in a 3-column grid with equal-width columns and ~20px gaps, followed by a customer logo strip. The platform section introduces a 2-column layout (text-left, product-card-right). Testimonials use a responsive grid (3-column at desktop, wrapping on smaller viewports). A floating G2 review widget sits absolutely-positioned at center-screen, overlapping the testimonial grid. The overall rhythm is: bold hero → 3-column features → logo strip → 2-column product → testimonial grid. Navigation is a top bar with a persistent utility strip above it.
Imagery
The site is primarily typographic and diagrammatic rather than photographic. The hero visual is a custom line-art network diagram (concentric circles, lock icons in teal, hexagonal node with gear, laptop) that communicates 'decentralized privileged access' through geometry rather than realism. The only product imagery is a small UI mockup (a dark login card) shown inside a chartreuse-tinted panel as a product showcase. The customer logo strip is monochrome white wordmarks — no lifestyle photography, no human faces outside tiny testimonial avatars. The visual language is instrument-panel/control-room: clean vector geometry, teal circuit accents, and a strict absence of photography. Iconography is consistently line-based with 1–1.5px stroke weights, monocolor (teal or white), and no fill decoration.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (primary) / #cfcfd3 (body) / #a1a1aa (secondary) - background: #000000 (canvas) / #0e0f11 (card) / #1d2023 (elevated) - border: #303438 (hairline) / #3a3d40 (stronger) - accent: #b6abff (violet) / #00cbaa (teal) - primary action: no distinct CTA color **Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. *Feature card grid (3-column):* Transparent background. No card container. Subheading at 20px TT Hoves Medium weight 500 white. Body at 16px TT Hoves Regular #cfcfd3, line-height 1.7, with one emphasis phrase in #b6abff. 20px gap between cards. 3. *Pill badge:* #1d2023 background, 50px radius, 6px 12px padding, white text at 12px TT Hoves Medium, 0.012em letter-spacing, trailing chevron icon in white. 4. *Testimonial card:* #0e0f11 surface, 12px radius, 32px padding. Quote at 16px TT Hoves Regular #cfcfd3. 40px circular avatar, name at 14px Medium white, role at 12px Regular #8d8d96. No border, no shadow. 5. *Product showcase card:* #eef35f at 15–20% opacity as panel background, 12px radius, containing a dark UI mockup (carbon #141617 fill, 8px radius input fields, white text, small avatar circle). Eyebrow label above in #eef35f at 12px Medium.
Color Pairing Logic
The system uses a strict three-color logic: black/charcoal structural tones for everything that recedes, Signal Violet for inline brand warmth and the top utility bar, and Live Wire chartreuse exclusively for the primary action and one headline emphasis word. Circuit Teal is the fourth color but is reserved for illustrative/diagrammatic moments — it should never appear as a button or text color. This creates a clear visual hierarchy: action > emphasis > brand warmth > structural.
Similar brands
Linear
Same dark-canvas instrument-panel feel with subtle inset highlights replacing shadows, tight geometric typography, and a single vivid accent color used sparingly
Vercel
Near-black surface stack, light-weight display headlines with negative tracking, and a preference for pill buttons with subtle inner highlights over drop shadows
Tailscale
Same zero-trust/security-tools audience producing dark, technical interfaces with diagram-heavy hero illustrations and monochrome logo strips
Cloudflare
Dark product UI language with layered charcoal surfaces, violet/orange accent pair, and engineering-forward typographic restraint
Cursor
Premium dark developer-tool aesthetic with stacked surface levels, tight letter-spacing on displays, and a single saturated accent that reads as a status LED
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
