OUTERFIELDS
Log In Get Started

Design Guidelines

See our colors, type, and how we make the platform work for everyone.

Component Lab

Live previews of our atomic design system elements.

View Full System

Cinematic Player

v2.1.0
Video preview
View Docs

Watch videos in a full-screen player. Tracks when viewers replay parts. Click the play button to try it.

Engagement Heatmap

v1.0.0
Most Replayed
2:34
View Docs

See which parts of your videos viewers watch most. The heatmap shows engagement patterns in real time.

Metric Card

v3.0.1
Total Views
Live
45.2K
View Docs

Display metrics with progress bars and status indicators. Updates live as data changes.

Brand Principles

Premium

Each piece earns its place. Nothing extra. Nothing distracting.

Accessible

We follow web accessibility guidelines. Text is easy to read on any screen, at any size.

Immersive

Content takes center stage. Interface fades into the background.

Color Palette

Primary #7c2bee Buttons and highlights
Background #000000 Page backgrounds
Surface #111111 Cards that sit above the page
Subtle #1a1a1a Secondary backgrounds
Text Primary #ffffff Headlines and body text
Text Muted rgba(255,255,255,0.46) Captions and supporting text
Border rgba(255,255,255,0.1) Lines between sections
Success #44aa44 When things go right
Error #d44d4d When things go wrong

Typography

Display
clamp(2.5rem, 4vw + 1.5rem, 5rem) Weight: 700 Hero headlines
H1
clamp(2rem, 3vw + 1rem, 3.5rem) Weight: 700 Page titles
H2
clamp(1.5rem, 2vw + 0.75rem, 2.25rem) Weight: 600 Section headers
H3
clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem) Weight: 600 Card titles
Body
1rem Weight: 400 Body text
Small
0.875rem Weight: 400 Captions, metadata

Spacing

We use a spacing scale based on the golden ratio. It creates rhythm and balance.

--space-xs 0.5rem (8px)
--space-sm 1rem (16px)
--space-md 1.618rem (26px)
--space-lg 2.618rem (42px)
--space-xl 4.236rem (68px)

Accessibility

Color Contrast

Text colors have enough contrast to read easily. We test against web accessibility guidelines (WCAG AA).

Focus States

You can see which element you're on when using a keyboard. Every button and link shows a clear outline.

Motion

If you prefer less motion, we turn animations off. We respect your system settings.

Screen Readers

We use proper HTML structure so screen readers can navigate easily. Every page has clear headings.