Style Guide
Color Palette
Three-tone color story: Green (authority & trust) + Warm amber (craft & warmth) + Cream (softness & calm).
Primary
Accent & Highlight
Neutrals
Gradients
$warm-cream) alternates with white for section rhythm.
Typography
Two-font system: Lora (serif) for headings and quotes, DM Sans (sans-serif) for body and UI.
Fonts
| Font | Role | Weights Used |
|---|---|---|
| Lora Variable | Headings, quotes, display | 400 italic, 700, 700 italic |
| DM Sans Variable | Body, buttons, labels, UI | 400, 500, 600, 700 |
Heading Scale
Learn Massage That Actually Works
Why Raynor Graduates Get Different Results
Tension Bands, Not Just Muscles
Subheading Level Four
Subheading Level Five
Subheading Level Six
Section Typography Classes
Who This Is For
Section Heading Centered
Other schools teach techniques. We teach you to read the body.
Body Text
Brandon Raynor has refined this system over three decades, training thousands of graduates worldwide. Refined over 30 years, not thrown together from a weekend course. The method works with tension bands rather than isolated muscle groups.
No experience needed. Learn a skill people pay well for.
Bold text at weight 600. Italic text. Bold italic.
- Unordered list item one
- Unordered list item two
- Unordered list item three
- Ordered list item one
- Ordered list item two
- Ordered list item three
The tension band concept was a revelation. I finally understand why some people carry pain for years.
Spacing Scale
All spacing uses this token scale. Section padding scales responsively. Inner gaps follow 8px base increments.
Token Scale
Max Widths
| Token | Value | Usage |
|---|---|---|
$max-page | 1920px | Hero content area |
$max-content | 1200px | Design guide reference width |
.container (xl) | 1140px | Site content max-width |
$max-card-row | 1092px | Footer-width cards |
$max-narrow | 900px | 2-column grids |
$max-text | 720px | Long-form text, FAQ |
$max-quote | 600px | Pathway proof block |
$max-cta-text | 560px | Centered text in CTA blocks |
Radii
Shadows
Buttons
All buttons: 48px height, 8px radius, DM Sans 600, 14px uppercase, 0.02em letter-spacing. :active scales to 0.97 for press feedback.
Light Background
Dark Background
Sizes
Color Schemes
Blocks adapt via the data-scheme attribute. Set it on the section wrapper and all text, cards, and borders re-color automatically.
Scheme Tokens
| Token | White | Cream | Dark |
|---|---|---|---|
--scheme-bg | #FFFFFF | #F7F4EF | #1A3329 |
--scheme-heading | #1A3329 | #1A3329 | #F5F5F5 |
--scheme-body | #6B6258 | #6B6258 | rgba(245,245,245,0.8) |
--scheme-eyebrow | #2C5C4A | #2C5C4A | #FFE5A7 |
--scheme-accent | #0E9585 | #0E9585 | #FFE5A7 |
--scheme-card-bg | #F7F4EF | #FFFFFF | rgba(255,255,255,0.06) |
--scheme-border | #EDE8E0 | #EDE8E0 | rgba(255,255,255,0.12) |
Live Demo
Eyebrow Label
Heading on White
Body text adapts. Cards contrast with background.
Eyebrow Label
Heading on Cream
Same markup, different background.
Eyebrow Label
Heading on Dark
All colors invert. Eyebrow becomes gold.
Cards
Cards share: 12px radius, subtle shadow, hover lift (-4px), :active scale(0.98). Hover gated behind @media (hover: hover). Background and border adapt via scheme tokens.
Card Base Pattern
Shared foundation for all card variants. Blocks extend %card-base and add their own content structure.
White scheme
Hover to see lift + shadow transition
Cream scheme
Hover to see lift + shadow transition
Dark scheme
Hover to see lift + shadow transition
Forms
48px input height matches buttons. Scheme-aware: border, background, focus ring, and placeholder adapt to white/cream/dark contexts.
White Scheme
Cream Scheme
Dark Scheme
Components
Reusable UI elements used across the site.
Section Anatomy
Eyebrow Label
Section Heading Goes Here
Supporting text that elaborates on the heading — kept to 1-2 lines, centered.
Modal
Modal Title
Modal content goes here. Used for info pack forms, terms, etc.
FAQ Accordion
Upon completion, you receive a nationally recognised certificate. Our courses are accredited by IICT, MAA, and World Massage Federation.
Design Principles
Rules that govern how this design system is applied.
Background Rhythm
Transitions & Motion
| Token | Value | Usage |
|---|---|---|
$transition-fast | 0.15s ease-out-strong | Buttons, close buttons, links |
$transition-base | 0.2s ease-out-strong | Cards, inputs, general hover |
$transition-slow | 0.3s ease-out-strong | Drawers, panels |
$ease-out-strong | cubic-bezier(0.23,1,0.32,1) | Default for all UI transitions |
$ease-drawer | cubic-bezier(0.32,0.72,0,1) | iOS-style drawer/slide |
@media (hover: hover) and (pointer: fine). Buttons have :active { transform: scale(0.97) }. Cards have :active { transform: scale(0.98) }. Never use ease-in for UI. Never use transition: all. Drawers use asymmetric timing: 300ms open, 200ms close.
Spacing Rules
Intra-Block Spacing (BB Modules)
.section-eyebrow: 8px bottom margin.
.section-heading: 24px bottom margin.
These defaults are inherited by all .raynor-module blocks. Module CSS only overrides when intentionally different.
Accessibility
prefers-reduced-motion: Slide animations fall back to opacity fade. Touch devices don't get hover transforms. All interactive elements must have visible focus states.
