Style Guide
The foundation the whole site is built on: color, type, and the core interface pieces. Everything here is the real design system, so once it's approved the rest of the build stays on brand automatically.
The mark and the wordmark.
The logo is two pieces — a mark and a wordmark — and they are not always the same color. On light backgrounds the mark is magenta and the wordmark is black; on dark backgrounds the whole lockup is white. Every variation below is live on the page, so what you see is exactly what the site renders.
Hover
The logo in the header responds on hover, and the gesture is the same in both themes: the heart beats. On a dark header it also turns magenta, since that's the one place the brand color is missing. On a light header the heart is already magenta, so it blooms a soft glow instead. The ring and the wordmark never move — try it on the header above, then on any dark-hero page.
The palette.
Purple is the brand core, magenta is the primary accent for actions, lime is the energy pop. Grays carry everything else.
Purple
Magenta — primary accent
Lime
Gray ramp
Three typefaces.
Each face has one job. Everything on this page is rendered in the font it names, from the files the site actually serves — so if a weight looks wrong here, it is wrong on the site.
Does most of the work on the site. Open source (SIL Open Font License), free to serve, self-hosted here. It is a variable font, so every weight from 100 to 900 is available at no cost and no extra download — one 327 KB file covers the whole ramp.
The six on white are the design’s token set (--weight-regular through --weight-black). The three on gray are free and simply not used yet.
AE Type (Michael Jarboe). Licensed and installed 3 Aug 2026 — Font Bros order #FB306775, held in Bloom’s name, web tier up to 10,000 pageviews per month. It appears only in the site chrome.
600
Semibold
An Athlete in EVERYbody.
Licensed
This is the only Acronym weight the site owns. Regular, Bold and Black were removed — they were never in the design, and the licence does not cover them. Asking for another weight in CSS will silently render this same cut, so there is nothing to accidentally break; but a design that genuinely needs a second weight needs a second purchase first.
Måns Grebäck. The oversized headline on the home and page heroes, and nowhere else. All caps by design — the face has no lowercase to reach. Licensed for web use and installed 3 Aug 2026.
400
Regular
An Athlete in EVERYbody.
Licensed
One weight is all the design uses, and all the site carries.
Where this leaves us: the design as drawn needs exactly what we now have — one cut of Acronym, one of Antry Sans, and any Inter weight we like. Every face is licensed and installed, and no further purchase is required to build or launch the site.
Type scale.
The scale is fluid: sizes grow with the screen, so headlines feel right on a phone and a desktop without separate settings. Everything below is Inter, per the split above.
An Athlete in EVERYbody.
An Athlete in EVERYbody.
An Athlete in EVERYbody.
An Athlete in EVERYbody.
This is lead copy. Bloom brings adaptive, goal-driven fitness to adults with intellectual and developmental disabilities, in person, live, and on demand.
And this is body copy at the default size. Bloom is an adaptive fitness community that leads with heart, and fitness follows. Set for comfortable reading over longer passages, in the brand's neutral gray.
Hover, the house way.
Hover these. The card fills with purple and the photo pushes in slightly — nothing lifts, nothing casts a shadow. This is the pattern for every interactive card on the site, not just these.
At rest
Light gray body, black heading. Every card looks identical until you touch it.
On hover
Body goes purple, heading to white, photo scales to 1.06. Approach is slower than the return.
Any card
No card is a permanent exception. A card that is always purple is a bug, not a feature.
The rule
Slower on the way in, quicker on the way out. The approach is 0.6s on an expo ease; the return is 0.4s. That asymmetry is the whole feel — a card that eases in and out at the same speed reads as mechanical. Same pattern as Within Reach and Lincoln Family Service, ported by feel rather than by copying their code.
Colour and scale only. The body fills to purple, the photo scales to 1.06. Nothing translates, nothing casts a shadow. A shadow without movement reads as a card that meant to lift and failed.
Hover is a state, never a variant. If a comp shows one card styled differently, that is the designer showing the hover state, not asking for a featured card. Check before building a permanent treatment.
Reveal animation and hover must not share a transition. .stagger sets its own transition and a per-child transition-delay on the card itself, which silently becomes the hover timing — the sixth card in a grid ends up waiting 400ms before it responds. The reset lives in css/ds/fixes.css.