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

# Tinybird · Design System

> Dark canvas, bright signals, developer-first clarity

**Theme:** dark · **Industry:** devtools · **Source:** https://www.tinybird.co/ · **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._

Tinybird’s homepage presents managed ClickHouse as a developer-focused platform through a near-black canvas, crisp white typography, and vivid green calls to action. Product workflows, customer proof, technical diagrams, and compact code-like labels make the page feel practical and infrastructure-led.

## North star

Keep the near-black canvas quiet, and use bright green only to mark actions, active states, and essential proof.

## Overview

The visual system is built on a near-black #0a0a0a canvas that carries almost the entire page, with white headings and muted gray supporting copy. Bright green #27f795 is reserved for primary actions, selected category labels, and key performance figures, so the important interaction points stand out without introducing broad color bands. Roboto provides clean, readable headlines and body copy; Roboto Mono gives navigation, buttons, code examples, and small technical labels a distinctly developer-oriented voice. The layout alternates centered product storytelling with wide technical demonstrations and dense, three-column proof grids. Large stretches of dark negative space separate these groups, while cards use charcoal surfaces and thin gray borders rather than shadows. Imagery is functional: interface previews, architecture diagrams, terminal snippets, customer portraits, and a geometric green closing graphic. The overall effect is restrained, technical, and high contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#0a0a0a` | `--color-night-canvas` | brand | Dominant page background and dark button text; anchors the entire homepage. |
| Forest Badge | `#046b51` | `--color-forest-badge` | semantic | Small badge background visible in numbered status labels, not a broad brand surface. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary headings, card copy, navigation, and high-contrast interface text. |
| Electric Mint | `#27f795` | `--color-electric-mint` | accent | Primary CTA fill, highlighted metrics, active labels, and selected technical details. |
| Deep Alert | `#760202` | `--color-deep-alert` | semantic | Small red badge and code-diff/error illustration detail; not a page-level color. |
| Quiet Gray | `#8d8d8d` | `--color-quiet-gray` | neutral | Muted body copy, secondary links, captions, and subdued badge text. |
| Charcoal Panel | `#151515` | `--color-charcoal-panel` | surface | Testimonial and feature cards against the dark canvas. |
| Slate Fade | `#303347` | `--color-slate-fade` | semantic | Technical illustration gradient tint, not a defining surface color. |
| Graphite Line | `#353535` | `--color-graphite-line` | neutral | Fine card and control borders that separate panels without adding elevation. |
| Shadow Charcoal | `#262626` | `--color-shadow-charcoal` | surface | Subtle inset card, link, and diagram details. |
| Deep Panel | `#101010` | `--color-deep-panel` | surface | Secondary dark card fill, close in tone to the page canvas. |
| Silver Gray | `#999999` | `--color-silver-gray` | neutral | Minor icon and technical text detail, including diagram elements. |
| Pine Accent | `#085543` | `--color-pine-accent` | accent | Deep green technical diagram and code detail; supports rather than replaces the vivid CTA green. |
| Oxide Red | `#600606` | `--color-oxide-red` | semantic | Dark red illustration or status detail; keep confined to technical visuals. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Night Canvas) · `--color-surface` → `#151515` (Charcoal Panel) · `--color-surface-2` → `#101010` (Deep Panel) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#8d8d8d` (Quiet Gray) · `--color-border` → `#353535` (Graphite Line) · `--color-accent` → `#27f795` (Electric Mint) · `--color-accent-2` → `#085543` (Pine Accent) · `--color-accent-3` → `#600606` (Oxide Red) · `--color-on-accent` → `#0a0a0a` (Night Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0a0a0a` | 19.8:1 | AAA |
| `#ffffff` | `#151515` | 18.26:1 | AAA |
| `#ffffff` | `#101010` | 19.03:1 | AAA |
| `#8d8d8d` | `#0a0a0a` | 5.97:1 | AA |
| `#8d8d8d` | `#151515` | 5.5:1 | AA |
| `#8d8d8d` | `#101010` | 5.73:1 | AA |
| `#27f795` | `#0a0a0a` | 13.98:1 | AAA |
| `#27f795` | `#151515` | 12.89:1 | AAA |
| `#27f795` | `#101010` | 13.43:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(48, 51, 71), rgba(48, 51, 71, 0))`
- `linear-gradient(270deg, rgb(48, 51, 71), rgba(48, 51, 71, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roboto | `--font-body` | webfont | 400, 700, 600 | Display and heading typography, body copy, links, and card text. | Arial |
| Roboto Mono | `--font-mono` | webfont | 400 | Navigation, primary buttons, code examples, and compact technical labels. | IBM Plex Mono |

- **Roboto:** Mostly regular weight; clean sentence case. Display and headings use measured tight tracking, with restrained line lengths.
- **Roboto Mono:** Regular weight; technical text often appears as compact labels and code-like UI, without forced uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.13 | -0.02em | — | Roboto | Large centered hero and prominent display headlines. |
| h1 | 56px | 400 | 1 | -0.084em | — | Roboto Mono | Primary page headline with a compact monospace treatment when applied. |
| h2 | 40px | 400 | 1.2 | 0.01em | — | Roboto | Section headings introducing product and enterprise stories. |
| h3 | 32px | 400 | normal | -0.04em | — | Roboto | Secondary feature and proof-card headings. |
| h4 | 24px | 400 | 1.33 | -0.013em | — | Roboto | Smaller feature-card and supporting headings. |
| body | 14px | 400 | 1.57 | 0 | — | Roboto | Explanatory copy, testimonials, and standard interface text. |
| caption | 12px | 400 | 1.67 | 0 | — | Roboto | Small metadata, labels, and supporting annotations. |
| button | 14px | 400 | 1.57 | 0 | — | Roboto Mono | Monospaced primary CTA and other button labels. |
| link | 14px | 400 | 1.57 | 0 | — | Roboto | Navigation, secondary actions, and inline links. |
| code | 14px | 400 | 1.57 | 0 | — | Roboto Mono | Terminal commands, developer examples, and technical snippets. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 152 px.
- Section rhythm 40px · element gap 8px · card padding 20px · max content width 1332px.

Use a centered, wide content frame capped at the measured 1332px maximum, with a compact top navigation and mostly centered section headings. Product narratives use single-column alignment; technical demonstrations and enterprise proof shift into multi-column compositions, including six-column workflow content and three-column card grids. Keep the page visually sparse between major blocks, then allow dense information inside diagrams, cards, and code panels. The measured spacing scale runs from 2px to 152px, with a compact 8px base unit and a 40px section gap; use large breathing intervals selectively rather than padding every block equally.

## Shape & elevation

- Radius: button `4px` · card `4px` · media `50%` · xs `4px` · sm `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page uses flat dark surfaces rather than drop shadows. Separate cards from the canvas with charcoal fills and thin graphite borders; technical panels may use an even darker inset surface. Keep corners subtly rounded according to the measured small card radius, and use restrained layering to distinguish nested interface regions.

## Imagery

Imagery is primarily functional product evidence: dark UI previews, terminal windows, architecture diagrams, and code comparison panels. Customer proof uses small portrait images inside testimonial cards. The page closes with a full-bleed geometric green line pattern. Keep media dark, tightly framed, and integrated into bordered panels; avoid decorative lifestyle photography or colorful stock imagery.

## Components

### Primary CTA

Electric Mint #27f795 fill with Night Canvas #0a0a0a text; Roboto Mono label, compact rectangular shape, and no shadow.

### Secondary link

Muted gray or green text on the dark canvas, often positioned beside a primary CTA without a filled container.

### Category selector

A narrow row of bracketed Roboto Mono labels inside a thin graphite outline; selected item is green.

### Proof card

Charcoal #151515 panel with white copy and a fine #353535 border; used for testimonials and enterprise details.

### Metric panel

Dark bordered showcase combining oversized green metrics, compact labels, customer proof, and supporting interface content.

### Code panel

Near-black or charcoal terminal-style surface with monospace commands and sparse status-color accents.

### Technical diagram

Dark interconnected nodes and panels with subtle borders and limited green emphasis; keep colors within the illustration.

### Measured component styles

- **Primary button** (“Try for free”): background #27f795 · text #0a0a0a · radius 0px · padding 16px 24px · 400 16px Roboto Mono
- **Secondary button** (“[SaaS / Dashboards]”): transparent background · text #ffffff · border 1px solid · radius 4px · padding 2px 4px · 400 14px Roboto Mono
- **Link** (“Watch the demo”): transparent background · text #8d8d8d · radius 0px · padding 0px · 400 14px Roboto
- **Card** (“Marc Lou Solopreneur I finally migrated ”): background #151515 · text #ffffff · border 1px solid #353535 · radius 4px · padding 20px · 400 16px Roboto
- **Badge** (“1”): background #046b51 · text #8d8d8d · radius 0px · padding 0px 16px 0px 0px · 400 14px Roboto Mono

## Do

- Use #0a0a0a as the dominant page canvas.
- Reserve #27f795 for primary actions and important highlights.
- Pair Roboto headlines and prose with Roboto Mono technical UI.
- Use thin gray borders to define dark card edges.
- Give major content groups generous dark negative space.
- Keep diagrams and code panels restrained and functional.

## Don't

- Do not introduce bright full-width color bands.
- Do not use shadows to create card elevation.
- Do not let illustration colors redefine the site palette.
- Do not crowd every section with equal-density content.
- Do not style every label as uppercase.
- Do not use decorative lifestyle imagery as the main product proof.

## Agent prompt

Build a new Tinybird-style developer SaaS page on a Night Canvas #0a0a0a background. Use Signal White #ffffff for headings and core text, Quiet Gray #8d8d8d for secondary copy, and Electric Mint #27f795 sparingly for primary CTA fills, active states, and essential metrics. Set readable content in Roboto and use Roboto Mono for buttons, navigation, code, and technical labels. Compose centered headline sections with wide product demonstrations, dark proof cards, diagrams, and selective multi-column grids. Separate cards using Charcoal Panel #151515 and thin Graphite Line #353535 borders; avoid drop shadows. Preserve generous dark intervals between content groups while keeping information inside cards compact. Treat portraits and technical illustrations as supporting evidence, not decorative color sources. Keep the result precise, technical, high contrast, and easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, and paired actions on a dark single-column canvas. | Primary signup action, Secondary sales link | Large white heading, Green CTA, Muted supporting copy |
| 2 | stats | Centered category tabs above a wide bordered customer proof panel. | Category selection, Customer story, Performance metrics | Monospace tabs, Green statistics, Dark bordered panel |
| 3 | how-it-works | Centered section heading with a wide product video and workflow stages. | Workflow exploration, Video playback | Dark media frame, Compact stage navigation |
| 4 | product-showcase | Centered heading, compact technology tabs, then a terminal-style command panel. | Technology selection, External developer resource link | Monospace tabs, Code panel, Green inline link |
| 5 | product-showcase | Centered performance statement above a technical product visual. | Product capability overview | Dark diagram panel, Green technical emphasis |
| 6 | feature-split | Centered headline followed by two-column explanatory content. | Managed service explanation, Feature links | Small eyebrow label, White heading, Secondary links |
| 7 | feature-grid | Three-column enterprise feature cards with left-aligned headings. | Security assurance, Enterprise capability scanning | Dark feature cards, Small line icons, Fine borders |
| 8 | testimonials | Centered introduction and actions above a three-column testimonial grid. | Community links, Customer proof | Portrait thumbnails, Charcoal cards, Compact white copy |
| 9 | cta | Centered closing headline and action above a full-bleed geometric visual. | Conversion CTA, Product signup | Green button, Full-bleed green line pattern |
| 10 | footer | Dense multi-column sitemap with a lower utility and social row. | Grouped navigation, Legal and social links | Small muted labels, Multiple link columns, Status indicator |
| 11 | other | Full-bleed closing brand graphic beneath the footer. | Brand reinforcement | Oversized white wordmark, Dark background |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--primary: #27f795;
--primary-dark: #008060;
--secondary-light: #00c1ff;
--secondary: #2d27f7;
--color-code-white: #fff;
--color-code-invocation: #27f795;
--color-code-success: #27f795;
--color-code-error: #ff8389;
--color-code-identifier: #00c1ff;
--color-code-value: #fc9f5b;
--color-code-diff-added: #008060;
--color-code-diff-removed: maroon;
--color-bg: #0a0a0a;
--color-text: #fff;
--diagram-surface-panel: #151515;
--diagram-surface-node: #353535;
--diagram-surface-node-subtle: #262626;
--diagram-surface-boundary: color-mix(in srgb, #27f795 10%, transparent);
--diagram-surface-icon-badge: color-mix(in srgb, #fff 10%, transparent);
--diagram-surface-env-info: color-mix(in srgb, #00c1ff 10%, transparent);
--diagram-surface-env-warning: color-mix(in srgb, #fc9f5b 10%, transparent);
--diagram-surface-env-danger: color-mix(in srgb, #ff8389 10%, transparent);
--diagram-border-subtle: #353535;
--diagram-border-node: #3c3c3c;
--diagram-border-strong: #8d8d8d;
--diagram-border-boundary: #008060;
--diagram-icon-secondary: #999;
--diagram-icon-brand: #27f795;
--diagram-text-primary: #fff;
--diagram-text-secondary: #999;
--diagram-text-brand: #27f795;
--diagram-text-inverse: #25283d;
--diagram-duration-fast: 200;
--diagram-duration-base: 400;
--diagram-duration-slow: 700;
--diagram-duration-stagger: 80;
--diagram-ease-standard: cubic-bezier(.4, 0, .2, 1);
--diagram-ease-emphasized: cubic-bezier(.2, 0, 0, 1);
--diagram-ease-linear: linear;
```

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