Turso — design system & UI screens
A database platform for building and deploying applications at scale across multiple database architectures. The page uses a dark theme with a prominent hero section showcasing "Millions of Databases. One Architecture," followed by sections comparing Turso and Turso Cloud offerings, customer testimonials, feature breakdowns organized by use case (AI Agents, Scale to Infinity, Millions by Design), SDK options, and community engagement calls-to-action with links to contribute or join Discord.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/turso.
Decoded design system
Turso's decoded design system: background #0D1318, text #ECECEE, accent #4FF7D1, link #4FF7D1, primary #162129; type scale h1 16px / h2 72px / body 16px; 8px spacing base; 8px base radius. The single interactive/action color is #4FF7D1 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #0D1318 |
| surface | #1A2024 |
| border | #2E3338 |
| text | #ECECEE |
| text_muted | #97999C |
| primary | #162129 |
| accent | #4FF7D1 |
| link | #4FF7D1 |
| secondary | #D946EF |
| button_bg | #4FF7D1 |
| button_text | #000000 |
Using these colors
- Action color
#4FF7D1— the single interactive color; only on things you click or must notice, never large fills. accent,link,button_bgare all#4FF7D1— one role, not several (the action color).- accent
#4FF7D1— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#162129— a brand color — but the call-to-action uses #4FF7D1, not this. - secondary
#D946EF— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Inter
- Body: Inter
- Mono: SFMono-Regular
- h1: 16px
- h2: 72px
- body: 16px
Spacing
- base unit: 8px
- scale: 2px, 4px, 6px, 8px, 10px, 14px, 16px, 24px, 40px, 48px
Radii
- base: 8px
- button: 9999px
Motion
Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 150ms · 200ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1) - animated properties: color, background-color, border-color, text-decoration-color
Native design tokens
| Token | Value |
|---|---|
--turso-dark-blue | #121b22 |
--turso-primary-aqua | #4ff8d2 |
--turso-blue-4 | #232e36 |
--turso-dark-gray | #293945 |
--turso-medium-dark-blue | #232e36 |
--turso-yellow | #e0ca3c |
--turso-white | #fafafa |
--turso-gray | #7b8690 |
--turso-blue | #0f4f62 |
--turso-blue-3 | #1b252d |
…and 8 more measured on the page.
Button states (measured)
- primary focus: outline
2px auto rgb(22, 163, 74)
Layout (measured)
- container max-width:
1280px - nav: 92px
Motion choreography (measured)
Scroll reveal: 8 elements rest at opacity 0, animate in over 0.2s cubic-bezier(0.4, 0, 0.2, 1).
Responsive (measured)
- breakpoints: 576px · 768px · 1024px · 1200px · 1440px · 1920px
- mobile (390px): nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →