Kitchen Sink

Design system reference for FOCO. Tokens, primitives, and component specimens.

Palette

Void

--color-brand-void

Surface

--color-brand-surface

Accent

--color-brand-accent

Grit

--color-brand-grit

Warning

--color-brand-warning

Critical

--color-brand-critical

Typography

Display | .font-display-hype (opt-in)

The Sanctuary

Morning Light

Studio After Dark

Reserve for one hype moment per screen. Default headings inherit Inter.

Body (Inter 400-600)

A good tool gets out of the way. It helps you find the class and go. That is the whole thing.

No gamification. No streak that punishes you for taking a rest day. Just schedules, organized by what matters to you.

Metadata · Labels · Captions · Timestamps

Text Colors

Primary Text

text-brand-text-primary

Secondary Text

text-brand-text-secondary

Muted Text

text-brand-text-muted

Faint Text

text-brand-text-faint

Borders

Border

border-brand-border

Border Muted

border-brand-border-muted

Activity Colors

Left Border Tints

strength

hiit

cycling

flexibility

dance

aquatic

cardio

Buttons

Empty States

A quiet morning. Come back after lunch.

Choose where to start.

That class filled up. Another on Thursday.

Cards

1:00

pm · 45m

cardio

Moose's Street Beat

Moose · EōS Chandler · Ray & Rural

1:00

pm · 45m

cardio

Moose's Street Beat

Moose · EōS Chandler · Ray & Rural

Expressive Motion

Neural Flow Gradient.bg-neural-flow (ambient backdrop)

Hype Activity Pulsing

.animate-neural-pulse + .bg-neural-flow-light

.btn-scale-bounce (bouncy spring scale transitions)

Voice Guide

We say

“Find your next class.”
“A quiet morning. Come back after lunch.”
“Nothing on at the moment. Try tomorrow?”
“That class filled up. Let's find another.”
“Built in Arizona.”

We never say

“Crush your goals!”
“You missed your streak!”
“Unlock your potential.”
“Dominate your workout.”
“Don't give up now!”