Tinybird
www.tinybird.coa 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.
Design tokens
- 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.
Related references
Cursor
strongDeveloper Tool
a Next.js / Tailwind developer-tool site where a bespoke CursorGothic on warm-light cream (`#f7f7f4`), EB Garamond paragraphs for editorial moments, and 0.14s expo micro-animations make a coding-agent product feel like a quietly-confident research lab rather than a SaaS landing.
Linear
flagshipDeveloper Tool
the restraint benchmark - a dark, near-monochrome product site where one indigo accent, crisp 0.16s motion and an animated dot-grid do all the work, and nothing is wasted.
Mailchimp
flagshipMarketing Platform
a post-Intuit-acquisition Mailchimp site where the iconic Cavendish-yellow `#ffe01b`, the dark-teal `#004e56`, and the Freddie chimp mascot all survive intact - now paired with Graphik Web for body, Means Web for serif accents, and a springy overshoot cubic-bezier (`0.5, 2.5, 0.7, 0.7`) at 0.3s that gives every interaction its characteristic bounce.
Parsley Health
flagshipHealth
a functional-medicine telehealth clinic that earns trust through calm, a deep forest-teal and warm-cream palette, an EuclidCircularB-plus-Teodor-serif pairing, a long evidence-led page of credential blocks, comparison tables and measurable outcomes, all on a clean Next.js + Tailwind build.