PulseFit

PulseFit is the design language of the PulseFit Studio and Admin Studio apps: warm gold on a clean light surface, charcoal navigation, Montserrat headings, Rubik body text and Bebas Neue for big numbers and titles. This section rebuilds the reference sketch (https://pulsefit-sketch.vercel.app) with refined styles, then adds the same examples the other languages have: Messaging, Calendar and Projects. Demo data is fictitious.

Bootstrap 6 template (scoped)

The PulseFit Bootstrap 6.0.0-alpha.1 template follows the same pattern as Umail: CDN Bootstrap pinned with SRI, PulseFit tokens in pulsefit-theme.css, and no CSS bleed into the VitePress shell. The component gallery renders real Bootstrap markup for the Bootstrap set page.

What changed from the sketch

Area	Sketch	Refined
Gold as text	#C9A66B on white (about 2.3:1)	New ink gold #7a5a1f for text, links and outlined buttons (7:1). Fill gold is unchanged
Card hover	Lifts 8px	Lifts 2px with a deeper shadow, off with reduced motion
Shadows	One flat shadow	Two levels: sh1 resting, sh2 raised (menus, dragged cards, dialogs)
Focus	Bootstrap blue-ish default in places	One gold ring, 3px, 35% opacity, on every control
Status colors	Raw Bootstrap greens, reds	Tinted soft badges with dark text, each above 4.5:1
Numbers	Proportional digits	Tabular digits in tables, calendars and stats
Neutral text	#6c757d muted	#5f666d muted, passes AA on the gray page background
Disabled	Gray text only	Gray fill and text, never gold

Colors

Gold#C9A66B

Gold hover#b8955c

Gold ink (text)#7a5a1f

Gold light#F5E6D3

Dark#333333

Navbar#212529

Page#F5F5F5

Surface#ffffff

Border#e0e0e0

Muted (sketch)#6c757d

Muted (refined)#5f666d

Success#198754

Warning (refined)#b77900

Danger#dc3545

Info (refined)#0a7e96

Chart series: gold #C9A66B, charcoal #333, bronze #8b7355, sand #d4c4a8, graphite #4a4a4a. Calendar categories reuse the same five.

Typography

Stronger every day

Display - Bebas Neue 56 / 1.0, letter-spacing .04em. Titles and big numbers only.

---

Weekly class schedule

Heading - Montserrat 700 26 / 1.2

Pricing and memberships

Heading - Montserrat 700 18 / 1.3

Body copy is Rubik 400 at 14 to 16 pixels. It stays warm and readable on the light gray page, with a 1.45 line height and tabular digits for times and prices.

Body - Rubik 400 14 / 1.45

Buttons, badges and inputs

Book classDetailsAdd memberCancelFocusedDisabledSmall pill

GoldActiveExpiringOverdueNewStaff

Full nameMaya Torres

Email (focused)maya@example.com

Phone (error)+1 555Enter a full phone number

Navbar, cards and table

PULSEFITClassesSchedulePricingCoachesMT

Featured

Unlimited

Per month

$89

Choose plan

Starter

8 classes

Per month

$59

Choose plan

Member	Plan	Status	Renews
Maya Torres	Unlimited	Active	Oct 21
Leo Park	8 classes	Expiring	Oct 9
Ana Ruiz	Drop-in	Overdue	Sep 28

Rules

1. Gold fills carry black text. Gold as text on white uses the ink gold.
2. Bebas Neue is for titles and numbers, never for paragraphs.
3. One primary gold button per view. Secondary actions are outlined or dark.
4. Radius scale: 8px controls, 12px inner cards, 16px cards and panels, full pill for chips.
5. Raise only what moves or floats. Resting cards use the light shadow.
6. Status is a soft tint with dark text, not a saturated fill.
7. Digits are tabular wherever numbers line up.