Turso DESIGN.md
Brands
Edge database design with black-and-lime technical contrast, SQLite clarity, and distributed data workflows.
At a glance
- Group
- Brands
- Main color
- #c7ff00Green design systems
- Fonts
- InterSF Mono
Colors in this file
- #c7ff00
Unnamed
- #050505
Unnamed
- #e4e4e7
Unnamed
- #22c55e
Unnamed
- #71717a
Unnamed
- #fafafa
Unnamed
- #ffffff
Unnamed
- #111111
Unnamed
- #3f6212
Unnamed
Edge database design with black-and-lime technical contrast, SQLite clarity, and distributed data workflows.
1. Visual Theme & Atmosphere
Turso should feel like SQLite expanded for modern distributed apps. The design needs to support databases everywhere, embedded replicas, branching, groups, regions, and developer-first CLI/API workflows.
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--turso-black | #050505 | Primary dark surface |
--turso-lime | #C7FF00 | Brand/action accent |
--turso-green | #22C55E | Healthy database state |
--turso-gray | #71717A | Secondary text |
--surface-page | #FAFAFA | Light background |
--surface-card | #FFFFFF | Cards and docs panels |
--border-default | #E4E4E7 | Dividers |
--surface-code | #111111 | Code blocks |
3. Typography Rules
css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 60px | 750 | 1.05 |
| Page Title | 40px | 700 | 1.12 |
| Section Title | 30px | 650 | 1.2 |
| Database Title | 20px | 650 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Code | 13px | 500 | 1.55 |
4. Component Stylings
css.button-primary { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid #C7FF00; background: #C7FF00; color: #050505; font: 700 14px/1 Inter, sans-serif; }
.database-card { border: 1px solid #E4E4E7; border-radius: 16px; background: #fff; padding: 18px; }
.code-panel { border-radius: 14px; background: #111; color: #fff; padding: 16px; font: 500 13px/1.55 "SF Mono", monospace; }
.replica-pill { background: rgba(199, 255, 0, 0.14); color: #3F6212; border-radius: 999px; padding: 6px 10px; }
5. Layout Principles
Organize by database, group, branch, region, replica, token, schema, and CLI command. Keep SQLite familiarity visible.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 8px 18px rgba(5, 5, 5, 0.07); }
.shadow-panel { box-shadow: 0 20px 48px rgba(5, 5, 5, 0.16); }
7. Do's and Don'ts
Do make replicas and regions clear. Do use lime sparingly. Do not make distributed database state ambiguous.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stack database and region panels |
| Tablet | 768px | Two-column database/replica layouts |
| Desktop | 1200px | Full dashboard with branch and region views |
9. Agent Prompt Guide
Design like Turso: black-and-lime edge database UI, SQLite-friendly docs, database cards, dark CLI panels, replica pills, and distributed data clarity.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Kdan Mobile
Brands · Clear Sans
Kdan Mobile presents itself as bold, modern, and developer-credible document software, the kind of digital-workflow SaaS that signs contracts and ships SDKs without losing its sense of energy. The atmosphere is built…
GoDaddy
Brands · Inter
Small-business website and commerce design with confident black-and-green branding and guided-builder simplicity. GoDaddy’s current visual language mixes bold identity, rounded utility controls, and approachable…
Wise
Brands · Inter
An inspired interpretation of Wise's design language — a global money-transfer brand whose surface combines an unusually heavy near-black display sans (weight 900 at 64–126 px) with a vivid lime-green brand accent,…
Medium
Brands · Charter
Reading and writing platform with magazine-like simplicity and strong black-and-green branding. Medium's public site uses restrained editorial layout, serif-forward reading tone, and the signature Medium green (#1A8917).
Temporal
Brands · Inter
Durable execution design with dark reliability surfaces, green workflow accents, and code-first orchestration clarity.
Mozilla
Brands · Mozilla Headline
Mission-driven web brand with activist energy. High-contrast black and off-white, bright green and seed accents, Mozilla Headline and Mozilla Text, and bold editorial blocks create a system that feels…