Skip to content
Browse
Library

Convex. Cream paper engineering notebook.

  • Developer tools
  • Mixed theme
  • 18 colors
  • 3 typefaces

Convex presents a warm cream-paper technical workspace: a desaturated beige canvas (#f6f6f6 to #f7f1ff) hosts both product UI and product screenshots, while dark code surfaces (#141414, #292929) carry TypeScript and dashboard previews with syntax-highlight punctuation in pink, violet, green, and yellow. GT America grotesque at whisper-weights creates a calm, editorial engineering voice — tight negative tracking on 40-56px headlines compresses the wordmark into confident, compact blocks. Components are squared and compact: 8-12px radii, thin charcoal borders, and minimal padding produce a blueprint-like density that reads more like a developer's notebook than a marketing site.

Visit convex.dev
Screenshot of Convex
Captured from convex.dev on October 11, 2026

Convex design system

Convex

Brand2

  • Alternative filled button accent on specific marketing sections — rich magenta against cream

  • Highlight accent on specific CTAs or callout chips — warm complement to the cool blues

Accent5

  • Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

  • Red supporting accent for decorative details and low-frequency emphasis

  • Violet supporting accent for decorative details and low-frequency emphasis

  • Green supporting accent for decorative details and low-frequency emphasis

  • Yellow supporting accent for decorative details and low-frequency emphasis

Neutrals11

  • Primary text, dark card surfaces, code editor backgrounds, filled neutral buttons — the dominant dark across the site

  • Dark section background gradient — diagonal fade from warm near-black through charcoal to a cool blue haze

  • Secondary dark surfaces, navigation pills, dark-mode code block frames

  • Borders on dark surfaces, dividers within code blocks, outlined button strokes on dark fills

  • Secondary body text, nav metadata, subdued labels

  • Muted helper text, tertiary nav items, breadcrumb-style labels

  • Placeholder text, disabled labels, very low-emphasis metadata

  • Hairline dividers, input borders on light surfaces, table row separators

  • Subtle tinted background panels, icon wash areas, soft section dividers

  • Page canvas and section backgrounds — warm off-white that distinguishes Convex from cold-white SaaS

  • Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper White on Plum Button

7.86 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.