Biohouse

Overview

Biohouse is Greece's premier e-commerce destination for organic products, dietary supplements, and specialized nutrition sourced globally. The brand embodies **Organic Minimalism with Commercial Clarity**—a design philosophy that prioritizes trust and accessibility over visual complexity. The aesthetic combines earthy, natural color palettes (sage greens, warm oranges) with clean typography and generous whitespace, creating an environment where health-conscious consumers feel confident making purchasing decisions. The UI personality is reassuring and knowledgeable: the brand speaks with the authority of a nutritionist, not the hype of a marketer. Example voice: "Sourced from certified organic farms across Europe and beyond—every product verified for purity and potency."

Colors

The Biohouse color system is rooted in nature and trust. **Primary (#96c050)** is a muted sage green deployed on all call-to-action buttons, active navigation states, and key interactive elements—it signals growth, wellness, and organic authenticity without aggression. The inverse-primary (#087148), a deeper forest green, is reserved for hover and active states, providing tactile feedback with 200ms transitions. **Secondary (#228efb)**, a calm sky blue, supports informational elements, badges, and secondary CTAs, creating visual hierarchy without competing with the primary. **Tertiary (#f86517)**, a warm burnt orange, highlights promotional content, date badges, and warning states—it conveys urgency and energy while remaining grounded in natural tones. The surface stack (white #ffffff thro

Typography

The Manrope typeface family (700 weight for headlines, 400 for body) creates a modern yet approachable voice. Display (56px, -0.03em letter-spacing) anchors hero sections with authority; headline-lg (32px, 700 weight) structures category pages and major sections; headline-md (25px) and title-lg (20px) organize product listings and module titles with consistent 5px underline accents in primary green. Body text (16px, 1.5 line-height) ensures readability across product descriptions and long-form content; label-md (14px, 600 weight, 0.01em tracking) standardizes button text and form labels with uppercase transformation for CTAs. On small labels over busy product imagery, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain contrast. All headlines receive a decorative 59px × 5px underl

Layout

Biohouse uses a fixed 12-column grid with a 1440px container max-width, maintaining consistent horizontal rhythm across desktop, tablet, and mobile breakpoints. The gutter spacing is 24px (md unit), with section separation using lg spacing (40px) to create breathing room between product categories and content blocks. The one-column layout reserves 240px for sidebars (left or right), reducing main content to calc(100% - 240px); two-column layouts further constrain to calc(100% - 480px). Page padding is 20px on all sides (#content), with column-specific padding adjustments (left column adds 20px left padding, right column adds 20px right padding). The sidebar itself uses 20px padding with 0px left padding to align flush with the main grid. Container max-widths scale responsively: 1440px (des

Elevation & Depth

Biohouse employs a subtle shadow hierarchy to convey depth without visual heaviness. **Level 1 (Base)**: No shadow; flat surfaces (body background #ffffff, surface-container #eeeeee) establish the foundation. **Level 2 (Cards & Containers)**: box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) on default cards and input fields, creating minimal lift for interactive elements. **Level 3 (Hover & Elevated)**: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on card-hover and elevated modals, signaling interactivity. **Level 4 (Dropdowns & Overlays)**: box-shadow: 25px 25px 90px -10px rgba(0, 0, 0, 0.5) on dropdo

Shapes

The Biohouse shape language is **Functional Geometry**—combining sharp, precise corners with selective rounding to balance modern commerce with organic warmth. Buttons use rounded.md (5px) for a clean, professional appearance that feels neither sterile nor overly soft; hover states maintain the same radius while shifting color and shadow. Cards and containers use rounded.md (5px) for consistency with buttons, creating a cohesive component family. Input fields use rounded.DEFAULT (4px), slightly tighter than buttons, to differentiate form elements while maintaining visual harmony. Badges and pi

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses primary green (#96c050) background with white text, 12px uppercase label-md typography, 12px 24px padding, and 5px border-radius. On hover, the background shifts to inverse-primary (#087148) with a 200ms transition and elevated shadow (0 4px 12px rgba(0, 0, 0, 0.08)). **button-success** mirrors button-primary styling for add-to-cart and purchase flows. **button-secondary** uses transparent background with surface-container (#eeeeee) and a 1px outline-variant border; on hover, it fills with surface-container-high (#e8e8e8) and text shifts to primary green. All buttons include focus states with inset box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25) for keyboard accessibility.

Containers & Surfaces C

Do's and Don'ts

**Do**

• Do use primary green (#96c050) exclusively for primary CTAs and active navigation states—it is the brand's signature trust signal and must not be diluted across secondary elements.
• Do apply 5px border-radius consistently to buttons and cards; this is the visual anchor of the system and deviating to 0px or 20px breaks the functional geometry language.
• Do transition all interactive color and shadow changes over 150–200ms with ease-in-out timing; this reinforces tactile feedback and prevents jarring visual shifts.
• Do maintain 24px gutter spacing and 40px section separation (lg spacing) to preserve the clean, organized rhythm that builds consumer confidence in a health-focused e-commerce context.
• Do use Manrope 700 weight for all headlines with a 59px × 5px primary green underline bar centered below; this decorative element is a brand signature and must appear on category pages, module titles, and major sections.

**Don't**

• Don't use primary green (#96c050) on secondary buttons, badges, or informational elements—reserve it exclusively for primary actions to maintain visual hierarchy and prevent decision fatigue.
• Don't apply box-shadow values larger than 25px 25px 90px on any element except dropdowns and modals; excessive shadow depth contradicts the clean, minimalist aesthetic and feels cluttered.
• Don't mix border-radius values within a single component family (e.g., don't use 3px on one button and 8px on another); consistency is critical to the functional geometry system.
• Don't use color transitions longer than 200ms on interactive elements; slower transitions feel sluggish and undermine the responsive, trustworthy brand personality.
• Don't apply text-shadow or text-outline effects to body text or labels; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) only for small labels over busy product imagery where contrast is critical.