Centre Social de l'Hommelet

Overview

Centre Social de l'Hommelet is a community-centered institution serving Roubaix's families, youth, and seniors since 1985. The design system embodies 'Warm Institutional Modernism'—a philosophy that marries the trustworthiness of civic design with the human warmth of terracotta and natural earth tones. The visual language prioritizes clarity and approachability: deep teal (#0a4548) anchors institutional authority, while burnt orange (#d36b42) and golden accents (#e8b923) inject vitality and human connection. The aesthetic evokes a welcoming community hub—neither cold nor overly casual, but genuinely present and ready to listen.

The brand voice is direct, compassionate, and action-oriented. Sentences are short and clear, avoiding jargon. The tone assumes the visitor may be seeking help, navigating a complex situation, or simply looking for connection—so every word reassures without condescension. Example: 'Your question, your journey, your activity — a team at your side, every day.' Typography pairs Outfit (bold, confident headlines) with Inter (warm, readable body text), reinforcing the balance between institutional presence and human accessibility.

Colors

The color system is built on three pillars: institutional trust, human warmth, and actionable clarity. Primary (#0a4548) is the deep teal used for navigation, headers, and structural elements—it conveys stability and civic authority without coldness. Secondary (#d36b42), a burnt terracotta, is the primary call-to-action color on buttons, links, and highlights; it's warm, inviting, and distinctly human. Tertiary (#e8b923), a muted gold, accents key information and badges, evoking both optimism and heritage.

Surface colors follow a warm, off-white palette: the base background is #f7f3ee (soft cream), with container layers stepping through #efe8df, #f0ebe6, and #e8e1d8 to create subtle depth without harsh contrast. Text on light surfaces uses #0a1b1d (near-black with teal undertone) for warm

Typography

The type system reflects the brand's dual nature: Outfit (geometric, confident) for headlines and navigation, Inter (humanist, open) for body copy. Display (60px, 800 weight) is reserved for hero statements and major page titles, commanding attention without aggression. Headline-lg (42px, 700 weight) is used for section headers and card titles, maintaining visual hierarchy. Body-lg (18px, 400 weight) is the primary reading size, set at 28px line-height for comfortable scanning. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and interactive labels, ensuring clarity at smaller scales. All headline sizes use negative letter-spacing (-0.04em to -0.01em) to tighten the letterforms and reinforce confidence. On small labels over busy backgrounds (e.g., badges on hero ima

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing flexible content arrangement from mobile (single column) to desktop (multi-column). The gutter is consistently 24px, creating breathing room without excessive whitespace. Container max-widths vary by content type: hero sections span full-width with overlay depth, while content cards and forms use 900px–1024px to maintain readability. Spacing follows the semantic scale: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The off-white background (#f7f3ee) is the default, with surface-container layers (#efe8df, #f0ebe6) used to create subtle card and panel separation. This warm, low-contr

Elevation & Depth

Depth is conveyed through a carefully calibrated shadow system that avoids harsh contrast. Level 1 (Base): the warm cream background (#f7f3ee) with no shadow. Level 2 (Cards & Panels): 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts content slightly. Level 3 (Modals & Overlays): 0 16px 34px rgba(16, 42, 44, 0.08), a larger, softer shadow that creates clear separation. Level 4 (Hero Overlay): 0 18px 40px rgba(16, 42, 44, 0.13), the deepest shadow, used sparingly for full-screen overlays. All shadows use the primary color (teal) with low opacity to maintain warmth and avoid the co

Shapes

The shape philosophy is 'Approachable Institutional'—rounded enough to feel human and welcoming, but not so rounded as to lose authority. Buttons and interactive elements use 1rem (16px) border-radius, creating a soft, friendly appearance while maintaining clear clickability. Cards and panels use 0.75rem (12px) for a slightly tighter radius that suggests structure. Input fields use 0.5rem (8px), a more conservative radius that signals form-like precision. The full-radius (9999px) is reserved for badges and small accent elements. This graduated approach ensures visual consistency: larger, more

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (secondary color, #d36b42) use 48px height, 12px–24px padding, and 1rem border-radius. The label is set in Outfit 14px 600 weight. On hover, the background shifts to #b85d38 (darker terracotta) with a 150ms transition (ease-out). On active/press, it darkens further to #9f4d2f. Secondary buttons are transparent with a 2px primary-color border, allowing users to explore without commitment. All buttons include a subtle box-shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to lift them from the surface.

Containers & Surfaces Cards are the primary content container, using surface-bright (#ffffff) background with 0.75rem border-radius and 24px padding. The default shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the s

Do's and Don'ts

**Do**

• Do use the secondary color (#d36b42) for all primary CTAs—it's warm, inviting, and distinctly recognizable as the brand's call-to-action.
• Do pair Outfit headlines with Inter body text to maintain the balance between institutional confidence and human warmth.
• Do apply the warm cream background (#f7f3ee) as the default surface to reduce visual fatigue and create a welcoming environment.
• Do use the primary teal (#0a4548) for navigation, headers, and structural elements to anchor the page and convey institutional trust.
• Do include subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) on cards to create depth without harsh contrast.
• Do apply negative letter-spacing (-0.02em to -0.04em) on headlines to tighten letterforms and reinforce confidence.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary colors—the warm off-white (#f7f3ee) and deep teal (#0a4548) are the brand anchors.
• Don't apply harsh shadows (box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3))—they feel cold and institutional; use soft, warm-tinted shadows instead.
• Don't mix Outfit and Inter at the same size and weight—maintain clear hierarchy: Outfit for headlines, Inter for body.
• Don't use the secondary color (#d36b42) for non-interactive elements or backgrounds; reserve it for buttons, links, and clear CTAs.
• Don't exceed 1280px container width; narrower containers (900px–1024px) maintain readability and focus.
• Don't apply border-radius below 0.5rem (8px) to buttons or primary interactive elements; the brand requires approachable, rounded shapes.