Cursor Green
#27f795Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Tinybird
tinybird.coWebsite preview
The design language
Tinybird is a dark-mode developer console aesthetic: near-black canvas, one electric green accent that acts as the only chromatic voice on screen, and a strict division between humanist Roboto for prose and monospaced Roboto Mono for tags, labels, and code. The interface reads as terminal-grade — monospace badges sit inside square brackets like log entries, and the green accent behaves like a blinking cursor rather than a brand color, used sparingly for CTAs, links, and the occasional inline highlight. Surfaces are flat, borders are hairline, and elevation is achieved through subtle dark-to-darker layering rather than shadows. The result is a product page that feels engineered rather than marketed, confident in its restraint.
Color palette
brand
Hover Green
#008060Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
accent
Terminal Red
#800000Red supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
neutral
Pure White
#ffffffPrimary text and headlines. Maximum contrast against the near-black canvas for immediate legibility
Void Black
#000000Deepest surface layer for hero backgrounds and video poster frames, one step darker than the page canvas
Console Black
#0a0a0aPrimary page canvas — the dominant background of every screen. A hair above true black to soften OLED contrast
Panel Charcoal
#151515First elevated surface — used for embedded media frames and video containers that need to sit above the page canvas
Card Graphite
#262626Testimonial and content card backgrounds. Two steps above the canvas, enough lift to separate without casting shadow
Border Smoke
#353535Hairline borders, input fields, and dividers. Defines component edges without competing with content
Muted Ash
#8d8d8dSecondary body text, descriptions, and sub-labels — the voice for anything supporting but not starring in the hierarchy
Tertiary Fog
#999999Tertiary text and disabled-state labels. The faintest human voice before falling into silence
Highlight Mist
#d9d9d9Bright border accent used on emphasized outlined elements like the active workflow step
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
64px · 400 · 1.13 · -1.28px trackingThe quick brown fox jumps
stat-figure
56px · 400 · 1 · -4.7px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.33 · -0.31px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.5The quick brown fox jumps
body
16px · 400 · 1.67The quick brown fox jumps
body-sm
14px · 400 · 1.57The quick brown fox jumps
caption
12px · 400 · 1.57 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Roboto
- Weights
- 400, 600, 700
- Sizes
- 12, 14, 16, 18, 24, 64
- Line height
- 1.13, 1.33, 1.50, 1.57, 1.67, 1.78
- Letter spacing
- -0.0200em at 64px (display), -0.0130em at 24px (heading)
- Fallback
- Inter, system-ui, sans-serif
Prose and headlines. Weight 400 for body and descriptions, weight 600 for primary CTA button text, weight 700 reserved for the 64px display headline. The tight negative tracking at 64px tightens the headline into a single confident block.
Additional typeface
Roboto Mono
- Weights
- 400
- Sizes
- 12, 14, 16, 56
- Line height
- 1.00, 1.50, 1.57, 1.67
- Letter spacing
- -0.0840em
- Fallback
- JetBrains Mono, IBM Plex Mono, monospace
Tags, badges, code labels, workflow step indicators, and monospaced stat figures. The extreme -0.084em tracking at 56px is anti-convention — monospace usually stays loose, but this tightens the digits into a dense data block that feels engineered, not displayed.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tags
4pxcards
8pxbuttons
4pxSpacing scale
1px2px4px8px10px12px16px20px24px32px40px46px48px56px64px72px152px158px174px198px223pxGuidelines
Do
- Use #27f795 fill only for the single most important action per screen — one filled CTA, everything else ghost or text.
- Wrap workflow steps and inline labels in square brackets rendered in Roboto Mono to maintain the terminal-log aesthetic.
- Use Roboto Mono for all numerics, stats, and tag labels; use Roboto only for prose, descriptions, and headlines.
- Set headline tracking to -0.020em at 64px and stat-figure tracking to -0.084em at 56px to compress type into dense, confident blocks.
- Build surface hierarchy through four levels of charcoal (0a0a0a → 151515 → 262626 → 353535) rather than drop shadows.
- Keep all borders at exactly 1px in #353535 — the system is defined by hairline edges, not weight.
- Use 4px radius for buttons and 8px radius for cards — no larger radii anywhere.
Don’t
- Do not introduce any color outside the palette — the system is achromatic plus one green, and adding a second chromatic voice breaks the terminal metaphor.
- Do not use filled buttons with neutral or white backgrounds — the only fill color is #27f795, and only for primary actions.
- Do not use Roboto for tags, labels, or code — these must stay in Roboto Mono to preserve the developer-tool identity.
- Do not use shadows or glows to create elevation — the design achieves layering through surface darkness, never drop shadows.
- Do not use radii larger than 8px — anything rounder would feel consumer-friendly and break the engineered feel.
- Do not use the red #800000 as an error state — it is a quiet inline accent, not a semantic signal.
- Do not left-align hero content — the centered headline with tight tracking is the signature opener.
Components
Primary CTA Button
Filled button for the single most important action on a screenBackground #27f795 (Cursor Green), text #000000 or #0a0a0a, Roboto weight 600 at 16px, 4px radius, 12px vertical and 24px horizontal padding. This is the only filled button in the system — every other interactive element is ghost or text. The green fill is the visual equivalent of a blinking cursor.
Ghost Link Button
Secondary action that sits beside the primary CTANo background, text #27f795, Roboto weight 400 at 16px, no border, no radius. Reads as a text link with cursor affordance — a quieter companion to the filled CTA.
Navigation Header
Persistent top bar with product links and auth actionsTransparent background over the #0a0a0a canvas. Logo (bird mark + 'tinybird' wordmark) on the left in white at 14px weight 700. Center nav items in white at 14px weight 400. Right side: ghost 'Sign in' text link in #27f795, followed by a filled 'Sign up' button using the Primary CTA style at compact 10px vertical and 16px horizontal padding.
Bracket Workflow Tag
Step indicator in workflow sequencesNo background, Roboto Mono weight 400 at 12px, color #27f795 for active step and #8d8d8d for inactive steps. Wrapped in literal square brackets: [Get Started] [Develop] [Ingest] [Query] [Monitor] [Iterate]. Pipe characters separate steps. This is the signature micro-component — it makes the interface feel like a log output.
Category Tag
Topical classification badge1px border in #353535 (Border Smoke), transparent background, Roboto Mono weight 400 at 12px, text #d9d9d9, 4px radius, 4px vertical and 12px horizontal padding. Used in the hero to categorize use cases like 'SaaS / Dashboards', 'Observability', 'AI Analytics'.
Stat Card
Hero metric displayLarge Roboto Mono figure at 56px weight 400 in #27f795, tracked at -0.084em to compress digits into a dense block. Adjacent label in Roboto Mono at 12px in #8d8d8d, uppercase. No card chrome — sits directly on the canvas.
Testimonial Card
Social proof block in 3-column gridBackground #262626 (Card Graphite), 8px radius, 24px padding all sides. 40px circular avatar at top-left, name in Roboto weight 600 at 14px in #ffffff, title and company in #8d8d8d at 12px. Quote body in Roboto weight 400 at 14px in #d9d9d9. 1px border in #353535 for definition against the slightly lighter card surface.
Hero Section
Above-the-fold headline and CTACentered layout on #0a0a0a. Headline at 64px Roboto weight 700 in #ffffff, tracked at -0.020em, line-height 1.13. Subtext at 18px Roboto weight 400 in #8d8d8d. Primary CTA and ghost link side by side with 16px gap. Category tags below with 8px gap.
Logo Bar
Partner or customer logo stripSingle row of 7–8 grayscale logos centered, separated by 40px gap, inside a card with #262626 background and 1px #353535 border. Logos rendered in #8d8d8d to recede — they are evidence, not heroes.
Video Embed Frame
Full-width media container for demosBackground #151515 (Panel Charcoal), 1px border in #353535, no radius. Circular play button centered at 64px diameter, #353535 fill with white triangle icon. Frame extends edge-to-edge within its container with no internal padding — the video is the content.
Data Hero Band
Promotional strip combining social proof and live metricsInline composition on the canvas: partner attribution (small avatar + name) in #8d8d8d, followed by a description sentence with the phrase '30M requests/day' highlighted in #27f795. Below, a two-column split: left column has stacked stat figures in Cursor Green, right column has a white-quote testimonial block.
Surfaces & elevation
Level 0
Void
#000000Deepest surface for hero bands and full-bleed media frames
Level 1
Console
#0a0a0aPrimary page canvas across all sections
Level 2
Panel
#151515Embedded media containers, video posters
Level 3
Card
#262626Testimonial and content card backgrounds
Level 4
Edge
#353535Borders, input fields, subtle dividers
The system explicitly avoids drop shadows. Elevation is built through a four-step surface darkness scale (#0a0a0a → #151515 → #262626 → #353535) combined with 1px hairline borders. This keeps every element feeling embedded in the canvas rather than floating above it — consistent with the terminal-screen metaphor where nothing casts a shadow because there is no light source, only luminance values.
Card on Canvas
none — achieved through #262626 surface against #0a0a0a canvas
Testimonial Card
none — 1px #353535 border on #262626 surface
Video Frame
none — 1px #353535 border on #151515 surface
Layout & imagery
Layout
Max-width 1200px centered content on a full-bleed #0a0a0a canvas. The page follows a vertical rhythm of full-width sections separated by 80px gaps, with no alternating light/dark bands — every section shares the same dark canvas. Each section is centered text-first, with the hero using a centered stack (headline → subtext → CTA pair → tag row) and subsequent sections alternating between centered text blocks and 3-column card grids. Navigation is a minimal transparent top bar with no sticky shadow. Content density is comfortable rather than dense — large vertical breathing room and centered compositions create a stage for the single green accent.
Imagery
Visuals are minimal and functional. The only photographic content is small circular avatar portraits in testimonial cards (40px, tightly cropped to face). The primary visual artifact is a full-bleed video demo frame rendered as a flat charcoal panel with a centered play button — no thumbnail, no preview. Partner logos in the logo bar are desaturated to #8d8d8d monochrome, presenting social proof as evidence rather than endorsement. No illustrations, no 3D renders, no decorative graphics. The green accent does the visual work that ornament would do elsewhere.
Design notes
Agent 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: no distinct CTA color ## 3 Example Component Prompts No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Create a testimonial grid**: 3-column grid on #0a0a0a canvas, 24px column gap, 40px row gap. Each card: #262626 background, 8px radius, 1px #353535 border, 24px padding. 40px circular avatar top-left. Name in Roboto weight 600 14px #ffffff, title in 12px #8d8d8d, quote in 14px #d9d9d9. Section gap above: 80px. 3. **Create a stat display**: Two-column layout on #0a0a0a. Left column: stacked stat figures in Roboto Mono 56px weight 400, #27f795, letter-spacing -4.7px, line-height 1.00. Adjacent labels in Roboto Mono 12px uppercase, #8d8d8d. Right column: quote block with 1px left border in #27f795, body text in Roboto 16px #d9d9d9.
Similar brands
Vercel
Same black-canvas developer-tool aesthetic with a single chromatic accent and geometric sans-serif headlines, though Vercel uses white accents where Tinybird uses green
Railway
Dark-mode infrastructure product page with monospace labels and flat surface layering, though Railway leans more purple than green
PlanetScale
Terminal-grade dark interface with monospace stat figures and flat card hierarchy, though PlanetScale uses a broader gradient palette
Supabase
Dark developer-tool product page with a single vivid accent color (green for Supabase) and monospace tag badges
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
