GymStreakdesign system
Light mode · v1

The GymStreak design system

Colors, type, and components for GymStreak's member web app — clean neutral surfaces with an indigo-to-purple accent reserved for streaks, milestones, and primary actions.

Foundations

Colors

A neutral gray-white base carries almost all UI. Indigo is the single solid primary; the gradient is reserved for a short, deliberate list of moments (see Gradient usage).

Neutral base

Background

--background

#FAFAFA

Card

--card

#FFFFFF

Muted surface

--muted

#F4F4F5

Border

--border

#E4E4E7

Foreground (ink)

--foreground

#18181B

Primary & gradient

Primary (indigo-500)

--primary

#6366F1

Gradient start

--brand-start

#6366F1

Gradient end

--brand-end

#A855F7

Accent (violet-600)

--accent

#7C3AED

Semantic

Success

--success

#16A34A

Warning

--warning

#F59E0B

Danger

--destructive

#DC2626

Info

--info

#0EA5E9

Foundations

Typography

Space Grotesk end to end — display headings and everyday UI text share one geometric, slightly technical typeface.

Display / 6xl / 600Verified streak, unlocked.
H1 / 4xl / 600Verified streak, unlocked.
H2 / 3xl / 600Verified streak, unlocked.
H3 / 2xl / 600Verified streak, unlocked.
H4 / xl / 500Verified streak, unlocked.
Body / base / 40047-day streak · 3 verified check-ins this week.
Small / sm / 400Next milestone at 60 days unlocks a reward tier.
Caption / xs / 600Streak milestone

Components

Buttons

Solid indigo (default) is the everyday primary action. The gradient variant is reserved for the single most important CTA on a screen.

Variants

Sizes

States

Components

Status badges

Small, colored pills that mirror the backend's own status vocabulary — check-in outcomes, reward fulfillment, and fraud risk tiers.

Check-in status

VerifiedReviewRejected

Reward claim status

ClaimedProcessingShippedDeliveredCancelled

Fraud risk

LowMediumHigh

Components

Cards

One card shape system-wide — rounded-xl, a hairline ring, white on the gray-white app background. Gradient shows up only as small icon chips, never as a full card fill.

47

Day streak

3

Check-ins this week

2

Rewards earned

60-day tee
Streak-milestone reward
Shipped
Size M
Downtown Fitness
0.4 mi away · open now

Geofenced QR check-in · 25m radius

142 members checked in this week

Components

Forms

Inputs stay quiet — a thin border, no fill — until focus, when the indigo ring takes over.

Enter a valid email address.

Notification preferences

Preferred units

Account

Components

Alerts

Inline feedback banners — tinted background at low opacity, colored icon and border, never a full-saturation fill.

Components

Progress

The standard progress bar is solid indigo. The gradient version is reserved for streak-to-milestone progress specifically.

Weekly check-in goal3 / 4
x
47-day streak → 60-day reward47 / 60
x

Guidance

Gradient usage

The gradient is the brand's signature move — it stays powerful by staying rare.

Do
Primary CTA / streak ring
  • The one primary CTA on a screen
  • Streak progress toward a milestone
  • A small icon chip on a stat/reward card
  • Hero panel accents, used subtly
Don't
Page background
  • Body text or long-form copy
  • Every button on a page
  • Card backgrounds / large fills
  • Secondary or destructive actions

Everywhere else — cards, inputs, most badges, page chrome — stays on the neutral gray-white scale with a solid indigo primary. That contrast is what makes the gradient read as "something earned" rather than decoration.