# Tinybird

> # Tinybird — Style Reference

## Prompt Content

```
# Tinybird — Style Reference
> terminal developer lúc nửa đêm — khoảng đen vô tận, một con trỏ xanh điện, thì thầm monospace

**Theme:** dark

Tinybird mang thẩm mỹ developer console dark-mode: canvas gần đen, một điểm nhấn xanh điện hoạt động như giọng màu duy nhất trên màn hình, và sự phân chia nghiêm ngặt giữa Roboto (humanist) cho văn xuôi và Roboto Mono (monospaced) cho tag, label và code. Giao diện mang chất terminal — badge monospace nằm trong dấu ngoặc vuông như log entry, và điểm nhấn xanh hoạt động như con trỏ nhấp nháy thay vì màu thương hiệu, được dùng tiết kiệm cho CTA, link và highlight inline thỉnh thoảng. Surface phẳng, border siêu mảnh (hairline), và chiều cao (elevation) đạt được qua lớp màu tối đậm dần thay vì đổ bóng. Kết quả là một product page có cảm giác được kỹ thuật hóa hơn là tiếp thị, tự tin trong sự tiết chế.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Cursor Green | `#27f795` | `--color-cursor-green` | Điểm nhấn xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Hover Green | `#008060` | `--color-hover-green` | Điểm nhấn xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |
| Terminal Red | `#800000` | `--color-terminal-red` | Điểm nhấn đỏ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent phụ, không phải màu trạng thái |
| Pure White | `#ffffff` | `--color-pure-white` | Text chính và headline. Tương phản tối đa trên canvas gần đen để dễ đọc ngay lập tức |
| Void Black | `#000000` | `--color-void-black` | Surface sâu nhất cho hero background và video poster frame, tối hơn canvas trang một bậc |
| Console Black | `#0a0a0a` | `--color-console-black` | Canvas trang chính — background chủ đạo của mọi màn hình. Cao hơn đen tuyền một chút để làm dịu độ tương phản OLED |
| Panel Charcoal | `#151515` | `--color-panel-charcoal` | Surface nâng lên đầu tiên — dùng cho khung media nhúng và video container cần nằm trên canvas trang |
| Card Graphite | `#262626` | `--color-card-graphite` | Background cho testimonial và content card. Cao hơn canvas hai bậc, đủ nâng lên để tách biệt mà không đổ bóng |
| Border Smoke | `#353535` | `--color-border-smoke` | Hairline border, input field và divider. Xác định cạnh component mà không cạnh tranh với nội dung |
| Muted Ash | `#8d8d8d` | `--color-muted-ash` | Secondary body text, mô tả và sub-label — giọng nói cho mọi thứ hỗ trợ nhưng không đóng vai chính trong hệ thống phân cấp |
| Tertiary Fog | `#999999` | `--color-tertiary-fog` | Tertiary text và label trạng thái disabled. Giọng người mờ nhất trước khi rơi vào im lặng |
| Highlight Mist | `#d9d9d9` | `--color-highlight-mist` | Border accent sáng dùng trên outlined element được nhấn mạnh như workflow step đang hoạt động |

## Tokens — Typography

### Roboto — Văn xuôi và headline. Weight 400 cho body và mô tả, weight 600 cho text nút CTA chính, weight 700 dành riêng cho display headline 64px. Tracking âm chặt ở 64px siết headline thành một khối tự tin duy nhất. · `--font-roboto`
- **Thay thế:** Inter, system-ui, sans-serif
- **Weights:** 400, 600, 700
- **Kích cỡ:** 12, 14, 16, 18, 24, 64
- **Line height:** 1.13, 1.33, 1.50, 1.57, 1.67, 1.78
- **Letter spacing:** -0.0200em ở 64px (display), -0.0130em ở 24px (heading)
- **Vai trò:** Văn xuôi và headline. Weight 400 cho body và mô tả, weight 600 cho text nút CTA chính, weight 700 dành riêng cho display headline 64px. Tracking âm chặt ở 64px siết headline thành một khối tự tin duy nhất.

