Malakoff 1855

Overview

Malakoff 1855 is a heritage French chocolate brand that bridges nostalgia with contemporary e-commerce. The design system embodies 'Warm Heritage Modernism'—a movement that honors the brand's 1855 legacy through earthy, chocolate-inspired color palettes while maintaining clean, accessible digital interfaces. The aesthetic evokes the sensory experience of opening a box of artisanal chocolates: rich browns (#53302b), warm golds (#f18800), and cream whites (#ffffff) create an atmosphere of indulgence and trust. The UI prioritizes clarity and delight, transforming product discovery into a journey through generations of chocolate craftsmanship.

The brand voice is intimate, nostalgic, and refined—never corporate or distant. Malakoff speaks to the emotional memory of chocolate ('le chocolat de mon enfance'), using poetic language and gentle humor. Typography balances the decorative Cookie font (used sparingly for headings and brand moments) with the readable, warm Source Sans Pro for body content. Example sentence in brand voice: 'Retrouvez le goût de votre enfance—chaque barre Malakoff raconte une histoire de 170 ans de passion chocolatière.'

Colors

The color system centers on a warm, earthy palette rooted in chocolate and French heritage. Primary (#f18800, a vibrant burnt orange) is the signature accent used exclusively on CTAs, interactive elements, and brand highlights—it commands attention without aggression, evoking the warmth of freshly roasted cocoa. Secondary (#53302b, a deep chocolate brown) anchors the brand identity and appears in headers, footers, and premium product sections, creating visual weight and sophistication. Tertiary (#007bff, a confident blue) provides contrast for informational elements, status indicators, and secondary interactions.

The surface stack is deliberately light and neutral: surface (#ffffff) is the primary canvas, with surface-container variants (#f8f9fa to #dee2e6) used for subtle layering and ca

Typography

The type system balances decorative heritage with modern readability. Cookie (a flowing, script-like font from Google Fonts) is reserved for display-level headings (70px, fontWeight 400) and brand moments, appearing in hero sections and section titles to evoke the handwritten, artisanal nature of Malakoff's heritage. Source Sans Pro (loaded from Google Fonts) serves all body, label, and interface text, providing warmth and legibility at sizes from 12px (label-sm) to 40px (headline-lg). The type scale follows a 1.4× progression: display 70px → headline-lg 40px → headline-md 28px → title-lg 20px → body-lg 18px → body-md 16px → label-md 14px → label-sm 12px. Line-height is generous (1.5–1.75 for body text) to enhance readability on e-commerce product pages. Letter-spacing is minimal (0 to 0.0

Layout

The layout system uses a 12-column grid with a max-width of 1600px, accommodating both desktop and tablet viewports. The gutter is 24px, providing breathing room between sections without excessive whitespace. Sections are separated using the lg spacing token (40px) for major rhythm breaks, creating a deliberate, unhurried pace that reflects the brand's heritage. Container widths vary by context: hero sections span full-width with internal padding of 24px (md spacing), while product grids use 1140px–1600px containers to showcase imagery prominently. The homepage rhythm alternates between full-width hero (with 53302b background), narrow content sections (white background, 24px padding), and product showcase areas (dark brown background, 40px vertical spacing). Inputs and form fields use 24px

Elevation & Depth

Depth is achieved through subtle, restrained shadows and color layering rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small buttons, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and standard containers, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and floating elements. Cards use a 1px solid border in outline-variant (#dee2e6) combined with md shadow to create a clean, defined appearance. Hover states elevate cards to lg shadow with a transition of 0.3s ease, signaling interactivity wit

Shapes

The shape philosophy is 'Refined Simplicity'—minimal border-radius that feels modern without sacrificing warmth. Buttons and inputs use 0.5rem (8px) border-radius, a subtle rounding that feels contemporary and approachable. Cards and containers use 0.75rem (12px) for slightly more presence. Modals and elevated surfaces use 1rem (16px) to signal importance and create visual distinction. The full-radius (9999px) is reserved for badges and pill-shaped elements, reinforcing their role as secondary, informational components. No elements use sharp corners (0px radius), maintaining the brand's refine

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses background #f18800 (primary) with white text, 7px 17.5px padding, and 0.5rem border-radius. On hover, the background transitions to #ff9a52 (primary-fixed-dim) over 0.3s ease. The secondary button uses #53302b (secondary) background with white text and 12px 24px padding for a more substantial feel. Ghost buttons have a transparent background with a 1px solid #f18800 border and primary text; on hover, they fill with #ffd9b3 (primary-container) background. All buttons include a 0.3s ease transition on background-color and box-shadow to reinforce interactivity.

Containers & Surfaces Cards are the primary content container, using white background (#ffffff) with 1px solid #dee2e6 border and 0 3px 8px

Do's and Don'ts

**Do**

• Do use the primary color (#f18800) exclusively for CTAs, focus states, and brand-critical interactions—it is the visual signature of user intent.
• Do apply the Cookie font only to display-level headings (70px) and brand moments; never use it for body text or labels, as it sacrifices legibility.
• Do maintain 24px (md spacing) as the default padding for cards, sections, and containers; this creates the brand's signature breathing room.
• Do use the 0.3s ease transition on all interactive elements (buttons, cards, inputs) to reinforce the brand's refined, deliberate pace.
• Do layer colors using the surface-container stack (#f8f9fa to #dee2e6) to create subtle visual hierarchy without harsh contrast.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and standard containers; reserve lg shadow for modals and floating elements only.

**Don't**

• Don't use the secondary color (#53302b) for interactive elements or CTAs; it is reserved for structural elements (headers, footers, section backgrounds) only.
• Don't apply border-radius values smaller than 0.5rem (8px) or larger than 1.5rem (24px) outside of the full-radius (9999px) badge exception—this maintains visual consistency.
• Don't mix Cookie and Source Sans Pro in the same heading or section; Cookie is for display only, Source Sans Pro for all supporting text.
• Don't use shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard UI elements; excessive shadow depth contradicts the brand's refined aesthetic.
• Don't place small labels (label-sm, 12px) over busy product imagery without applying text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) for legibility.
• Don't use the tertiary color (#007bff) for primary CTAs or brand-critical interactions; it is reserved for informational elements and secondary actions only.