Weekend Golfing

Overview

Weekend Golfing is a performance-coaching and retail platform designed for amateur golfers seeking measurable improvement and genuine enjoyment on the course. The brand embodies 'Athletic Minimalism'—a design philosophy that strips away visual noise to reveal actionable insights, combining the precision of sports analytics with the accessibility of community-driven learning. The aesthetic evokes confidence without arrogance: a clean, purposeful interface that respects the golfer's time and intelligence. The emotional response is one of clarity and empowerment—users feel equipped, not overwhelmed.

The brand voice is direct, encouraging, and grounded in expertise. Vocabulary favors concrete metrics ('lowest round ever', 'Performance Pillar Scorecard') over marketing hyperbole. The tone is conversational but authoritative, speaking to golfers as peers who understand both the frustration of inconsistency and the joy of incremental progress. Example sentence in brand voice: 'Your swing data shows a 2.3° variance in club face angle at impact—here's how to tighten that in three weeks.'

Colors

The color system is anchored by two primary accents: a warm, energetic coral-orange (primary: #eb592d) used for all calls-to-action, interactive states, and moments requiring user attention, and a deep forest green (secondary: #064f22) representing stability, growth, and the sport's natural heritage. These are supported by a sophisticated purple tertiary (#720eec) drawn from the WooCommerce ecosystem, used sparingly for premium product highlights and brand moments. The surface palette is deliberately neutral—off-white (#f9fafa) and soft grays (#eeeeee, #dddddd, #bcc6c9)—to ensure the accent colors command visual hierarchy without fatigue. The primary coral (#eb592d) appears on 'Get Started' buttons, hover states on navigation links, and active form inputs; it transitions to a darker burnt-

Typography

The type system pairs Prata (serif, 400 weight) for all display and headline levels with Open Sans (sans-serif, 400–700 weights) for body and label text. This pairing communicates 'established authority meets modern accessibility': Prata's elegant, slightly condensed letterforms convey heritage and expertise (used at 44px for h1, 35px for h2), while Open Sans's geometric clarity ensures legibility at smaller sizes and reinforces the data-driven, performance-focused mission. Display text (56px, Prata, 400 weight, -0.02em letter-spacing) is reserved for hero headlines like 'It's the weekend, let's go golfing'; headline-lg (44px, Prata) anchors section introductions; body-lg (18px, Open Sans, 400 weight, 28px line-height) carries the primary narrative and ensures comfortable reading at arm's

Layout

The layout operates on a 12-column grid with a fixed max-width of 1200px, centered with auto margins. The grid-container class enforces this constraint across all major sections, ensuring consistent horizontal rhythm. White-space is semantic: the lg spacing token (40px) separates major content blocks (hero from featured articles, articles from footer), md spacing (24px) divides subsections within cards, and sm spacing (12px) provides breathing room between list items and form fields. The hero section spans full-width with a background image overlay (dark teal gradient at ~60% opacity over photography), containing the h1 and subheading centered vertically. Below the fold, content flows in a card-based grid: four equal-width cards (each ~25% of container width on desktop, stacked on mobile)

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering, avoiding heavy drop-shadows that would conflict with the clean aesthetic. Level 1 (Base): the body background is a flat #f9fafa with no shadow; cards and containers sit directly on this surface. Level 2 (Standard Card/Container): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) creates a hairline separation, suggesting the card is slightly lifted. Level 3 (Hover/Elevated State): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) deepens the shadow on card-hover, signaling interactivity without visual drama. Modals and overlays (if used

Shapes

The shape philosophy is 'Functional Precision': border-radius values are minimal and purposeful, reflecting the sport's technical rigor while remaining approachable. Buttons and form inputs use 4px (0.25rem) border-radius, a subtle softening that avoids the clinical feel of sharp corners while maintaining a professional, data-driven aesthetic. Cards and containers default to 4px as well, creating visual consistency across interactive surfaces. Badges and pills (secondary labels, category tags) use 9999px (full border-radius) to signal they are self-contained, non-interactive labels. The logo m

Components

Action Elements Buttons are the primary interaction surface and come in three variants. The primary button (background: #eb592d, color: #ffffff, padding: 15px 20px, height: 44px, border-radius: 4px, font-weight: 700, font-size: 14px) is used for all main CTAs ('Get Started', 'Shop Now'). On hover, the background darkens to #d94a23 with a 100ms ease-in-out transition; on active/press, it shifts to #c23d1a. The secondary button (background: #064f22, color: #ffffff, padding: 8px 12px, height: 36px, border: 2px solid #064f22, border-radius: 4px) is used for category navigation and secondary actions; on hover, both background and border shift to #053d1a. The tertiary button (background: transparent, color: #eb592d, border: 2px solid #eb592d, padding: 12px 20px, height: 44px) is used for 'Co

Do's and Don'ts

**Do**

• Do use the primary coral (#eb592d) exclusively for CTAs and interactive focus states—it is the visual anchor that guides users through the experience.
• Do maintain 1.2em line-height on all headlines and 1.5em on body text to ensure comfortable reading across devices and lighting conditions.
• Do apply the 4px border-radius consistently to buttons, inputs, and cards; avoid mixing rounded and sharp corners in the same component family.
• Do use Prata serif for headlines (h1, h2, h3) and Open Sans sans-serif for body and labels; never reverse this pairing or mix serif and sans within a single text block.
• Do include a 100ms ease-in-out transition on all interactive elements (buttons, links, cards) to provide tactile feedback without feeling sluggish.
• Do preserve the 24px gutter spacing between grid columns and 40px margin between major sections to maintain visual rhythm and breathing room.

**Don't**

• Don't use the secondary green (#064f22) or tertiary purple (#720eec) as primary CTAs—reserve them for category navigation and premium highlights only.
• Don't apply border-radius greater than 4px to buttons or form inputs; the brand's precision aesthetic rejects soft, pill-shaped buttons.
• Don't mix font weights within a single headline; use Prata 400 for all display text, and reserve Open Sans 700 for labels and small caps only.
• Don't add drop-shadows greater than 0 4px 12px rgba(0, 0, 0, 0.08); heavy shadows conflict with the clean, minimal aesthetic and reduce perceived performance.
• Don't use near-black (#222222) text on the primary coral background; always pair coral with white (#ffffff) or very light gray (#f9fafa) for 4.5:1 contrast minimum.
• Don't reduce padding below 12px on form inputs or below 24px on card interiors; white-space is a design tool that communicates clarity and confidence.