№ tinybird-co

Tinybird

Deep charcoal expanse, crisp sans-serif geometry, and electric green accents pulse with focused power.

Stat-Ledminimalism dark mode monochrome brutalism developer toolsdark

The page prioritizes a large, impactful statistic to immediately convey value. The design is clean and functional, using a dark color palette and minimal visual clutter to emphasize data and clarity. · saas analytics, clickhouse, data pipeline, database analytics, performance monitoring, data platform, technical website

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#24f494
OKLCHoklch(85.3% 0.202 156)
RoleDominant
find sites →
Hex#1a6240
OKLCHoklch(44.3% 0.090 158)
RoleSurface
find sites →
Hex#80f8c1
OKLCHoklch(89.4% 0.135 162)
RoleInk
find sites →
Hex#848484
OKLCHoklch(61.3% 0.000 90)
RoleAccent
find sites →
Hex#c7c7c7
OKLCHoklch(83.0% 0.000 90)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Roboto	64px	400	1.13	-1.28px	Aa Bb Cc
h2	Roboto	64px	400	1.13	-1.28px	Aa Bb Cc
h3	Roboto	16px	400	1.5	0	Aa Bb Cc
body	Roboto	16px	400	1.5	0	Aa Bb Cc
button	Roboto	16px	400	1.5	0	Aa Bb Cc

Spacing scale

48px

64px

72px

152px

Radius scale

0px

4px

8px

Export

:root {
  --color-dominant: #24f494;
  --color-surface: #1a6240;
  --color-ink: #80f8c1;
  --color-accent: #848484;
  --color-detail: #c7c7c7;
}

