# Tinybird · Design system migration spec

> Source: https://www.tinybird.co  ·  Curated by OpenDesign  ·  en

> The site effectively balances a technical, developer-oriented aesthetic with clean, readable design, making it a strong example of modern B2B SaaS design.

## 1. Identity DNA

Tinybird's design system is engineered like a high-performance terminal for data streams, where every visual element serves a functional purpose. The identity is built on the principle of real-time clarity, using a high-contrast dark mode and a single vibrant neon green accent to direct developer focus.

**One-liner:** Real-time data analysis platform for developers.
**Keywords:** real-time · data · analytics · developer · fast
**Analogy:** A high-performance terminal for data streams.

## 2. Color

The palette is a high-contrast dark mode, dominated by deep blacks and neutral grays, with a single vibrant neon green accent for critical focus points. This creates a visual hierarchy that is both technically precise and visually striking against the dark backgrounds.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0A0A0A` | main background |
| `--bg-quiet` | `#151515` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#8D8D8D` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#27F795` | single accent |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** High-contrast dark mode with a single, vibrant neon green accent for focus.

The principle is singular focus: one accent color cuts through the dark canvas to signal interaction, progress, and primary actions without visual noise.

## 3. Typography

Typography serves a dual purpose: clean humanist sans-serifs provide highly legible body text in light gray on dark backgrounds, while a dedicated monospaced font marks technical terms, tags, and developer-focused UI elements. Headlines are set with tight tracking to convey precision and immediacy.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.125 | 400 | -1px | Large hero headlines |
| h1 | 48px | 1.2 | 400 | 0 | Section headlines |
| body | 16px | 1.5 | 400 | 0 | Primary body text |
| caption | 14px | 1.57 | 400 | 0 | Secondary text, labels, and navigation |

**Type rules:**
- Headlines use tight tracking (-1px) and standard weights.
- Body text is clean and highly legible in light gray on dark backgrounds.
- Monospaced font is used for technical terms, tags, and developer-focused UI elements.

## 4. Spacing

Spacing follows a consistent rhythm of 8px and 16px increments, creating a tight, efficient grid that underpins the layout's clean structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 8px and 16px increments create a tight, efficient grid.

## 5. Surfaces

Surfaces are defined by depth through border, not shadow. Thin, low-opacity white borders articulate elevated elements like cards and modals, creating a clear layer hierarchy on solid dark backgrounds.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Thin, low-opacity white borders define elevated surfaces like the cookie modal and cards.

## 6. Layout

The layout is built on a standard 12-column grid, providing a robust skeleton for content. Generous whitespace around this grid ensures readability and gives the large, impactful typography room to command attention.

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

**Skeleton:** Standard 12-column grid with generous whitespace for content readability.

## 7. Motion & Interaction

Motion is functional and restrained, consisting of subtle, smooth transitions for background colors and text states. Minimal scale or transform animations on interactive elements provide immediate, polished feedback without distracting from the core data interface.

- **Durations:** micro 150ms · small 300ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle, smooth transitions for background colors and text states.
  - Minimal scale or transform animations on interactive elements.

- **Hover:** Subtle color shifts or opacity changes on interactive elements.
- **Click:** Immediate feedback through color transitions.
- **Transition:** Smooth, 0.3s transitions are applied globally for a polished feel.
- **Keyboard:** Standard focus outlines are provided for accessibility.

## 8. Voice & Don'ts

The editorial voice is technical, confident, and direct, using concise, action-oriented headlines and clear, functional CTAs. Language is precise and avoids jargon without context, mirroring the system's no-nonsense efficiency.

- **Tone:** Technical, confident, and direct.
- **Headline style:** Concise, action-oriented, and often uses large-scale typography for impact.
- **CTA style:** Clear and functional, often using monospaced text or the vibrant green accent.
- **Avoid:** Jargon without context / Overly decorative elements / Passive language

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows a single dominant neon green accent.
- ❌ Don't use serif fonts — screenshot shows a clean sans-serif for display and body text.
- ❌ Don't use heavy drop shadows — screenshot shows flat, elevated surfaces with thin borders.
- ❌ Don't use complex gradients — screenshot shows solid dark backgrounds with minimal texture.
- ❌ Don't use rounded corners excessively — screenshot shows sharp or very slightly rounded corners on most components.
- ❌ Don't use all-caps for body text — screenshot uses standard sentence case for readability.

The system deliberately avoids decorative excess, serif typography, heavy shadows, and complex gradients to maintain its core identity as a focused tool for developers.

## System Prompt (paste into AI tool)

```
Tinybird is a developer-focused real-time data platform with a dark-mode-first design. The palette is dominated by deep blacks and grays (#0A0A0A, #151515) with a single vibrant neon green accent (#27F795). Typography relies on clean humanist sans-serifs for display and body text, with monospaced fonts for technical elements. Key don'ts: avoid using multiple accent colors, don't use serif fonts, and don't add heavy drop shadows. The layout is a standard 12-column grid with generous whitespace, emphasizing large, tight-tracked headlines for impact. Interactions are smooth with subtle color transitions, maintaining a high-performance, technical feel.
```