tembo.io — Design System
1. Visual Theme & Atmosphere
Tembo.io is a Postgres cloud platform with a design system so thorough it reveals an engineering team that thinks in tokens. The surface is near-white (rgb(250,250,250)) and the typography uses Inter at fractional font weights (440, 520, 560) — enabled by Inter’s variable font capabilities. Every color in the system exists in both a direct form and as a named overlay token. The result is a product interface that feels precise, systematic, and trustworthy — like the database infrastructure it sells.
2. Color Palette & Roles
| Role | Value | Usage |
|---|---|---|
| Background | rgb(250,250,250) (--color-gray-50) |
Page canvas |
| Raised surface | rgb(255,255,255) |
Cards, modals |
| Secondary surface | rgb(240,240,240) |
Sidebar, panels |
| Text strong | rgba(0,0,0,0.92) |
Primary headings |
| Text default | rgba(0,0,0,0.6) |
Body text — 60% opacity |
| Text muted | rgba(0,0,0,0.4) |
Subdued labels |
| Border | rgba(0,0,0,0.06) |
Hairline dividers |
| Primary CTA fill | rgb(33,33,33) (--color-gray-950) |
Dark CTA button |
| Accent | rgb(0,131,245) (--interactive-fill-accent-enabled) |
Blue interactive |
| Sentiment: success | rgb(0,153,15) |
Green positive |
| Sentiment: warning | rgb(235,117,0) |
Orange caution |
| Sentiment: error | rgb(255,31,31) |
Red negative |
Colors are expressed as opacity values over black/white overlays — a sophisticated theming system that could support dark mode trivially.
3. Typography Rules
Inter variable with fractional weights — a distinctive feature of this design:
h1: Inter, 36px, weight 520, −0.9px trackingh2: Inter, 18px, weight 560 — micro-headingh3: Inter, 20px, weight 520body/a/button: Inter, 14px, weight 440, −0.1px trackingp: Inter, 16px, weight 440
Fractional weights (440, 520, 560) are between regular (400) and medium (500), or medium and semibold (600). This creates extremely precise optical weight without visual heavy-handedness.
4. Component Stylings
Radius: 20px for cards, 9999px for pills/badges, 2px for inline elements. A three-tier elevation: 1px shadow (micro) → 2px 8px (card) → 0px 0px 2px (modal-like). The gradient tokens (--gradient-onboarding-welcome, --gradient-plan-pro) use radial amber and blue gradients for premium feature highlights.
5. Layout Principles
Next.js + Tailwind with 8 breakpoints (480–1536px). Full semantic token system suggests a design language team, not just a developer following a style guide. Footer: 64px padding.
6. Depth & Elevation
Three shadow levels:
- Hairline:
rgba(0,0,0,0.05) 0px 1px 2px - Card:
rgba(0,0,0,0.15) 0px 2px 8px - Micro:
rgba(0,0,0,0.04) 0px 0px 2px
No dramatic elevation. The design language prioritizes subtlety.
7. Do’s and Don’ts
Do: Use Inter variable at fractional weights to maintain the precise optical feel. Use the token naming system for all colors — never hardcode. Use the sentiment color system for feedback states (success/warning/error).
Don’t: Add weight extremes (700+) — the fractional weight range is intentional. Don’t use saturated accent colors for decoration; they carry semantic meaning. Don’t mix border radius values arbitrarily.
8. Responsive Behavior
8 breakpoints from 480 to 1536px. A full Tailwind responsive coverage with custom additions at 480 and 950px for specific product layout needs.
9. Agent Prompt Guide
“Design in the style of tembo.io: near-white canvas, Inter variable font with fractional weights 440/520/560, opacity-based text hierarchy (0.92/0.6/0.4), hairline borders at 6% black, dark CTA button, semantic status colors, 20px card radius and 9999px pills, systematic token architecture.”
Generated by Sparkbites — extracted from live CSS analysis
