What is Turso's primary brand color?

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.

What typeface does Turso use, and what should I use as a substitute?

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.

Why does Turso use two canvases instead of one?

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.

What is Turso's corner-radius philosophy?

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.

Can I use this DESIGN.md to build my own database-vendor marketing site?

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.

Turso Design System

Turso's marketing site as a DESIGN.md.

About Turso DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source turso.tech

Backend, Database & DevOps

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.

What makes it distinct

Display-color = brand-colorthe 72px Inter weight-800 hero headline is rendered in Turso Aqua, not white; the brand voltage IS the display tier
Dual-canvas inversiondeep blue-black hero floor inverts to pure white below the fold, with the same aqua voltage carrying both
Inter at weight 800display sits at 72px in weight 800 with -1.8px tracking, the heaviest hero weight in the dev-infra category
Full-pill CTA geometry9999px radius appears 31 times across primary buttons, chips, and badges
Magenta accent for product splitTurso Cloud chips carry a magenta voltage distinct from the aqua brand color, scoping enterprise-tier elements to a second hue

Live at turso.tech

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

turso.tech

Explore Turso

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Turso design system FAQ

Common questions about Turso's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Turso — official site

Turso's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.