Nutreko

Overview

Nutreko is a WooCommerce-powered e-commerce theme designed for the nutrition and supplement industry, where trust, clarity, and conversion are paramount. The brand embodies 'Accessible Minimalism'—a design philosophy that strips away unnecessary ornamentation to create a clean, professional storefront while maintaining warmth through strategic use of a vibrant, health-forward green accent (#82b541). The aesthetic evokes a sense of wellness and vitality without sacrificing the credibility required in the health and fitness space. Users encounter a calm, organized shopping experience that prioritizes product discovery and checkout efficiency.

The voice is knowledgeable yet approachable, never clinical or condescending. Nutreko speaks to customers as informed partners in their health journey, using straightforward language and practical guidance. The brand avoids hyperbole and pseudo-scientific claims, instead grounding messaging in clarity and transparency. Example sentence: 'Our whey isolate delivers 25g of protein per serving—no fillers, no compromise.'

Colors

The Nutreko color system is rooted in a neutral, light foundation (#ffffff surface, #262626 on-surface text) that conveys professionalism and trust, anchored by a distinctive health-forward green primary (#82b541) that signals vitality, growth, and natural wellness. This green is deployed on all primary CTAs ('Buy Now' buttons), active states, and key interactive elements—it is the brand's signature accent and the most frequent color users click on. Secondary blue (#0084b4) provides a supporting accent for informational elements, trust badges, and secondary navigation, while tertiary red (#df2c2c) is reserved for error states, alerts, and critical warnings to maintain visual clarity without overuse.

The surface stack progresses from #ffffff (base) through #f5f5f5 (surface-dim) to #dedede

Typography

The Nutreko type system uses Helvetica Neue as the primary typeface, a classic sans-serif that conveys reliability and clarity across all sizes. The hierarchy spans from display (56px, 700 weight, -0.02em letter-spacing) for hero headlines down to label-sm (12px, 500 weight, 0.02em letter-spacing) for micro-interactions and badges. Body text is set at 16px with 400 weight and 24px line-height (1.5 unitless ratio), ensuring comfortable readability on product pages and checkout flows. Headlines use 600 weight (headline-lg at 36px, headline-md at 28px) to establish clear visual breaks between sections. All typography applies consistent letter-spacing: display and headline-lg use negative spacing (-0.02em, -0.01em) to tighten large text, while labels use positive spacing (0.01em–0.02em) to enh

Layout

Nutreko uses a 12-column fluid grid with a fixed container max-width of 1280px, centered on the viewport. The spacing scale is semantic: unit (8px) serves as the baseline, with sm (12px) for tight component padding, md (24px) for standard section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Pages are organized with consistent gutter spacing (24px) between columns and rows, creating a predictable rhythm that guides users through product catalogs, category pages, and checkout flows. White-space is used deliberately: product cards are separated by lg spacing to reduce cognitive load, while related items (e.g., product variants, quantity selectors) use sm spacing to signal grouping. The container max-width of 1280px ensures th

Elevation & Depth

Depth in Nutreko is conveyed through a restrained shadow system that avoids the heavy, dark shadows of skeuomorphic design. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation of interactive elements like buttons and form inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and product tiles that require clear visual distinction from the background, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, overlays, and floating elements that demand the highest visual priority. Dropdown panels use md elevation with a 1px solid border at #d0d0d0

Shapes

Nutreko employs 'Technical Sharpness'—a shape philosophy that favors small, precise border-radii over soft, rounded corners. This approach reinforces the brand's professional, no-nonsense positioning in the health and supplement space. Buttons use 4px border-radius (rounded.sm / 0.25rem) to maintain a crisp, modern appearance while remaining slightly softer than hard 90° corners. Form inputs (text fields, selects, dropdowns) also use 4px radius, creating visual consistency across interactive elements. Cards and product tiles use 12px border-radius (rounded.md / 0.75rem) to provide slightly mor

Components

Action Elements Buttons are the primary interaction mechanism in Nutreko. The button-primary component uses the signature green (#82b541) background with white text, 4px border-radius, and 5px 20px padding (40px total height). On hover, the background shifts to #6fa033 (a darker green) with a 150ms ease-in-out transition, providing clear feedback without animation jank. The button-primary-active state uses #5a8a2f for pressed/held states. Button-secondary provides an outlined alternative with transparent background, 1px border in the primary green, and the same padding and radius; on hover, it fills with primary-container (#c8e6a0) while maintaining the border. Both button variants use label-md typography (14px, 600 weight) for consistent labeling.

Containers & Surfaces Cards form

Do's and Don'ts

**Do**

• Do use the primary green (#82b541) exclusively on CTAs and interactive elements—never on passive text or backgrounds, as it dilutes its signal strength.
• Do maintain 4px border-radius on all buttons and form inputs to preserve the technical, professional aesthetic; avoid rounded corners larger than 12px on small components.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns to create clear visual separation without relying on harsh borders.
• Do use Helvetica Neue at 16px with 24px line-height for body text to ensure readability across product descriptions and checkout flows.
• Do implement 150ms ease-in-out transitions on all hover states (buttons, cards, list items) to provide smooth, predictable feedback.

**Don't**

• Don't use the primary green on backgrounds, borders, or non-interactive elements—reserve it exclusively for CTAs and active states to maintain visual hierarchy.
• Don't apply shadows larger than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) to standard components; excessive shadow depth contradicts the clean, minimalist aesthetic.
• Don't mix border-radius values within the same component type (e.g., buttons with 4px and 8px radii in the same interface)—consistency reinforces the technical brand voice.
• Don't use the secondary blue (#0084b4) or tertiary red (#df2c2c) as primary accents; they are supporting colors for informational and error states only.
• Don't exceed 1280px container max-width on desktop, as it compromises readability and creates excessive line lengths that fatigue users during product browsing.