Back Market

Overview

Back Market is a global marketplace for refurbished electronics that combines sustainability with accessibility. The design system embodies 'Playful Pragmatism'—a visual language that balances vibrant, energetic accents (vivid orange primary, bold magenta secondary) against a clean, light foundation (rgb(248, 249, 252) surface) to communicate both trustworthiness and forward momentum. The brand serves environmentally conscious consumers and tech enthusiasts who reject planned obsolescence, evoking a sense of smart shopping, second-life value, and planet-positive choice. The UI feels approachable yet authoritative: every interaction—from product discovery to checkout—reinforces that refurbished tech is not a compromise, but a superior choice.

Back Market's voice is conversational, confident, and slightly irreverent. The tone avoids corporate jargon; instead, it speaks in the language of real people: 'Save $50 when you spend $600,' 'Everything you love about new, for less,' 'Guaranteed by the Back Market Promise.' Vocabulary patterns emphasize value, sustainability, and quality assurance. Example sentence in brand voice: 'Your refurbished iPhone isn't a second choice—it's a smarter first choice, backed by our 1-year warranty and 30-day money-back guarantee.'

Colors

The color palette is anchored by a vibrant, high-saturation primary orange (#ff7b00) used exclusively for call-to-action buttons, key interactive elements, and brand-critical highlights. This orange is never used for passive surfaces; it commands attention and signals clickability. Secondary accent colors include a bold magenta-red (#b71029) for promotional badges and status indicators, and a deep purple (#7b3dbe) for tertiary actions and accent highlights. The surface stack is deliberately light and neutral: the base surface is rgb(248, 249, 252)—a near-white with a subtle cool undertone—paired with on-surface text at rgb(47, 49, 55), a near-black that ensures 16:1 contrast for accessibility. Outline and outline-variant tokens (#c3c5cb and #aaacb1 respectively) provide subtle borders and

Typography

The type system uses two distinct font families to create visual hierarchy and emotional resonance. Display and headline text use BMDupletDSP (or HelveticaDSP as fallback)—a distinctive, geometric display typeface that conveys modernity and brand personality. Body and label text use BMDupletTXT (or HelveticaTXT)—a humanist sans-serif optimized for readability at small sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major page titles; headline-lg (40px, 600 weight, -0.02em) for section headers; headline-md (28px, 600 weight, -0.01em) for subsections. Body-lg (18px, 400 weight) is used for introductory paragraphs and prominent descriptive text, while body-md (16px, 400 weight) serves as the default body copy. Label-md (14px, 600 weight, 0.01em le

Layout

The page layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus on mobile. The spacing scale is semantic and hierarchical: unit (8px) is the base increment; sm (12px) is used for tight component padding; md (24px) is the default gutter between sections and card padding; lg (40px) separates major content blocks; xl (64px) creates breathing room between hero and body sections. The hero section uses full-width imagery with overlay text (as seen in the 'Save $50' banner), while product grids and content sections respect the container max-width to prevent line-length from exceeding 75 characters. White-space is generous but purposeful: the gap between product cards is 1rem (16px), and sect

Elevation & Depth

Visual hierarchy in Back Market is achieved through a minimal shadow system and subtle color shifts rather than aggressive depth. Level 1 (Base): the surface layer at rgb(248, 249, 252) with no shadow, representing the page foundation. Level 2 (Standard Cards): cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) paired with a 1px solid border at outline-variant (#aaacb1), creating a soft, defined edge without visual heaviness. Level 3 (Elevated/Modals): modals and floating panels use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a 1px border at outline (#c3c5cb), signaling importance without

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used consistently but conservatively to balance approachability with precision. Buttons use rounded.lg (1rem / 16px) for a friendly, modern appearance; cards and containers use rounded.md (0.75rem / 12px) for a slightly sharper, more structured feel; inputs use rounded.DEFAULT (0.5rem / 8px) for a compact, functional look. Chips and badges use rounded.full (9999px) to signal their role as discrete, removable elements. The rationale: larger radii (lg, xl) are reserved for primary interactive elements that demand attention and approach

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background-color: rgb(255, 123, 0) with text-color: white, padding: 12px 24px, height: 48px, and rounded.lg (16px). On hover, the background transitions to #ff8f1a (a lighter orange) over 200ms ease-out; on active, it darkens to #e66d00. All button text uses label-md typography (14px, 600 weight). The button-secondary variant uses a transparent background with a 1px border at primary (#ff7b00) and primary text color; on hover, it fills with primary-container (#ffe3cc) and shifts text to on-primary-container (#663300). Button-ghost is used for tertiary actions (e.g., 'Skip to content') with transparent background, on-surface text, and rounded.full (9999px); on hover, it fills with surface-cont

Do's and Don'ts

**Do**

• Do use primary orange (#ff7b00) exclusively for call-to-action buttons and key interactive elements—never use it for passive surfaces or backgrounds.
• Do maintain the 1.5em line-height (24px for 16px base) on all body text to ensure comfortable reading across devices.
• Do apply the soft shadow system (0 3px 8px rgba(0, 0, 0, 0.15)) consistently to cards and elevated surfaces; avoid heavy drop-shadows.
• Do use BMDupletDSP for all display and headline text to reinforce brand personality; reserve BMDupletTXT for body and labels.
• Do transition all interactive states (hover, focus, active) over 200ms ease-out to provide smooth, predictable feedback.
• Do respect the 24px gutter (md spacing) between sections and 12px padding (sm spacing) inside components for visual rhythm.
• Do use rounded.lg (16px) for primary buttons and rounded.md (12px) for cards to balance approachability with structure.

**Don't**

• Don't use the primary orange (#ff7b00) for body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and key accents.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12) on any element; the design system prioritizes flatness and clarity.
• Don't use system fonts (system-ui, -apple-system, sans-serif) for display or headline text; always specify BMDupletDSP or HelveticaDSP.
• Don't set line-height below 1.5em on body text or below 1 on headlines; tight leading reduces readability and contradicts the clean aesthetic.
• Don't mix rounded-corner radii arbitrarily; use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't apply transitions longer than 300ms on interactive elements; slower transitions feel sluggish and reduce perceived responsiveness.
• Don't use the secondary magenta (#b71029) or tertiary purple (#7b3dbe) as primary action colors; they are supporting accents only.