CURATED · OPEN · FREE

Convex

Convex provides an integrated backend-as-a-service that lets developers build with confidence.

devtoolsbackend

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://convex.dev

📦 Browse pack contents →

Identity DNA

developerbackendinfrastructuretypescriptrealtime

The industrial-grade engine block for modern web applications

Color

#141414Ink

#FFFFFFInk soft

#F6F0E1BG

#292929BG soft

#A9A9ACMuted

rgba(20, 20, 20, 1)Line

High-contrast split between warm cream editorial areas and dark, focused development environments.

Typography

geometric-sans · monospace

display40px · 700
body16px · 400

Headings are tightly tracked and bold · Body text remains highly legible with generous leading · Monospace font is used exclusively for code snippets and terminal commands

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px base grid with generous padding in section breaks

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid #141414

0px -16px 72px -8px rgba(0, 0, 0, 0.25) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Split-screen hero with text on the left and interactive code editor on the right

Motion & Interaction

150msmicro

250mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth 150ms color and transform transitions on hover · Subtle background gradient animations

Subtle background and text color shifts with smooth easing · Immediate response with slight scale feedback

Components

button Solid dark filled buttons with pill border-radius and white text
card Dark themed cards with 12px border-radius and subtle shadows
chip Colorful rounded tags for categories like 'Work' or 'Other'
input Dark terminal-style input fields with monospace font
hero Asymmetrical split layout with large typography on one side and a live demo on the other

Voice & Don'ts

Tone Professional, confident, and developer-focused
Headlines Large, bold, and tightly tracked geometric sans-serif
CTAs Direct and action-oriented with pill-shaped buttons

Don't use standard rounded corners on primary buttons — screenshot shows pill-shaped (999px) borders
Don't use a bright blue or green accent — screenshot shows a strictly monochromatic palette with colorful accents only in code syntax
Don't use serif fonts for headings — screenshot shows bold, tightly tracked geometric sans-serif
Don't use thin, light borders — screenshot shows 1px solid dark borders against a light background
Don't use a purely dark background for the whole page — screenshot shows a split between a light cream main content area and dark component areas
Don't use standard sans-serif fonts like Helvetica — screenshot shows a distinct, slightly wider geometric sans-serif category
Avoid: Frivolous or overly playful language
Avoid: Cluttered layouts
Avoid: Bright, neon-heavy color schemes

Inside the pack — real screenshots

Convex — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Convex is a developer-focused backend-as-service tool characterized by a sophisticated split-layout design. The primary background is a warm cream (#F6F0E1), contrasted with deep dark (#292929) surfaces for code editors and UI components. Typography utilizes a bold, geometric sans-serif for display headings and a clean sans-serif for body text, with monospace reserved strictly for code. Critical design rules include avoiding standard rounded corners (use pill-radius for buttons), avoiding bright neon accents in favor of a restrained monochromatic palette, and ensuring all interactive elements have smooth 150ms transitions. The layout emphasizes high-contrast editorial sections alongside dark, focused tool interfaces.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko