Internal · v2 Design System

Fitune Style Guide

Living reference of the v2 design system. Every token, every component, every interaction. Used to validate the system before pages go live.

01 · Typography

Type scale

Display · 96 / 56

Help studios win.

H1 · 56 / 40

The operating system for studios.

H2 · 36 / 28

Attract, convert, retain, operate.

H3 · 22 / 20

Every studio deserves better software.

Body · 17 / 16

Boutique fitness studios run on intuition and spreadsheets. Fitune replaces both with a system designed for the way modern studios operate, from waitlist to payroll.

Body small · 15 / 14

Smaller body for captions, footnotes, and dense interface copy.

Eyebrow · 11px tracking 0.2em
Studio Success Model
Italic emphasis · weight 300 Electric Blue

Pricing isn't just numbers. It signals who you are.

02 · Colors

Palette

Core brand
Ink Navy
#000A24
Electric Blue
#4D7FFF
Misty
#EAEEF2
White
#FFFFFF
Navy family (opacities on white)
Navy Lifted
#1A2A4F
Navy 70
rgba 0.70
Navy 40
rgba 0.40
Navy 20
rgba 0.20
Navy 10
rgba 0.10
Navy 06
rgba 0.06
Navy 04
rgba 0.04
Blue family
Blue Lightest
#EBF0FF
Blue Surface
#D6E1FE
Blue Pressed
#2E5FE0
Blue Deep
#1A3DCC
Misty family (canvas surfaces)
Paper
#FAFAFA
Mist Light
#F4F6FA
Mist Deep
#D6DDE5
Mist Border
#B8C2CC
Soft secondary surfaces
Soft Mint
#E0F0E5
Soft Lavender
#E8E2F5
Soft Sky
#DCEAF7
Soft Peach
#FFE5D9
Soft Coral
#FFD9D2
Sentiment
Positive
#2F5711
Warning
#B8893A
Negative
#A8200D
04 · Components

Building blocks

Card
Attract

Studio directory

Get discovered by clients searching for studios in their neighborhood.

Convert

Online booking

Mobile-first booking flow that converts visitors into paying clients.

Retain

Loyalty system

Built-in rewards keep clients coming back month after month.

Tag
Dividers


05 · Section variants

Layout primitives

Section padding scales by intent. Container max-width 1440 px with 32 px horizontal padding (24 px on mobile).

Standard section padding

Default vertical rhythm for most marketing sections.

Tight section padding

For sections that flow into each other or interstitial content.

Hero section padding

Generous vertical space for the page opener and major moments.

Dark hero or footer surface

Inverted surface with Misty text for high-contrast moments.

06 · Spacing & radius

Scales

Spacing

All spacing built on multiples of four. Visual scale below shown at actual width.

Space xs
4 px
Space sm
8 px
Space 12
12 px
Space md
16 px
Space lg
24 px
Space xl
32 px
Space 2xl
48 px
Space 3xl
64 px
Space 4xl
96 px
Space 5xl
128 px

Radius

Radius sm
4 px
Radius md
8 px
Radius lg
12 px
Radius xl
16 px

End of style guide

Internal Fitune resource. v2 Design System reference. Update this page whenever new tokens or components are added to Webflow.