Belledonne Paris

Overview

Belledonne Paris is a French luxury sneaker brand that reinterprets classic silhouettes through a lens of modern minimalism and refined heritage. The design system embodies 'Architectural Restraint'—a philosophy that prioritizes clean lines, precise proportions, and understated elegance over visual noise. The brand serves discerning customers who value craftsmanship, historical context, and timeless design; the UI evokes a sense of curated sophistication, where every element serves a purpose and nothing is superfluous. The emotional response is one of quiet confidence: the user feels they are engaging with a brand that understands heritage deeply and executes with precision.

The brand voice is measured, knowledgeable, and respectful of the user's intelligence. Vocabulary leans toward heritage terminology ('silhouette,' 'classic,' 'reinterpretation,' 'crafted') rather than trend-speak. Tone is never breathless or hyperbolic; instead, it is direct and factual, allowing the product photography and design to speak. Example sentence in brand voice: 'The B1 arrives as a new classic—a refined interpretation of court-shoe geometry, built to last.'

Colors

The color palette is anchored in warm, earthy neutrals that reflect both the leather and canvas materials of sneaker construction. Primary (#31261d, a deep warm brown) is the dominant text and interactive color, used for body copy, headlines, and active states. It conveys authority and heritage without the coldness of pure black. Secondary (#a9532f, a terracotta-rust) appears as an accent for highlights, links, and supporting CTAs, evoking the warmth of aged leather. Tertiary (#b75858, a muted rose-red) is reserved for status indicators and secondary accents, adding visual interest without competing for attention.

The surface stack is built on off-white and cream tones: surface (#fbfbf7) is the primary background, with surface-container-high (#e9ecef) used for hover states and elevated su

Typography

The type system pairs Asul (a geometric serif with strong personality) for headlines and display text with Mier A (a refined humanist sans-serif) for body and UI copy. This pairing communicates heritage through the serif while maintaining legibility and modernity through the sans. Display (60px, 700 weight, -0.03em tracking) is reserved for hero statements and brand moments; headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and product descriptions, while body-md (16px, 400 weight, 24px line-height) serves as the default UI text. Label-md (14px, 500 weight, 0.01em tracking) is applied to buttons, form labels, and navigation; label-sm (12px, 500 weight, 0.05e

Layout

The layout system uses a 12-column grid with a max-width of 1200px, maintaining a fluid layout on mobile (16px gutter on each side) and a fixed container on desktop. Page rhythm is established through consistent use of the spacing scale: lg spacing (40px) separates major sections (hero, product grid, brand story), md spacing (24px) is used for card padding and section internal margins, and sm spacing (12px) governs component-level gaps (button groups, form fields). The design favors generous white space—sections are never crowded, and the eye is guided through clear visual hierarchy rather than density. Container max-width of 1200px ensures that product imagery (which is central to the brand) remains prominent without overwhelming the viewport. On mobile, padding-inline is consistently 16p

Elevation & Depth

Depth is conveyed through a restrained shadow system and border treatment rather than dramatic layering. Level 1 (Base): flat surfaces with no shadow, using only a 1px solid border in outline or outline-variant color (rgba(49, 38, 29, 0.15)). Level 2 (Cards, Input Fields): elevation-sm (0 1px 2px rgba(49, 38, 29, 0.06)) applied on hover, with border color transitioning from outline-variant to primary. Level 3 (Modals, Overlays): elevation-lg (0 16px 40px rgba(49, 38, 29, 0.12)) with a 1px border at rgba(49, 38, 29, 0.2). All transitions between levels use a 0.2s ease timing function. The inset

Shapes

The shape philosophy is 'Refined Minimalism'—corners are kept subtle and functional rather than decorative. Buttons and form inputs use rounded.DEFAULT (0.5rem / 8px), a gentle curve that softens the geometry without appearing playful or rounded. Cards and larger containers use rounded.DEFAULT as well, maintaining visual consistency across component scales. The only exception is badges and pills, which use rounded.full (9999px) to create a distinct visual category for status and metadata. This restraint in rounding reinforces the brand's architectural precision: the UI feels engineered rather

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height with 16px vertical and 24px horizontal padding. Primary buttons (button-primary) have a solid background in primary color (#31261d) with on-primary text (#fbfbf7), a 1px border in primary, and a 0.25s ease transition. On hover (button-primary-hover), the background shifts to primary-container (#8a6f55) and text to on-primary-container (#fbfbf7), maintaining the border. Secondary buttons (button-secondary) are transparent with a 1px primary border and primary text; on hover, they gain a surface-container-high background while keeping the border and text color. Ghost buttons (button-ghost) are text-only with an underline (text-underline-offset: 3px) and no border; on hover, they gain a subtle sur

Do's and Don'ts

**Do**

• Do use primary (#31261d) for all body text, headlines, and active interactive states—it is the brand's anchor color and conveys authority.
• Do apply the 0.25s ease transition to all button state changes (background-color, color, box-shadow) to create a refined, responsive feel.
• Do maintain consistent 1px solid borders on cards and inputs using outline or outline-variant colors; never use thick or decorative borders.
• Do use Asul for all headlines and display text (40px and above); reserve Mier A for body copy and UI labels to maintain the serif/sans pairing.
• Do respect the spacing scale: use lg (40px) for section separation, md (24px) for card padding, and sm (12px) for component-level gaps.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels over product photography to ensure legibility without compromising the aesthetic.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; stick to the defined surface and on-surface tokens (#fbfbf7 and #31261d).
• Don't apply drop shadows to cards or buttons; use only the elevation-sm/md/lg tokens for specific contexts (modals, overlays).
• Don't round corners beyond rounded.lg (1rem / 16px) on any component except badges; excessive rounding contradicts the architectural restraint aesthetic.
• Don't use secondary (#a9532f) or tertiary (#b75858) as primary text colors; reserve them for accents, links, and status indicators only.
• Don't mix Asul and Mier A weights arbitrarily; follow the defined typography scale (display, headline-lg, headline-md, title-lg, body-lg, body-md, label-md, label-sm).
• Don't add animations or transitions longer than 0.25s on interactive elements; the brand favors precision and immediacy over playfulness.