---
title: "Turso design system"
variant: extended
source: https://turso.tech/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/turso-tech)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Turso · Design System

> Dark technical clarity, energized by vivid mint.

**Theme:** dark · **Industry:** devtools · **Source:** https://turso.tech/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Turso presents its database platform through a dark, restrained interface punctuated by vivid mint calls to action and code details. A wide, centered content frame organizes product explanations, customer proof, enterprise capabilities, and community links into clearly separated bands.

## North star

Keep the canvas quiet and near-black, then use mint sparingly to direct attention through a precise, developer-first layout.

## Overview

The page is anchored by a near-black blue-gray canvas, with subtle boundary lines dividing the central content frame into long, orderly sections. Vivid mint marks the primary action, selected headline text, inline links, and small interface details; white headings provide contrast while muted gray carries explanatory copy. Inter is the dominant voice: compact navigation and body text support oversized, tightly tracked hero typography. Monospace appears in code samples and small technical labels, reinforcing the developer context without taking over the page. Layouts alternate between centered statements, two-column product explanations, and card grids. Fine borders rather than heavy shadows define most panels, diagrams, and cards. The imagery is primarily interface-led: code windows, database diagrams, and a stylized growth illustration sit against the dark canvas. Generous gaps between section bands give dense technical content room to breathe.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Slate | `#101317` | `--color-midnight-slate` | brand | Primary page canvas and the dark field behind most sections. |
| Signal Mint | `#4ff8d2` | `--color-signal-mint` | accent | Primary CTA fill, highlighted hero text, links, and selected UI details. |
| Soft Graphite | `#878a8c` | `--color-soft-graphite` | neutral | Main muted body copy against the dark canvas. |
| Clear White | `#ffffff` | `--color-clear-white` | neutral | Headings, navigation, card copy, and high-contrast text. |
| Quiet Outline | `#1e2a32` | `--color-quiet-outline` | surface | Fine card, code-window, and section boundaries. |
| Open Source Violet | `#d946ef` | `--color-open-source-violet` | accent | Open-source badge and the secondary repository action. |
| Deep Fjord | `#283945` | `--color-deep-fjord` | surface | Additional dark structural details in navigation, footer, and section elements. |
| Dim Ash | `#616569` | `--color-dim-ash` | neutral | Lower-emphasis secondary copy. |
| Pale Alloy | `#c5cace` | `--color-pale-alloy` | neutral | Occasional subdued footer text. |
| Cloud Silver | `#e7e8e8` | `--color-cloud-silver` | neutral | Light secondary text appearing in selected content. |
| Steel Fjord | `#3a4e5c` | `--color-steel-fjord` | surface | Occasional card and diagram outlines, not a dominant brand fill. |
| True Black | `#000000` | `--color-true-black` | semantic | Text and icon contrast on mint-filled buttons and badges. |
| Muted Stone | `#6f7174` | `--color-muted-stone` | neutral | Sparse low-emphasis text details. |
| Blue Charcoal | `#23313c` | `--color-blue-charcoal` | surface | Subtle dark card surface detail. |
| Emerald Signal | `#34d399` | `--color-emerald-signal` | accent | Sparse green text accent; secondary to the brighter mint. |

### Semantic aliases

