ClubReady · Design System

One source of truth for colour, from Figma to production.

Every value on this page is generated from the Figma library. Nothing is typed by hand. Change a variable in Figma, regenerate, and every product that imports this file moves together. Prefer a component library? Browse the same tokens rendered through flowbite-react or flowbite-angular.

Source Flowbite Design System Pro v3.1 Generated 2026-10-12 Colour tokens 105 Modes Light · Dark

Any stack — plain CSS

<link rel="stylesheet" href="https://design-tokens.clubready.com/staging/foundation.css">

.panel {
  background: var(--bg-primary);
  color:      var(--text-heading);
  border:     1px solid var(--border-base);
}

Tailwind / Flowbite

# Fetch the file from CloudFront at build time
BASE=https://design-tokens.clubready.com/staging
curl -fsSL $BASE/foundation-tailwind.css -o src/tokens/foundation-tailwind.css

# Then import the local copy
@import "tailwindcss";
@import "./tokens/foundation-tailwind.css";

Vite, webpack and PostCSS cannot @import
a remote URL, so the CDN fetch happens
in CI rather than in the stylesheet.

Dark mode

<html class="dark">          <!-- Tailwind -->
<html data-theme="dark">     <!-- anything else -->

Both flip the same variables.
No JS required.

Plan

Figma → git → CDN

Colour is edited in Figma. This gallery is built from the three JSON exports in GitHub and served from CloudFront. There is no npm package — the examples above point at https://design-tokens.clubready.com/staging/, the copy you are reading now.

Who	Does
Design	Export `Value_tokens.json`, `Light_mode_tokens.json`, `Dark_mode_tokens.json` and overwrite them in `tokens/` on `main`. Do not upload CSS or HTML.
CI — staging	Push of those files builds CSS and this page, then publishes `/staging/`.
Engineering — release	Publish the next unused `v1.x` tag, currently `v1.8` or later. It writes an immutable prefix and updates `/production/latest/`; `v1.7` remains the app pin.
Product apps	Pin `https://design-tokens.clubready.com/production/v1.7/foundation.css` (or vendor the Tailwind file from that URL). Do not parse JSON. Do not hardcode hex.

CDN prefix	Mutability
`/staging/`	Overwritten on every JSON push to `main`
`/production/v1.1/`	Immutable. Never overwrite.
`/production/v1.2/`	Immutable historical prefix. Never overwrite.
`/production/v1.3/`	Immutable historical prefix. Never overwrite.
`/production/v1.4/`	Immutable historical prefix. Never overwrite.
`/production/v1.5/`	Immutable historical prefix. Never overwrite.
`/production/v1.6/`	Immutable historical prefix. Never overwrite.
`/production/v1.7/`	Immutable current pin. Never overwrite.
`/production/latest/`	Alias of the current GitHub Release

Design checklist before asking for a release:

Staging gallery chips match Figma (left = light, right = dark).
Toggle dark mode. Flowbite components (buttons, forms, alerts) still look correct.
Text contrast badges on body copy stay readable on --bg-primary.
You did not add spacing, radius, or type overrides.

Spacing, radius, font sizes and border widths are not in the token CSS. Those scales already match stock Tailwind v4 exactly, so shipping them as overrides would resize every Flowbite component. Use p-4, rounded-xl, text-sm and they will match the mockups. The reference tables below are there so you can check a value without opening Figma.

ClubReady palette

11 · raw scale

The brand ramp. Use these directly only when no semantic token fits — prefer the semantic layer so a rebrand stays a one-line change.

Backgrounds

Surfaces and fills. Each chip is split: left half is light mode, right half is dark.

Text

Foreground colours. The badge shows contrast against --bg-primary in the mode you are viewing — 4.5 or above passes WCAG AA for body text.

Borders

Strokes, dividers and outlines.

Flowbite components

full set · Tailwind + tokens

Real Flowbite markup and stock Tailwind utilities. Colours come from ClubReady semantic tokens (var(--bg-clubready), …) so the dark mode toggle flips every sample. Interactive pieces (accordion, carousel, drawer, dropdown, modal, popover, tabs, tooltip, speed dial, …) use Flowbite’s JS. Charts & breakdowns are CSS/SVG with token colours (no ApexCharts). DataTables, WYSIWYG, QR Code, and the full datepicker calendar need separate libraries and are omitted. This page ships no custom CSS — only foundation.css plus stock Tailwind.

Accordion

Alerts

Info. Member profile synced from the front desk.

Success. Membership updated.

Danger. Payment declined — card expired.

Warning. Two sessions remain on this plan.

Avatar

ARARARARARARARAR

+10

Not in the Figma Avatar set — unchanged:

Badge

Default ClubReady Active Expiring Past due Draft 2

Buttons

Not in the Figma Button L set — unchanged:

Button group

Card

Studio card

Next class starts at 6:00pm. Surfaces use --bg-secondary on --border-base.

View schedule

Unlimited plan

Front desk check-in, billing, and class packs in one place.

Forms

Not in the Figma Input field set — unchanged:

Member name

Plan

Notes

Waiver PDF

Email receipts

Card on file

Invoice

Auto-renew

Class capacity

Forgot password?

List group

Profile
Billing
Class packs
Settings

Pagination

Progress

Class pack usage · 62%

Spinner

Table

