Turso
A dark, developer-first database-product interface anchored on a near-black blue-tinted canvas (#0d1318) with a high-voltage mint-teal accent (#4ff7d1) and a magenta primary action (#d946ef). The system reads as modern infrastructure/SaaS — Inter throughout with very heavy, tightly-tracked display headlines, fully pill-shaped buttons and badges, soft 12-16px cards on dark surfaces, and a teal-on-black announcement bar that crowns every page. Brand voltage comes from the mint headline glow and the magenta CTA against the dark canvas.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
72px · 800 · 1.0
The quick brown fox jumps
display-lg
48px · 600 · 1.0
The quick brown fox jumps
title-sm
18px · 600 · 1.556
The quick brown fox jumps
body
16px · 500 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 40px | |
| huge | 48px | |
| huge-2 | 56px | |
| huge-3 | 64px | |
| section | 128px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| md | 12px | |
| lg | 16px | |
| xl | 24px | |
| pill | 9999px |
FAQ
- What colors does Turso use?
- Turso's core palette includes #d946ef, #4ff7d1, #4ff8d2, #ffffff, #fafafa. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Turso DESIGN.md.
- What font does Turso use?
- Turso's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Turso design system?
- A dark, developer-first database-product interface anchored on a near-black blue-tinted canvas (#0d1318) with a high-voltage mint-teal accent (#4ff7d1) and a magenta primary action (#d946ef). The sys…