# 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 tracking
- `h2`: Inter, 18px, weight **560** — micro-heading
- `h3`: Inter, 20px, weight **520**
- `body/a/button`: Inter, 14px, weight **440**, −0.1px tracking
- `p`: 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*