# outpacestudios.com — Design System

## 1. Visual Theme & Atmosphere
Outpace Studios is a performance-oriented creative studio built on Next.js and Tailwind. The design system is sharp and focused: near-white backgrounds, near-black type, and a single electric orange brand colour (`#ff4502`) that carries all the energy. The sole typeface — InterDisplay — a variant of Inter optimised for large sizes — reinforces the system's precision. This is a studio that communicates speed, clarity, and craft without ornament.

## 2. Color Palette & Roles
| Token | Value | Role |
|-------|-------|------|
| Background | `#fff` | Canvas |
| Foreground | `#171717` | Primary text |
| Brand | `#ff4502` | Energy, CTAs, highlights |
| Slate | `rgb(25, 27, 36)` | Dark panel backgrounds |
| Muted | `rgb(157, 159, 174)` | Secondary text |
| Border | `rgb(211, 212, 217)` | Dividers |
| Slate dark | `rgb(31, 41, 55)` | Card backgrounds |

A dual-mode aesthetic: white sections for marketing, dark slate sections for featured content. Orange is the bridge between both.

## 3. Typography Rules
- **Sole typeface**: InterDisplay — optimised Inter variant. h1 at 48px / 700 / -0.96px tracking. Very tight.
- No fallback to body-weight Inter — the system uses the display variant exclusively.
- Negative letter-spacing (-0.96px) at large sizes creates the compressed, forward-leaning energy of the brand.
- All headings (h1–h2) share 48px/700/-0.96px — consistent hero scale.
- Body text inherits system sans fallbacks below the heading hierarchy.

## 4. Component Stylings
- **Radius**: Circular (`border-radius: 3.35544e+07px` — effectively 50%) for pill/avatar shapes; 24px for cards/buttons.
- **Shadows**: Layered focus ring system using white and transparent layers — sophisticated keyboard accessibility.
- **Dark cards**: Slate dark (`rgb(31,41,55)`) with white and muted-grey text.
- **Brand application**: Orange `#ff4502` used on CTAs, hover highlights, and brand marks.

## 5. Layout Principles
- Two-surface system: white marketing sections, dark slate product/feature sections.
- InterDisplay headings at identical 48px across sections — bold, consistent.
- Next.js App Router page structure with Tailwind utility classes.
- Tight letter-spacing creates horizontal compression, driving the eye through long headlines.

## 6. Depth & Elevation
Layered shadow system on focus states. Cards use colour-based elevation (dark-on-light, slate-on-white). No decorative drop shadows — functional accessibility shadows only.

## 7. Do's and Don'ts
**Do:**
- Apply -0.96px letter-spacing to all large headings
- Use orange exclusively as a brand/energy accent, not for decoration
- Alternate white and slate-dark sections for content rhythm

**Don't:**
- Substitute Inter (non-display) for InterDisplay in headings
- Use orange for status states (success, error) — it's brand-only
- Reduce heading font-weight below 700

## 8. Responsive Behavior
Next.js/Tailwind responsive grid. 48px headings scale to ~28–32px on mobile. Orange accent maintains visibility at all screen sizes. Dark sections invert text colours correctly.

## 9. Agent Prompt Guide
> Reproduce outpacestudios.com style: white canvas `#fff`, near-black `#171717` text, InterDisplay 700 at 48px with -0.96px tracking. Electric orange `#ff4502` brand accent. Slate dark panels `rgb(25,27,36)`. Radius 24px standard, circular for pills. No decorative shadows.

*Generated by Sparkbites — extracted from live CSS analysis*