### Roboto Mono — Tag, badge, code label, workflow step indicator và stat figure monospaced. Tracking -0.084em cực đoan ở 56px là phản quy tắc — monospace thường giữ lỏng, nhưng điều này siết chữ số thành khối dữ liệu dày đặc, mang cảm giác được kỹ thuật hóa chứ không chỉ hiển thị. · `--font-roboto-mono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, monospace
- **Weights:** 400
- **Kích cỡ:** 12, 14, 16, 56
- **Line height:** 1.00, 1.50, 1.57, 1.67
- **Letter spacing:** -0.0840em
- **Vai trò:** Tag, badge, code label, workflow step indicator và stat figure monospaced. Tracking -0.084em cực đoan ở 56px là phản quy tắc — monospace thường giữ lỏng, nhưng điều này siết chữ số thành khối dữ liệu dày đặc, mang cảm giác được kỹ thuật hóa chứ không chỉ hiển thị.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|------|
| caption | 12px | 1.57 | — | `--text-caption` |
| body-sm | 14px | 1.57 | — | `--text-body-sm` |
| body | 16px | 1.67 | — | `--text-body` |
| subheading | 18px | 1.5 | — | `--text-subheading` |
| heading-sm | 24px | 1.33 | -0.31px | `--text-heading-sm` |
| stat-figure | 56px | 1 | -4.7px | `--text-stat-figure` |
| display | 64px | 1.13 | -1.28px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 152 | 152px | `--spacing-152` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 4px |
| cards | 8px |
| buttons | 4px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 16px

## Components

### Primary CTA Button
**Vai trò:** Filled button cho hành động quan trọng nhất trên một màn hình

Background #27f795 (Cursor Green), text #000000 hoặc #0a0a0a, Roboto weight 600 ở 16px, radius 4px, padding dọc 12px và ngang 24px. Đây là filled button duy nhất trong hệ thống — mọi interactive element khác đều là ghost hoặc text. Fill xanh là tương đương trực quan của một con trỏ nhấp nháy.

### Ghost Link Button
**Vai trò:** Secondary action nằm cạnh primary CTA

Không background, text #27f795, Roboto weight 400 ở 16px, không border, không radius. Đọc như text link với cursor affordance — người bạn đồng hành yên tĩnh hơn cho filled CTA.

### Navigation Header
**Vai trò:** Thanh trên cùng cố định với product link và auth action

Background trong suốt trên canvas #0a0a0a. Logo (bird mark + 'tinybird' wordmark) bên trái màu trắng ở 14px weight 700. Nav item trung tâm màu trắng ở 14px weight 400. Bên phải: ghost 'Sign in' text link màu #27f795, tiếp theo là filled 'Sign up' button dùng style Primary CTA với padding dọc 10px và ngang 16px gọn hơn.

### Bracket Workflow Tag
**Vai trò:** Step indicator trong workflow sequence

Không background, Roboto Mono weight 400 ở 12px, màu #27f795 cho step đang hoạt động và #8d8d8d cho step không hoạt động. Được bọc trong dấu ngoặc vuông: [Get Started] [Develop] [Ingest] [Query] [Monitor] [Iterate]. Pipe characters ngăn cách các step. Đây là micro-component đặc trưng — nó làm cho giao diện có cảm giác như log output.

### Category Tag
**Vai trò:** Badge phân loại chủ đề

1px border màu #353535 (Border Smoke), background trong suốt, Roboto Mono weight 400 ở 12px, text #d9d9d9, radius 4px, padding dọc 4px và ngang 12px. Dùng trong hero để phân loại use case như 'SaaS / Dashboards', 'Observability', 'AI Analytics'.

### Stat Card
**Vai trò:** Hiển thị số liệu hero

Roboto Mono figure lớn ở 56px weight 400 màu #27f795, tracking -0.084em để nén chữ số thành khối dày đặc. Label kề bên bằng Roboto Mono ở 12px màu #8d8d8d, chữ hoa. Không card chrome — nằm trực tiếp trên canvas.

### Testimonial Card
**Vai trò:** Social proof block trong grid 3 cột

Background #262626 (Card Graphite), radius 8px, padding 24px tất cả các mặt. Avatar tròn 40px góc trên bên trái, tên bằng Roboto weight 600 ở 14px màu #ffffff, chức danh và công ty màu #8d8d8d ở 12px. Quote body bằng Roboto weight 400 ở 14px màu #d9d9d9. 1px border màu #353535 để xác định ranh giới trên bề mặt card sáng hơn một chút.

### Hero Section
**Vai trò:** Headline và CTA phía trên fold

Bố cục căn giữa trên nền #0a0a0a. Headline ở 64px Roboto weight 700 màu #ffffff, tracking -0.020em, line-height 1.13. Subtext ở 18px Roboto weight 400 màu #8d8d8d. Primary CTA và ghost link cạnh nhau với gap 16px. Category tag bên dưới với gap 8px.

### Logo Bar
**Vai trò:** Dải logo đối tác hoặc khách hàng

Một hàng duy nhất gồm 7–8 logo grayscale căn giữa, cách nhau bởi gap 40px, nằm trong card với background #262626 và border 1px #353535. Logo hiển thị màu #8d8d8d để lùi lại — chúng là bằng chứng, không phải ngôi sao.

