# Convex · Design system migration spec

> Source: https://convex.dev  ·  Curated by OpenDesign  ·  en

> A prime example of modern developer tools design, blending editorial warmth with the focused, dark-themed utility of professional code interfaces.

## 1. Identity DNA

The design system for Convex is built on a central analogy: it is the industrial-grade engine block for modern web applications. This identity manifests as a stark, confident split between warm, legible editorial surfaces and the dark, focused environments where code is written and understood.

**One-liner:** Convex provides an integrated backend-as-a-service that lets developers build with confidence.
**Keywords:** developer · backend · infrastructure · typescript · realtime
**Analogy:** The industrial-grade engine block for modern web applications

## 2. Color

The palette is a deliberate study in functional contrast, pairing a warm cream (#F6F0E1) for content areas with deep, dark grays (#292929) for component surfaces. This split creates a natural separation between reading and building contexts.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F0E1` | main background |
| `--bg-soft` | `#292929` | card background |
| `--ink` | `#141414` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#A9A9AC` | placeholder |
| `--line` | `rgba(20, 20, 20, 1)` | divider |

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

The system avoids bright neon accents, reserving chromatic expression for code syntax highlighting within the otherwise monochromatic developer interface.

## 3. Typography

Typographic voice is defined by a bold, geometric sans-serif category for headings, set tight and tracked for impact. Body text maintains high legibility with generous leading, while monospace typography is reserved exclusively for its native context: code and terminal commands.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.0 | 700 | -2px | Main hero headings |
| body | 16px | 1.5 | 400 | 0px | Standard body copy |

**Type rules:**
- 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

## 4. Spacing

A consistent 4px base grid underpins all spatial relationships, providing a predictable and scalable rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous padding in section breaks

## 5. Surfaces

Depth is communicated through carefully layered shadows and a single, consistent border weight (1px solid #141414). These elements create clear visual hierarchy without ornamental decoration.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px -16px 72px -8px rgba(0, 0, 0, 0.25)
  - 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid #141414

## 6. Layout

The foundational layout is an asymmetrical split-screen hero, establishing the core editorial/interactive dichotomy. Text content occupies one side while a dark-themed, live code interface anchors the other.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy prioritizes utility and clarity over decoration. All interactive transitions are swift (150ms) and use smooth easing, providing immediate feedback without interrupting workflow.

- **Durations:** micro 150ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth 150ms color and transform transitions on hover
  - Subtle background gradient animations

- **Hover:** Subtle background and text color shifts with smooth easing
- **Click:** Immediate response with slight scale feedback
- **Transition:** All properties transition smoothly over 150ms
- **Keyboard:** Standard focus states visible for accessibility

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct, addressing developers with clarity and purpose. Language is action-oriented, matching the precision of the tools themselves.

- **Tone:** Professional, confident, and developer-focused
- **Headline style:** Large, bold, and tightly tracked geometric sans-serif
- **CTA style:** Direct and action-oriented with pill-shaped buttons
- **Avoid:** Frivolous or overly playful language / Cluttered layouts / Bright, neon-heavy color schemes

### Don'ts
- ❌ 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

The system deliberately excludes frivolous or overly playful language, cluttered layouts, and bright, neon-heavy color schemes in favor of its restrained, high-utility aesthetic.

## System Prompt (paste into AI tool)

```
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.
```