`--color-canvas` → `#101317` (Midnight Slate) · `--color-text` → `#ffffff` (Clear White) · `--color-text-muted` → `#878a8c` (Soft Graphite) · `--color-text-subtle` → `#616569` (Dim Ash) · `--color-border` → `#1e2a32` (Quiet Outline) · `--color-accent` → `#4ff8d2` (Signal Mint) · `--color-accent-2` → `#d946ef` (Open Source Violet) · `--color-accent-3` → `#34d399` (Emerald Signal) · `--color-on-accent` → `#000000` (True Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#101317` | 18.62:1 | AAA |
| `#878a8c` | `#101317` | 5.36:1 | AA |
| `#616569` | `#101317` | 3.17:1 | AA-large |
| `#4ff8d2` | `#101317` | 13.92:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_f367f3 | `--font-body` | webfont | 400, 600, 700, 500, 800 | Headings, navigation, body copy, buttons, and links | Inter |
| monospace | `--font-mono` | system | 400 | Code examples and compact technical captions | IBM Plex Mono |

- **__Inter_f367f3:** Use the measured Inter webfont; display headings are heavy and tightly tracked, while controls use semibold mixed case.
- **monospace:** Keep to code panels and technical labels; regular weight, small scale, and relaxed line spacing.

### Type scale — Augmented Fourth (ratio ≈ 1.439, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 800 | 1 | -0.025em | — | __Inter_f367f3 | Oversized hero statement with tight tracking. |
| h1 | 36px | 700 | 1.11 | -0.025em | — | __Inter_f367f3 | Primary section headlines and large statements. |
| h2 | 20px | 600 | 1.4 | 0 | — | __Inter_f367f3 | Card headings and secondary section titles. |
| h3 | 18px | 600 | 1.56 | 0 | — | __Inter_f367f3 | Feature titles and smaller content-group headings. |
| body | 14px | 400 | 1.71 | 0 | — | __Inter_f367f3 | Explanatory paragraphs and descriptive card text. |
| caption | 13px | 400 | 1.85 | 0 | — | monospace | Compact monospace labels and technical captions. |
| button | 16px | 600 | normal | 0 | — | __Inter_f367f3 | Primary and secondary call-to-action labels. |
| nav | 14px | 600 | 1.43 | 0 | — | __Inter_f367f3 | Top navigation labels. |
| link | 14px | 600 | 1.43 | 0 | — | __Inter_f367f3 | Inline and card-level action links. |
| code | 13px | 400 | 1.85 | 0 | — | monospace | Code samples and technical snippets. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56 px.
- Section rhythm 56px · element gap 6px · card padding — · max content width 1280px.

Use a centered content frame with a measured maximum width of 1280px, framed by fine vertical edges. The hero begins with a two-column composition: large copy opposite a code window, followed by a compact customer logo strip. Later bands alternate centered introductions, multi-column feature cards, and split product or enterprise presentations. Section spacing follows a measured 56px rhythm; keep local groupings comfortable rather than crowded. Most sections share the same dark ground, with horizontal hairlines marking transitions.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `9999px` · nav `9999px` · xs `8px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: restrained dark surfaces and thin borders establish card edges and section divisions. Rounded cards and code panels provide grouping without pronounced shadow. Where a card shadow is used, keep it subtle and low-contrast so it does not compete with mint actions or bright typography.

## Imagery

Avoid relying on photography. The page uses code-window mockups, database architecture diagrams, simple interface graphics, and a stylized mint growth illustration. Keep technical visuals contained within bordered panels and use the same dark surfaces as the surrounding layout. Let the mint accents and small colored diagram elements carry visual emphasis; reserve illustration-like color variation for those visuals rather than expanding the general palette.

## Components

### Announcement strip

A narrow mint band across the top with centered dark announcement copy and a news link.

### Primary CTA

Pill-shaped Signal Mint (#4ff8d2) button with black semibold Inter text; use for free-start and cloud actions.

### Code window

Dark bordered panel containing monospace code, restrained syntax color, and a compact tab-like header.

### Feature card

Dark card with a fine #1e2a32 outline, rounded corners, white heading, muted description, and mint link.

### Badge

Small uppercase pill; Signal Mint for community and Open Source Violet for the open-source label.

### Customer strip

A bordered horizontal band pairing a brief trust statement with a row of customer wordmarks.

### Footer link columns

Compact multi-column navigation on the dark canvas, using muted labels and restrained bright brand details.

### Measured component styles

- **Primary button** (“Start for free now”): background #4ff8d2 · text #000000 · radius 9999px · padding 12px 24px · 600 16px __Inter_f367f3
- **Secondary button** (“Fork Repository”): background #d946ef · text #ffffff · radius 9999px · padding 12px 24px · 600 16px __Inter_f367f3
- **Link** (“Learn about per-entity isolation →”): transparent background · text #4ff8d2 · radius 0px · padding 0px · 600 14px __Inter_f367f3
- **Card** (“The database wasn't built for a world wh”): background #0f1317 · text #ffffff · border 1px solid #1e2a32 · radius 16px · padding 0px · 400 16px __Inter_f367f3
- **Badge** (“OPEN SOURCE”): background #d946ef · text #ffffff · radius 9999px · padding 4px 12px · 500 12px __Inter_f367f3 · uppercase
- **Navigation item** (“Turso Product Solutions Customers Partne”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px __Inter_f367f3

## Do

- Use #101317 as the dominant canvas.
- Reserve #4ff8d2 for primary actions and selective emphasis.
- Set headings and navigation in Inter.
- Use monospace only for code and technical captions.
- Separate cards and section bands with fine dark borders.
- Alternate split layouts with centered content groups.

## Don't

- Do not introduce bright section backgrounds.
- Do not use mint as a large page-wide fill.
- Do not turn every card into a raised, shadow-heavy panel.
- Do not use decorative photography in place of product visuals.
- Do not crowd the technical content or remove section breaks.
- Do not treat violet as a second primary action color.

## Agent prompt

Build a new developer-focused page in Turso’s visual language. Use Midnight Slate (#101317) as the main canvas, Clear White (#ffffff) for strong headings, and Soft Graphite (#878a8c) for supporting copy. Apply Signal Mint (#4ff8d2) selectively to primary pill buttons, links, and small highlights; use Open Source Violet (#d946ef) only for an occasional community or open-source action. Set the interface in Inter, with monospace code panels and labels. Center content within the measured 1280px maximum width. Create clear section bands with fine Quiet Outline (#1e2a32) borders, alternating split product layouts and compact card grids. Keep the page flat and technical, with minimal shadow and interface-led visuals such as code, diagrams, or database mockups. Maintain comfortable section spacing and strong alignment.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero inside a framed content area, followed by a horizontal customer logo strip. | Announcement link, Primary free-start action, Customer trust proof | Mint announcement band, Large split headline, Code window, Logo strip |
| 2 | comparison | Centered introduction above a side-by-side architecture diagram. | Explain current pain, Compare models | Centered headline, Diagram panels, Fine dividers |
| 3 | feature-grid | Left-aligned heading above a five-column row of feature cards. | Scan five benefits, Follow feature links | Numbered cards, Muted descriptions, Mint text links |
| 4 | feature-split | Two-column copy-and-code composition with left-aligned content. | Show setup path, Start a free trial | Headline and bullets, Code sample, Mint CTA |
| 5 | feature-split | Two-column explanation and customer quote within a bordered panel. | Explain replication, Link to technical details, Show customer endorsement | Feature heading, Mint CTA, Quote card |
| 6 | testimonials | Centered introduction above three equal-width customer story cards. | Browse customer proof, Open individual stories | Three bordered cards, Customer metrics, Story links |
| 7 | feature-split | Copy and CTA on the left, enterprise capability rows on the right. | Review enterprise assurances, Contact sales | Capability checklist, Mint icons, Horizontal rules |
| 8 | comparison | Centered heading, two side-by-side offering cards, and a product diagram below. | Compare self-hosted and cloud, Choose a product path | Two product cards, Inline links, Database illustration |
| 9 | feature-grid | Centered introduction over two large community cards with internal link grids. | Contribute, Join community, Find support | Open-source and community badges, Purple and mint actions, Icon link groups |
| 10 | cta | Centered headline and actions above a wide decorative growth illustration. | Start free, Talk to sales | Centered CTA, Mint pill button, Illustration extending below |
| 11 | footer | Four compact link columns above a bottom row for copyright and social icons. | Navigate product resources, Open social links | Column navigation, Muted labels, Bottom utility row |

## Source CSS custom properties (selected)

```css
--main-bg-color: 18,27,34;
--main-text-color: 255 255 255;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/turso-tech