### Video Embed Frame
**Vai trò:** Media container full-width cho demo

Background #151515 (Panel Charcoal), 1px border màu #353535, không radius. Nút play tròn căn giữa đường kính 64px, fill #353535 với biểu tượng tam giác trắng. Frame kéo dài edge-to-edge trong container của nó mà không có padding bên trong — video là nội dung.

### Data Hero Band
**Vai trò:** Dải quảng cáo kết hợp social proof và số liệu trực tiếp

Bố cục inline trên canvas: attribution đối tác (avatar nhỏ + tên) màu #8d8d8d, tiếp theo là câu mô tả với cụm '30M requests/day' được highlight màu #27f795. Bên dưới, chia hai cột: cột trái có stat figure xếp chồng màu Cursor Green, cột phải có testimonial block dạng white-quote.

## Do's and Don'ts

### Nên làm
- Chỉ dùng fill #27f795 cho một action quan trọng nhất trên mỗi màn hình — một filled CTA, mọi thứ khác là ghost hoặc text.
- Bọc workflow step và inline label trong dấu ngoặc vuông hiển thị bằng Roboto Mono để duy trì thẩm mỹ terminal-log.
- Dùng Roboto Mono cho mọi số liệu, stat và tag label; chỉ dùng Roboto cho văn xuôi, mô tả và headline.
- Đặt tracking headline ở -0.020em tại 64px và tracking stat-figure ở -0.084em tại 56px để nén type thành các khối dày đặc, tự tin.
- Xây dựng hệ thống phân cấp surface qua bốn cấp độ than chì (0a0a0a → 151515 → 262626 → 353535) thay vì drop shadow.
- Giữ tất cả border chính xác ở 1px màu #353535 — hệ thống được xác định bởi hairline edge, không phải độ dày.
- Dùng radius 4px cho button và radius 8px cho card — không có radius lớn hơn ở bất kỳ đâu.

### Không nên làm
- Không đưa bất kỳ màu nào ngoài bảng màu — hệ thống là achromatic cộng với một màu xanh, thêm giọng màu thứ hai sẽ phá vỡ ẩn dụ terminal.
- Không dùng filled button với background trung tính hoặc trắng — màu fill duy nhất là #27f795, và chỉ dành cho primary action.
- Không dùng Roboto cho tag, label hoặc code — những thứ này phải ở Roboto Mono để giữ bản sắc developer-tool.
- Không dùng shadow hoặc glow để tạo elevation — thiết kế đạt được phân lớp qua độ tối của surface, không bao giờ dùng drop shadow.
- Không dùng radius lớn hơn 8px — bất kỳ thứ gì tròn hơn sẽ có cảm giác thân thiện với người dùng và phá vỡ cảm giác kỹ thuật.
- Không dùng màu đỏ #800000 làm error state — nó là inline accent yên tĩnh, không phải tín hiệu ngữ nghĩa.
- Không căn trái nội dung hero — headline căn giữa với tracking chặt là signature opener.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Void | `#000000` | Surface sâu nhất cho hero band và full-bleed media frame |
| 1 | Console | `#0a0a0a` | Canvas trang chính trên tất cả các section |
| 2 | Panel | `#151515` | Media container nhúng, video poster |
| 3 | Card | `#262626` | Background cho testimonial và content card |
| 4 | Edge | `#353535` | Border, input field, divider tinh tế |

## Elevation

- **Card on Canvas:** `không — đạt được qua surface #262626 trên canvas #0a0a0a`
- **Testimonial Card:** `không — border 1px #353535 trên surface #262626`
- **Video Frame:** `không — border 1px #353535 trên surface #151515`

## Imagery

Hình ảnh tối giản và chức năng. Nội dung ảnh duy nhất là avatar chân dung tròn nhỏ trong testimonial card (40px, cắt sát mặt). Artifact hình ảnh chính là video demo frame full-bleed được hiển thị dưới dạng panel than chì phẳng với nút play căn giữa — không thumbnail, không preview. Logo đối tác trong logo bar được giảm bão hòa thành đơn sắc #8d8d8d, trình bày social proof như bằng chứng hơn là sự chứng thực. Không có illustration, không 3D render, không đồ họa trang trí. Điểm nhấn xanh làm công việc thị giác mà ornament sẽ làm ở nơi khác.

## Layout

