Gardena

Overview

Gardena is a heritage German garden tools brand that combines engineering precision with accessible design. The visual system embraces 'Purposeful Minimalism'—a philosophy that strips away unnecessary decoration while maintaining warmth and approachability. The brand serves passionate gardeners and casual outdoor enthusiasts alike, delivering clarity through a restrained palette (warm orange accent against clean whites and deep neutrals) and purposeful typography that communicates both technical competence and human-centered care. The emotional response is one of quiet confidence: users feel equipped, not overwhelmed.

The brand voice is direct, practical, and encouraging—never condescending, never breathless. Gardena speaks in active verbs and concrete outcomes. Example sentence: 'Switching tasks with ease—the Original GARDENA System lets you snap connections in seconds, so you spend more time gardening and less time fiddling.'

Colors

The Gardena color system is built on a foundation of clean, neutral surfaces (white #ffffff, soft grays #f2f2f2 to #e3e3e3) that provide visual breathing room and emphasize product photography. The primary accent is a vibrant, warm orange (#f15922, CSS var --colorBtnPrimary) used exclusively on call-to-action buttons, interactive states, and brand moments. This orange is never used for body text or large surface areas—it is reserved for moments of intentional user action. Secondary colors include a muted teal (#4a6e78) for supporting UI elements and a near-black (#242539) for typography hierarchy. The outline palette (#b5b5b5 to #cccccc) creates subtle visual separation without harshness. All surfaces use a 1px border in outline-variant (#cccccc) to define edges crisply. The error state is

Typography

The type system pairs Poppins (geometric, confident, 700 weight) for headlines and display text with Jost (humanist, open, 400–600 weights) for body and UI copy. This pairing creates visual hierarchy through personality rather than size alone: Poppins headlines (32–56px, line-height 1.2–1.25) command attention with their geometric precision, while Jost body text (16–18px, line-height 1.5) remains warm and readable. Letter-spacing is calibrated per size: display and headline use -0.02em to -0.01em (tightening) to reinforce authority, while body uses +0.025em (opening) to enhance legibility at smaller sizes. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on hero images (e.g., 'Switching tasks with ease') to ensure 4.5:1 contrast ratio without darkening the image itse

Layout

The layout operates on a 12-column grid with a max-width of 1280px, centered with symmetric gutters of 24px on desktop (reducing to 16px on tablet, 12px on mobile). Page rhythm is established through a semantic spacing scale: section separation uses lg spacing (40px), component grouping uses md spacing (24px), and internal padding uses sm (12px) or xs (4px). The hero section spans full-width with a dark overlay gradient (linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%)) to ensure text legibility over product photography. Container widths vary by content type: product grids use 1200px, editorial sections use 900px, and modals use 800px. White-space is generous—cards and sections are never cramped. The footer uses the inverse color scheme (background: #111111, text: #fffff

Elevation & Depth

Depth is achieved through subtle shadow layering and border definition rather than dramatic drop shadows. Level 1 (Base): flat surfaces with no shadow, 1px border in outline-variant (#cccccc). Level 2 (Standard Cards/Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 1px border in outline-variant. Level 3 (Elevated/Modals/Hover States): box-shadow: 0 4px 8px rgba(0, 0, 0, 0.20), same border. Hover states on interactive elements (buttons, list items) transition the shadow from md to lg over 200ms (transition: box-shadow 0.2s ease-in-out), creating a subtle lift effect. Focus states on inputs a

Shapes

The shape language is 'Technical Warmth'—combining geometric precision with human-friendly curves. Buttons use 8px border-radius (rounded.DEFAULT), creating a slightly softened rectangle that feels approachable without being overly rounded. Input fields use 30px border-radius (rounded.full) to create a pill shape, signaling that they are interactive and inviting. Cards and modals use 8–10px radius (rounded.DEFAULT to rounded.md), maintaining consistency with buttons while allowing for internal content hierarchy. The full-radius (9999px) is reserved for badges and small accent elements. This gr

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the brand orange (#f15922) background with white text, 48px height, 12px vertical / 24px horizontal padding, and 8px border-radius. On hover, the background shifts to #eb490f (on-primary-fixed-variant) and the shadow elevates from md to lg (0 4px 8px rgba(0, 0, 0, 0.20)), creating a tactile lift effect over 200ms. On active/press, the background darkens further to #d63f0a. Secondary buttons use a transparent background with a 2px solid border in primary orange, white text, and the same 48px height and padding. On hover, the background fills with primary-container (#ffe8d9) and text shifts to on-primary-container (#5c2410), maintaining the border. All buttons use Jost 600 weight, 14px font-

Do's and Don'ts

**Do**

• Do use primary orange (#f15922) exclusively for CTAs, focus states, and brand moments—never for body text or large surface areas.
• Do maintain 24px gutters and 40px section spacing to create visual breathing room and guide the eye through content hierarchy.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text over hero images to ensure 4.5:1 contrast without darkening photography.
• Do use Poppins 700 for headlines (32–56px) and Jost 400 for body (16–18px) to create personality-driven hierarchy.
• Do transition hover states (shadows, colors) over 150–200ms using ease-in-out timing to feel responsive without jarring.
• Do use 8px border-radius on buttons and cards, 30px on inputs, and 9999px on badges to create a graduated shape language.

**Don't**

• Don't use primary orange on large surfaces, backgrounds, or body text—it is reserved for interactive moments only.
• Don't apply harsh drop shadows (> 0.20 opacity) or multiple shadow layers; keep elevation subtle with single-layer shadows at 0.15–0.20 opacity.
• Don't mix Poppins and Jost weights arbitrarily; use Poppins 700 for headlines, Jost 400 for body, and Jost 600 for labels and UI text.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 10px, lg: 16px, xl: 24px, full: 9999px).
• Don't implement dark mode; the brand operates in light-first paradigm with white surfaces and dark text.
• Don't apply focus rings thicker than 3px or in colors other than primary at 10% opacity; maintain accessibility without visual noise.