# tempo.new — Design System

## 1. Visual Theme & Atmosphere

Tempo is an AI-powered React app generator, and its design reflects the generative, electric quality of that mission. The canvas is pure black — not near-black but `rgb(0,0,0)` — with content floating in a series of very dark surfaces. The signature element is a vivid orange (`rgb(255,90,0)`) that appears as a product label or status badge, and a deep violet glow (`rgba(111,85,242,0.318)`) that creates an atmospheric background effect behind the hero. The hero typeface is **brockmann** — a distinctive serif that stands apart from every other element, giving the headline a sculptural quality.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(0,0,0)` | Pure black background |
| Surface 1 | `rgb(20,22,26)` | Deepest content container |
| Surface 2 | `rgb(31,31,34)` | Card background |
| Surface 3 | `rgb(38,38,38)` | Input/interactive element |
| Surface 4 | `rgb(47,48,53)` | Slightly lighter panel |
| Heading text | `rgb(245,245,246)` | Near-white hero text |
| Muted text | `rgb(163,163,163)` | Nav links, secondary |
| Input text | `rgb(96,96,100)` | Placeholder/inactive input |
| Primary CTA | `rgb(100,72,239)` | Violet action button |
| Orange feature | `rgb(255,90,0)` | Product label/badge |
| Violet glow | `rgba(111,85,242,0.318)` | Hero ambient background |

The orange and violet together create a warm-cool electric contrast against the pure black.

## 3. Typography Rules

A deliberate two-family split: **brockmann** for the hero, **Inter** for everything else.

- `h1`: brockmann, 68px, weight 400, line-height 85px — the only serif in the system
- `h5`: Inter, 24px, weight 400
- `body`: system sans-serif, 16px
- `p/a`: Inter, 18px / 16px, weight 300 — notably light
- `button`: Inter, 16px, weight 400
- `input`: Inter, 18px, weight 400

The brockmann serif at 68px creates a striking, unexpected contrast against the ultra-dark background. Inter at weight 300 for body copy keeps the interface airy despite the dark canvas.

## 4. Component Stylings

Border radius: `7.6px` (buttons), `9.6px` (inputs), `16px` (larger cards), `2px` (micro chips). The primary violet CTA `rgb(100,72,239)` uses a subtle `rgba(0,0,0,0.1)` drop shadow. Input fields on dark: transparent background with `rgb(64,64,64)` border. Focus rings suppressed (`outline: transparent solid 2px`) — interaction is UI-driven rather than keyboard-visible.

## 5. Layout Principles

Section padding: `12px 64px 0px` — tightly padded top, generous sides. Header uses `24px 40px` padding with `0px 16px` margin (floating header). Footer: `40px 20px`. Breakpoints from 375 to 1536px covering 7 tiers.

## 6. Depth & Elevation

Five dark surface tiers (luminance 0 → 0.189) create depth without light. The violet glow `rgba(111,85,242,0.318)` at luminance 0.434 provides the only significant mid-tone. Shadow system: `rgba(0,0,0,0.1) 0px 1px 3px` and an inset ring `rgb(38,38,38) 0px 0px 0px 2px` — very subtle on dark.

## 7. Do's and Don'ts

**Do:** Use brockmann only for the hero headline — it's the signature moment. Keep Inter at weight 300 for body to maintain lightness. Use the violet glow as an ambient atmospheric element, not a foreground color.

**Don't:** Add background colors in white or light ranges. Don't use brockmann below 40px. Don't add decorative shadows beyond the ambient violet glow.

## 8. Responsive Behavior

7 breakpoints from 375 to 1536px. The floating header and section margins likely reflow to full-width at mobile sizes.

## 9. Agent Prompt Guide

> "Design in the style of tempo.new: pure black canvas, brockmann serif hero at 68px weight 400, Inter light (300) body, five-tier dark surface elevation, violet CTA `rgb(100,72,239)` with ambient violet glow, orange product badge `rgb(255,90,0)`, floating header with horizontal margin."

*Generated by Sparkbites — extracted from live CSS analysis*