Dark teal edge-database brand: a blue-black #0d1318 canvas where one high-voltage mint-teal #4ff7d1 paints heavy Inter-800 headlines and the logo, bold teal pill CTAs with black text, an electric-magenta CLI chip, and dotted-grid framing with #283945 hairline borders instead of shadows.
Browse Turso in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: turso.tech (live DOM, computed styles), 2026-07-16 (desktop 1568px). Coverage: marketing home. Dashboard/console: pending login (needs-dashboard). Responsive: breakpoints not fully verified.
Dark, technical database brand built on a deep blue-black canvas with a single high-voltage mint-teal as the hero color. The headline is set huge and heavy in Inter (800 weight) and painted entirely in Turso teal, so the type itself is the brand's light source; body copy drops to a cool gray. Structure comes from faint dotted-grid backgrounds and thin blue-gray hairline borders rather than shadows — the page reads like a schematic. Chrome is quiet white-on-black; color is rationed to the teal (and a rare electric-magenta on command/CLI chips). A full-width teal announcement bar caps the page, and the primary CTA is a bold teal pill with black text. Feels: dark, high-contrast, engineered, energetic.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Primary text, headings on dark, nav |
| gray-300 | #c5cace | Body / secondary text |
| gray-400 | #9ca3af | Muted / tertiary text |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #0d1318 | Page background (blue-black) |
| surface | #162129 | Cards, panels, language chips |
| surface-2 | #293945 | Insets, hover fills |
| border | #283945 | Hairline borders / dividers (most-used) |
| black | #000000 | Text on teal, deepest insets |
| Token | Hex | Role / usage |
|---|---|---|
| teal | #4ff7d1 | Signature Turso mint-teal: headlines, logo, primary CTA, announcement bar |
| teal-2 | #4ff8d2 | Heading teal variant |
| magenta | #d946ef | Electric-magenta accent on CLI / command pills (rare) |
| green | #34d399 / #10b981 | Semantic success |
Rule: teal #4ff7d1 is the brand — headlines, logo, the primary CTA and the top bar. Magenta appears only on CLI/command chips. Chrome text is white/gray.
Inter, ui-sans-serif, system-ui, sans-serif (headings + UI + body)ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 72 / 72 | 800 | -1.8px |
| Section (h2) | 36 / 40 | 700 | normal |
| Subhead (h3) | 48 / 48 | 600 | -1.2px |
| Body | 16–20 | 400 | 0 |
| Nav / UI | 16 | 400–600 | 0 |
| Button | 16 | 600 | 0 |
| Badge / eyebrow | 14 | 400–500 | 0 |
Patterns: display is heavy (800) with tight negative tracking, all in teal; section heads 700; everything set in Inter — no second display family.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.