Allegro

Overview

Allegro is Poland's largest e-commerce marketplace, serving millions of buyers and sellers with a platform that prioritizes clarity, trust, and transaction efficiency. The design system embodies 'Functional Minimalism'—a philosophy that strips away ornament to reveal essential information, using a clean neutral foundation (whites, grays, and light surfaces at #ffffff, #f5f5f5, #e9ecef) punctuated by a vibrant orange accent (#ff6600) that signals actionable moments and brand presence. The emotional response is one of confidence and accessibility: users feel guided, never overwhelmed, and the interface recedes to let products and deals take center stage.

The brand voice is direct, pragmatic, and reassuring—never flowery or trendy. Allegro speaks to everyday people buying everyday things, so language is conversational yet precise. Tone examples: 'Add to cart' (not 'Acquire item'), 'You have been blocked' (not 'Access denied'), 'Please let us know' (not 'Submit feedback'). The vocabulary favors action verbs and concrete nouns. Example sentence in brand voice: 'Check your bid status—you're currently winning this auction.'

Colors

The color system is anchored in a trust-first palette: surfaces are pure white (#ffffff) and soft grays (#f5f5f5, #e9ecef, #f0f9fa) that create visual breathing room and reduce cognitive load. The primary accent is Allegro Orange (#ff6600), used exclusively for call-to-action buttons, active states, links, and brand moments—it appears infrequently but commands attention when it does. Secondary grays (#505050 for text, #6c757d for disabled/muted content, #d0d0d0 for borders) establish hierarchy and support readability across all text sizes. Tertiary blue (#0099cc) is reserved for informational elements, links in body copy, and secondary actions. Error red (#d32f2f) signals validation failures and destructive actions with high contrast against white backgrounds (WCAG AA compliant at 4.5:1 mi

Typography

The type system uses Segoe UI as the primary family (with fallbacks to Tahoma, Geneva, Verdana, sans-serif), chosen for its clarity on screen and universal availability across Windows, macOS, and web. Display (56px, 700 weight, -0.02em tracking) anchors hero moments and major section headers; Headline-lg (32px, 700 weight) breaks up content zones; Headline-md (24px, 600 weight) introduces subsections; Title-lg (18px, 600 weight) labels cards and form sections; Body-lg (16px, 400 weight, 24px line-height) carries primary content; Body-md (14px, 400 weight, 20px line-height) fills secondary text and descriptions; Label-md (13px, 600 weight, 0.02em tracking) marks buttons and interactive labels; Label-sm (12px, 500 weight) tags badges and helper text. The progression from display → body creat

Layout

The layout follows a 12-column grid system with a max-width container of 1280px, ensuring content remains scannable on desktop while adapting fluidly to tablets and mobile via CSS Grid or flexbox. The spacing scale uses an 8px base unit: xs (4px) for micro-adjustments within components, sm (12px) for internal padding in buttons and inputs, md (24px) for card padding and section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. White-space is treated as a first-class design element—sections are separated by lg spacing (40px) vertically to prevent visual fatigue, and horizontal gutters use md spacing (24px) on desktop, reducing to sm (12px) on mobile. The container max-width of 1280px prevents line lengths from exceeding ~75 characters at body-md

Elevation & Depth

Elevation is achieved through a restrained shadow system that avoids depth illusions in favor of subtle layering. The shadow palette consists of three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for resting cards and dropdowns, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and open panels, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements. Shadows use a soft black (rgba(0, 0, 0, ...)) rather than pure black to maintain the light, airy aesthetic. Hover transitions apply a 200ms ease-out timing function to shadow and background-color changes, creating a responsive bu

Shapes

The shape philosophy is 'Approachable Precision'—corners are subtly rounded to feel modern and friendly, but not so much that they distract from content. The rounded scale progresses from sm (2px) for minimal softening on borders and dividers, DEFAULT (4px) for buttons, inputs, and small cards, md (6px) for medium containers, lg (8px) for larger cards and panels, xl (12px) for modals and hero sections, and full (9999px) for badges and pill-shaped elements. Buttons use DEFAULT (4px) to signal they are clickable without appearing toy-like; form inputs also use DEFAULT (4px) for visual consistenc

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses #ff6600 background with white text, 44px height, 12px vertical / 24px horizontal padding, and DEFAULT (4px) border-radius. On hover, the background darkens to #e55a00 with a 200ms ease-out transition; on active/press, it darkens further to #cc4d00. Button-secondary uses a transparent background with #ff6600 text and a 1px #ff6600 border, allowing secondary actions to coexist without visual dominance. Button-tertiary uses a transparent background with #000000 text and a 1px #d0d0d0 border, suitable for low-priority actions. All buttons apply a cursor: pointer and disable text-selection to prevent accidental highlighting during rapid clicks.

Containers & Surfaces Cards are the primary cont