ROLLER Möbel

Overview

ROLLER Möbel is Germany's largest furniture retailer, operating 110+ physical stores and a comprehensive e-commerce platform serving over 20,000 SKUs. The brand embodies 'Direct Pragmatism'—a design aesthetic that prioritizes clarity, accessibility, and value without sacrificing visual confidence. The UI conveys trustworthiness through a bold, high-contrast palette (deep blues, vibrant greens, warm oranges) paired with clean, geometric typography. The emotional response is one of empowerment: customers feel they're making smart, informed choices in a transparent, friction-free environment.

ROLLER's voice is conversational yet authoritative, speaking to budget-conscious Germans who demand both quality and honesty. The tone avoids hyperbole; instead, it uses concrete value propositions ('Tiefpreisgarantie', 'Kauf auf Rechnung') and direct calls-to-action. Vocabulary leans toward functional clarity: 'Kategorien', 'Heiße Deals', 'Jetzt sparen'. Example sentence in brand voice: 'Kostenlose Lieferung auf ausgewählte Küchen—weil gutes Design nicht teuer sein muss.'

Colors

The ROLLER color system is built on three pillars: a neutral foundation (whites and grays from #ffffff to #c9ccd2), a primary action layer (vibrant green #16a34a for 'add to cart' and conversion moments), and supporting accent colors that signal different contexts. Primary green (#16a34a, rgb(22, 163, 74)) is reserved exclusively for positive actions—purchases, confirmations, and primary CTAs. It appears on buttons with 8px 12px padding and 0.375rem border-radius, ensuring thumb-friendly mobile targets at 44px height. Secondary blue (#0f6bb1, rgb(15, 107, 177)) anchors the header and location picker, creating a stable, institutional feel. Tertiary orange (#f3a436) highlights promotional content and 'Hot Sale' badges, drawing attention without overwhelming. Error red (#e41c3a) is used spari

Typography

ROLLER employs a two-typeface system: Cairo (a geometric, Arabic-influenced sans-serif) for all headlines and brand moments, and Roboto for body copy and UI labels. This pairing creates visual distinction between marketing content and functional interface. Headlines use Cairo at weights 700, sizes ranging from 28px (headline-md) to 60px (display), with tight line-height (1.13–1.2x) and negative letter-spacing (-0.02em) to maximize impact on hero sections. Body copy uses Roboto at 16px, fontWeight 400, lineHeight 24px (1.5x), and 0em letter-spacing for optimal readability at arm's length. Labels and buttons use Roboto at 14px, fontWeight 600, lineHeight 20px, with +0.01em letter-spacing to add crispness to interactive elements. On small labels (12px) over busy product imagery, apply text-sh

Layout

ROLLER uses a 12-column fluid grid with a 1280px max-width container, centered with 24px gutters on desktop and 16px on mobile (calc(100% - 1.6rem) for mobile, calc(100% - 3.2rem) for tablet). The page rhythm is driven by 8px unit spacing: sections separate at 40px (lg spacing), cards nest at 24px (md spacing), and internal padding uses 12px (sm spacing) or 8px (xs spacing) for compact components. The header is sticky at z-index 10 (z-header in Tailwind), with a black top bar (79576 Flensburg location picker) at 1.1rem font-size, followed by a white desktop header at page-header-desktop-height. The hero section spans full-width with a 1:1.2 aspect ratio image (kitchen scene), overlaid with Cairo headline text in green (#16a34a) and a tertiary CTA button (Jetzt sparen) at bottom-right. Whit

Elevation & Depth

Depth in ROLLER is achieved through subtle shadows and strategic layering, not through dark overlays or glassmorphism. The elevation system uses three levels: Level 1 (Base) has no shadow—flat surfaces like the white background and card backgrounds sit flush. Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on product cards, modals, and dropdowns to lift them 2–3px above the base. Level 3 (Elevated/Hover) applies box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1), used when cards are hovered or when modals are in focus, creating a 6–8px lift. Borders are always 1px solid

Shapes

ROLLER's shape language is 'Geometric Pragmatism': corners are slightly rounded (0.375rem / 3px) on buttons and inputs to soften the industrial feel without sacrificing modernity, while cards use the same 3px radius for consistency. Larger containers (modals, dropdowns) use 1rem (8px) for a more pronounced, friendly appearance. The full-radius (9999px) is reserved for badge components and the tertiary 'Jetzt sparen' CTA button, signaling playfulness and promotional energy. This hierarchy—3px for utility, 8px for containers, 9999px for highlights—creates visual rhythm without confusion. The rat

Components

Action Elements Buttons are the primary interaction pattern. The primary button (green, #16a34a) uses 8px 12px padding, 44px height, 0.375rem border-radius, and Cairo fontFamily at 14px fontWeight 600. On hover, the background shifts to #4ade80 (primary-fixed-dim) with a 150ms transition. The secondary button (blue, #0f6bb1) follows the same dimensions but uses Roboto fontFamily. The tertiary button (orange, #f3a436) is full-radius (9999px) with 12px 24px padding, reserved for promotional CTAs like 'Jetzt sparen'. All buttons have a focus state: box-shadow: 0 0 0 3px rgba(15, 107, 177, 0.1) when focused via keyboard.

Containers & Surfaces Cards use 24px padding, 1px solid #d0d0d0 border, 0.375rem border-radius, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the backgroun

Do's and Don'ts

**Do**

• Do use green (#16a34a) exclusively for positive, conversion-focused actions—'Add to Cart', 'Buy Now', 'Confirm'—to train users' eyes.
• Do apply 24px (md spacing) between major sections and 12px (sm spacing) between related items to create visual rhythm without cramping.
• Do use Cairo for all headlines and brand moments (H1, H2, promotional text) and Roboto for body copy and UI labels to maintain clear hierarchy.
• Do ensure all interactive elements (buttons, inputs, links) are at least 44px tall and 44px wide to meet mobile accessibility standards.
• Do apply 150ms ease-in-out transitions on button hovers and 200ms on card hovers to signal interactivity without feeling sluggish.
• Do use the full-radius (9999px) sparingly—only on promotional badges and tertiary CTAs—to reserve it as a visual 'call-out' signal.

**Don't**

• Don't use dark mode or near-black backgrounds; ROLLER's brand is built on light, confident surfaces that convey transparency and trust.
• Don't mix Cairo and Roboto weights arbitrarily; reserve Cairo 700 for headlines and Roboto 400 for body, with 600 for labels only.
• Don't apply shadows deeper than 0 6px 30px rgba(0, 0, 0, 0.1); excessive shadows create visual heaviness that contradicts the brand's pragmatic clarity.
• Don't use the primary green (#16a34a) on non-interactive elements or backgrounds; reserve it for buttons and active states to maintain affordance.
• Don't create border-radius values between 0.375rem and 1rem; stick to the defined scale (0.375rem, 0.75rem, 1rem, 1.5rem, 9999px) to avoid visual inconsistency.
• Don't apply letter-spacing greater than 0.05em on body copy; ROLLER's typography should feel natural and readable, not spaced out or artificial.