Tinybird

# Tinybird — Style Reference
> Data noir interface — high contrast text and a single, electric green highlight on a deep, almost black background.
Theme: dark

Tinybird presents a 'data noir' aesthetic, marrying industrial-strength data tools with a sophisticated, restrained dark theme. The interplay of near-black backgrounds and pristine white text creates a high-contrast experience, punctuated by a single, vibrant green accent. Careful use of grayscale and subtle elevation on cards provides depth, ensuring critical information stands out against the dark canvas without feeling overwhelming.

## Colors
| Name | Value | Role |
|------|-------|------|
| Midnight Ink | `#0a0a0a` | Page backgrounds, elevated surface backgrounds |
| Obsidian Slate | `#262626` | Card backgrounds, section dividers |
| Iron Oxide | `#151515` | Subtly darker surface backgrounds, minor elements |
| Deep Graphite | `#353535` | Hover states, subtle borders |
| Silver Mist | `#8d8d8d` | Secondary text, inactive elements, input placeholders |
| Pure White | `#ffffff` | Primary text, main headings, critical information |
| Electric Green | `#27f795` | Primary call-to-action buttons, active navigation, key interactive elements – signals interaction and success in an almost neon glow against the dark UI |
| Deep Jade | `#008060` | Subtle indicators, success states (less prominent than Electric Green) |
| Alert Red | `#800000` | Error states, warnings |
| Crimson Hue | `#ec6d62` | Semantic highlight, less harsh than Alert Red |
| Goldenrod | `#f5c451` | Informational highlight, warning states |
| Leaf Green | `#61c454` | Alternative success indicator, muted compared to Electric Green |

## Typography
| Family | Role |
|--------|------|
| Roboto | The primary sans-serif for all UI elements and body text. Weight 400 is the default for readability, while 600 and 700 are used for emphasis in headings and navigation. The tight letter-spacing at larger sizes ('-0.0200em') creates a more refined, precise look for headlines, typical of digital-native brands. |
| Roboto Mono | Used for code snippets, data points, and technical labels. Its monospace nature clearly differentiates technical content, while the very tight letter-spacing ('-0.0840em') makes even large numbers feel precise and compact, aligning with the brand's focus on efficiency and data infrastructure. |