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.
<link rel="stylesheet" href="https://design-tokens.clubready.com/production/v1.1/foundation.css">
.panel {
background: var(--bg-primary);
color: var(--text-heading);
border: 1px solid var(--border-base);
}# Fetch both files from CloudFront at build time BASE=https://design-tokens.clubready.com/production/v1.1 curl -fsSL $BASE/foundation.css -o src/tokens/foundation.css curl -fsSL $BASE/foundation-tailwind.css -o src/tokens/foundation-tailwind.css # Then import the local copies @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.
<html class="dark"> <!-- Tailwind --> <html data-theme="dark"> <!-- anything else --> Both flip the same variables. No JS required.
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/production/v1.1/, 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 /tokens/staging/. |
| Engineering — release | GitHub Release tag v1.1. Writes immutable /production/v1.1/ and updates /production/latest/. |
| Product apps | Pin https://design-tokens.clubready.com/production/v1.1/foundation.css (or vendor the Tailwind file from that URL). Do not parse JSON. Do not hardcode hex. |
| CDN prefix | Mutability |
|---|---|
/tokens/staging/ | Overwritten on every JSON push to main |
/production/v1.1/ | Immutable. Never overwrite. |
/production/latest/ | Alias of the current GitHub Release |
Design checklist before asking for a release:
--bg-primary.The brand ramp. Use these directly only when no semantic token fits — prefer the semantic layer so a rebrand stays a one-line change.
Surfaces and fills. Each chip is split: left half is light mode, right half is dark.
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.
Strokes, dividers and outlines.
Not screenshots. These components read the same custom properties your code will. If something looks wrong here, it is wrong in the tokens.
| Member | Status | Plan |
|---|---|---|
| Alex Rivera | Active | Unlimited |
| Jordan Miles | Expiring | 10-class pack |
| Sam Chen | Past due | Trial |
Body copy uses --text-body on --bg-primary, inside a --border-base container.
Listed so you can look up a value quickly. Do not redeclare these — the stock utilities already produce these numbers.