---
name: Tinybird
description: "The site effectively balances a technical, developer-oriented aesthetic with clean, readable design, making it a strong example of modern B2B SaaS design."
version: alpha

colors:
  background: "#0A0A0A"
  primary: "#FFFFFF"
  secondary: "#8D8D8D"
  tertiary: "#27F795"
  neutral: "#999999"
  bg-quiet: "#151515"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.125
    fontWeight: 400
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.57
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Real-time data analysis platform for developers.

*A high-performance terminal for data streams.*

## Colors

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

- **Background (`#0A0A0A`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#8D8D8D`)** — uses `ink-soft` token
- **Accent (`#27F795`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Consistent 8px and 16px increments create a tight, efficient grid.

## Elevation & Depth

- Borders: Thin, low-opacity white borders define elevated surfaces like the cookie modal and cards.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Primary buttons use the vibrant green accent; secondary and ghost buttons use monospaced text or subtle borders.
- **card:** Cards use dark backgrounds with thin, low-opacity borders and minimal padding.
- **chip:** Tags and labels use monospaced text in square brackets, often with a subtle background.
- **input:** Form inputs and toggles follow the standard dark-mode styling with clean borders.
- **hero:** The hero section features massive, tight-tracked typography centered on the page.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```