Tinybird

www.tinybird.co

a terminal-aesthetic developer-analytics site where Roboto + Roboto Mono on near-black #151515 and a single electric-mint accent (#27f795) carry a "Managed ClickHouse" pitch through [bracketed] mono tab labels and a tiny six-keyframe motion budget that includes a literal blink cursor.

Data Infrastructure Developer Analytics Clickhouse strong

Design tokens

page-black
surface-elevated
pure-black
pure-white
muted-grey
translucent-white-20
brand-mint
card-mint-glow-08
card-mint-glow-06
body
Roboto, "Roboto Fallback"
mono
"Roboto Mono", "Roboto Mono Fallback", monospace

Do / Don't

Reference it for

  • The [bracketed mono labels] pattern as the section-marker primitive. Roboto Mono 12-14px in square brackets, used for every block title, eyebrow, and tab. Single most identifiable typographic move.
  • A single saturated brand colour (#27f795 electric mint) used for CTA fill AND inline number emphasis AND active-state borders. 43 text hits + 12 background hits = the only colour on the page.
  • Roboto + Roboto Mono as a two-face system that costs nothing (free, ubiquitous) but reads as deliberate when paired with the bracket motif.
  • A stepped near-black surface scale: #151515 page, #262626 card-elevated, #000000 deepest. Three darks for depth without shadow.
  • The blink keyframe as a terminal-cursor flourish on the hero — small motion moment that anchors the brand position.
  • A bracketed tab nav for switching use-case demos (Real-Time Analytics / Observability / AI / Crypto / SaaS Dashboards). Lower-friction than a sub-nav, more direct than separate landing pages.
  • A box-shadow-free developer-tool dark page (0 declared shadows in the captured CSS). Depth via surface-step, not lift.
  • An inline-number emphasis pattern: customer stats ("30M requests/day", "sub-second latency") have the numbers coloured green inline.

Do not copy

  • Roboto is free but Tinybird-coded by this exact use. Substitute the client's own neutral sans (Inter, Söhne) on briefs where the terminal aesthetic isn't the right fit.
  • The exact #27f795 electric mint — strongly Tinybird-coded.
  • The [bracketed labels] pattern on a brand whose audience is not developers. Reads as obtuse to non-technical buyers.
  • 69 @font-face declarations for what is effectively 2 font families. The Next.js auto-bundle ships Roboto in many weights it never uses — subset aggressively.
  • 12 third-party analytics tags (Hubspot, Twitter, Unify, Infinitewatch, etc.). Pick the 1-2 that drive actual marketing attribution.
  • 40 section blocks on a 1440px-cap page without earning each one — Tinybird's high section count comes from Next.js dividing every micro-element into its own section, not from genuine content density.

Signature moves

bracketed-mono section markers

every block title, eyebrow and tab is set as a [bracketed mono label] in Roboto Mono 12-14px, the single most identifiable typographic move.

single-accent green on stepped black

one electric mint (#27f795) is the only colour, used for CTA fill, inline number emphasis and active borders, over a three-step near-black surface scale (#151515 page, #262626 card, #000000 deepest) with 0 shadows.

blink terminal-cursor flourish

a blink keyframe gives the hero a terminal-cursor flourish, a small motion moment anchoring the developer-tool brand position.