Back 9 Botanicals

Overview

Back 9 Botanicals is a performance-driven wellness brand that merges natural hemp-derived botanicals with athletic precision. Designed specifically for golfers and endurance athletes, the brand embodies an 'Athletic Naturalism' aesthetic—combining earthy, botanical warmth (lime-green accents, cream backgrounds) with the clean geometry of sports performance. The UI evokes trust through clarity: a cream canvas (#fffef5) anchors the interface, while a vibrant lime-green primary (#aabf18) signals action and energy, creating a visual language that feels both premium and approachable.

The brand voice is confident, direct, and performance-focused. Tone: motivational without hype, scientific without jargon, inclusive of all athletic levels. Vocabulary leans into 'performance,' 'focus,' 'recovery,' and 'natural'—never breathless or trendy. Example sentence: 'Sharpen your focus on the course with hemp-derived gummies formulated for sustained energy and mental clarity.'

Colors

The color system balances natural warmth with athletic energy. Primary (#aabf18, a lime-green) is the signature accent used exclusively on call-to-action buttons, key links, and interactive focus states—it signals 'go' and 'perform.' The surface stack is anchored in cream (#fffef5) for approachability and warmth, with a subtle dim variant (#f9f8f4) for depth. Secondary (#467c99, a muted blue) supports secondary actions and informational elements, evoking trust and stability. Tertiary (#108474, a teal-green) is reserved for success states, badges, and botanical accents that reinforce the natural ingredient story. Error (#e74c3c) is used sparingly for warnings and validation failures. The outline color (#666633, a muted olive) is used for borders, dividers, and secondary text, creating visua

Typography

The type system uses Poppins exclusively, a geometric sans-serif that conveys both modernity and approachability. Display (72px, weight 900, line-height 86px, -0.02em tracking) is reserved for hero headlines and major announcements, commanding attention without aggression. Headline-lg (43px, weight 900) and headline-md (29px, weight 900) create a strong visual hierarchy for section titles and product names, with tight negative tracking (-0.01em) that reinforces the athletic, forward-moving brand personality. Body-lg (16px, weight 500, line-height 25px) is the primary reading size for product descriptions and long-form content, maintaining legibility at 16px base font size. Body-md (14px, weight 400) is used for secondary copy, metadata, and smaller UI text. Label-md (12px, weight 600, 0.02

Layout

The layout uses a 12-column grid system with a max-width of 1440px, maintaining a fluid layout on mobile and tablet (breakpoints at 920px and 768px) that scales gracefully to desktop. The gutter is consistently 24px (md spacing), creating breathing room between sections without excessive whitespace. Container padding follows the spacing scale: 24px (md) on tablet, 40px (lg) on desktop, with 12px (sm) on mobile. Sections are separated by 40px (lg spacing) vertically, creating a rhythm that guides the eye through product tiers and educational content. The hero section uses full-width imagery with an overlay modal (rgba(0, 0, 0, 0.5) with 4px blur backdrop-filter) to ensure text legibility over dynamic backgrounds. Cards and product containers use 24px (md) internal padding with 12px (sm) gap

Elevation & Depth

Depth is achieved through subtle shadow layering and strategic use of background color shifts rather than heavy drop shadows. Level 1 (Base): the cream surface (#fffef5) with no shadow, establishing the foundation. Level 2 (Standard Cards): box-shadow: 0 6px 7px rgba(0, 0, 0, 0.12) with background-color: {colors.surface-container}, creating a gentle lift. Level 3 (Modals and Elevated Content): box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12) with background-color: {colors.surface-bright}, using a negative y-offset to suggest content floating above the page. Interactive elements (buttons, inputs) us

Shapes

The shape language follows 'Athletic Geometry'—combining sharp precision with approachable softness. Buttons use 12px border-radius ({rounded.lg}), creating a modern, athletic feel that's neither overly rounded nor harsh. Input fields use 50% border-radius ({rounded.full}) to signal openness and ease of interaction, with a 1px border in outline-variant (#929292) for definition. Cards and containers use 12px ({rounded.lg}) for consistency with buttons, reinforcing the cohesive system. Modals and elevated surfaces use 12px as well, maintaining visual unity. Badges and small accent elements use 5

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses {colors.primary} (#aabf18) background with {colors.on-primary} (#fffef5) text, 20px font-size, 600 font-weight, 12px border-radius, and 16px horizontal padding with 12px vertical padding (48px total height). On hover, the background transitions to {colors.primary-fixed-dim} (#8fa014) over 200ms with cubic-bezier(0.25, 0.1, 0.25, 1.0) timing, providing clear visual feedback. Secondary buttons use {colors.outline} (#666633) background with {colors.on-surface} text, 16px font-size, 400 font-weight, 8px border-radius, and 12px padding (44px height). Focus states add a 2px outline in {colors.primary} with 4px offset, ensuring keyboard accessibility.

Containers & Surfaces Cards use {colors.surface-con

Do's and Don'ts

**Do**

• Do use the primary lime-green (#aabf18) exclusively on CTAs and interactive focus states—it's the brand's signature accent and must remain distinctive.
• Do maintain 24px (md spacing) between major sections and 12px (sm spacing) between related elements to create visual rhythm and guide the eye.
• Do apply 200ms cubic-bezier(0.25, 0.1, 0.25, 1.0) transitions on all interactive state changes (hover, focus, active) for consistent, smooth feedback.
• Do use Poppins weight 900 for headlines to reinforce the athletic, forward-moving brand personality—never use lighter weights for primary headings.
• Do reserve the cream background (#fffef5) as the dominant surface; it's the foundation of the brand's approachable, natural aesthetic.

**Don't**

• Don't use the primary accent color (#aabf18) on non-interactive elements or backgrounds—it must signal action and remain high-contrast.
• Don't mix border-radius values arbitrarily; stick to the defined scale (4px, 8px, 10px, 12px, 25px, 50%) to maintain visual cohesion.
• Don't apply shadows heavier than 0 -6px 18px rgba(0, 0, 0, 0.12) on standard UI elements—the brand favors subtle depth over dramatic drop shadows.
• Don't use system fonts or fallback sans-serifs; Poppins is the exclusive typeface and must load via @font-face or Google Fonts.
• Don't place small text (label-sm, 12px) over busy product photography without a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) or semi-transparent background for legibility.