Nội dung căn giữa max-width 1200px trên canvas full-bleed #0a0a0a. Trang tuân theo nhịp điệu dọc của các section full-width cách nhau bởi gap 80px, không có band sáng/tối xen kẽ — mọi section đều chia sẻ cùng một canvas tối. Mỗi section được căn giữa, ưu tiên text, với hero dùng stack căn giữa (headline → subtext → cặp CTA → hàng tag) và các section tiếp theo xen kẽ giữa khối text căn giữa và grid card 3 cột. Navigation là thanh trên cùng trong suốt tối giản, không có sticky shadow. Content density comfortable thay vì dày đặc — khoảng thở dọc lớn và bố cục căn giữa tạo ra một sân khấu cho điểm nhấn xanh duy nhất.

## Agent Prompt Guide

## Quick Color Reference

- text: #ffffff (primary), #8d8d8d (secondary), #999999 (tertiary)
- background: #0a0a0a (page canvas), #262626 (cards), #151515 (panels)
- border: #353535 (hairline), #d9d9d9 (emphasis)
- accent: #27f795 (Cursor Green — links, tags, highlights)
- primary action: không có màu CTA riêng biệt

## 3 Example Component Prompts

Không quan sát thấy màu primary action riêng biệt; dùng neutral button treatment đã trích xuất thay vì tự tạo màu filled CTA.

2. **Tạo testimonial grid**: Grid 3 cột trên canvas #0a0a0a, column gap 24px, row gap 40px. Mỗi card: background #262626, radius 8px, border 1px #353535, padding 24px. Avatar tròn 40px góc trên bên trái. Tên bằng Roboto weight 600 14px #ffffff, chức danh ở 12px #8d8d8d, quote ở 14px #d9d9d9. Section gap phía trên: 80px.

3. **Tạo stat display**: Bố cục hai cột trên nền #0a0a0a. Cột trái: stat figure xếp chồng bằng Roboto Mono 56px weight 400, #27f795, letter-spacing -4.7px, line-height 1.00. Label kề bên bằng Roboto Mono 12px chữ hoa, #8d8d8d. Cột phải: quote block với border trái 1px màu #27f795, body text bằng Roboto 16px #d9d9d9.

## Similar Brands

- **Vercel** — Cùng thẩm mỹ developer-tool black-canvas với một điểm nhấn sắc độ và headline sans-serif hình học, dù Vercel dùng điểm nhấn trắng trong khi Tinybird dùng xanh
- **Railway** — Dark-mode infrastructure product page với monospace label và flat surface layering, dù Railway thiên về tím hơn xanh
- **PlanetScale** — Terminal-grade dark interface với monospace stat figure và flat card hierarchy, dù PlanetScale dùng bảng màu gradient rộng hơn
- **Supabase** — Dark developer-tool product page với một màu nhấn sống động duy nhất (xanh cho Supabase) và monospace tag badge

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-cursor-green: #27f795;
  --color-hover-green: #008060;
  --color-terminal-red: #800000;
  --color-pure-white: #ffffff;
  --color-void-black: #000000;
  --color-console-black: #0a0a0a;
  --color-panel-charcoal: #151515;
  --color-card-graphite: #262626;
  --color-border-smoke: #353535;
  --color-muted-ash: #8d8d8d;
  --color-tertiary-fog: #999999;
  --color-highlight-mist: #d9d9d9;

  /* Typography — Font Families */
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.57;
  --text-body-sm: 14px;
  --leading-body-sm: 1.57;
  --text-body: 16px;
  --leading-body: 1.67;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.31px;
  --text-stat-figure: 56px;
  --leading-stat-figure: 1;
  --tracking-stat-figure: -4.7px;
  --text-display: 64px;
  --leading-display: 1.13;
  --tracking-display: -1.28px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-152: 152px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Named Radii */
  --radius-tags: 4px;
  --radius-cards: 8px;
  --radius-buttons: 4px;

  /* Surfaces */
  --surface-void: #000000;
  --surface-console: #0a0a0a;
  --surface-panel: #151515;
  --surface-card: #262626;
  --surface-edge: #353535;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-cursor-green: #27f795;
  --color-hover-green: #008060;
  --color-terminal-red: #800000;
  --color-pure-white: #ffffff;
  --color-void-black: #000000;
  --color-console-black: #0a0a0a;
  --color-panel-charcoal: #151515;
  --color-card-graphite: #262626;
  --color-border-smoke: #353535;
  --color-muted-ash: #8d8d8d;
  --color-tertiary-fog: #999999;
  --color-highlight-mist: #d9d9d9;

  /* Typography */
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.57;
  --text-body-sm: 14px;
  --leading-body-sm: 1.57;
  --text-body: 16px;
  --leading-body: 1.67;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.31px;
  --text-stat-figure: 56px;
  --leading-stat-figure: 1;
  --tracking-stat-figure: -4.7px;
  --text-display: 64px;
  --leading-display: 1.13;
  --tracking-display: -1.28px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-152: 152px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
}
```