Skip to main content
Back to Gallery

Convex · Full Page

Convex

Reactive backend-as-a-service'in editorial white discipline'ı — pure #ffffff ground, GT America 400/500 typographic identity, pink #fc618d + lilac #948ae3 dual chromatic accents. Backend tooling'in 'developer brutalism' ile 'enterprise gloss' arasında üçüncü yol.

convex.dev/Added
Convex Full Page — desktop screenshot

Editorial disclaimer

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Convex is the rare backend-platform landing that bet on warmth without sacrificing technical authority — a clean white ground, GT America as the typographic identity, and a duo of saturated accents (pink #fc618d + lilac #948ae3) that signal 'this is software with personality' without leaning into either developer-cliché purple or fintech-corporate navy. We catalogued it because most backend-as-a-service marketing reaches for one of two safe templates: enterprise blue or terminal black. Convex picked a third path — editorial white space, premium grotesque typography, and a chromatic identity its peers won't dare to ship.

Design decisions observed

  • Pure #ffffff dominant ground (~424 surface refs) paired with #141414 ink text — the page floats, the type carries the work.
  • GT America as the sole sans family (weights 400/500) for every typographic moment from caption to display — premium grotesque discipline.
  • Pink #fc618d + lilac #948ae3 as the dual accent system — most backend tools wouldn't dare. Convex uses them with editorial restraint.
  • 11 gradients catalogued — Convex uses gradient as atmospheric depth, not decoration. Each one earns its frame budget.
  • Container ladder 896/1512/1536 — one reading width, one wide section width, one full-bleed canvas.
  • Spacing scale 2/4/6/8/10/12/16/20/22/24 — tight 4px-base with one unusual 22px increment for breathing space inside dense sections.
  • No motion library detected — pure CSS transitions only (8 catalogued), reinforcing the page's editorial calmness.
  • Monospace appears at 12.8px for inline code — a deliberate 0.8px below standard mono size to integrate with GT America body type without feeling like a separate language.

What to study

  • How a warm white ground reframes a backend-platform brand — Convex's white isn't sterile; it reads as a beautifully printed page. The discipline is in choosing #ffffff over off-white and trusting GT America to hold the warmth.
  • Pink + lilac as a backend-tool palette — Convex breaks the unwritten rule that B2B technical software has to use safe colours. The result is a brand designers actually like to use, not just tolerate.
  • Editorial gradient discipline — 11 gradients sounds like a lot, but Convex uses them as atmospheric depth (background washes, subtle illumination zones), not chromatic decoration. Steal the discipline of treating gradient as composition, not flourish.

What to avoid

  • Don't lift the pink/lilac duo without committing to GT America (or equivalent premium grotesque) — the typography is what keeps the colours from reading as Y2K throwback.
  • Don't paint surfaces in pink — Convex's chromatic restraint is the brand. Pink belongs on accent text, CTA underlines, and the occasional illustration spot.
  • Don't lower the type size — Convex's 15-16px body and 12.8px mono are deliberate; shrinking them to 14/12 collapses the editorial weight.

Taste notes

The page feels like reading a contemporary art monograph that happens to ship developer documentation — generous white margins, premium grotesque type at exactly the right size, and chromatic accents that punctuate without performing. Convex's secret is that it refuses both 'developer brutalism' and 'enterprise gloss'; the result is software that looks like it was designed by people who actually care about the work, not just the funnel.

Lineage & references

  • Direct heir to the post-Stripe-Sohne editorial backend lineage that Vercel, Linear, and PlanetScale belong to — but Convex is the first to introduce pink as a primary signal in that family.
  • Standing shoulder-to-shoulder with the modern reactive-backend peer cohort (Supabase, Firebase reimagined, PlanetScale) — but Convex's chromatic confidence sets it apart visually.
  • Part of the GT America typographic wave that includes parts of Apple's marketing, Bloomberg Businessweek's recent redesign, and a generation of art-direction-conscious tech brands — Convex carries the family discipline into the backend-platform space.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Convex's design language is editorial white with chromatic punctuation. A pure #ffffff ground carries the entire brand, GT America at 400/500 handles every typographic moment, and a pink/lilac dual accent (#fc618d + #948ae3) provides the chromatic signature most backend tools won't dare to ship. The page reads like a contemporary art monograph that happens to be about reactive databases.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (pure #ffffff dominant ground, #141414 primary ink text, #f7f1ff lilac-tinted off-white for soft surfaces, #38383a near-black secondary surface, #a9a9ac warm grey for tertiary text, #525053 dark grey for caption text, #fc618d pink primary accent, #948ae3 lilac secondary accent, #848185 muted grey for borders, plus #000000 used sparingly for inversion zones), GT America as sole sans family at weights 400/500 across sizes 12/15/16px body and larger display (with ui-monospace 12.8px for inline code), spacing scale 2/4/6/8/10/12/16/20/22/24 (note 22px increment), container ladder 896/1512/1536 (reading + wide section + full-bleed), Tailwind-standard 640/768/1024/1280/1536 breakpoints, CSS transitions at cubic-bezier(0.4, 0, 0.2, 1) at 150-500ms (no motion library required), and 11 catalogued gradients used as atmospheric depth zones, not chromatic decoration. Treat pink/lilac as scarce accent signals. Apply the language, not the source brand's copy. When I ask you to build a page or component, enforce these rules by default.

Overview

Layout
Editorial single-column-plus-wide-section flow; tight 896px reading width with 1512-1536px wide section breakouts for product visualisations.
Content width
896px reading rail, 1512/1536px wide sections.
Framing
Contemporary art monograph — pure white ground, GT America discipline, sparse chromatic accents.
Grid strength
Implicit editorial grid — 4px base, but rhythm comes from typography ladder and atmospheric gradient zones.

Color philosophy

Pure #ffffff ground; GT America in #141414 ink as primary voice; pink #fc618d and lilac #948ae3 as scarce dual accents; muted greys for hierarchy.

Mode strategyLight-first canvas with inversion zones for hero anchors and key callouts; potential dark variant via toggle exists but light is dominant.
  • #ffffff dominant ground — pure, not off-white
  • #141414 primary ink text
  • #f7f1ff lilac-tinted off-white for soft elevated surfaces (~217 refs)
  • #38383a near-black secondary surface for inversion zones
  • #a9a9ac warm grey for tertiary text
  • #525053 dark grey for caption/metadata
  • #fc618d pink primary accent (~92 refs)
  • #948ae3 lilac secondary accent (~58 refs)
  • #848185 muted grey for borders and dividers
  • #000000 used sparingly for inversion plates

Gradients (paste-ready)

11 gradients catalogued — atmospheric depth zones using lilac/pink at low opacity, subtle background washes, never decorative chromatic surfaces

Typography rules

  • GT America is the sole sans family — weights 400 and 500 only, every typographic moment
  • ui-monospace at 12.8px for inline code (deliberately 0.8px below standard mono)
  • Display 32-72px in GT America 500; body 15-16px in 400; caption 12-13px
  • Letter-spacing 0 across the board — GT America's optical defaults are correct
  • Weight ladder is binary: 400 body, 500 emphasis and display
  • Line-height 1.5-1.6 body, 1.1-1.15 display

Spacing rules

  • 4px base unit with one unusual 22px increment
  • Scale: 2/4/6/8/10/12/16/20/22/24
  • Section vertical rhythm: 96-160px between major sections
  • Card padding: 24-40px
  • CTA padding: 12-16px vertical, 20-28px horizontal
  • Wide section breakout margins: 48-80px above/below

Design tokens

Palette, type, and space — all agent-readable.

20 colors · hex / rgb / hsl / oklch

Save PNG
  • foreground
    30%
    • HEX#141414
    • RGBrgb(20, 20, 20)
    • HSLhsl(0, 0%, 8%)
    • OKLCHoklch(19.13% 0.0000 89.76)
  • background
    18%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • background
    9%
    • HEX#F7F1FF
    • RGBrgb(247, 241, 255)
    • HSLhsl(266, 100%, 97%)
    • OKLCHoklch(96.68% 0.0196 305.27)
  • background
    6%
    • HEX#38383A
    • RGBrgb(56, 56, 58)
    • HSLhsl(240, 2%, 22%)
    • OKLCHoklch(34.14% 0.0034 286.22)
  • foreground
    6%
    • HEX#A9A9AC
    • RGBrgb(169, 169, 172)
    • HSLhsl(240, 2%, 67%)
    • OKLCHoklch(73.57% 0.0043 286.29)
  • foreground
    6%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • foreground
    5%
    • HEX#525053
    • RGBrgb(82, 80, 83)
    • HSLhsl(280, 2%, 32%)
    • OKLCHoklch(43.42% 0.0055 314.77)
  • accent
    4%
    • HEX#FC618D
    • RGBrgb(252, 97, 141)
    • HSLhsl(343, 96%, 68%)
    • OKLCHoklch(70.27% 0.1915 5.96)
  • accent
    2%
    • HEX#948AE3
    • RGBrgb(148, 138, 227)
    • HSLhsl(247, 61%, 72%)
    • OKLCHoklch(67.90% 0.1294 287.58)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 8 nodes captured; depth capped at 6 for readability.

  • body
  • ├─ div
  • ├─ Header
  • │ └─ Nav
  • └─ div (×3)
  • ├─ Section
  • └─ div
  • └─ Section

Accessibility

WCAG contrast matrix.

292 combinations · 110 pass AA · 70 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#F7F1FF#00000018.98AAAAAA-100background on foreground
Aa
#000000#F7F1FF18.98AAAAAA+99foreground on background
Aa
#141414#FFFFFF18.42AAAAAA+105foreground on background
Aa
#FFFFFF#14141418.42AAAAAA-107background on foreground
Aa
#000000#F6EEDB18.17AAAAAA+96foreground on accent
Aa
#F6EEDB#00000018.17AAAAAA-97accent on foreground
Aa
#000000#E5E5E516.67AAAAAA+91foreground on foreground
Aa
#E5E5E5#00000016.67AAAAAA-91foreground on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total30Lazy loaded100%unknown74

Hero image

https://www.convex.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fwordmark.16skpi8ru6tg3.svg&w=256&q=75
Format
UNKNOWN
Dimensions
224×40
Loading
lazy
srcset
yes
srcset descriptor
/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fwordmark.16skpi8ru6tg3.svg&w=256&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fwordmark.16skpi8ru6tg3.svg&w=640&q=75 2x

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.