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

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