Ronnsquare

Overview

Ronnsquare is a Parisian architecture and workspace design consultancy embodying a refined, editorial aesthetic rooted in French modernism and tactile materiality. The brand operates at the intersection of precision and warmth, serving corporate clients seeking sophisticated, human-centered office environments. The visual language—anchored in a warm, earthy palette of deep maroon (#231800), soft cream (#FFEAD4), and luminous lavender (#DBB6FC)—evokes a sense of cultivated restraint and intellectual rigor. This is "Architectural Minimalism with Warmth": clean geometric forms, generous white space, and a deliberate rejection of digital coldness in favor of materials, craft, and human scale.

The brand voice is authoritative yet approachable, speaking in measured, precise language that respects the client's intelligence. Tone: confident, never breathless; grounded in 35 years of proven expertise. Vocabulary favors concrete nouns ("light", "material", "proportion") over abstract marketing speak. Example sentence in brand voice: "We design workspaces where the architecture recedes, and people thrive."

Colors

The color system is built on three primary brand hues, each with distinct semantic roles. **Primary: Lavender (#DBB6FC)** is the accent color reserved for interactive elements—call-to-action buttons, focus states, and brand-distinctive highlights. It appears sparingly but decisively, drawing the eye to key interactions. **Secondary: Cream (#FFEAD4)** serves as the dominant background, evoking warmth and approachability while maintaining legibility. It is the canvas upon which the brand's editorial content lives. **Tertiary: Deep Maroon (#231800)** is the primary text color and structural anchor, providing contrast and authority. The surface stack uses white (#ffffff) for elevated cards and surfaces, with subtle tints toward the cream background (#FFF5EB, #f3f1f3) for layered depth without

Typography

The typography system pairs two distinct typefaces to create visual hierarchy and emotional resonance. **N27** (a geometric sans-serif) is reserved for headings, labels, and all uppercase text, delivering architectural precision and brand distinctiveness. **Gambetta** (a serif body font) carries all narrative content, evoking editorial sophistication and readability. Display text (120px, N27, 400 weight, line-height 1.05, -0.04em letter-spacing) anchors hero sections with commanding presence. Headline-lg (64px, N27, 400, 1.05 line-height) introduces major sections. Body text (16px, Gambetta, 400, 1.3 line-height, 0.02em letter-spacing) maintains legibility at all sizes and screen densities. All headings are set in uppercase with tight letter-spacing to reinforce the architectural aesthetic

Layout

The page rhythm follows a 12-column grid with a maximum container width of 1440px (90rem), maintaining generous margins on desktop (5rem / 80px) that collapse to 1rem on mobile. Sections are separated by lg spacing (40px / 2.5rem) for breathing room, with xl spacing (64px / 4rem) reserved for major section breaks. The design favors asymmetrical layouts and irregular column spans to avoid monotony—a hero might occupy 7 columns with negative space on the right, while a content block below spans 10 columns centered. White space is treated as a design material, not wasted space: every gap serves to clarify hierarchy and guide the eye. Gutter spacing between grid columns is 24px (1.5rem), consistent across all breakpoints. Container padding adjusts fluidly: 5rem on desktop, 1rem on mobile, with

Elevation & Depth

Depth is conveyed through subtle layering and restrained shadows, never through dramatic drop-shadows or glassmorphism. **Level 1 (Base)**: The cream background (#FFEAD4) serves as the foundation, with no shadow. **Level 2 (Standard Card)**: White surfaces (#ffffff) with a 1px border (rgba(0, 0, 0, 0.07)) and a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) create gentle separation from the background. **Level 3 (Elevated/Modal)**: Darker surfaces or modals use a stronger shadow (0 8px 32px rgba(0, 0, 0, 0.12)) with a 1px border at rgba(255, 255, 255, 0.3) when overlaid on dark backgrounds. Hover

Shapes

The shape philosophy is **Architectural Sharpness with Precision**: border-radius values are minimal and intentional, reflecting the brand's geometric, modernist roots. **Buttons and inputs** use 0.5rem (8px) radius—just enough to soften hard corners without appearing playful or organic. **Cards and containers** use 0.75rem (12px) radius for slightly more breathing room. **Badges and pills** use the full radius (62.4375rem / 999px) to create perfect circles or capsules. **Hero sections and full-width blocks** have zero radius (0px), maintaining the architectural grid. The rationale: sharp corn

Components

Action Elements **Button-Primary** (#DBB6FC on #231800 text) is the signature call-to-action, set in N27 uppercase (14px, 400 weight, 0.01em letter-spacing) with 12px vertical and 24px horizontal padding, 48px height, and 0.5rem radius. On hover, the background shifts to the primary-fixed-dim (#c9a3e8) with a 0.25s ease transition. On focus, add a 3px ring of rgba(219, 182, 252, 0.3) around the button. Active state (pressed) reduces the shadow to inset 0 0.0625rem 0.844rem rgba(0, 0, 0, 0.08) to create a tactile depression. **Button-Secondary** uses a transparent background with a 1px border in the text color (#231800), same padding and height as primary. On hover, the background becomes surface-container-high (#f3f1f3). Disabled buttons (both primary and secondary) reduce opacity to 5

Do's and Don'ts

**Do**

• Do use N27 uppercase for all headings and labels—it is the brand's typographic signature and must never be replaced with lowercase or other typefaces.
• Do maintain the cream background (#FFEAD4) as the dominant canvas; it is the visual anchor that distinguishes Ronnsquare from competitors.
• Do apply the lavender accent (#DBB6FC) sparingly and deliberately—only on primary CTAs, focus states, and brand-distinctive moments; overuse dilutes its impact.
• Do use Gambetta serif for all body and narrative content; it conveys editorial sophistication and differentiates the brand from tech-forward competitors.
• Do respect white space as a design material—generous margins and breathing room between sections reinforce the brand's refined, unhurried aesthetic.
• Do use the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) as the default card shadow; it is subtle enough to feel sophisticated, strong enough to create clear hierarchy.

**Don't**

• Don't use rounded corners larger than 1.5rem except for full-circle badges; the brand rejects soft, playful aesthetics in favor of architectural precision.
• Don't mix N27 and Gambetta within a single heading or label—each typeface has a distinct role; mixing them creates visual confusion.
• Don't apply shadows larger than lg (0 8px 32px rgba(0, 0, 0, 0.12)) to standard components; excessive shadows feel heavy and undermine the minimalist aesthetic.
• Don't use the maroon (#231800) as a background color for large areas; it should remain a text and structural color, with cream and white as the dominant backgrounds.
• Don't animate border-radius or use it as a transition property; it should remain static while other properties (color, shadow, scale) convey interactivity.
• Don't reduce opacity of the primary lavender (#DBB6FC) below 80% for interactive elements; it must remain vibrant and clickable, never faded or secondary.