Multibrand Project

Overview

Multibrand Project is an Italian e-commerce platform dedicated to selling discounted consumer electronics—primarily Apple products, tablets, notebooks, and gaming consoles—at below-market prices. The brand serves price-conscious Italian shoppers seeking authentic, verified deals with trust-driven commerce. The aesthetic is "Accessible Minimalism": a clean, light-filled interface with strategic pops of vibrant green (#45bf55) and cyan (#02bacd) that signal action, urgency, and reliability. The emotional response is one of clarity and confidence—users feel they're getting a legitimate deal in a trustworthy environment, not a chaotic discount site. The voice is direct, conversational, and Italian-market-aware: practical, benefit-focused, and occasionally playful (e.g., "Sconti Black Friday fino al 50%"). Vocabulary emphasizes trust markers: "Verificate" (verified), "Sicuri" (secure), "Sottocosto" (below cost). Example sentence in brand voice: "Acquista il tuo MacBook personalizzato oggi e ricevilo entro 24 ore con spedizione gratuita."

Colors

The color system balances a neutral, trust-building foundation with energetic accent colors that drive conversion. Surface colors (#ffffff, #f6f6f8, #e6e6e8) create a clean, spacious canvas that emphasizes product photography and reduces cognitive load. Primary green (#45bf55, rgb(69, 191, 85)) is the dominant action color—used exclusively on "Add to Cart," "Buy Now," and primary CTAs. It signals growth, safety, and positive action, reinforcing the "good deal" message. Secondary cyan (#02bacd) is deployed for secondary actions, highlights, and trust badges (e.g., "Acquisti Sicuri," verified review indicators). Tertiary red (#ec0101) is reserved for urgent scarcity messaging ("Solo 3 disponibili") and error states, creating visual tension that encourages immediate purchase. On-surface text

Typography

The type system uses Poppins exclusively, a geometric sans-serif that conveys friendliness and modernity while maintaining legibility at small sizes—critical for product listings and pricing. Display (56px, 700 weight) anchors hero sections and major category headers; headline-lg (40px, 600) frames section titles like "MacBook Personalizzati"; headline-md (28px, 600) breaks up content zones. Body-md (15px, 400) is the workhorse for product descriptions, pricing, and body copy—set at 15px to match the rendered DOM default and maintain visual consistency. Label-md (14px, 600) is used for button text, form labels, and inline badges; label-sm (12px, 500) for secondary metadata and fine print. Letter-spacing is tightened on display sizes (-0.03em) to create visual weight, while body text uses n

Layout

The layout uses a 12-column Bootstrap-derived grid with a max-width of 1140px (matching the rendered container), centered with 15px gutters on each side. The page rhythm follows a "card-based" model: hero banner (full-width), then stacked sections of product cards in 3–4 column layouts on desktop, collapsing to 2 columns on tablet and 1 on mobile. White-space is generous: lg spacing (40px) separates major sections, md spacing (24px) separates card groups, and sm spacing (12px) separates inline elements. The container uses padding-right: 15px and padding-left: 15px at all breakpoints, creating a consistent gutter. Product cards are 100% width within their column, with md padding (24px) inside. Section headers (headline-md) sit above card grids with md spacing below. The search bar is positi

Elevation & Depth

Depth is achieved through subtle shadows and border treatments rather than layering or blur effects. Level 1 (Base): flat white background (#ffffff) with no shadow. Level 2 (Cards): 1px solid border in outline-variant (#dddddd) + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.13)—this creates a gentle lift without heaviness. Level 3 (Hover/Active Cards): box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1)—a tighter, more defined shadow that signals interactivity. Buttons use no shadow in default state; on hover, they shift background color rather than adding shadow, maintaining a flat aesthetic. Input fields us

Shapes

The shape philosophy is "Soft-Technical Pragmatism": rounded corners are used sparingly and strategically to soften the interface without introducing unnecessary complexity. Buttons and inputs use sm radius (3px)—a subtle rounding that feels modern without being playful. Cards use md radius (10px) to create a distinct container feel while remaining professional. Badges and pills use full radius (50%) to signal completeness and finality (e.g., "Verificato" badges). Modals and overlays use lg radius (20px) for a softer, more approachable appearance. The rationale: 3px on interactive elements (bu

Components

Action Elements Buttons are the primary conversion driver. Button-primary uses background-color: rgb(69, 191, 85), color: rgb(255, 255, 255), padding: 12px 20px, height: 40px, border-radius: 3px, font-weight: 600, font-size: 14px. On hover, background shifts to #3da847 with a 200ms ease-in-out transition. Button-secondary uses background-color: rgb(0, 0, 0), same padding/height/radius, for secondary actions like "Continue Shopping." Button-ghost is transparent with a 1px border in primary green; on hover, it fills with primary-container (#d4f5d7) and text becomes on-primary-container (#1b5e23). All buttons have cursor: pointer and no text-decoration. Apply transition: all 200ms ease-in-out on all button states to ensure smooth feedback.

Containers & Surfaces Cards are the primary

Do's and Don'ts

**Do**

• Do use primary green (#45bf55) exclusively for primary CTAs and conversion actions—never use it for decorative elements or secondary UI.
• Do maintain the 15px gutter on all sides of the container at all breakpoints to preserve the consistent edge-to-edge rhythm.
• Do apply the 200ms ease-in-out transition to all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do use Poppins at 15px for body text and 14px for labels to match the rendered DOM and ensure consistency across the platform.
• Do reserve tertiary red (#ec0101) for scarcity messaging and error states only—overuse dilutes its urgency.
• Do stack sections vertically with lg spacing (40px) between them to create clear visual breaks and improve scanability on mobile.

**Don't**

• Don't use secondary cyan (#02bacd) on primary CTAs—it's reserved for secondary actions and trust badges; mixing dilutes the primary action hierarchy.
• Don't apply shadows > 0 0 2px 2px rgba(0, 0, 0, 0.1) to cards or containers—the interface should feel flat and modern, not layered.
• Don't use border-radius > 10px on product cards or form containers; it reads as overly playful and undermines the trust-driven aesthetic.
• Don't set font-size < 14px for body text or form labels—it harms accessibility and readability, especially on mobile devices.
• Don't mix Poppins with system fonts or fallbacks; always declare Poppins first and let the browser load from Google Fonts.
• Don't use color alone to convey status or urgency—always pair color with text labels (e.g., "Solo 3 disponibili" + red background, not red alone).