Pixloop Design.md
goteleport homepage design, full-page screenshot

goteleport

A dark, security-infrastructure marketing surface built on deep navy-purple gradients, a vivid electric-purple primary CTA, and a cyan announcement strip. The system reads as serious enterprise infrastructure software — Lato across the entire type stack at a single regular weight, large quiet headlines, white content cards floating between dark editorial bands, and soft purple glow shadows instead of hard drop shadows. Brand voltage comes from the saturated purple action color and the dark-to-light band alternation rather than from decorative color.

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
loading…

Color Palette

Accent

Neutrals

Typography

display-xl 64px · 400 · 1.062
The quick brown fox jumps
display-lg 56px · 400 · 1.214
The quick brown fox jumps
title-md 28px · 400 · 1.357
The quick brown fox jumps
body-md 16px · 400 · 1.5
The quick brown fox jumps

Spacing & Shape

Spacing

Name Value Preview
xxs 4px
xs 8px
sm 12px
md 16px
lg 24px
xl 32px

Border Radius

Name Value Preview
xs 4px
sm 6px
md 8px
lg 12px
xl 40px
pill 100px
full 999px

FAQ

What colors does goteleport use?
goteleport's core palette includes #512fca, #512fc9, #29176e, #281e60, #09113a. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the goteleport DESIGN.md.
What font does goteleport use?
goteleport's primary typeface is Lato. 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 goteleport design system?
A dark, security-infrastructure marketing surface built on deep navy-purple gradients, a vivid electric-purple primary CTA, and a cyan announcement strip. The system reads as serious enterprise infra…

More like this