EarthE CBD

Overview

EarthE CBD is a premium organic CBD retailer positioned at the intersection of wellness, botanical authenticity, and accessible e-commerce. The brand serves health-conscious consumers seeking natural relief through high-quality hemp products. The aesthetic movement is "Botanical Minimalism"—a design philosophy that combines earthy, nature-inspired color palettes (forest greens #1c4e2a, warm golds #cb9734, terra oranges #fe8b0e) with clean, modern typography and generous whitespace. The UI evokes trust, clarity, and organic integrity: users feel they are purchasing from a knowledgeable, transparent brand that respects both the plant and their wellness journey.

The brand voice is warm, informative, and reassuring—never clinical or overly trendy. EarthE speaks in accessible language about complex topics (CBD dosing, extraction methods, compliance) while maintaining an approachable tone. Vocabulary emphasizes natural origins ("organic," "hemp-derived," "plant-based"), quality markers ("premium," "lab-tested," "pure"), and customer benefit ("relief," "wellness," "natural"). Example sentence in brand voice: "Our full-spectrum CBD is extracted from organically grown hemp and third-party tested for purity—because your wellness deserves transparency."

Colors

The EarthE color system is rooted in botanical authenticity and trust-building minimalism. Primary (#1c4e2a, a deep forest green) anchors all call-to-action buttons, interactive states, and brand-critical UI elements—it signals growth, nature, and reliability. Secondary (#cb9734, a warm burnished gold) is reserved for accent highlights, pricing displays, and premium product badges, evoking luxury and natural richness. Tertiary (#fe8b0e, a vibrant terra orange) provides energetic contrast for promotional banners, alerts, and secondary CTAs, drawing attention without overwhelming the botanical palette.

The surface stack is deliberately neutral and spacious: surface-bright (#ffffff) and surface-dim (#e8ede6, a soft sage-tinted gray) create breathing room and reduce cognitive load. Surface-co

Typography

The type system pairs Montserrat (headings, display, high-impact labels) with Open Sans (body, UI labels, form text), creating a hierarchy that feels both modern and approachable. Montserrat's geometric precision and slightly condensed letterforms convey confidence and clarity—ideal for product names, section headers, and promotional copy. Open Sans's humanistic proportions and generous spacing ensure body text remains readable at 14–18px sizes, even on mobile. Display-level type (60px, 700 weight, -0.04em letter-spacing) is used sparingly for hero headlines and brand moments; headline-lg (40px, 600 weight) anchors major sections; body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and instructional text. On small labels over busy product imagery or dark

Layout

The page rhythm follows a 12-column grid with a max-width of 1280px, ensuring content remains scannable on desktop while adapting fluidly to mobile viewports. The design uses a "breathing" spacing model: lg spacing (40px) separates major sections (hero, products, testimonials, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) creates internal padding within components. Container widths are typically 80% of viewport on desktop (max 1200px) to create visual margins and reduce eye strain. The gutter is consistently 24px between columns. White-space is treated as a design element, not wasted real estate—generous padding around product cards (30px on bestseller images, 18px on standard product wraps) signals premium positioning and reduces visual clutter. Sec

Elevation & Depth

Depth in EarthE's design is achieved through subtle layering and soft shadows rather than dramatic contrast. The elevation system uses three tiers: Level 1 (Base) is the page background with a barely-perceptible green tint (rgba(174, 208, 137, 0.15)); Level 2 (Standard Cards & Inputs) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border in surface-container-high (#d1d1d1), creating a gentle lift; Level 3 (Modals, Elevated Cards, Hover States) uses box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) with the same border treatment. Product cards on hover transition smoothly (0.25s ease-in-

Shapes

The shape philosophy is "Soft-Technical Accessibility"—rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons and primary interactive elements use rounded.DEFAULT (0.5rem / 8px) for a balanced, modern feel that's neither sharp nor overly organic. Input fields and form controls also use 0.5rem, creating visual consistency across the interaction layer. Cards and product wraps use rounded.lg (1rem / 16px) to signal containment and create visual breathing room. Modals and elevated surfaces use rounded.xl (1.5rem / 24px) for a more pre

Components

Action Elements Buttons are the primary interaction layer. The button-primary component uses background: rgb(28, 78, 42), color: white, padding: 12px 30px, height: 48px, border-radius: 0.5rem, font-size: 15.9px, font-weight: 500. On hover, the background transitions to rgb(41, 82, 24) (primary-container) with a smooth 0.2s ease transition. The button-secondary variant uses a white background with a 1px border in #c8c8c8, maintaining the same padding and height; on hover, it shifts to surface-container-high (#dee2e6) with text color changing to primary. Both variants use Open Sans at 15.9px to match the rendered DOM and ensure consistency across the site. The button-ghost variant (used for tertiary actions) has transparent background, primary text color, and a 1px border in primary; on

Do's and Don'ts

**Do**

• Do use primary (#1c4e2a) exclusively for CTAs, focus states, and brand-critical interactive elements—it builds recognition and trust.
• Do maintain 24px gutter spacing between grid columns and 40px vertical spacing between major sections to create a calm, readable layout.
• Do apply Open Sans at 400 weight for body copy and 600 weight for labels to ensure hierarchy without visual noise.
• Do use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on cards and 0 8px 32px rgba(0, 0, 0, 0.1) on hover/elevated states for consistent depth.
• Do pair Montserrat headings with Open Sans body text to create a modern, accessible type system that feels both confident and approachable.

**Don't**

• Don't use secondary (#cb9734) or tertiary (#fe8b0e) for primary CTAs—reserve them for accents, pricing, and promotional highlights only.
• Don't apply border-radius: 0px to interactive elements; use rounded.DEFAULT (8px) minimum to maintain the soft-technical aesthetic.
• Don't exceed 1280px container max-width; wider layouts dilute the focused, premium positioning and reduce readability.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; always use on-primary, on-secondary, or on-surface tokens to maintain contrast and accessibility.
• Don't mix typefaces within a single component (e.g., Montserrat for a button label and Open Sans for the same button)—consistency builds brand recognition.