/* CSS variables exposed by source */
:root {
  --text-h5--letter-spacing: -.02rem;
  --text-h4-mobile--line-height: 2rem;
  --primary-dark: #008060;
  --text-body-2: 1rem;
  --text-button--line-height: 1.5rem;
  --text-caption: .75rem;
  --text-caption--line-height: 1.25rem;
  --text-h2: 4rem;
  --text-h1--letter-spacing: -.08rem;
  --color-code-error: #ff8389;
  --text-h1-mobile--line-height: 4rem;
  --color-code-invocation: #27f795;
  --color-bg: #0a0a0a;
  --radius-asset: 1rem;
  --color-code-success: #27f795;
  --text-label--line-height: 1.5rem;
  --text-body-2--line-height: 1.5rem;
  --text-h4-mobile--letter-spacing: -.02rem;
  --text-h4: 2rem;
  --color-code-identifier: #00c1ff;
  --text-h2-mobile: 2.5rem;
  --text-h1-mobile--letter-spacing: -.105rem;
  --font-mono: "Roboto Mono", "Roboto Mono Fallback", monospace;
  --text-h4-mobile: 1.5rem;
  --text-h2-mobile--letter-spacing: -.075rem;
  --text-h3--letter-spacing: .025rem;
  --text-button: 1rem;
  --text-input--line-height: 2.5rem;
  --text-label: .875rem;
  --text-body-1: 1.125rem;
  --text-h4--letter-spacing: -.0625rem;
  --text-input: 2.25rem;
  --text-h5: 1.5rem;
  --font-sans: "Roboto", "Roboto Fallback";
  --text-h3-mobile--letter-spacing: -.02rem;
  --font-weight-bold: 700;
  --text-h3-mobile: 2rem;
  --text-input-mobile: 1.5rem;
  --radius-pill: 1.5rem;
  --font-roboto: "Roboto", "Roboto Fallback";
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --text-h3: 2.5rem;
  --color-code-white: #fff;
  --radius-lg: .5rem;
  --font-seven-segment: "sevenSegment", "sevenSegment Fallback";
  --text-h2--letter-spacing: -.08rem;
  --text-h5-mobile: 1.25rem;
  --secondary-light: #00c1ff;
  --text-body-1--line-height: 2rem;
  --text-button-small--line-height: 1.5rem;
  --font-fira-mono: "Fira Mono", "Fira Mono Fallback";
  --spacing: .25rem;
  --text-h2-mobile--line-height: 2.75rem;
  --text-h1-mobile: 3.5rem;
  --color-code-value: #fc9f5b;
  --font-weight-semibold: 600;
  --text-h2--line-height: 4.5rem;
  --color-code-diff-added: #008060;
  --text-button-small: .875rem;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Tinybird.
Reference design system (extracted from the live site):
- Palette: #24f494, #1a6240, #80f8c1, #848484, #c7c7c7
- Typefaces: Roboto
- Macrostructure: Stat-Led
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/tinybird-co

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Roboto

64px

400

1.13

-1.28px

Aa Bb Cc

Roboto

64px

400

1.13

-1.28px

Aa Bb Cc

Roboto

16px

400

1.5

Aa Bb Cc

body

Roboto

16px

400

1.5

Aa Bb Cc

button

Roboto

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #24f494; --color-surface: #1a6240; --color-ink: #80f8c1; --color-accent: #848484; --color-detail: #c7c7c7; } /* CSS variables exposed by source */ :root { --text-h5--letter-spacing: -.02rem; --text-h4-mobile--line-height: 2rem; --primary-dark: #008060; --text-body-2: 1rem; --text-button--line-height: 1.5rem; --text-caption: .75rem; --text-caption--line-height: 1.25rem; --text-h2: 4rem; --text-h1--letter-spacing: -.08rem; --color-code-error: #ff8389; --text-h1-mobile--line-height: 4rem; --color-code-invocation: #27f795; --color-bg: #0a0a0a; --radius-asset: 1rem; --color-code-success: #27f795; --text-label--line-height: 1.5rem; --text-body-2--line-height: 1.5rem; --text-h4-mobile--letter-spacing: -.02rem; --text-h4: 2rem; --color-code-identifier: #00c1ff; --text-h2-mobile: 2.5rem; --text-h1-mobile--letter-spacing: -.105rem; --font-mono: "Roboto Mono", "Roboto Mono Fallback", monospace; --text-h4-mobile: 1.5rem; --text-h2-mobile--letter-spacing: -.075rem; --text-h3--letter-spacing: .025rem; --text-button: 1rem; --text-input--line-height: 2.5rem; --text-label: .875rem; --text-body-1: 1.125rem; --text-h4--letter-spacing: -.0625rem; --text-input: 2.25rem; --text-h5: 1.5rem; --font-sans: "Roboto", "Roboto Fallback"; --text-h3-mobile--letter-spacing: -.02rem; --font-weight-bold: 700; --text-h3-mobile: 2rem; --text-input-mobile: 1.5rem; --radius-pill: 1.5rem; --font-roboto: "Roboto", "Roboto Fallback"; --radius-2xl: 1rem; --radius-md: .375rem; --text-h3: 2.5rem; --color-code-white: #fff; --radius-lg: .5rem; --font-seven-segment: "sevenSegment", "sevenSegment Fallback"; --text-h2--letter-spacing: -.08rem; --text-h5-mobile: 1.25rem; --secondary-light: #00c1ff; --text-body-1--line-height: 2rem; --text-button-small--line-height: 1.5rem; --font-fira-mono: "Fira Mono", "Fira Mono Fallback"; --spacing: .25rem; --text-h2-mobile--line-height: 2.75rem; --text-h1-mobile: 3.5rem; --color-code-value: #fc9f5b; --font-weight-semibold: 600; --text-h2--line-height: 4.5rem; --color-code-diff-added: #008060; --text-button-small: .875rem; }

Build a landing page in the visual style of Tinybird. Reference design system (extracted from the live site): - Palette: #24f494, #1a6240, #80f8c1, #848484, #c7c7c7 - Typefaces: Roboto - Macrostructure: Stat-Led Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/tinybird-co