Member	Status	Plan
Alex Rivera	Active	Unlimited
Jordan Miles	Expiring	10-class pack
Sam Chen	Past due	Trial

Tabs

Overview uses --text-body on --bg-secondary.

Timeline

Checked in · 6:00pm class
Today
Front desk scanner used --bg-clubready-soft.
Payment received
Yesterday
Unlimited plan renewal · card on file.
Member created
Last month

Toast

Membership saved.

Bottom navigation

Carousel

Chat bubble

Alex Rivera 11:46

Can I switch to the 6pm class tomorrow?

Delivered

Copy to clipboard

Drawer

Member filters

Filter by plan, status, and home studio. Surfaces use --bg-primary.

Floating label

Member email

Gallery

Indicators

Online

Jumbotron

Grow your club with clear colour

Token-driven surfaces keep every product on brand — from front desk to member app.

Get started Learn more

KBD

Press Ctrl + K to open command search.

Number & phone input

Sessions remaining

Phone number

Rating

4.0 out of 5

Skeleton

Speed dial

Stepper

Personal
2 Plan
3 Confirm

Video & device mockup

App preview

Charts & breakdowns

Pie, donut, radial, and stacked breakdowns built with Tailwind + token colours (CSS conic-gradient / SVG). No chart library.

Pie · plan mix

Sample membership breakdown

Unlimited42%
Class pack26%
Trial20%
Past due12%

Donut · check-ins

Channels this week

1,284 Check-ins

Front desk 55%
App 23%
Kiosk 22%

Radial · capacity

Studio floor tonight

72% Full

Stacked bar · revenue mix

Month to date

Memberships

48%

Packs

27%

Retail

15%

Other

10%

Token layers

Live count from this build

— Tokens

Typography

Heading uses --text-heading

Body copy uses --text-body on --bg-primary, inside a --border-base container.

Subtle text uses --text-body-subtle.

"Colour is edited in Figma. Apps consume CSS variables — never hex."

Palette tokens (--clubready-500)
Semantic tokens (--bg-clubready)
Stock Tailwind spacing

Omitted (need separate libraries): DataTables, WYSIWYG, QR Code, full Datepicker calendar. Flowbite’s ApexCharts plugin is not loaded — charts above are CSS/SVG only.

Product UI examples

Connect · Class Roster

Composable Flowbite patterns assembled into ClubReady surfaces. Colours are semantic tokens only — no custom CSS and no chart libraries.

Product example · Connect › Conversations

ClubReady Connect

Shared SMS/MMS inbox for 1:1 member & lead threads. Unread badge on Connect, staff sender ID, templates / attach / emoji in composer. Campaigns live on a sibling tab.

Location

Inbox Shared · all staff

Alex Rivera · +1 (312) 555-0148

Member · Unlimited · also in profile notes

Today

Hi — can I switch from HIIT at 5 to Yoga at 6 tonight?

11:42 AM · SMS

Yoga 6pm still has 4 spots. Want me to move you?

11:44 AM · Maya (Front desk)

Yes please 🙏 keep the late cancel on HIIT if you can.

11:45 AM · SMS

Done. You’re on Yoga · Floor A · 6:00–6:45. See you there!

11:46 AM · Maya (Front desk)

Product example · Bookings › Classes

ClubReady Class Roster

Day / Week / Month schedule with class side panel: roster checkboxes, Show / No Show / Pending, waitlist, email & text roster actions.

Bookings · Classes

Wed 26 Aug Instructor filter · All services

Yoga Flow

6:00–6:45pm · Floor A · Maya Ortiz

Show 9 Pending 5 No Show 0 Waitlist 2

Booked · 14

AR Alex Rivera Unlimited Show
JM Jordan Miles 10-class pack Pending
PL Priya Lane Unlimited Show
CN Casey Ng Trial Pending

Waitlist · 2

SC Sam Chen #1 · Trial
RF Riley Fox #2 · Unlimited

Scales

reference only · stock Tailwind v4

Listed so you can look up a value quickly. Do not redeclare these — the stock utilities already produce these numbers.

One source of truth for colour, from Figma to production.

Any stack — plain CSS

Tailwind / Flowbite

Dark mode

Plan

ClubReady palette

Backgrounds

Text

Borders

Flowbite components

Accordion

What is ClubReady?

How do apps consume these tokens?

Is spacing shipped in the CSS?

Alerts

Avatar

Badge

Breadcrumb

Buttons

Button group

Card

Studio card

Unlimited plan

Dropdown

Forms

List group

Modal

Navbar

Pagination

Progress

Spinner

Table

Tabs

Timeline

Checked in · 6:00pm class

Payment received

Member created

Toast

Tooltip

Banner

Bottom navigation

Carousel

Chat bubble

Copy to clipboard

Drawer

Member filters

Floating label

Gallery

Indicators

Jumbotron

Grow your club with clear colour

KBD

Mega menu

Number & phone input

Popover

Popover title

Rating

Sidebar

Skeleton

Speed dial

Stepper

Video & device mockup

Charts & breakdowns

Pie · plan mix

Donut · check-ins

Radial · capacity

Stacked bar · revenue mix

Token layers

Footer

Typography

Heading uses --text-heading

Product UI examples

ClubReady Connect

ClubReady Class Roster

Bookings · Classes

Scales

Border radius

Border width

Font size

Line height