# Turso · Design system migration spec

> Source: https://turso.tech  ·  Curated by OpenDesign  ·  en

> A strong example of the modern 'developer-first' aesthetic, balancing high-contrast accents with a restrained, dark foundation.

## 1. Identity DNA

Turso's identity is that of a precision instrument: a database platform built for the age of AI agents. The visual system mirrors the architecture of its product—a dark, stable foundation with a single, high-energy neon mint accent that signals critical paths and call-to-actions. This is the aesthetic of modern fintech dashboards applied to developer infrastructure.

**One-liner:** The Database for the Age of AI Agents.
**Keywords:** Database · AI Agents · SQLite · Lightweight · Architecture
**Analogy:** A precision-engineered developer tool with the aesthetic of a modern fintech dashboard.

## 2. Color

The color system is built on a deep, cool-toned dark mode foundation, providing a stable canvas for content. Its single, vibrant neon mint accent creates immediate hierarchy and draws focus to interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D1318` | main background |
| `--bg-soft` | `#162129` | card background |
| `--bg-quiet` | `#293945` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#C5CAE9` | secondary text |
| `--muted` | `#C5CACE` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.5)` | weak hint |
| `--accent` | `#4FF7D1` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Dark mode foundation with high-contrast neon accents for critical call-to-actions.

The principle is restraint: one dominant high-chroma accent against a restrained, dark field.

## 3. Typography

The typographic voice is clean, geometric, and unequivocally technical, using Inter for all UI and body copy. Display headlines employ tight, negative letter-spacing to create a sharp, modern presence that commands attention.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** ui-monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 800 | -1.8px | Hero headline |
| body | 16px | 1.5 | 400 | 0px | Main paragraph text |

**Type rules:**
- Use Inter (geometric-sans) for all UI and body text.
- Maintain tight negative letter-spacing for large display headlines.
- Use a clean, highly legible geometric sans-serif for all UI elements.

## 4. Spacing

Spacing follows a consistent 4px base rhythm, creating generous padding and clear gaps that give components room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base scale providing clear, breathable padding and gaps.

## 5. Surfaces

Elevation is communicated not with drop shadows, but through subtle 1px borders and shifts in background color. This creates a layered, paneled architecture on the dark surface.

- **Radius:** sm 4px · md 12px · lg 16px · pill 9999px
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton is composed of full-width dark sections, each containing a centered, constrained content column. This structure ensures readability and focus, creating a premium, uncluttered reading experience across the site.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark sections with centered, constrained content blocks.

## 7. Motion & Interaction

Motion is functional and professional, serving to confirm interaction rather than decorate. Transitions on hover and click states use a consistent 150–200ms cubic-bezier curve, focusing on smooth color and opacity shifts.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover states.
  - Subtle opacity changes for interactive elements.

- **Hover:** Smooth background-color and text-color transitions over 150-200ms.
- **Click:** Immediate visual feedback with reduced opacity or color shift.
- **Transition:** Consistent use of cubic-bezier(0.4, 0, 0.2, 1) for all state changes.
- **Keyboard:** Standard focus states following system defaults.

## 8. Voice & Don'ts

The editorial voice is authoritative, technical, and forward-looking, matching the precision of the visual system. Headlines are short, punchy technical statements, while calls to action are direct and command-oriented.

- **Tone:** Authoritative, technical, and forward-looking.
- **Headline style:** Short, punchy, and highly descriptive technical statements.
- **CTA style:** Direct, action-oriented commands with neon emphasis.
- **Avoid:** Avoid informal or casual language. / Avoid generic marketing fluff without technical substance. / Avoid overly complex or flowery sentences.

### Don'ts
- ❌ don't use white backgrounds — screenshot shows a deep dark (#0D1318) foundation.
- ❌ don't use decorative serif fonts — screenshot shows a clean, geometric sans-serif.
- ❌ don't use multiple accent colors — screenshot shows neon mint green (#4FF7D1) as the sole dominant high-chroma accent.
- ❌ don't use soft drop shadows — screenshot shows subtle 1px borders and background color shifts for elevation.
- ❌ don't use small, cramped spacing — screenshot shows generous padding (e.g., 40px, 128px) around content blocks.
- ❌ don't use lowercase for all headlines — screenshot shows standard title case or sentence case for technical statements.

The system deliberately excludes decorative serif fonts, light backgrounds, multiple competing accent colors, and elaborate animations.

## System Prompt (paste into AI tool)

```
This is a modern developer tools SaaS site for a database platform. The design uses a very dark, cool-toned background (#0D1318) contrasted with a high-energy neon mint accent (#4FF7D1). Typography relies on a clean geometric sans-serif with large, tightly tracked headlines and highly legible body text. Layouts are spacious and centered, emphasizing clarity and technical authority. Critical don'ts include: avoid light backgrounds, avoid decorative fonts, avoid multiple competing accent colors, and avoid heavy drop shadows. The voice is technical, direct, and focused on modern infrastructure.
```
