WarpStream

A developer-infrastructure marketing surface built on a near-white canvas (#f8f8f8) with deep-navy ink (#040531) and an electric indigo brand accent (#3a21ed). The system reads as confident, technical, and slightly maximal — bold Plus Jakarta Sans headlines, sharp-cornered indigo CTAs with hard offset shadows, isometric 3D product illustrations rendered in indigo/red/navy, and dark-navy terminal/code surfaces dropped into an otherwise light page. Brand voltage comes from the saturated indigo accent and the isometric \"diskless\" cube artwork rather than from decorative color washes.

warpstream.com

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

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 40px · 700 · 1.2

The quick brown fox jumps

heading-xl 40px · 600 · 1.3

The quick brown fox jumps

heading 32px · 700 · 1.2

The quick brown fox jumps

body 17.92px · 400 · 1.5

The quick brown fox jumps

button 12.8px · 600 · 1.5

The quick brown fox jumps

Spacing & Shape

Spacing

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

Border Radius

Name	Value	Preview
none	0px
xs	4px
sm	6px
md	8px
lg	12px
xl	24px
pill	110px
full	9999px

FAQ

What colors does WarpStream use?: WarpStream's core palette includes #3a21ed, #270b46, #040531, #190430, #1a1a2e. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the WarpStream DESIGN.md.
What font does WarpStream use?: WarpStream's primary typeface is Plus Jakarta Sans. 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 WarpStream design system?: A developer-infrastructure marketing surface built on a near-white canvas (#f8f8f8) with deep-navy ink (#040531) and an electric indigo brand accent (#3a21ed). The system reads as confident, technica…

More like this

↓ .md ↓ All files

loading…