Yogger Design System

Overview

Yogger presents a wellness studio identity that feels simultaneously grounded and aspirational—warm terracotta-coral washes over the entire viewport, creating an immersive color field that feels more like stepping into a sanctuary than loading a webpage. The dominant visual gesture is saturation itself: {colors.primary} (#e56861) floods the hero band, turning the browser chrome into atmosphere. Against this warm bath, photography of practitioners in serene poses grounds the abstract warmth in human presence, while oversized Prata serif headlines float with editorial grace.

The brand's voltage lives entirely in that coral surface treatment. Unlike systems that reserve brand color for CTAs alone, Yogger commits {colors.primary} to the hero background—a bold choice that signals confidence and warmth. Text reverses to {colors.on-primary} against this field, creating high-contrast legibility without resorting to pure black-on-color brutality. Below the fold, the system retreats to a neutral {colors.canvas} base, letting photography and typography carry visual interest while the brand color reappears strategically in buttons, links, and accent elements.

The single typographic move that defines this system is the Prata/Libre Franklin pairing: Prata, a refined serif with moderate contrast and slightly condensed proportions, handles all display and headline roles at weight 500 (medium)—never bold, never delicate. Libre Franklin, a geometric-humanist sans-serif with excellent readability, manages everything else at weight 400. This split creates instant hierarchy through font family alone; size differences reinforce it, but the serif/sans distinction is the primary signal. The result reads as both timeless (serif editorial voice) and contemporary (clean sans interface).

Shape language leans toward restraint: most components use {rounded.DEFAULT} (4px) or {rounded.md} (5px)—barely perceptible softening that prevents harshness without feeling playful. Buttons in the hero notably use {rounded.none}, their sharp corners echoing the architectural confidence of the all-caps button copy. Where roundness appears, it's decisive: {rounded.pill} (999px) for avatar circles, {rounded.circle} (50%) for decorative elements.

Sub-systems observed include the hero dialect (saturated background, reversed text, ghost buttons, carousel navigation) and what appears to be a content band dialect (white or warm-gray surfaces, dark text, shadowed cards). A third floating utility rail (cart, email buttons fixed to viewport edge) provides persistent e-commerce access without disrupting the editorial flow.

Key Characteristics:

• Hero bands saturate the full viewport width in {colors.primary} with {spacing.hero-vertical} (135px) vertical padding
• All headlines use {typography.display-lg} or {typography.title-md} in Prata at weight 500—never heavier
• Body copy runs in {typography.body-md} (Libre Franklin, 16px/400) with an unusually generous line-height: 2 (32px on 16px)
• Primary CTAs render as {component.button-primary-ghost} with transparent backgrounds and {colors.border-subtle} borders
• Cards use {rounded.lg} (10% radius) creating distinctly squarish-with-softening geometry
• Floating action buttons ({component.floating-cart-btn}, {component.floating-email-btn}) are 44×44px white squares with subtle shadows
• The {colors.surface-warm} (#f9f8f7) off-white provides gentle differentiation from pure {colors.canvas} for nested cards
• Nav links sit in {typography.nav-link} with comfortable {spacing.md} (15px) padding, no underlines, in {colors.on-dark}

Colors

Brand & Accent

• Primary ({colors.primary} — #e56861): The signature terracotta-coral that saturates the hero band, powers CTA hover states, and serves as the default link color. Warm, inviting, distinctly wellness-adjacent without veering into spa-pink cliché.
• Primary Hover ({colors.primary-hover} — #ea6d66): Slightly lifted brightness for interactive feedback on links and buttons.
• Primary Active ({colors.primary-active} — #d45a53): Darkened press state providing tactile confirmation.
• Primary Light ({colors.primary-light} — #f28e89): Pale coral for decorative accents, badges, or subtle highlights where full primary would overwhelm.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline for content sections below the hero. Clean, neutral, maximum readability.
• Surface Soft ({colors.surface-soft} — #000000): Deep black reserved for footer bands and overlay treatments. Creates maximum inversion when paired with {colors.on-dark}.
• Surface Warm ({colors.surface-warm} — #f9f8f7): Off-white with a faint warm cast (nearly imperceptible peach tint). Used for card backgrounds needing slight elevation from canvas without introducing cool grays.
• Surface Elevated ({colors.surface-elevated} — #ffffff): Functionally identical to canvas in value; semantically distinct for cards that sit above the base plane, often carrying {extensions.shadows.sm}.

Text / Ink

• Ink ({colors.ink} — #8b8c90): Medium gray serving as the workhorse text color for body copy, captions, and secondary information. Soft enough to avoid harshness, dark enough for comfortable reading.
• Body ({colors.body} — #201f25): Near-black used for headings, important labels, and high-emphasis text. Provides strong hierarchy when paired with {colors.ink} body text.
• Muted ({colors.muted} — #8f8f8f): Neutral gray slightly darker than ink, used for tertiary information and metadata.
• Muted Dark ({colors.muted-dark} — #555555): Mid-tone gray for form labels, placeholder adjacent text, or subdued navigation states.
• Muted Darker ({colors.muted-darker} — #232323): Charcoal approaching black, used for very dark text on light backgrounds requiring less absolute weight than {colors.body}.
• On Primary ({colors.on-primary} — #8b8c90): The text color rendered atop {colors.primary} fields. Notably this is not white—the design uses medium gray against coral, creating a sophisticated muted reversal rather than stark contrast.
• On Dark ({colors.on-dark} — #ffffff): Pure white for text against dark or saturated backgrounds (hero, footer, overlays).
• On Surface ({colors.on-surface} — #201f25): Alias for {colors.body}, used when referencing text sitting on standard light surfaces.
• Input Placeholder ({colors.input-placeholder} — #b6b6b8): Light gray specifically for form field placeholder text, meeting WCAG placeholder contrast guidance.

Hairlines & Borders

• Hairline ({colors.hairline} — #ededed): Very light gray for subtle dividers between content sections or within cards.
• Hairline Strong ({colors.hairline-strong} — #e6e6e6): Slightly more visible divider gray for section separators needing marginally more presence.
• Border Subtle ({colors.border-subtle} — rgba(255, 255, 255, 0.32)): Semi-transparent white used exclusively for ghost button outlines against saturated backgrounds. The opacity ensures the border reads as etched-into the color field rather than painted-on-top.

Semantic

• Success ({colors.success} — #83b457): Muted leaf green for confirmation states, availability indicators, or positive messaging.
• Link ({colors.link} — #e56861): Inherits primary color for inline links, maintaining brand consistency in hypertext.
• Link Hover ({colors.link-hover} — #d45a53): Darkened active state matching {colors.primary-active} for cohesive interaction feedback.

Typography

Font Family

Yogger employs a deliberate two-face typographic system. Prata, a serif typeface designed by Indian Type Foundry, carries all display, headline, and title roles. Its character—moderately high contrast, slightly condensed width, and ball-terminal touches—evokes editorial magazine aesthetics and classical wellness traditions without feeling dated. Prata appears at weight 500 across all sizes, never lighter, never bolder; the system trusts its intrinsic presence rather than manipulating weight for emphasis.

Libre Franklin, an open-source humanist sans from Type Network, manages everything else: body copy, navigation, UI labels, buttons, captions, and metadata. Its geometric skeleton with subtle humanist modulation delivers exceptional screen readability at small sizes. Libre Franklin runs primarily at weight 400 (regular), with weight 500 reserved for sub-headings ({typography.title-sm}) and button text ({typography.button}). This creates a clear internal hierarchy within the sans face: regular for passive/reading content, medium for interactive/emphasis content.

Both fonts load via Google Fonts CDN with system fallbacks. The font stack declarations explicitly include "Libre Franklin", sans-serif and Prata, sans-serif, ensuring graceful degradation to system defaults if CDN delivery fails.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 500 | 1.15 (-0.01em) | -0.01em | Oversized hero statements (inferred for larger breakpoints) | | {typography.display-lg} | 54px | 500 | 1.11 | 0 | Hero headline, major section openers | | {typography.title-md} | 36px | 500 | 1.2 | 0 | Section titles, feature headings | | {typography.title-sm} | 18px | 500 | 1.5 | 0 | Card titles, sub-section headings, nav logo | | {typography.eyebrow} | 14px | 400 | 1 | 0.12em | Category labels ("NATURAL HEALTH YOGA"), meta tags | | {typography.body-md} | 16px | 400 | 2.0 | 0 | Paragraph text, long-form content | | {typography.body-sm} | 14px | 400 | 1.5 | 0 | Secondary text, descriptions, legal | | {typography.caption} | 13px | 400 | 1.38 | 0 | Timestamps, fine print, bylines | | {typography.button} | 14px | 500 | 1 | 0.08em | CTA labels (always uppercase via text-transform) | | {typography.nav-link} | 16px | 400 | 1.5 | 0 | Top navigation menu items |

Principles

The typography system's defining characteristic is its refusal to use weight as a primary hierarchy tool. Both faces operate within a narrow weight band: Prata lives exclusively at 500, Libre Franklin spans only 400–500. This means size, case, letter-spacing, and context carry the burden of establishing reading order. When you see a 54px Prata headline above 16px Libre Franklin body text, the size difference (3.4x) and font-family contrast do the work—no bolding required.

Line-height reveals another signature choice: {typography.body-md} sets line-height: 2.0 (32px on 16px type), nearly double the conventional 1.5 ratio. This airy leading gives body copy a relaxed, meditative quality perfectly aligned with the yoga/wellness subject matter. It also ensures that even dense paragraphs breathe, preventing the cramped feeling that can undermine tranquility-themed designs.

Uppercase appears selectively: {typography.button} always renders uppercase (via CSS text-transform: uppercase) combined with letter-spacing: 0.08em, giving CTAs a refined, spaced-out caps-lock feel that avoids aggressive shouting. Eyebrow labels ({typography.eyebrow}) push spacing further to 0.12em, creating elegant category tags that read almost like letterhead mastheads.

Letter-spacing otherwise remains at normal (0) for all other roles, letting the fonts' native spacing provide optimal readability. The sole exception is {typography.display-xl}'s -0.01em tracking, tightening massive headlines slightly to maintain visual cohesion across multi-line displays.

Note on Font Substitutes

Prata is available on Google Fonts and requires no substitution for web implementations. For environments where Google Fonts is inaccessible (某些地区, offline builds, or strict privacy contexts), the closest visual substitute is Crimson Pro (also Google Fonts) at weight 500—it shares similar serif structure, moderate contrast, and editorial character, though Crimson Pro is slightly wider. For Libre Franklin, the nearest equivalent is Inter (weight 400–500) or IBM Plex Sans, both offering similar geometric-humanist proportions and excellent screen rendering. Define these as CSS custom properties (--font-head: 'Prata', 'Crimson Pro', serif; --font-body: 'Libre Franklin', 'Inter', sans-serif;) for easy swapping.

Layout

Spacing System

• Base unit: 1px (system uses explicit pixel values rather than rem-based scales).
• Tokens: {spacing.xxs} (8px) for icon gaps, {spacing.xs} (10px) for compact internals, {spacing.sm} (13px) for tight component padding, {spacing.md} (15px) the most frequent value for nav/link padding and general margins, {spacing.lg} (18px) for card internals, {spacing.xl} (30px) for section gaps, {spacing.xxl} (35px) for larger vertical rhythm, {spacing.section} (40px) for horizontal container padding, {spacing.section-lg} (45px) and {spacing.section-xl} (50px) for major section breaks, {spacing.hero-vertical} (135px) exclusive to hero band top/bottom padding.
• Section padding (vertical): {spacing.hero-vertical} — used on the hero band to create immersive full-viewport presence; {spacing.section-lg} through {spacing.section-xl} for content sections below fold.
• Card internal padding: {spacing.xl} (30px) per the {component.card-basic} specification.
• Gutters: Container horizontal padding is {spacing.section} (40px); column gaps within Elementor grids default to {spacing.lg} (18px).

Grid & Container

Max content width is 1440px (extracted from Elementor container configuration). The layout operates at this wide desktop breakpoint with generous breathing room. Content within sections uses Elementor's flex/grid column system with configurable gap values; the primary hero appears to use an asymmetric split with roughly 40% text column / 60% image column, though exact ratios depend on viewport.

Editorial density favors openness: the hero contains only three text elements (eyebrow, headline, CTA) before photography claims visual dominance. This is not a marketplace grid—it's a narrative layout trusting single-focus composition over information density. Subsequent sections likely alternate between single-column feature presentations, two-column text/image splits, and potential three-column card grids for course/class listings.

Whitespace Philosophy

Yogger embraces whitespace as a structural element, not absence. The 135px hero vertical padding, double-spaced body copy line-heights, and 40px+ section gaps collectively create a contemplative reading experience. Information density remains low-per-fold; each viewport frame presents one primary message supported by one primary image. This aligns with wellness UX patterns where cognitive load reduction mirrors physical relaxation.

Header Architecture

[LOGO]  [Home] [About] [Courses] [Trainer] [Blog] [Pages ▾] [ContactUs]     [FB][IG][TW]
         ←——————— navigation (flex, ~907px max) ———————→                social icons
         ←———————————————— 1440px container —————————————————————————————→

Navigation uses flush-left logo placement, centered menu items with consistent {spacing.md} padding per item, and flush-right social utilities. The header background is fully transparent, allowing hero color to show through. No visible bottom border or shadow separates nav from content—intentional bleeding reinforces immersion.

Hero Section

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  [◄]                                    [►]                 │
│                                                             │
│                    NATURAL HEALTH YOGA                      │
│                                                             │
│              Practice yoga release                          │
│              your toxins out                                │
│                                                             │
│              ┌─────────────────┐                            │
│              │  JOIN CLASSES   │                            │
│              └─────────────────┘                            │
│                                                             │
│          [photography: woman in lotus pose]                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘
   ↑ 135px padding top/bottom • primary bg • full bleed img

The hero uses full-viewport-width {colors.primary} background with the model photograph positioned left-of-center (or overlapping the text column depending on responsive state). Carousel arrows [◄] [►] sit at vertical center, far left/right edges. Eyebrow label sits above headline with natural spacing. CTA button uses ghost treatment with semi-transparent white border.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | None | Base surfaces, hero band background, footer background | | 1 (Hairline) | {colors.hairline} 1px solid | Card inner borders, section dividers | | 2 (Soft drop) | {extensions.shadows.sm} — rgba(0,0,0,0.06) 1px 1px 10px 1px | Floating cart/email buttons, elevated cards | | 3 (Medium drop) | {extensions.shadows.md} — rgba(0,0,0,0.2) 0px 0px 10px 0px | Dropdown menus, modals, tooltips | | 4 (Strong drop) | {extensions.shadows.lg} — rgba(0,0,0,0.5) 0px 0px 10px 0px | Heavy modals, overlay panels |

The depth philosophy is restrained and purposeful. Yogger avoids layered material-design stacks in favor of flat color-block composition with selective shadow application. The hero has zero depth—it's a pure color field. Cards gain minimal {extensions.shadows.sm} elevation just enough to lift from the background. Floating utility buttons (cart, email) use the same soft shadow, making them appear to hover slightly above the page content. Only interactive overlays (dropdowns, modals) warrant stronger depth signals.

Color does more work than shadow here. The transition from {colors.primary} hero to {colors.canvas} content band creates a "depth step" through hue/value shift alone. Similarly, {colors.surface-warm} cards differentiate themselves from the base canvas through near-imperceptible warmth, not elevation. This is a design confident in its color story, using shadows sparingly for functional separation only.

Decorative Depth

Beyond functional elevation, the hero incorporates photographic depth through the practitioner image—this is not flat illustration but dimensional photography with natural lighting and depth-of-field. The image bleeds to the viewport edge (or nearly so), treating photography as environmental texture rather than contained object. Faint pattern overlays (visible in the screenshot's background texture) may add subtle mandala-inspired watermarking, though this could be compression artifacting.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 3px | Minimal softening for small elements | | {rounded.DEFAULT} | 4px | Standard radius for inputs, buttons (non-hero), floating actions | | {rounded.md} | 5px | Slightly softer alternative for cards needing subtle rounding | | {rounded.lg} | 10% | Percentage-based radius for large cards—creates squarish-with-rounded-corners feel that scales with element size | | {rounded.pill} | 999px | Fully rounded ends for pills, avatars, tag elements | | {rounded.circle} | 50% | Perfect circles for profile images, icon containers | | {rounded.none} | 0px | Sharp corners for hero CTAs, architectural emphasis |

The shape vocabulary is intentionally limited. Most interactive elements cluster around 3–5px—present enough to prevent visual harshness, restrained enough to avoid "app-icon" playfulness. The sharp-cornered hero button ({rounded.none}) acts as intentional exception: its rectangular rigidity contrasts with the organic photography and warm curves elsewhere, adding graphic punctuation. Percentage-based {rounded.lg} (10%) adapts to card dimensions, ensuring large feature cards feel proportionally softened without becoming blob-like.

Photography Geometry

Hero imagery uses full-bleed or near-full-bleed placement with no visible border radius—the photograph exists as environmental layer, not contained object. Aspect ratio appears approximately 3:4 or 4:5 (portrait orientation emphasizing the seated figure). No visible crop masking, filters, or duotone treatment; the photograph renders in natural color, allowing skin tones and clothing (peach sports bra, charcoal leggings) to harmonize with the {colors.primary} backdrop. At smaller viewports, the image likely resizes maintaining aspect ratio with possible position shifts to keep the figure's face central.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-ghost-hover}, {component.email-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary-ghost} — The primary call-to-action appearing in the hero section. Transparent background with a {colors.border-subtle} (32% opacity white) 2px border creating an etched-glass effect against the {colors.primary} hero field. Text renders in {colors.on-dark} (white) using {typography.button} (14px/500, uppercase, 0.08em tracking). Padding is generous at 18px 30px. Notably uses {rounded.none} (0px radius) for architectural sharpness that contrasts with the organic photography. State variant: {component.button-primary-ghost-hover} fills background with {colors.surface-soft} (black).

{component.button-outline-white} — Variant ghost button sharing identical specs with {component.button-primary-ghost}; separated in taxonomy for potential contextual styling differences (e.g., appearing outside hero on white surfaces). Same border treatment, same dimensions, same type.

{component.floating-cart-btn} — Fixed-position shopping cart button appearing at viewport right edge. White square background ({colors.canvas}), 44×44px size per {rounded.DEFAULT} (4px) rounding, containing Font Awesome shopping-cart icon in {colors.ink}. Carries {extensions.shadows.sm} for elevation above underlying content. Paired with {component.floating-email-btn} in a vertical stack.

{component.floating-email-btn} — Fixed-position email inquiry button, visually identical sibling to cart button (white 44×44px square, 4px radius, soft shadow). Contains envelope icon. These two form a persistent utility rail accessible regardless of scroll position.

Cards & Containers

{component.card-basic} — Standard content card with {colors.surface-elevated} (white) background, {colors.body} text in {typography.body-md}, and {rounded.lg} (10%) percentage radius creating adaptive corner softness. Internal padding of {spacing.xl} (30px) gives content breathing room. Likely used for class previews, instructor bios, or feature descriptions.

{component.card-warm} — Variant card using {colors.surface-warm} (#f9f8f7) off-white instead of pure white. Same typography, padding, and radius as {component.card-basic}. The warm tint differentiates this card when placed alongside basic cards or on white backgrounds, creating subtle visual layering without shadow reliance.

{component.hero-band} — Full-width section container filling the viewport with {colors.primary} background. Text content uses {colors.on-primary}. Vertical padding of {spacing.hero-vertical} (135px) creates dramatic immersive presence. Contains {component.hero-eyebrow}, {component.hero-headline}, and {component.button-primary-ghost} as children, plus overlaid/adjacent photography.

Inputs & Forms

{component.email-input} — Email subscription or contact input field. White ({colors.canvas}) background with {colors.input-placeholder} (#b6b6b8) placeholder text in {typography.body-sm}. Asymmetric radius of 4px 0px 0px 4px ({rounded.DEFAULT} on left, sharp on right) indicates it likely abuts a submit button on its right edge. Compact height of 40px with 6px 16px internal padding. State variants for focus would add border highlight or shadow ring per implementation convention.

Navigation

{component.top-nav} — Transparent header bar spanning full width with 80px inferred height. Background is transparent allowing hero color to show through. Navigation links render in {colors.on-dark} (white) using {typography.nav-link} (16px/400). Logo sits flush-left, menu centered or distributed, social icons flush-right.

{component.nav-logo} — "YOGGER" wordmark with accompanying circular icon (yoga pose glyph). Renders in {colors.on-dark} at {typography.title-sm} (18px/500) weight, establishing brand presence without overwhelming the nav.

{component.nav-link} — Individual navigation menu item (Home, About, Courses, etc.). Transparent background, {colors.on-dark} text, {spacing.md} (15px) horizontal padding providing click target comfort. No underlines in default state; hover likely adds underline or color shift to {colors.primary-light}.

{component.nav-social-icon} — Social media icon (Facebook, Instagram, Twitter) in header right area. 18px icon size, {colors.on-dark} color, transparent background. Uses Font Awesome brands font.

{component.carousel-arrow} — Left/right navigation chevron for hero image carousel. Positioned at vertical center of hero band, near edges. {colors.on-dark} (white) color, 24px size, transparent background. Allows users to cycle through multiple hero images/slides if present.

Signature Components

{component.hero-eyebrow} — Small uppercase label ("NATURAL HEALTH YOGA") positioned above main headline. Uses {typography.eyebrow} (14px/400, 0.12em tracking) in {colors.body} (dark text, notable because it doesn't reverse to white despite sitting on hero—likely positioned over the photograph area or receiving its own contrast backing).

{component.hero-headline} — The primary marketing statement ("Practice yoga release your toxins out"). Renders in {typography.display-lg} (Prata, 54px/500) with {colors.on-primary} text. Multi-line display with tight leading (1.11). This is the typographic centerpiece of the entire page—oversized, serif, commanding attention through scale and elegance.

{component.section-divider} — Horizontal rule separating major content sections. 1px height, {colors.hairline-strong} (#e6e6e6) color, full container width. Provides visual rest between distinct content bands without heavy-handed borders.

{component.footer-band} — Page footer container with {colors.surface-soft} (black) background. Text in {colors.muted} gray using {typography.body-sm}. Generous padding of {spacing.section-lg} (45px) vertical and {spacing.section} (40px) horizontal. Inverts the page's light-mode default for grounding closure.

{component.footer-heading} — Column heading within footer (e.g., "Quick Links", "Contact"). White ({colors.on-dark}) text in {typography.title-sm} (18px/500), providing hierarchy against the muted body text below.

Do's and Don'ts

Do

• Use {colors.primary} as the hero background fill for landing pages—this immersive color-field treatment is the brand's signature opening gesture.
• Set body copy line-height to 2.0 (or 32px for 16px type) to match the system's airy, contemplative rhythm—standard 1.5 will feel cramped.
• Apply {typography.button} with text-transform: uppercase and letter-spacing: 0.08em to all CTA labels—this spaced-capitals treatment defines the button voice.
• Reserve Prata exclusively for display roles at weight 500; never apply it to body text, captions, or UI elements, and never exceed weight 500.
• Use {rounded.lg} (10% percentage-based) for large cards so corner softness scales proportionally with card dimensions.
• Pair {component.card-warm} (off-white background) with {component.card-basic} (white) in the same section to create subtle layering without shadow complexity.
• Render hero carousel arrows at 24px in {colors.on-dark} against the saturated background—smaller sizing would lose discoverability.
• Maintain {spacing.hero-vertical} (135px) vertical padding on hero bands to achieve the immersive, sanctuary-like entrance experience.
• Use {colors.border-subtle} (32% opacity white) for any ghost button borders on {colors.primary} backgrounds—solid white borders would read as too harsh.
• Place {component.floating-cart-btn} and {component.floating-email-btn} at 44×44px with {extensions.shadows.sm} to ensure they feel elevated yet unobtrusive.

Don't

• Don't apply {typography.display-lg} at weights above 500—Prata's medium weight is deliberately chosen; bold would destroy its editorial refinement.
• Don't substitute {colors.on-primary} (#8b8c90) with pure white on hero text—the medium-gray-on-coral combination is intentional and sophisticated; white would create jarring high contrast.
• Don't add border-radius to hero CTA buttons—the {rounded.none} (sharp corners) provide intentional geometric counterpoint to the organic photography.
• Don't compress body copy line-height below 2.0—the double-spaced setting is essential to the wellness/meditation mood.
• Don't use {colors.primary} for large text blocks on white backgrounds—the contrast ratio is insufficient for accessibility; reserve it for headings on white (using {colors.body} instead) or backgrounds only.
• Don't mix Prata and Libre Franklin within the same hierarchical level (e.g., don't make a subhead Prata while the headline is also Prata at smaller size—use Libre Franklin for sub-levels).
• Don't apply shadows to hero band or footer band—these surfaces derive depth from color value alone, not layering.
• Don't expand the radius vocabulary beyond the seven defined tokens—new shapes would dilute the system's restrained geometric language.
• Don't use {colors.ink} (#8b8c90) for primary body text on white if the audience includes older adults—consider {colors.body} (#201f25) instead for critical reading content; {colors.ink} is appropriate for secondary text.
• Don't implement dropdown menus without {extensions.shadows.md} elevation—they'll appear glued to the triggering element without depth separation.

Motion & Animation

Transition Tokens

--transition-ui-all: all ease 300ms;
--transition-button: background 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
--transition-button-transform: background 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
--transition-button-long: background 0.3s ease, border 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;
--transition-generic-400ms: 0.4s ease;
--transition-generic-300ms: 0.3s ease;
--transition-transform-only: transform ease 300ms;
--transition-decorative: border 6s ease, background 6s ease, transform 6s ease;

Keyframe Animations

• eicon-spin — Continuous 360° rotation for loading spinner icon (Elementor framework).
• swiper-preloader-spin — Preloader animation for Swiper carousel initialization.
• fa-spin — Font Awesome icon spinning animation for loading/throbber states.
• hide-scroll — Utility for hiding scrollbar while preserving scroll functionality.
• a — Generic/unnamed keyframe (likely custom template animation, purpose unclear without execution context).

Interaction Patterns

• Ghost button fill: On hover/active, {component.button-primary-ghost} transitions from transparent to {colors.surface-soft} (black fill) over 300ms with easing, creating a dramatic reveal against the coral background.
• Carousel slide transitions: Hero image carousel uses Swiper.js with slide animations (likely fade or translate transforms) triggered by {component.carousel-arrow} clicks or auto-play.
• Floating button lift: Cart and email floating buttons likely gain subtle translateY(-2px) lift on hover with {extensions.shadows.md} deepening, enhancing affordance.
• Nav link underline reveal: Menu items probably animate a bottom-border or text-underline from 0→100% width on hover, using {transition-transform-only} timing.
• Decorative slow transitions: The 6-second duration on --transition-decorative suggests very gradual background morphs or border animations on ornamental elements—possibly gradient position shifts or SVG stroke draws.
• Icon spinners: Loading states trigger continuous rotation via fa-spin or eicon-spin for async operations (form submission, image lazy-load).
• Scroll-triggered fades: While not explicitly in extracted CSS, the template kit pattern suggests scroll-into-view fade-up animations for content sections below the hero (Elementor motion effects parent class present on containers).

Imagery Style

• Photography-first: The hero relies on professional lifestyle photography featuring real practitioners in authentic yoga poses—not illustrations, 3D renders, or stock composites.
• Natural lighting: The model image uses soft, diffused natural lighting (studio window light or golden-hour quality) avoiding harsh shadows or flash flatness.
• Color harmony: Subject clothing (peach/coral sports bra, charcoal leggings) was selected or styled to complement {colors.primary}—the bra nearly matches the background, creating tonal cohesion.
• Portrait orientation: Hero image uses vertical/portrait framing emphasizing the full seated figure, creating human-scale intimacy within the expansive color field.
• Full-bleed treatment: Photography bleeds to viewport edges (or near-edge with minimal offset), functioning as environmental texture rather than framed object.
• Neutral-to-warm palette: Images favor skin tones and earth tones (grays, warm neutrals) avoiding clashing hues against the saturated coral background.
• Human presence: The model's eyes-closed, serene expression communicates the emotional benefit (peace, release) rather than demonstrating technical form—marketing through feeling, not instruction.
• Potential overlay patterns: Faint repeating geometric or mandala-like texture may exist behind the photography, adding cultural/spiritual resonance without distracting from the figure.
• Lifestyle over clinical: Photography style aligns with wellness/lifestyle editorial (Goop, Yoga Journal aesthetic) rather than medical/clinical fitness imagery.

Icon System

• Library: Font Awesome 5 (Free + Brands subsets). Detected usage includes solid icons (shopping cart, envelope, carousel arrows) and brand icons (Facebook, Instagram, Twitter).
• Specific icons observed:
  • fa-shopping-cart (floating cart button)
  • fa-envelope (floating email button)
  • fab fa-facebook-f (nav social)
  • fab fa-instagram (nav social)
  • fab fa-twitter (nav social)
  • Chevron/arrows (carousel navigation, likely fa-chevron-left/fa-chevron-right or Elementor's eicons)
  • Circular yoga-pose mark (logo icon, possibly custom SVG or FA icon)
• Treatment: Stroke-less fill icons (Font Awesome solid style). Color set to currentColor inheriting from parent text color (white on hero/footer, dark on canvas). Size varies by context: 18px for nav social icons, ~20px for floating buttons, 24px for carousel arrows.
• Alignment: Icons center vertically within their containers, horizontally centered in square buttons. Nav social icons align with menu text baseline.

Recommended Frontend Stack

- Framework:      WordPress + Elementor (Page Builder)
- Styling:        Elementor inline styles + theme stylesheet (CSS custom properties recommended for token implementation)
- Fonts:          Google Fonts: Prata (400, 500, 600, 700) + Libre Franklin (100-900)
- Animation:      Elementor built-in motion effects + Swiper.js (carousel) + CSS transitions
- Icons:          Font Awesome 5 (CDN or self-hosted: Free Solid + Brands subsets)
- Component lib:  Elementor widgets (Button, Heading, Image, Icon Box, Carousel) customized via Design Tokens
- Build tool:     N/A (WordPress/PHP runtime)

Note for non-WordPress implementations: If rebuilding this design outside WordPress/Elementor, Next.js or Astro with Tailwind CSS would map naturally to this system's token architecture. Extract all values from YAML frontmatter into Tailwind config (theme.colors.*, theme.borderRadius.*, theme.spacing.*). Use @font-source directives for Prata and Libre Franklin.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column layout, hamburger menu, stacked hero (image above/below text), reduced type sizes, hidden floating rails or converted to bottom-bar | | Tablet | 768px – 1024px | Two-column grid options emerge, navigation may condense, hero maintains side-by-side but narrower columns | | Desktop | 1025px – 1440px | Full layout as documented: 1440px container, asymmetric hero split, full nav visible, floating rails active | | Wide | > 1440px | Container centers with increasing side margins; content maxes at 1440px, background extends edge-to-edge |

Touch Targets

• {component.button-primary-ghost}: 18px × ~60px (padding 18px 30px plus text height) — comfortably exceeds 44×44px minimum.
• {component.floating-cart-btn} / {component.floating-email-btn}: 44×44px — meets WCAG AAA minimum exactly.
• {component.nav-link}: ~16px × (15px padding × 2 + ~16px text = ~46px) — meets minimum.
• {component.email-input}: 40px height × variable width — 40px falls slightly short of 44px recommendation; consider increasing to 44–48px for mobile touch.
• {component.carousel-arrow}: Implicit touch target likely 40–48px area around 24px icon — ensure adequate invisible hit expansion on mobile.

Collapsing Strategy

• Navigation: Horizontal menu collapses to hamburger/drawer below tablet breakpoint. Drawer slides from right or drops down, maintaining {colors.on-dark} text on {colors.surface-soft} (black) background for contrast inversion.
• Hero layout: Asymmetric text/photo split converts to stacked: photograph above headline (visual hook first, then message) or headline above photograph (message first, then proof). Text sizes reduce: {typography.display-lg} (54px) likely scales to 36–42px on mobile.
• Grid columns: Three-column card grids collapse to single column (stacked vertically) on mobile, two columns on tablet.
• Floating utility rails: Cart and email buttons may hide on mobile (accessible via menu) or convert to a bottom-fixed bar to remain thumb-reachable.
• Typography scaling: All display tokens reduce 20–35% on mobile; {typography.display-lg} becomes ~36–40px, {typography.title-md} becomes ~28px. Body text may reduce to 14–15px.
• Image behavior: Hero photograph maintains aspect ratio, width 100% of container, with object-fit: cover and strategic object-position (focus on model's face/upper body). May switch to portrait crop on mobile if landscape on desktop.

Iteration Guide

1. Begin by implementing the hero band as the foundational pattern: full-viewport {colors.primary} background, 135px vertical padding, Prata headline at 54px/500 in {colors.on-primary}, ghost CTA with semi-transparent white border. Get this single section pixel-matching the screenshot before expanding.
2. Map every value from the YAML frontmatter into your implementation's token system—Tailwind config, CSS custom properties, or design tokens object. Never hardcode #e56861, 54px, or 4px; always reference {colors.primary}, {typography.display-lg}, {rounded.DEFAULT}.
3. Implement state variants (-hover, -active, -focus, -disabled) as separate CSS classes or modifier objects mirroring the frontmatter's separate-entry pattern. The spec documents Default and Active/Pressed; add Hover and Disabled following the established naming convention.
4. Assign new components to sub-systems before designing them: hero dialect (saturated bg, reversed text, ghost buttons) vs. content dialect (white/warm surfaces, dark text, shadowed cards) vs. footer dialect (black bg, muted text). Mixing dialect attributes creates visual inconsistency.
5. When adding a new color token, group it under existing prefixes (surface-*, muted-*, hairline-*) rather than creating new top-level categories. If no prefix fits, evaluate whether the color is truly necessary or can be composed from existing tokens.
6. Ensure all {typography.body-md} instances use line-height: 2.0 (or 32px computed)—this is the system's most distinctive typographic parameter and most easily lost in implementation.
7. Run contrast checks on {colors.on-primary} (#8b8c90) against {colors.primary} (#e56861) — the ratio is approximately 2.8:1, which fails WCAG AA for normal text. If your project requires AA compliance, consider bumping {colors.on-primary} to a darker gray (#5a5a5c) or accepting this as intentional brand choice with a11y documentation.
8. Test the hero photograph at 320px width (iPhone SE) to verify the model's face remains visible and compelling when the image narrows significantly. Adjust object-position if cropping removes key compositional elements.
9. Validate that Font Awesome loads with only the required subsets (Solid icons for UI glyphs, Brands for social logos) to minimize payload—this template currently pulls the full FA library.
10. After implementation, audit all border-radius values against the six defined tokens; any instance of 8px, 12px, or 6px that isn't {rounded.sm/md/DEFAULT} represents deviation from the system's shape vocabulary.

Font Setup

For local development or environments without Google Fonts access:

:root {
  --font-head: 'Prata', 'Crimson Pro', 'Georgia', serif;
  --font-body: 'Libre Franklin', 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

Import sources:

• Prata: https://fonts.googleapis.com/css2?family=Prata:wght@400;500;600;700&display=swap
• Libre Franklin: https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700;800;900&display=swap

If substituting Prata: Crimson Pro (weights 400–600) offers the closest visual match—similar x-height, moderate contrast, editorial character. For Libre Franklin substitution: Inter (weights 400–500 for this system's range) provides the most compatible geometric-humanist alternative with identical optical sizing intentions.

Known Gaps

• Hover state specifics: Per the no-hover policy, all hover interactions (nav links darkening, buttons filling, cards lifting) are inferred from transition tokens and common patterns, not directly extracted.
• Loading/pending states: No skeleton screens, shimmer effects, or loading spinners beyond generic FA-spin were extractable; define these per platform conventions.
• Form validation states: Error, warning, and success input border/background treatments beyond focus are not present in the captured DOM.
• Dropdown/menu expanded state: The Pages dropdown menu's appearance (background, shadow, item styling) is not visible in the screenshot.
• Secondary pages: Course listings, trainer profiles, blog articles, pricing tables, and contact forms are referenced in navigation but not captured—these likely introduce additional component patterns (pricing tiers, schedule grids, testimonial carousels).
• Dark mode: The system as captured is light-mode only; {colors.surface-soft} black in the footer hints at potential dark sections, but no full dark mode toggle or inverted token set is evident.
• Mobile navigation drawer: Exact styling (width, animation direction, overlay treatment, close mechanism) for the collapsed mobile menu cannot be determined from the desktop screenshot.
• Carousel slide count: Number of hero images, autoplay timing, pagination dots/styling, and swipe sensitivity parameters require live inspection.
• Accessibility annotations: ARIA landmarks, focus-visible rings, skip-links (one detected in DOM: "Skip to content"), and screen-reader-only text patterns are partially present but not comprehensively catalogued.
• Elementor-specific classes: Many components carry elementor-* prefixed classes whose styles are generated dynamically; some visual treatments may reside in JavaScript-rendered CSS not captured in static extraction.