--- version: alpha name: "Turso" website: "https://turso.tech" description: >- A distributed-database brand whose marketing site renders the entire hero in a single aqua voltage — a 72px Inter weight-800 headline ("Millions of Databases. One Architecture.") in turquoise on a deep blue-black canvas, with a fully-rounded aqua pill CTA centered below. The aqua appears both as the display color and as the brand-decoration fill across feature-card chips and icons. Below the fold the page inverts to a white canvas with dark text, hairline-bordered three-up feature grids, and a magenta accent reserved for the Turso Cloud product split. Inter runs every tier (no second family); the system pairs a strict two-canvas inversion (deep blue hero / pure white body) with a single saturated aqua voltage held for headlines and primary actions. seo: title: "Turso Design System for React — Turso Aqua, Inter, dual canvas, 14 components" metaDescription: "Turso's marketing site as a DESIGN.md. Turso Aqua (#4ff8d2) as both display color and CTA fill, deep-blue hero canvas inverting to white below the fold, Inter at weight 800 for display. Tokens for React, Next.js, and AI tools." highlights: - "Display-color = brand-color — the 72px Inter weight-800 hero headline is rendered in Turso Aqua, not white; the brand voltage IS the display tier" - "Dual-canvas inversion — deep blue-black hero floor inverts to pure white below the fold, with the same aqua voltage carrying both" - "Inter at weight 800 — display sits at 72px in weight 800 with -1.8px tracking, the heaviest hero weight in the dev-infra category" - "Full-pill CTA geometry — 9999px radius appears 31 times across primary buttons, chips, and badges" - "Magenta accent for product split — Turso Cloud chips carry a magenta voltage distinct from the aqua brand color, scoping enterprise-tier elements to a second hue" tags: - "Backend, Database & DevOps" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Turso's marketing site does something almost no developer-infrastructure brand attempts: it makes the brand voltage the headline color. The hero h2 — "Millions of Databases. One Architecture." — is rendered at 72px in Inter weight 800 with -1.8px tracking, and the color of that headline is Turso Aqua (#4ff8d2), a saturated turquoise that doubles as the brand's signature voltage. Beneath, a fully-rounded aqua pill labelled "Start for free now" carries the same hue as a solid background fill. The hero floor is a deep blue-black, almost-but-not-quite navy, and the entire above-fold composition reads as two tones — deep blue and electric aqua. Where Linear holds violet for the smallest UI accents and Supabase holds emerald for inline highlights, Turso commits the brand color to the display tier and the primary CTA simultaneously. The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens organized into a hero-canvas tier (deep blue-black, surface-elevated dark gray, dark-blue hairlines), a body-canvas tier (pure white, dark navy text), a brand-voltage tier (Turso Aqua plus a Turso Aqua text variant), and a product-split magenta reserved for Turso Cloud chips. 11 typography tokens running Inter exclusively — display at 72px in weight 800, large-section h2 at 48px in weight 600, body at 16-18px in weight 400, labels at 14px in weight 500 with uppercase transform. 4 corner-radius tokens dominated by a 9999px pill (31 occurrences) plus a 12px / 16px / 24px ladder. 14 component definitions covering the aqua CTA pill, hairline-bordered feature cards, the dark dropdown surface, and the magenta-coded product-split chip. Feed this file to an AI coding tool and it reproduces Turso's specific moves: deep-blue hero canvas inverting to white below the fold, Turso Aqua as both display color and primary CTA fill, Inter at weight 800 for display (not the modest weight 500 most dev-tools brands run), and full-pill geometry across every interactive surface. The one move worth borrowing only if your brand voltage is itself a high-luminance color: rendering display in the brand color rather than in white. At Turso's aqua luminance the contrast against the deep blue floor reads cleanly; at a darker brand color the same composition would collapse. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://turso.tech" title: "Turso — official site" description: "Turso's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Turso's primary brand color?" answer: "Turso's brand voltage is Turso Aqua (#4ff8d2), a saturated turquoise wired into the CSS as --turso-primary-aqua. It appears 32 times in the captured page — 14 as background fill on the primary CTA pill and on feature-card chips, 10 as border, and 8 as text. The rare move is that the aqua is the color of the 72px hero h2 headline itself, not just the CTA accent. A companion text-variant (#88ffe4, wired as --turso-aqua-text) is reserved for slightly-larger text where the brighter primary aqua would overpower the canvas. Below the fold, where the page inverts to white, the aqua carries the same primary-CTA fill and the same accent role." - id: "typography" title: "What typeface does Turso use, and what should I use as a substitute?" answer: "Turso runs Inter across every display, heading, body, button, and label tier — one family does every job, with no second voice. Display headlines sit at 72px in weight 800 with -1.8px tracking; section h2 at 48px in weight 600 with -1.2px tracking; body at 16-18px in weight 400 with 28-32px line-height; labels at 12-14px in weight 500-600. Inter is open-source from Google Fonts and can be embedded directly; no substitute needed. If you need a tighter alternative, Geist (Vercel's open-source sans) has comparable proportions at the display tier. The weight-800 display is the move to preserve — most Inter-based dev-tools brands sit at weight 600 or 700." - id: "canvas-color" title: "Why does Turso use two canvases instead of one?" answer: "The page inverts at the section break. The hero floor is a deep blue-black (#162129, wired as --turso-dark-blue, --turso-blue-2, --turso-blue-3) — frequency 19 — chosen because the saturated Turso Aqua needs maximum contrast to read as both display color and CTA fill simultaneously. Below the fold, the canvas inverts to pure white (#ffffff — frequency 551), where the same aqua voltage carries the primary CTA against dark-navy body text. The two-canvas system lets the brand voltage occupy two different roles (display color on dark, accent color on light) without competing with a single-canvas neutral. The dark-blue floor returns later for the Turso Cloud product-split section." - id: "rounded-style" title: "What is Turso's corner-radius philosophy?" answer: "The system runs a full-pill plus generous-soft scale. 9999px (full pill) appears 31 times across primary buttons, category chips, and small badges — every interactive element on the hero canvas is fully rounded. The mid-tier ladder runs 12px (20 occurrences) for feature-card outlines, 16px (15 occurrences) for larger surface tiles, and 24px (1 occurrence) for the largest split-panel card. There is no 4-8px tight tier; even small UI elements start at 12px. The combination of full pills on interactive elements and 12-16px softness on content surfaces reads as approachable rather than industrial." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own database-vendor marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Turso's specific moves: deep blue-black hero canvas inverting to pure white below the fold, Turso Aqua as both display color and primary CTA fill, Inter at weight 800 for display, full-pill geometry across every interactive surface, and a magenta product-split accent reserved for Turso Cloud chips. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the display-color-equals-brand-color move only works if your brand voltage is a high-luminance hue; rendering display in a darker brand color against a dark canvas collapses the contrast." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#4ff8d2" primary-text: "#88ffe4" accent-magenta: "#d946ef" accent-purple: "#a21caf" ink: "#ffffff" ink-muted: "#c5cace" ink-on-light: "#162129" canvas: "#162129" surface-1: "#283945" surface-deep: "#0d1318" surface-light: "#ffffff" hairline: "#283945" hairline-light: "#e5e7eb" shadow: "#000000" typography: display-xl: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 72px fontWeight: 800 lineHeight: 72px letterSpacing: "-1.8px" display-lg: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 48px letterSpacing: "-1.2px" display-md: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 40px letterSpacing: 0 heading-md: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 30px fontWeight: 600 lineHeight: 36px letterSpacing: 0 heading-sm: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 32px letterSpacing: 0 heading-xs: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 28px letterSpacing: 0 body-lg: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 32px letterSpacing: 0 body-md: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-sm: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 button-md: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: 0 label-caps: fontFamily: "Inter, \"Inter Fallback\", system-ui, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 16px letterSpacing: 0 rounded: none: "0px" md: "12px" lg: "16px" xl: "24px" full: "9999px" spacing: xs: "2px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "40px" 3xl: "56px" 4xl: "128px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink-on-light}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "12px 24px" height: "44px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "10px 14px" height: "40px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "0px 40px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "6px" hero-heading: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink-on-light}" typography: "{typography.display-lg}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" label-uppercase: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.label-caps}" card-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "40px 24px 24px" borderColor: "{colors.hairline}" card-light: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink-on-light}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "40px" borderColor: "{colors.hairline-light}" card-product-cloud: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "40px" borderColor: "{colors.accent-magenta}" chip-aqua: backgroundColor: "{colors.primary}" textColor: "{colors.ink-on-light}" typography: "{typography.label-caps}" rounded: "{rounded.full}" padding: "4px 8px" height: "24px" chip-magenta: backgroundColor: "{colors.accent-magenta}" textColor: "{colors.ink}" typography: "{typography.label-caps}" rounded: "{rounded.full}" padding: "4px 8px" height: "24px" --- ## Overview Turso's marketing site does something almost no developer-infrastructure brand attempts. **Display-as-voltage.** The hero h2 — "Millions of Databases. One Architecture." — is rendered at 72px in Inter weight 800 with -1.8px tracking, and the color of that headline is Turso Aqua (`{colors.primary}` — #4ff8d2), a saturated turquoise that simultaneously serves as the brand's primary-CTA fill. The display tier IS the brand tier. Where Linear holds violet for the smallest UI accents and Supabase holds emerald for inline highlights, Turso commits the brand color to the display headline and the primary CTA pill at the same time. The canvas system is a **dual-canvas inversion**. The hero floor is a deep blue-black (`{colors.canvas}` — #162129) — chosen because the saturated aqua needs maximum contrast to read as both display color and CTA fill. Below the fold, the canvas inverts to pure white (`{colors.surface-light}` — #ffffff), where the same aqua voltage carries the primary CTA against dark-navy body text (`{colors.ink-on-light}` — #162129). The deep-blue floor returns later for the Turso Cloud product-split section. This inversion lets the brand voltage occupy two different roles (display color on dark, accent color on light) without forcing a single-canvas neutral to mediate. Typography runs **Inter exclusively** — no second family, no monospace tier in the captured chrome. Display at 72px in weight 800 with -1.8px tracking is the heaviest hero treatment in the dev-infra category — where Vercel, Linear, and Cloudflare hold display at weight 500-600, Turso commits to weight 800. The weight choice reads as confident-bold rather than editorial-restrained, and the -1.8px negative tracking keeps the letterforms from bloating at that scale. **Key Characteristics:** - Display-color equals brand-color: the 72px hero h2 is rendered in `{colors.primary}` (#4ff8d2), not in white — the brand voltage IS the display tier. - Dual canvas: `{colors.canvas}` (#162129 deep blue-black) on the hero, inverting to `{colors.surface-light}` (#ffffff) below the fold, with the same aqua voltage carrying both surfaces. - Inter at weight 800 with -1.8px tracking on the 72px hero — the heaviest display treatment in the dev-infra category. - Full-pill geometry: 9999px radius appears 31 times across primary buttons, chips, and small badges. - Magenta product-split accent: `{colors.accent-magenta}` (#d946ef) reserved for Turso Cloud product chips, distinct from the aqua brand voltage. - Hairline-bordered cards: `{colors.hairline}` (#283945) on dark surfaces and `{colors.hairline-light}` (#e5e7eb) on light surfaces — elevation comes from outlines, not from a second surface fill. - Inter-only system with no monospace voice in the captured chrome — code blocks would inherit from the system mono stack on demand. ## Colors ### Brand - **Turso Aqua** (`{colors.primary}` — #4ff8d2): frequency 32 — 14 as background, 10 as border, 8 as text. Wired as `--turso-primary-aqua`. The single brand voltage, doing triple duty: it is the color of the 72px hero h2 display, the fill of the primary CTA pill, and the brand-decoration color on feature-card chips and inline accents. - **Turso Aqua Text** (`{colors.primary-text}` — #88ffe4): wired as `--turso-aqua-text`. A slightly-brighter text-grade variant reserved for situations where the primary aqua reads heavy. Not used in the captured hero but declared for typography contexts. - **Accent Magenta** (`{colors.accent-magenta}` — #d946ef): frequency 6 as background. The product-split accent reserved for Turso Cloud chips and the Cloud product-card border. Distinct from the aqua brand voltage — scopes enterprise-tier elements to a second hue without inviting confusion. - **Accent Purple** (`{colors.accent-purple}` — #a21caf): frequency 2 as border. The deeper companion to the magenta, used as a hairline border on Cloud product cards when the magenta border tone needs to read softer. ### Surface - **Canvas** (`{colors.canvas}` — #162129): frequency 19 as background. The deep blue-black hero floor, wired as `--turso-dark-blue`, `--turso-blue-2`, `--turso-blue-3`. A near-navy with enough blue to feel atmospheric rather than charcoal; pairs with the saturated aqua voltage at maximum contrast. - **Surface-1** (`{colors.surface-1}` — #283945): frequency 74 — 6 as background, 68 as border. Wired as `--turso-dark-gray`. The elevated dark surface tier — used for elevated card fills and as the dominant hairline on dark surfaces. - **Surface Deep** (`{colors.surface-deep}` — #0d1318): frequency 8 — used as the deepest fill on inset surfaces like code-snippet wells. The "below midnight" tier that anchors stacked dark surfaces. - **Surface Light** (`{colors.surface-light}` — #ffffff): frequency 551 — 310 as text, 4 as background, 237 as border. The body-canvas floor that inverts the page below the fold. Pure white, no warmth. ### Text - **Ink** (`{colors.ink}` — #ffffff): the same hex as the light-canvas surface, doing double duty as the white text color on dark canvases. The dominant text tone on the hero floor. - **Ink Muted** (`{colors.ink-muted}` — #c5cace): frequency 54 — 27 as text, 27 as border. Wired as `--turso-light-gray`. The secondary running-text tone on dark canvases — used for body paragraphs and caption rows beneath the hero. - **Ink on Light** (`{colors.ink-on-light}` — #162129): the same hex as the dark canvas, doing double duty as the dark text color on the white body canvas below the fold. ### Hairline - **Hairline** (`{colors.hairline}` — #283945): the same hex as `{colors.surface-1}`, functioning as the border-only tone on dark canvases. The dominant border across feature cards, dropdowns, and dividers on the hero floor. - **Hairline Light** (`{colors.hairline-light}` — #e5e7eb): frequency 1 in gradient — the light-canvas border tone used on white-background feature cards below the fold. ### Semantic - **Shadow** (`{colors.shadow}` — #000000): frequency 28 — 14 as text, 14 as border. Pure black, reserved for the primary-CTA text color (the dark text on the aqua pill) and for the deepest inset borders. ## Typography ### Font Family The system runs **Inter** across every display, heading, body, button, and label tier — one family, no second voice. Fallbacks walk to an Inter Fallback declaration and then to `system-ui, sans-serif`. Inter is open-source from Google Fonts and embedded directly; no proprietary licensing. There is no monospace family declared in the captured marketing chrome. Inline code or terminal-style examples would inherit the browser's system-mono stack on demand; the marketing surface itself has no code-block tier. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 72px | 800 | 72px | -1.8px | Hero h2 ("Millions of Databases. One Architecture.") | | `{typography.display-lg}` | 48px | 600 | 48px | -1.2px | Section h2 / h3 ("Don't just take our word for it") | | `{typography.display-md}` | 36px | 700 | 40px | 0 | Sub-section displays on light-canvas bands | | `{typography.heading-md}` | 30px | 600 | 36px | 0 | Feature-row section titles | | `{typography.heading-sm}` | 24px | 600 | 32px | 0 | Product-card titles ("Turso", "Turso Cloud") | | `{typography.heading-xs}` | 18px | 600 | 28px | 0 | Feature-card sub-titles | | `{typography.body-lg}` | 18px | 400 | 32px | 0 | Lead paragraphs beneath display headlines | | `{typography.body-md}` | 16px | 400 | 28px | 0 | Default running text | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Caption rows, nav links | | `{typography.button-md}` | 16px | 600 | 24px | 0 | Primary CTA pill label | | `{typography.label-caps}` | 12px | 500 | 16px | 0 | Uppercase product-tier chips (transformed at render time) | ### Principles The 72px display at weight 800 with -1.8px tracking is the system's signature typographic moment. Weight 800 is two steps heavier than the dev-infra category default (weight 500-600); the negative tracking keeps the letters from bloating at the larger size. The weight commitment reads as confident-bold rather than editorial-restrained — the inverse of the magazine-style display weight 500 that Cloudflare and Stripe run. Body and lead-paragraph tiers sit at weight 400 with generous 28-32px line-heights. The rhythm is loose enough to keep dense feature-card copy readable without compressing. ### Note on Font Substitutes Inter is open-source from Google Fonts and can be embedded directly — no substitute needed. If you must swap: **Geist** (Vercel's open-source sans) has comparable proportions at the display tier; **General Sans** is slightly more humanist if you want a softer body grade. ## Layout ### Spacing System - **Base unit:** 8px (with 24px and 16px as the dominant section modules). - **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 40px · `{spacing.3xl}` 56px · `{spacing.4xl}` 128px. - **Section padding (vertical):** ~128px between major bands — the captured composite spacing of "128px 40px 40px" and "128px 0px 48px" appears repeatedly, anchoring the page on a generous 128px section rhythm. - **Card internal padding:** 40px on light-canvas product-card variants (`{component.card-light}`), 40x24x24 on dark-canvas feature cards. Both push toward generous internal space rather than tight chrome. - **Top-nav padding:** ~0x40 horizontal, with a 64px nav height. ### Grid & Container - **Max content width:** ~1280px on the hero headline (which spans nearly full-bleed at 72px), ~1100px on body copy beneath, ~1080px on feature grids. - **Hero:** centered headline at 72px, with a centered lead paragraph and aqua-pill CTA stacked vertically. The hero terminates at a uniform-tint logo wall below the CTA. - **Product-split section:** 2-column 50/50 grid pairing the Turso (open-source) card with the Turso Cloud (managed-service) card. The Cloud card carries the magenta accent border that distinguishes it from the aqua-coded open-source side. - **Feature grid:** 3-column responsive grid for the lower-page feature rows. - **Testimonial wall:** 3-up grid of customer-quote cards on the white canvas band. ### Rhythm The page alternates between **dense dark-canvas display moments** (the hero, the Turso Cloud product split) and **breathable light-canvas editorial bands** (the testimonial wall, the feature grids). The canvas inversion is the page's structural device — bands either commit to the dark hero floor or to the white body floor; there is no gradient-mediated middle. ## Elevation The system has essentially **no shadow tier**. Elevation comes from hairline borders and from the canvas-inversion contrast between the dark hero floor and the white body floor. - **Flat (no shadow):** the entire hero, body bands, feature grids — 99% of surfaces. - **Hairline outlines:** `{colors.hairline}` (#283945) carries 68 border occurrences on the dark canvas, and `{colors.hairline-light}` (#e5e7eb) handles the borders on light-canvas cards. - **Tonal lift:** `{colors.surface-1}` (#283945) cards sit on `{colors.canvas}` (#162129) — a small but readable contrast that lifts feature cards off the hero floor. - **Magenta product-split border:** the Turso Cloud card carries an `{colors.accent-magenta}` 1px border that does the elevation work the brand-aqua border would do on the open-source side. The border tells you "this is the paid tier" without filling the card with a different color. ## Shapes The radius scale is **full-pill plus generous-soft middle**. - `{rounded.none}` 0px — only on display headlines and inline text spans. - `{rounded.md}` 12px — frequency 20. The default feature-card radius on dark canvases. - `{rounded.lg}` 16px — frequency 15. Larger surface tiles, the light-canvas product cards, the testimonial wall cards. - `{rounded.xl}` 24px — frequency 1. The largest single-card variant; reserved for split-panel hero cards. - `{rounded.full}` 9999px — frequency 31. Every interactive surface: the primary CTA pill, the secondary buttons, the product-tier chips, the small badges. There is no 4-8px tight tier. Even small UI surfaces start at 12px. The combination of full pills on interactive elements and 12-16px softness on content surfaces reads as approachable rather than industrial. ## Components **`button-primary`** — The signature CTA. `{colors.primary}` (Turso Aqua) fill, dark `{colors.ink-on-light}` (#162129) text, `{rounded.full}` pill radius, 12x24 padding, 44px height. "Start for free now" is the canonical instance. The dark-text-on-aqua composition reads as the highest-contrast affordance on the hero floor. **`button-secondary`** — Transparent fill, white text, 1px `{colors.hairline}` border, same pill radius, 10x14 padding, 40px height. Used for "Read the docs" / "Learn more" secondary actions. **`top-nav`** — `{colors.canvas}` (deep blue) surface continuation, 64px height, 0x40 padding. Carries the Turso wordmark flush-left and product-nav links center-right, with the Sign-in / Get-started actions far right. No bottom border — the nav and the page floor share a surface color. **`nav-link`** — Transparent fill, white text in `{typography.body-sm}` (14px / 400), 6px padding. **`hero-heading`** — `{colors.primary}` (Turso Aqua) text on the transparent canvas, `{typography.display-xl}` (72px / 800) with -1.8px tracking. 0 padding — the headline overflows to the container edges. The display-color-equals-brand-color move is the system's signature. **`section-heading`** — Dark `{colors.ink-on-light}` text on the white-canvas body bands, `{typography.display-lg}` (48px / 600). Used for the testimonial section title and the closing-band display ("Turso is the Database for…") that anchors the inverted lower page. **`body-paragraph`** — White text at `{typography.body-lg}` (18px / 400) on dark canvases, inverting to `{colors.ink-on-light}` on light canvases. **`body-paragraph-muted`** — `{colors.ink-muted}` (#c5cace) text at `{typography.body-md}` for secondary copy on dark canvases. **`label-uppercase`** — Muted text at `{typography.label-caps}` (12px / 500) with uppercase transform applied at render time. Carries section-marker labels above feature blocks. **`card-dark`** — `{colors.canvas}` fill, white text, 1px `{colors.hairline}` border, `{rounded.md}` 12px radius, 40x24x24 padding. The default feature card on the dark hero floor; depth comes from the hairline outline rather than a fill shift. **`card-light`** — White `{colors.surface-light}` fill, dark text, 1px `{colors.hairline-light}` border, `{rounded.lg}` 16px radius, 40px internal padding. The default content card on the inverted body canvas. **`card-product-cloud`** — Dark `{colors.canvas}` fill, white text, 1px `{colors.accent-magenta}` border, `{rounded.lg}` 16px radius, 40px padding. The Turso Cloud product-tier card — the magenta border is the visual cue that distinguishes the paid-tier side from the open-source side. **`chip-aqua`** — `{colors.primary}` fill, dark text, `{rounded.full}` pill, 4x8 padding, 24px height. Used for "Open Source" / feature-availability chips on the Turso (open-source) product card. **`chip-magenta`** — `{colors.accent-magenta}` fill, white text, same pill geometry. Used for "Cloud" / managed-tier chips on the Turso Cloud product card, paired with `{component.card-product-cloud}`. ## Do's and Don'ts **Do** render the hero display in `{colors.primary}` (Turso Aqua), not white. The display-color-equals-brand-color move is the system's defining gesture; pulling the headline to white reduces the brand voltage to a single CTA pill and erases the hero's chromatic statement. **Do** invert the canvas at the section break. The deep-blue hero floor inverting to pure white below the fold is the page's structural device — flattening to a single canvas (either dark or light throughout) collapses the dual-role brand-voltage move that depends on aqua reading differently on each surface. **Do** use `{colors.accent-magenta}` (#d946ef) as the product-split accent on Turso Cloud chips and card borders, never as a primary-action voltage. The magenta scopes the paid-tier elements without competing with the brand aqua for action-color attention. **Do** commit to Inter weight 800 on the 72px hero. The bold display weight is the system's distinguishing typographic move in a category where most peers hold display at weight 500-600. **Don't** soften the hero display from weight 800 to weight 500 or 600. The bold weight is what reads as confident-Turso rather than editorial-dev-tool; dropping the weight makes the page look like every other Inter-based dev-infra brand. **Don't** use `{colors.primary}` (Turso Aqua) as a small-label or text-emphasis color at body sizes. It is reserved for the display tier, the CTA fill, and the feature-card chip fill — at body sizes the saturated turquoise reads as a hyperlink rather than as brand voltage. For text emphasis, use `{colors.primary-text}` (#88ffe4) instead. **Don't** mix the aqua and magenta voltages in the same composition. Each color has a single semantic role (brand voltage vs. product-tier split); placing them adjacent reads as a chromatic accident rather than as an intentional dual-color statement. **Don't** introduce a 4-8px tight radius tier. The system is binary — full pills on interactive elements or 12-16px softness on content surfaces. A 6px button radius would feel borrowed from a Material design library rather than from Turso's own approachable-by-default geometry. ## Known Gaps - **Light mode (full coverage):** the captured surface uses canvas inversion as a section-rhythm device, not as a theme switch. A user-toggleable light theme variant is not represented here. - **Hover and focus states:** the full state matrix (hover backgrounds, active press, focus rings, disabled tints) was not visible on the captured marketing surface. - **Form input states:** the text-input component is not exposed in the captured marketing chrome and is not declared in this spec; input styling lives inside the Turso Cloud product console. - **Monospace tier:** the captured marketing surface has no rendered code blocks. The Turso Cloud console and the developer documentation (`docs.turso.tech`) carry their own monospace styling that is not represented here. - **Motion:** the hero headline and the product-split section animate on scroll-into-view but the spec captures end-state values only. Easing curves, duration, and stagger live in the live page runtime. - **Product surfaces:** this DESIGN.md captures the marketing site only. The Turso Cloud console (`app.turso.tech`) carries a richer token system — query-result tables, database-explorer panels, latency-graph colors — that is not represented here. - **Subscription-tier accents:** the Turso Cloud Starter / Scaler / Enterprise tiers carry their own pill colors and badge treatments inside the console; only the umbrella magenta accent appears in the marketing chrome captured here.