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 systemh5: Inter, 24px, weight 400body: system sans-serif, 16pxp/a: Inter, 18px / 16px, weight 300 — notably lightbutton: Inter, 16px, weight 400input: 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 badgergb(255,90,0), floating header with horizontal margin.”
Generated by Sparkbites — extracted from live CSS analysis
