Convex

A developer-tooling marketing surface built on a warm off-white canvas with deep near-black product bands, GT America display type, and Archivo body. The system alternates light editorial sections with dark code-panel and product-mockup cards, using a small high-chroma accent family (violet, pink, green, orange, yellow) drawn straight from syntax-highlighting and product UI rather than from brand chrome. The voltage comes from real code editors and dashboard fragments shown in-card, framed by tight radii and a confident, condensed-feeling display headline.

convex.dev

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

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display-lg 40px · 700 · 1.0

The quick brown fox jumps

display-md 38px · 500 · 1.0

The quick brown fox jumps

body-md 18px · 600 · 1.111

The quick brown fox jumps

body-sm 16px · 400 · 1.5

The quick brown fox jumps

button 16px · 500 · 1.5

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	6px
sm	8px
smd	10px
md	12px
lg	16px
xl	24px
xxl	48px
band	80px
section	96px

Border Radius

Name	Value	Preview
xxs	3px
xs	4px
sm	6px
md	8px
lg	12px
xl	16px
pill	9999px

FAQ

What colors does Convex use?: Convex's core palette includes #141414, #525053, #6d6d70, #848185, #a9a9ac. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Convex DESIGN.md.
What font does Convex use?: Convex's primary typeface is GT America. 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 Convex design system?: A developer-tooling marketing surface built on a warm off-white canvas with deep near-black product bands, GT America display type, and Archivo body. The system alternates light editorial sections wi…

More like this

↓ .md ↓ All files

loading…