# Turso — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Primary text, headings on dark, nav |
| gray-300 | `#c5cace` | Body / secondary text |
| gray-400 | `#9ca3af` | Muted / tertiary text |

### Surfaces & borders
| 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 |

### Accent & semantic
| 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.

## 3. Typography Rules

- Single family: `Inter, ui-sans-serif, system-ui, sans-serif` (headings + UI + body)
- Mono for CLI: `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.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg teal `#4ff7d1`, text `#000000`, radius pill (9999px), h 44px, 16px/600, padding `0 24px`.
- **Ghost/nav (Login)**: transparent, white text, pill radius, h 36px, padding `0 16px`.
- **CLI / command pill**: bg magenta `#d946ef`, white text, pill, mono content ("npx turso@latest").
- **Language / file chip**: bg `#162129`, white text, border 1px `#283945`, radius 12px.

### Cards / panels
- bg `#162129`, border 1px `#283945`, radius 12–16px, no shadow (flat).

### Badge (hero eyebrow)
- Dark pill on canvas with teal text/border: "The Database for the Age of AI Agents".

### Nav
- h ~64px on `#0d1318`, hairline bottom border; teal bull logo + TURSO wordmark left, center links, right social icons + Login + teal "Start for free now" pill.

### Announcement bar
- Full-width teal `#4ff7d1` strip, black text, underlined link ("Join the waitlist").

## 5. Layout Principles

- Centered hero: teal announcement bar → nav → dark badge pill → giant teal display → gray subhead → teal CTA pill.
- Content framed inside a large bordered container with a faint dotted-grid background.
- Max content width ~1200px, centered; generous vertical rhythm.

## 6. Depth & Elevation

- Radii: small `6px`, cards `12px`, panels `16px`, feature `24px`, buttons/badges `pill` (9999px).
- No box-shadows captured — depth is dotted grid + `#283945` hairline borders on the blue-black canvas.

## 7. Motion

- Micro-transitions on hover (color/background/opacity). No heavy scroll library confirmed; captured at rest.

## 8. Backgrounds, Effects & WebGL

- Blue-black canvas with faint dotted-grid texture inside bordered containers. No WebGL / background video confirmed. Flat surfaces, hairline borders, no shadow. Teal is the only glow (via saturated fills, not blur).

## 9. Do's and Don'ts

### Do
- Use a blue-black canvas (`#0d1318`) with white text and one mint-teal `#4ff7d1` as the brand color.
- Paint big display headlines entirely in teal, Inter 800 with tight negative tracking.
- Frame content in bordered containers with a faint dotted-grid background; use `#283945` hairlines, not shadows.
- Keep the primary CTA a bold teal pill with black text; nav actions as ghost pills.
- Use magenta `#d946ef` only on CLI/command chips.
- Set everything in Inter; mono only for CLI snippets.

### Don't
- Don't add drop shadows — structure is borders + dotted grid.
- Don't introduce a second display family (Inter only).
- Don't spread magenta beyond command/CLI chips.
- Don't put teal text on a light background — teal lives on the dark canvas.

## 10. Responsive Behavior

- Nav collapses to a menu on small screens; the 72px display scales down. Breakpoints not fully verified — captured at desktop 1568px.

## 11. Agent Prompt Guide

- Canvas `#0d1318` · Text `#ffffff` · Muted `#9ca3af` · Border `#283945` · Accent `#4ff7d1`
- Font: `Inter` · Body: 16px · Radius: 12px card / 16px panel / pill button · Control height: 44px CTA / 36px nav
- Primary: teal `#4ff7d1` bg + black text, pill · Cards `#162129` + 1px `#283945`, no shadow

<turso_design_language>
Use the Turso design language: a deep blue-black canvas #0d1318 with white text and one high-voltage mint-teal #4ff7d1 as the brand's single light source. Set the hero display huge in Inter 800 with tight -1.8px tracking and paint it entirely teal; section heads are Inter 700, and everything else — UI and body — is Inter too (gray #c5cace / #9ca3af for secondary), with mono reserved for CLI snippets. The primary CTA is a bold teal pill with black text (44px, weight 600); nav actions are ghost pills; a full-width teal announcement bar caps the page. Cards and language chips are #162129 with 1px #283945 hairline borders and radius 12-16px, and there are no drop shadows — structure comes from those hairlines plus a faint dotted-grid background inside bordered containers. Reserve electric-magenta #d946ef for CLI/command chips only. Feels: dark, high-contrast, engineered, energetic. Avoid: drop shadows, a second display family, teal text on light backgrounds, and spreading magenta beyond command chips.
</turso_design_language>