Reactive backend-as-a-service in editorial white discipline — pure #ffffff ground, GT America 400/500 typographic identity, pink #fc618d and lilac #948ae3 as dual chromatic accents. A third way between backend tooling's developer brutalism and its enterprise gloss.
This 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.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Convex’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
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.
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.
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
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
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
Surface styleFlat-with-hairline. Cards sit on #f7f1ff or #ffffff with 1px #848185 at low alpha hairline. No drop shadow; depth comes from gradient atmospherics.
0 drop shadow on marketing chrome
1px hairline border on cards (#848185 at 12% alpha)
Atmospheric gradient zones provide implicit depth, not box shadow
Inversion plates (dark surfaces) have no border, no shadow
HoverCTA background shift (dark → pink) on the standard 150ms ease, Card hairline opacity bump, Link underline draw-in (pink) on hover
Scroll patterns
CSS transition fade-in on section entry — no Framer Motion required
Atmospheric gradient zones may animate subtly on scroll (opacity drift)
Sticky nav fades in after 120px scroll
Motion is calm editorial pacing — no JS-driven choreography
Respect prefers-reduced-motion
No idle loops, no decorative animation
Hover shifts colour, never position
Focus rings: 2px lilac #948ae3 ring with 2px offset
Active state: 95% opacity
Pink underline as the brand link-hover signal
Approachmobile-first
Tailwind defaults (640/768/1024/1280/1536) — no custom ladder.
<768: 16px gutter, single column, headline 32-40px
768-1024: 720px content rail, headline 48-56px
≥1024: 896px reading + 1512/1536px wide section breakouts, hero display up to 72px
Body text #141414 on #ffffff passes WCAG AAA (16:1+)
Pink #fc618d on white passes AA at 16px+ (4.7:1)
Lilac #948ae3 used carefully — passes AA on white only at 18px+ or bold
Focus visible state always present
Respect prefers-reduced-motion
Next.js (assumed)GT America loaded as woff2 (400, 500)ui-monospace system stack for codeCSS-only transitions — no motion library required
Typography + atmospheric gradient zones + chromatic accents are the entire visual identity. No 3D, no Lottie, no decorative illustration.
GT America 400/500 preloaded as woff2
System monospace stack for inline code
11 atmospheric gradients composed as CSS, no canvas/WebGL
Use pure #ffffff ground — no off-white substitution
Commit to GT America (or premium grotesque equivalent) at 400/500
Reserve pink #fc618d and lilac #948ae3 for accents and signals
Use atmospheric gradients as depth, not decoration
Don't paint surfaces in pink or lilac — accents stay on text and underlines
Don't introduce a third weight (300 or 600) — GT America 400/500 is the discipline
Don't add a JS motion library — CSS transitions are sufficient
Don't shrink body type below 15px — editorial weight depends on it
Light-first canvas — dark variant possible but not primary
Type lock: GT America 400/500 + ui-monospace 12.8px
Pink + lilac coverage under 5% of pixels per viewport
Background dominant: #ffffff across more than 60% of surface
Font-family grep: GT America present, no humanist sans alternatives
GT America weight grep: only 400 and 500 used
Pink #fc618d / lilac #948ae3 usage: text and underlines only, never on fill backgrounds
Motion library: no GSAP / no Framer Motion required — CSS only
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 8 nodes across 4 levels, shallow to deep by color.
body3
div
Header1
Nav
div (×3)2
Section
div1
Section
Accessibility
Contrast matrix
292 combinations - 110 pass AA - 70 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox18.98
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F7F1FF
bg
#000000
APCA Lc
-100
Use
background on foreground
AaThe quick brown fox18.98
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F7F1FF
APCA Lc
+99
Use
foreground on background
AaThe quick brown fox18.42
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#141414
bg
#FFFFFF
APCA Lc
+105
Use
foreground on background
AaThe quick brown fox18.42
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#141414
APCA Lc
-107
Use
background on foreground
AaThe quick brown fox18.17
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F6EEDB
APCA Lc
+96
Use
foreground on accent
AaThe quick brown fox18.17
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F6EEDB
bg
#000000
APCA Lc
-97
Use
accent on foreground
AaThe quick brown fox16.67
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#E5E5E5
APCA Lc
+91
Use
foreground on foreground
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
