Gestion-Traiteur

Overview

Gestion-Traiteur is a unified business platform designed for professional catering operations across North America and Europe. The design system embodies a 'Precision-Driven Minimalism' aesthetic—combining a clean, light-neutral canvas (rgb(251, 250, 252)) with a distinctive purple-to-red gradient accent system that guides users through complex workflows. The brand personality is professional yet approachable: the interface prioritizes clarity and efficiency without sacrificing warmth. Every interaction feels intentional, from the 72px display headlines in Sora (fontWeight: 700, letterSpacing: -0.04em) to the measured 24px gutters that create breathing room between sections. The emotional response is one of control and confidence: users feel they can manage their entire catering business—from online orders to invoicing—without cognitive overload.

The voice is direct, solution-oriented, and bilingual-ready (French-Canadian and French). Vocabulary favors concrete business outcomes over abstract features: 'Commande en ligne, propositions, production, livraison et facturation réunies' (Online ordering, proposals, production, delivery, and invoicing unified) rather than 'powerful integrated tools.' The brand avoids hyperbole and marketing clichés. Example sentence in brand voice: 'Démo de 45 minutes—Support très rapide' (45-minute demo—very fast support), which conveys reliability through specificity rather than superlatives.

Colors

The color system is built on a 'Gradient Accent' philosophy: a light, neutral surface (rgb(251, 250, 252) / #fbfafc) provides the foundation, while a vibrant purple-to-red gradient (primary #6a1f8a → secondary #2c5f9e → tertiary #c0282a) creates visual hierarchy and guides interaction. Primary (#6a1f8a, a deep purple) is reserved exclusively for CTAs, focus states, and brand-critical interactive elements—it appears on 'Réserver une démo' buttons (padding: 15px 26px, borderRadius: 12px) and link underlines. Secondary (#2c5f9e, a professional blue) supports secondary actions and module highlights. Tertiary (#c0282a, a warm red) signals alerts, errors, and high-priority information. The surface stack uses precise increments: surface-container-lowest (#ffffff) for card backgrounds, surface-con

Typography

The type system uses a two-family strategy: Sora (fontFamily: 'Sora', fontWeight: 700) for all headlines and display text, and Manrope (fontFamily: 'Manrope', fontWeight: 400–700) for body copy and labels. This pairing creates a clear visual distinction between structural hierarchy (Sora's geometric, confident letterforms) and readable prose (Manrope's open counters and generous spacing). Display (72px, lineHeight: 80px, letterSpacing: -0.04em) is reserved for hero headlines like 'Du web à la cuisine.' Headline-lg (48px, lineHeight: 56px) anchors section introductions. Body-lg (18px, lineHeight: 28px) is used for hero copy and prominent descriptions, while body-md (16px, lineHeight: 24px) serves as the default paragraph size. Label-md (14px, fontWeight: 700, letterSpacing: 0.01em) is appli

Layout

The layout follows a 12-column grid with a fixed container max-width of 1200px, centered on the viewport with symmetric margins. The page rhythm uses a semantic spacing scale: lg (40px) for major section separation (e.g., between hero and feature sections), md (24px) for component padding and inter-element spacing within sections, and sm (12px) for tight groupings (e.g., icon + label pairs). The hero section uses a centered, single-column layout with a max-width of ~900px for the headline and copy, creating a focal point before content expands into multi-column grids below. Gutters are consistently 24px on desktop, collapsing to 16px on tablets and 12px on mobile. White-space is generous but purposeful: the hero copy sits in a 16px line-height body-lg, with 40px of vertical space below bef

Elevation & Depth

Depth is conveyed through a subtle shadow and border system rather than dramatic layering. Level 1 (Base Surface) is the page background (rgb(251, 250, 252)), which has no shadow. Level 2 (Standard Cards) uses a 1px solid border in surface-variant (#e5e1ea) and a soft shadow (box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)), creating gentle separation from the background. Level 3 (Elevated/Modals) applies a stronger shadow (box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)) and may use a slightly darker background (surface-container-high: #ede8f2). Hover states on cards transition to Level 3 over 200ms (t

Shapes

The shape philosophy is 'Soft-Technical Precision'—rounded corners are used consistently but conservatively to balance approachability with professional authority. Buttons use lg (16px border-radius), creating a friendly, modern appearance without feeling playful or casual. Cards and containers use lg (16px) as well, establishing a cohesive visual language. Input fields and smaller interactive elements use DEFAULT (8px), which is tight enough to feel controlled but rounded enough to avoid harshness. Badges and pills use full (9999px border-radius), creating a capsule shape that signals seconda

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (backgroundColor: #6a1f8a, textColor: #ffffff, padding: 15px 26px, borderRadius: 16px, height: 48px, fontWeight: 700) are used for high-priority CTAs like 'Réserver une démo' and 'Voir la plateforme'. On hover, the background shifts to #5a1a7a (a 15% darker purple) with a 200ms ease-in-out transition, and an optional subtle shadow (0 2px 8px rgba(106, 31, 138, 0.15)) is applied. Secondary buttons (backgroundColor: transparent, border: 2px solid #6a1f8a, textColor: #6a1f8a, same padding and height) are used for alternative actions; on hover, the background fills with primary-container (#d9a3e0) and text shifts to on-primary-container (#17141f). Ghost buttons (backgroundColor: transparent, no border, textColor

Do's and Don'ts

**Do**

• Do use primary (#6a1f8a) exclusively for CTAs, focus states, and brand-critical interactive elements—never use it for backgrounds or non-interactive text.
• Do apply 24px (md spacing) as the default padding and margin for sections and components; use 40px (lg spacing) only for major section breaks.
• Do use Sora (fontWeight: 700) for all headlines and Manrope (fontWeight: 400) for body copy; never mix families within a single text block.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to telegraph user intent.
• Do use 16px border-radius for buttons and cards, 8px for inputs, and 9999px for badges—maintain consistency within component families.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#17141f) for primary text and on-surface-variant (#4a4556) for secondary text.
• Don't apply shadows to buttons in their default state; rely on color contrast and typography weight to establish hierarchy.
• Don't mix primary, secondary, and tertiary colors in a single CTA or interactive element; each color should have a single, clear purpose.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 20px, full: 9999px)—this breaks visual consistency.
• Don't apply letter-spacing to body copy; reserve negative letter-spacing (-0.04em to -0.01em) for headlines only to maintain readability.