--- version: alpha name: Convex description: A warm-dark developer canvas built on GT America's confident grotesque — near-black surfaces with cream-yellow highlights, a named Pantone-style palette of 25+ hues, full-pill buttons in unexpected accent fills, and a hand-lettered quality that sets Convex apart from the cold-terminal school of dev-tool design. colors: # Surface / canvas background: "#141414" # near-black warm canvas — the dominant ground surface: "#1e1c1a" # slightly warmer dark panel fill surface-raised: "#292929" # cards, interactive surfaces surface-warm: "#38383a" # elevated sections, code block backgrounds # Text / ink ink: "#ffffff" # primary headings on dark ink-secondary: "#e5e5e5" # high-emphasis body on dark ink-muted: "#a9a9ac" # standard body, secondary copy ink-faint: "#848185" # captions, metadata, muted labels ink-subtle: "#525053" # lowest-emphasis text, disabled on-primary: "#ffffff" # text on dark CTA fills on-cream: "#141414" # text on cream/warm-yellow surfaces # Brand accent — warm cream (signature background tint) primary: "#8d2676" # plum purple — primary interactive accent primary-hover: "#a92e8e" # brightened plum on hover cream: "#fdf4cc" # warm cream-yellow highlight — the logo field color cream-muted: "#f6eedb" # slightly deeper cream, logo safe zone background # Section accent fills (named CSS vars used across illustrated sections) accent-orange: "#de5d33" # medium vermillion — CTA in orange-section accent-cyan: "#69bee2" # aero blue — CTA in cyan-section accent-grape: "#5a25b0" # grape — deep violet accent accent-orchid: "#e3d0df" # orchid — soft pink used in link text / highlights # Semantic error: "#d62f2a" # red-r4 success: "#479e12" # green-g4 warning: "#e7a71b" # yellow-y4 # Borders border: "#38383a" # warm dark dividers — solid card outlines border-subtle: "#525053" # softer separation on raised surfaces # Interactive states (flattened from oklab / rgba originals) surface-hover: "#272727" # was oklab(0.28/0.1) over dark bg — flattened focus-ring: "#e3d0df" # orchid — focus highlight on dark interactive elements # Shadow shadow-soft: "#111111" # was rgba(17,17,17,0.2) — flattened for Google format typography: display-hero: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.4px heading-1: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 42px fontWeight: 700 lineHeight: 1.18 letterSpacing: -1.05px heading-2: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.0 letterSpacing: -2px heading-3: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.38 letterSpacing: -0.8px heading-light: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 38px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.95px display-serif: fontFamily: "Publico Headline, Georgia, serif" fontSize: 28px fontWeight: 400 lineHeight: 1.0 letterSpacing: -1.4px body-large: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.38 letterSpacing: 0px body-small: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px label: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: -0.35px caption: fontFamily: "GT America, Arial, Helvetica, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.5px code-mono: fontFamily: "VCR OSD Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 96px 6xl: 128px rounded: none: 0px sm: 4px md: 8px lg: 12px xl: 16px pill: 9999px components: # Primary dark CTA pill button-primary: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 24px borderColor: "{colors.border}" button-primary-hover: backgroundColor: "{colors.surface-warm}" textColor: "{colors.ink}" rounded: "{rounded.pill}" padding: 8px 24px # Plum accent CTA (consent / accept actions) button-accent: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 16px button-accent-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" padding: 12px 16px # Orange section CTA button-orange: backgroundColor: "{colors.accent-orange}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 32px button-orange-hover: backgroundColor: "{colors.accent-orange}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" padding: 12px 32px # Cyan section CTA button-cyan: backgroundColor: "{colors.accent-cyan}" textColor: "{colors.on-cream}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 36px button-cyan-hover: backgroundColor: "{colors.accent-cyan}" textColor: "{colors.on-cream}" rounded: "{rounded.pill}" padding: 12px 36px # Ghost / secondary button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px borderColor: "{colors.border}" button-ghost-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" rounded: "{rounded.pill}" padding: 8px 20px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px borderColor: "{colors.border}" card-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.surface}" textColor: "{colors.cream}" typography: "{typography.body-small}" rounded: "{rounded.none}" padding: 4px 0px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.cream}" borderColor: "{colors.focus-ring}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.label}" padding: 16px 24px borderColor: "{colors.border}" badge: backgroundColor: "{colors.surface-warm}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px code-block: backgroundColor: "{colors.surface-raised}" textColor: "{colors.cream}" typography: "{typography.code-mono}" rounded: "{rounded.md}" padding: 12px 16px --- # Convex Design System ## Overview Convex inhabits an unusual space in the developer-tool design vocabulary — warm where most are cold, textured where most are flat, playfully named where most are anonymous. The canvas is near-black (`{colors.background}`), but it's a warm near-black. The small CSS-variable catalog Convex ships reads like a Pantone swatch library — `--color-tikkaMasala`, `--color-congoPink`, `--color-jordyBlue`, `--color-mayaBlue` — 25+ named hues waiting to be pulled into illustrated landing sections. This isn't a design system embarrassed by color; it's one that treats its palette as a resource rather than a liability, deploying hues theatrically by section rather than system-wide. GT America carries all the weight. The grotesque at Bold 700 with aggressive negative tracking (-1.4px to -2px at display sizes) gives Convex headlines a dense confidence that reads as product conviction rather than marketing bombast. The tracking compresses words without thinning them — you feel the font's weight even at speed-reading distance. Mixed into select moments, Publico Headline Roman (`{typography.display-serif}`) arrives as a editorial counterweight, wide-set and uppercase, giving section openers a printed-matter quality that undercuts the otherwise digital register. VCR OSD Mono (`{typography.code-mono}`) closes the tripartite system — a deliberately lo-fi, CRT-era monospace that signals "this is the machine talking now." Buttons are always full pills (`{rounded.pill}`), but no two section CTAs share the same fill. The hero's primary action gets a dark ghost treatment; a plum section shifts to deep purple (`{colors.primary}`); an orange section burns with `{colors.accent-orange}`; a cyan section cools with `{colors.accent-cyan}`. The pill shape is the constant; the color is the variable. This chameleon approach — one shape, many colors — lets Convex adapt its energy to each section's emotional register while maintaining shape-level consistency across the full page. **Key Characteristics:** - GT America Bold as the primary display face — 700 weight, negative tracking (-1.4px to -2px at large sizes) - 25+ named CSS color variables (`--color-tikkaMasala`, `--color-orchid`, etc.) forming a theatrical palette system - Warm near-black canvas (`{colors.background}`) — not the cold graphite of typical dev tools - Cream-yellow highlight (`{colors.cream}`) used as the logo field and warm accent surface - Full-pill buttons in section-matched fills — the pill is constant, the color varies by section mood - Publico Headline Roman as an editorial serif accent — uppercase, spaced, for section openers - VCR OSD Mono (`{typography.code-mono}`) for code and CLI output — a deliberate CRT-era lo-fi signal - Border-based card separation — dark cards outlined with `{colors.border}` rather than shadow-stacked - 15-speed easing on interactive transitions: `cubic-bezier(0.4, 0, 0.2, 1)` at 150ms dominates - Plum purple (`{colors.primary}`) as the primary consent / action accent — a distinctive non-blue choice - Semantic color vocabulary: red-r4 for error, green-g4 for success, yellow-y4 for warning - Flat entry inputs — zero border radius, bottom-border only (`{colors.border}`) — a form-field that reads as a typed line ## Colors ### Surface & Canvas - **Near-Black** (`{colors.background}`): The dominant canvas. Warm rather than graphite — Convex's dark isn't cold. - **Warm Panel** (`{colors.surface}`): Card and panel fill, a step above the page background. - **Raised Surface** (`{colors.surface-raised}`): Interactive card surfaces, button fills. - **Elevated Dark** (`{colors.surface-warm}`): Code block backgrounds, the highest-lifted dark surface. ### Ink / Text - **White** (`{colors.ink}`): Primary headings on dark backgrounds. - **Near-White** (`{colors.ink-secondary}`): High-emphasis body copy. - **Mid-Gray** (`{colors.ink-muted}`): Standard body and secondary copy. - **Muted** (`{colors.ink-faint}`): Captions, metadata, labels. - **Subtle** (`{colors.ink-subtle}`): Lowest-emphasis text and disabled states. ### Brand Accent - **Plum Purple** (`{colors.primary}`): Primary interactive accent — cookie consent, key actions. Distinctively non-blue. - **Plum Hover** (`{colors.primary-hover}`): Brightened variant for hover states. - **Cream Yellow** (`{colors.cream}`): The warm, parchment-tinted highlight — logo field, warm section CTAs, input text. - **Cream Muted** (`{colors.cream-muted}`): The logo's safe-zone background, slightly deeper than cream. ### Section Palette Accents - **Medium Vermillion** (`{colors.accent-orange}`): The CTA fill in Convex's orange-themed sections. - **Aero Blue** (`{colors.accent-cyan}`): The CTA fill in cyan-themed sections. - **Grape** (`{colors.accent-grape}`): A deep violet used in illustrated contexts. - **Orchid Pink** (`{colors.accent-orchid}`): Soft pink used for link text and focus highlights. ### Semantic & Interactive - **Error Red** (`{colors.error}`): Destructive actions and validation errors. - **Success Green** (`{colors.success}`): Confirmations and positive states. - **Warning Yellow** (`{colors.warning}`): Caution states. - **Focus Ring** (`{colors.focus-ring}`): Orchid pink ring on focused interactive elements. ### Borders & Shadows - **Dark Border** (`{colors.border}`): Card outlines and dividers — the primary structural separator. - **Subtle Border** (`{colors.border-subtle}`): Softer separation on raised surfaces. - **Shadow Soft** (`{colors.shadow-soft}`): Flattened from `rgba(17,17,17,0.2)` — ambient depth on floating panels. ## Typography ### Font Family - **Primary**: `GT America`, with fallbacks: `Arial, Helvetica, sans-serif`. Self-hosted in Regular, Medium, Bold, Black, and Light weights. GT America Standard is the grotesque workhorse — confident, wide at small sizes, impressively dense at large. - **Editorial Serif**: `Publico Headline`, with fallbacks: `Georgia, serif`. Appears in uppercase, wide-tracked section openers — a deliberate editorial counterpoint. - **Monospace**: `VCR OSD Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`. A retro CRT-era mono — unmistakably "machine voice." - **Secondary Display**: `Archivo Black` — used for uppercase label treatments in marketing sections. ### Hierarchy The full type scale lives in the `typography:` token block above. | Token | Use | |---|---| | `display-hero` | 56px / 700 / -1.4px — primary section heroes and page billboard | | `heading-1` | 42px / 700 / -1.05px — major content headings | | `heading-2` | 40px / 700 / -2px — tightly-tracked subheadings | | `heading-3` | 32px / 700 / -0.8px — tertiary headings, card titles | | `heading-light` | 38px / 500 / -0.95px — lighter authority, section intros | | `display-serif` | 28px / 400 Publico Roman — editorial uppercase openers | | `body-large` | 20px / 500 — lead paragraphs and feature descriptions | | `body` | 18px / 400 — standard reading text | | `body-small` | 16px / 400 — UI body and supporting copy | | `button-ui` | 16px / 500 — all button labels | | `label` | 14px / 500 / -0.35px — nav links, UI labels | | `caption` | 12px / 500 / +0.5px uppercase — category labels, micro-metadata | | `code-mono` | 14px / 400 VCR OSD Mono — code output, CLI | ### Principles - **GT America at weight 700**: the system lives in Bold. Medium (500) handles sub-headings and UI; Regular (400) handles body. Black (900) appears only in illustrated accent treatments. - **Negative tracking scales with size**: -2px at 40px, -1.4px at 56px — tighten as you go up, release at body. - **Serif for editorial breaks**: Publico Headline Roman appears in uppercase at 28px — a deliberate disruption of the grotesque voice. - **VCR Mono is character, not utility**: the retro monospace communicates "this is the machine" in a way that `ui-monospace` never could. - **Positive tracking only at micro**: caption-level uppercase (`+0.5px`) is the sole exception to the negative-tracking default. ## Layout ### Spacing System The full scale is in the `spacing:` token block above. Base unit: 8px, with 4px fine-step for tight internals. Section padding runs large — 96px (`{spacing.5xl}`) to 128px (`{spacing.6xl}`) between major sections, giving the rich section-by-section palette room to breathe. ### Grid & Container - Max content width: approximately 1200px, centered - Homepage structure: a sequence of distinctly-colored sections, each with its own illustrated element and matched button fill - Card grids: typically two- or three-column, bordered dark cards - Navigation: sticky dark header, centered wordmark or left-aligned logo, right-aligned CTA pill ### Whitespace Philosophy - **Section-as-theater**: each section is a contained stage with its own background, illustrated character, and accent color. White space is generous between sections to let each act breathe. - **Tight headlines**: negative tracking on bold GT America compresses text visually while generous line breaks provide breath at the paragraph level. - **Flat surfaces, defined by lines**: cards are separated by borders (`{colors.border}`) not elevation, keeping the palette the dominant visual variable. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, `{colors.background}` canvas | Section backgrounds, text blocks | | Panel (Level 1) | `{colors.surface}` fill + `{colors.border}` edge | Cards, feature tiles, sidebars | | Raised (Level 2) | `{colors.surface-raised}` fill + `{colors.border}` edge | Interactive cards, dropdown panels | | Float (Level 3) | `rgba(17,17,17,0.2) 0px 2.8px 21px -0.7px` | Floating menus, tooltips over dark | | Modal (Level 4) | Multi-layer black shadows `0px 91px 100px` + `0px 32px 36px` etc. | Dialogs, deep overlays | | Focus | `{colors.focus-ring}` (orchid) outline or ring | Keyboard focus on interactive elements | **Shadow Philosophy**: Convex leans heavily on border-separation rather than cast shadows. Cards and panels wear a single 1px `{colors.border}` edge — on a near-black canvas this provides clean definition without introducing a competing visual system. True box-shadow depth appears only on floating elements that genuinely need to hover, and even then uses Tailwind's soft utility stacks rather than bespoke values. The real "elevation" in Convex's system is chromatic — a section changes its background color entirely rather than lifting off the surface. ## Shapes The full radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Form inputs (bottom-border-only flat field style) | | `sm` | 4px | Code chips, inline tags, small elements | | `md` | 8px | Code blocks, minor containers | | `lg` | 12px | Feature cards, panel containers | | `xl` | 16px | Section containers, larger framing elements | | `pill` | 9999px | All buttons without exception | The system's most distinctive shape decision is the clean binary between flat inputs (zero radius, line-only) and fully circular buttons (pill). Cards and panels occupy the middle — 8px to 16px — but buttons never live there. Every action button is a pill; every text field is a flat line. ## Components The full component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Dark ghost pill on the homepage hero. Raised-surface fill, ink-secondary text, `{colors.border}` outline. Default main CTA. - **`button-accent`** — Plum-purple pill (`{colors.primary}`). The consent / high-intent action fill. - **`button-orange`** — Medium-vermillion pill (`{colors.accent-orange}`). Section-matched CTA in orange content zones. - **`button-cyan`** — Aero-blue pill (`{colors.accent-cyan}`). Section-matched CTA in cyan content zones. - **`button-ghost`** — Transparent fill, border outline, white text. Secondary action alongside any primary pill. ### Cards - **`card`** — Warm panel fill, 12px radius, `{colors.border}` outline. Cards sit above the canvas by fill value, not shadow stack. - **`card-hover`** — Fills shift to `{colors.surface-raised}` on pointer entry; 150ms cubic easing. ### Inputs - **`input`** — Zero border radius, bottom-border-only. Cream text (`{colors.cream}`) on dark surface. The typed-line aesthetic. - **`input-focus`** — Bottom border shifts to `{colors.focus-ring}` (orchid) on focus. ### Navigation - **`nav-bar`** — Dark background, 14px GT America Medium labels, right-aligned pill CTA. Sticky; hairline border-bottom on scroll. ### Code & Badges - **`code-block`** — Raised dark surface, cream text, VCR OSD Mono, 8px radius. - **`badge`** — Dark-warm pill, muted gray text, 12px GT America caption. ## Do's and Don'ts ### Do - Use GT America Bold at 700 with negative tracking for all display headings — the system's authority lives in weight and compression together - Deploy full pills (`{rounded.pill}`) for every button — the pill shape is the one constant in a shape-agnostic system - Match CTA fill to section palette — orange section gets `{colors.accent-orange}`, cyan gets `{colors.accent-cyan}`; the pill stays round while the color shifts - Use cream yellow (`{colors.cream}`) for warm accents, highlighted text, and logo contexts — it's the system's "light on dark" key - Separate cards with borders (`{colors.border}`) rather than shadow stacks — let the palette do depth work - Use VCR OSD Mono (`{typography.code-mono}`) for all code and CLI output — the retro mono is a brand signal, not just a legibility tool - Keep inputs flat — zero radius, bottom-border only, cream text on dark - Use Publico Headline Roman for editorial uppercase moments — it's the intentional serif disruption ### Don't - Don't use mid-range button radius (4–16px) — buttons are pills or nothing - Don't apply one accent color system-wide — Convex's palette is theatrical and section-specific, not a single "brand blue" - Don't replace VCR OSD Mono with a standard system mono — the CRT-era aesthetic is load-bearing for the brand voice - Don't skip the warm dark — `{colors.background}` is warm near-black, not graphite or cool charcoal - Don't set body text in Publico Headline — the serif is for editorial uppercase labels only - Don't flatten the section-by-section color variation into a single neutral dark — Convex's richness comes from chromatic section changes - Don't use rounded inputs — the flat bottom-border-only input is a deliberate aesthetic decision - Don't exceed 700 weight in body contexts — GT America Black (900) appears only in illustrated/decorative headline treatments --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Single column; hero headline scales down; nav collapses to menu; section stacks single-up; pill buttons full-width | | Tablet | 640–1023px | Two-column feature grid; hero CTAs row; section illustrations resize | | Desktop | 1024–1279px | Full multi-column grids; section illustrations at full scale | | Large | ≥1280px | Max ~1200px container, centered; full section chromatic variation visible | ### Touch Targets - All buttons are pill-shaped with `8–12px` vertical padding, providing comfortable touch height - Card tap targets carry `24px` internal padding - Nav links have adequate vertical rhythm for thumb navigation ### Collapsing Strategy - **Navigation**: horizontal nav with right-aligned pill → mobile hamburger; pill CTA persists in hamburger menu - **Hero**: 56px Bold GT America headline reduces proportionally; negative tracking maintained; CTAs stack vertically - **Section grids**: three-up → two-up → single-column - **Section illustrations**: scale down with viewport; some section backgrounds simplify color treatment on very small screens - **Spacing**: section padding compresses from 96–128px toward 48px on mobile ### Image Behavior - Illustrated section characters are typically SVG or constrained images — scale within flex containers - Product screenshots and code blocks maintain horizontal scroll behavior on narrow viewports - Logo wall horizontally scrolls on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Background: Near-Black (`{colors.background}`) - Text: White (`{colors.ink}`) for heads, Mid-Gray (`{colors.ink-muted}`) for body - Brand accent: Plum Purple (`{colors.primary}`) - Section highlight: Cream Yellow (`{colors.cream}`) - Border: Dark Divider (`{colors.border}`) - Primary CTA: Section-matched pill — ghost (`{colors.surface-raised}`) or colored accent ### Example Component Prompts - "Create a hero section on near-black (`{colors.background}`): a 56px GT America Bold headline (`{typography.display-hero}`, letter-spacing -1.4px, white `{colors.ink}`), a 20px GT America Medium sub-line (`{typography.body-large}`, `{colors.ink-muted}`), then a dark ghost pill CTA (`{colors.surface-raised}` fill, `{colors.border}` outline, `{rounded.pill}`, `8px 24px` padding, `{typography.button-ui}`) beside a secondary ghost pill" - "Build a feature card: `{colors.surface}` fill, `{colors.border}` 1px outline, `{rounded.lg}` radius, `24px` padding. Title in GT America Bold 32px (`{typography.heading-3}`, `{colors.ink}`), body in GT America Regular 16px (`{typography.body-small}`, `{colors.ink-muted}`)" - "Design a plum CTA section: `{colors.primary}` pill button (`{rounded.pill}`, `12px 16px` padding, `{typography.button-ui}`, `{colors.on-primary}` text). Hover brightens to `{colors.primary-hover}`" - "Render a VCR Mono code block: `{colors.surface-raised}` background, `{colors.cream}` text, `{typography.code-mono}`, `{rounded.md}` radius, `12px 16px` padding" - "Create navigation bar: `{colors.background}` fill, `{colors.border}` bottom edge, `{typography.label}` GT America Medium links in `{colors.ink}`, right-aligned ghost pill CTA" - "Build a flat text input: zero border-radius, `{colors.surface}` background, `{colors.border}` bottom-border only, `{colors.cream}` text (`{typography.body-small}`). On focus, bottom-border shifts to `{colors.focus-ring}` (orchid)" ### Iteration Guide 1. Start on warm near-black (`{colors.background}`) — resist charcoal or cool gray. Convex's warmth distinguishes it from cold-terminal dev tools. 2. All buttons are pills (`{rounded.pill}`) — never use a mid-range radius on an action button. 3. Match CTA fill to the section's palette — no single brand accent color; instead pick from the section's designated hue. 4. GT America Bold 700 with negative tracking is the display foundation — verify -1.4px at 56px before proceeding. 5. Cream yellow (`{colors.cream}`) is the warm accent on dark — use it for highlighted text, logo backgrounds, and code text. 6. Separate cards with borders (`{colors.border}`), not shadows — depth is chromatic (color change per section) not elevational. 7. VCR OSD Mono for any code or CLI — the retro monospace is part of the brand voice. 8. Publico Headline Roman for editorial uppercase moments only — serif as punctuation, not prose. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Convex. Brand names and trademarks belong to their respective owners.