Cobloc Architecture

Overview

Cobloc Architecture is a French design studio that creates collaborative, context-responsive architectural projects through iterative methodology. The design system embodies 'Refined Minimalism'—a movement that pairs austere geometric forms with warm, humanistic typography to convey precision without coldness. The aesthetic evokes clarity, intentionality, and intellectual rigor: a cream-white canvas (#ffffff) anchors the interface, while a bold golden-yellow accent (#fbd600) punctuates key interactions and draws the eye to calls-to-action. The brand personality is measured, professional, and intellectually curious—speaking to architects, collaborators, and clients who value process over spectacle.

The voice is direct and unpretentious. Cobloc uses active verbs, avoids marketing hyperbole, and grounds communication in tangible outcomes. Example sentence in brand voice: 'Nous concevons des espaces adaptés à votre contexte—chaque projet commence par écouter.' (We design spaces adapted to your context—every project begins by listening.) Typography pairs a serif display font (Ivory LL) for headlines with a geometric sans-serif (Funnel Sans) for body copy, creating a visual hierarchy that feels both classical and contemporary. Accent colors—golden yellow for primary actions, burnt orange for secondary emphasis, and deep charcoal for tertiary elements—are deployed sparingly to maintain visual discipline.

Colors

The color system operates on a principle of 'Chromatic Restraint': the majority of the interface is neutral (white, light grays, and warm beiges), with strategic accent colors reserved for interactive elements and brand moments. Primary (#fbd600) is the signature golden yellow used exclusively on call-to-action buttons, active states, and key highlights—it commands attention without aggression, evoking warmth and approachability. Secondary (#ff6900) is a burnt orange deployed for supporting actions, badges, and secondary emphasis; it provides visual variety while maintaining the warm, earthy palette. Tertiary (#0a0a0a) is near-black, used for body text, borders, and secondary buttons to ensure legibility and visual hierarchy. The surface stack progresses from pure white (#ffffff) for the m

Typography

The type system balances classical serif display typography with contemporary geometric sans-serif body copy, creating a 'Dual-Register' hierarchy that signals both tradition and innovation. Display and headline levels use Ivory LL (a serif font from the Georgia family), set at 56px–40px with loose line-height (64px–48px) and subtle negative letter-spacing (-0.02em to -0.01em) to create elegant, spacious headlines that command attention without shouting. Body and label text use Funnel Sans, a geometric sans-serif, at 16px–14px with standard letter-spacing (0.01em–0.02em) for clarity and rhythm. Monospace labels (DM Mono, 12px, 500 weight) are reserved for metadata, timestamps, and secondary UI text, adding technical precision where needed. When displaying small labels over busy backgrounds

Layout

The layout system uses a fluid 12-column grid with a maximum container width of 900px, centered on the viewport. This constraint balances readability (optimal line length ~60–80 characters) with the need for generous white space that reflects the brand's minimalist aesthetic. Spacing follows a semantic scale: unit (8px) is the base increment; xs (4px) is used for micro-spacing within components; sm (12px) separates inline elements; md (24px) is the standard gutter for section separation and component padding; lg (40px) separates major sections; xl (64px) is reserved for hero sections and full-width breaks. The gutter value (24px) is applied consistently to left/right margins on all container-width-constrained sections. White space is treated as a design element, not wasted real estate—sect

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts rather than dramatic layering. The elevation system defines three levels: Level 1 (Base) uses no shadow and sits on the surface color (#ffffff); Level 2 (Standard Cards/Containers) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a surface-container background (#efe7de) to create gentle separation; Level 3 (Modals/Overlays) uses box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) with a white background and 1px border at rgba(0, 0, 0, 0.08) to signal prominence. Hover states on cards and buttons elevate to Level 2 shadow (0 3px 8p

Shapes

The shape philosophy is 'Architectural Precision'—favoring sharp, minimal corner radii that evoke technical drawings and geometric clarity. Border-radius values are deliberately small: sm (2px) is used for subtle rounding on inputs and small UI elements; DEFAULT (4px) is the standard for buttons, cards, and most interactive components; md (5px) is used for slightly larger cards and containers; lg (7px) is reserved for prominent cards and modals; xl (20px) is used only for large, hero-scale containers or special emphasis; full (50%) is used exclusively for circular badges and avatar containers.

Components

Action Elements Buttons are the primary interaction mechanism and must always use the primary color (#fbd600) for the main CTA. The button-primary component has a height of 40px, padding of 8px 16px, and a 1px border matching the background color. On hover, the background shifts to primary-fixed-dim (#fbd600) with an added shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to signal interactivity. Secondary buttons (button-secondary) use tertiary color (#0a0a0a) with white text, 36px height, and 8px 12px padding; on hover, they shift to tertiary-container (#424242) with the same shadow treatment. Ghost buttons (button-ghost) have a transparent background with a 1px outline-variant border (#d0d0d0); on hover, they fill with surface-container-high (#e9ecef) and text shifts to primary (#fbd600). All

Do's and Don'ts

**Do**

• Do use primary color (#fbd600) exclusively for main CTAs and active states—never apply secondary or tertiary colors to primary buttons, as this breaks visual hierarchy.
• Do maintain the warm, earthy palette by using surface-container (#efe7de) for card backgrounds and surface-container-high (#e9ecef) for hover states; never use pure white (#ffffff) for interactive surfaces.
• Do apply md padding (24px) consistently to all card and container elements; this creates visual rhythm and prevents the interface from feeling cramped.
• Do use serif typography (Ivory LL) for all display and headline levels (56px–28px); reserve sans-serif (Funnel Sans) for body and label text to maintain the dual-register hierarchy.
• Do pair buttons with a 200ms ease-out transition on hover to signal interactivity without feeling sluggish or overly animated.

**Don't**

• Don't use rounded corners larger than lg (7px) on standard components; this softens the architectural precision that defines the brand.
• Don't apply shadows larger than lg (0 20px 60px) on any element except modals and overlays; excessive shadows flatten the visual hierarchy.
• Don't use secondary (#ff6900) or tertiary (#0a0a0a) colors on primary CTAs; reserve these for supporting actions, badges, and secondary emphasis only.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear separation between display (serif) and body (sans-serif) levels.
• Don't exceed a container max-width of 900px; this preserves readability and the intimate, intentional aesthetic that defines Cobloc's visual identity.