ecoLINEAR Studio

Overview

ecoLINEAR Studio is a London-based architecture practice specializing in contemporary residential extensions, renovations, and new-build projects. The design system embodies Architectural Minimalism with warm, earthy restraint—a palette rooted in natural materials (terracotta, oak, concrete) that conveys both sustainability and craftsmanship. The aesthetic is deliberately understated: a light, neutral canvas (#f2f0ec) punctuated by a signature burnt-orange accent (#d98e36) that appears on CTAs, key navigation, and focal points. This restraint evokes confidence and expertise; the UI feels like a well-designed building—functional, proportionate, and timeless.

The brand voice is precise, professional, and conversational without being casual. ecoLINEAR speaks to architects, developers, and homeowners with clarity and respect for their intelligence. Sentences are direct: "We deliver feasibility studies, planning applications, and construction administration—from concept to completion." The tone avoids jargon while maintaining technical credibility. Personality emerges through thoughtful spacing, generous whitespace, and a refusal to overcomplicate. Example: "Your extension begins with a conversation about how you live."

Colors

The color system is grounded in a warm, neutral foundation with a single, purposeful accent. Primary (#d98e36) is the burnt-orange CTA color—used exclusively on buttons, active links, and key interactive states. It appears sparingly but decisively, commanding attention without aggression. Secondary (#9d7460) is a muted terracotta-brown, reserved for secondary navigation, dividers, and supporting UI elements; it provides visual rhythm without competing with primary. Tertiary (#d0cfcd) is a soft greige, used for subtle backgrounds, disabled states, and low-emphasis containers.

The surface stack is deliberately minimal: surface (#f2f0ec) is the default page background, a warm off-white that reduces eye strain and evokes natural paper. Surface-container (#d0cfcd) is used sparingly for card ba

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that balances warmth with precision—fitting for an architecture practice. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks, commanding presence without excess. Headline-lg (40px, 600 weight) anchors page sections; headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and introductory paragraphs, providing generous leading (1.56x) for readability. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, maintaining 1.5x line-height for comfortable scanning. Label-md (14px, 600 weight, 0.02em tracking) is applied to button text and UI labels, with increased letter-spacing to enhance legib

Layout

The layout uses a 12-column grid with a fixed max-width of 1100px, centered on the viewport. This constraint ensures readability and prevents content from stretching awkwardly on ultra-wide displays. Whitespace is semantic: lg spacing (40px) separates major sections (hero, services, portfolio, contact), while md spacing (24px) divides subsections and card groups. Gutter width is 24px, providing breathing room between columns without excessive fragmentation. Container padding is consistently md (24px) on desktop, reducing to sm (12px) on tablets and xs (4px) on mobile. The grid rhythm is 8px-based, ensuring all spacing values (4px, 12px, 24px, 40px, 64px) align to the underlying unit. This creates visual cohesion and simplifies responsive scaling. Sections use full-width backgrounds (e.g.,

Elevation & Depth

Depth is conveyed through subtle, restrained shadows that reinforce hierarchy without creating visual clutter. Level 1 (Base): flat surfaces with no shadow—body text, input fields, and default card states sit flush on the surface (#f2f0ec). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, dropdowns, and modals; this 3px blur and 8px spread creates a soft, diffused shadow suggesting a card lifted 4–6px from the page. Level 3 (Elevated/Hover): box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) on hover states and prominent modals; the larger spread (60px) and increas

Shapes

The shape philosophy is Architectural Precision: rounded corners are minimal and purposeful, reflecting the clean lines of contemporary architecture. Buttons and inputs use DEFAULT (0.5rem / 8px) border-radius, a subtle softening that avoids the harshness of sharp corners while maintaining geometric clarity. Cards and containers use md (0.75rem / 12px) for slightly more breathing room, appropriate for larger surfaces. Modals and popovers use lg (1rem / 16px), signaling elevation and importance. The full (9999px) radius is reserved for badges and avatar placeholders. No element uses excessive r

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background: {colors.primary} (#d98e36), text-color: white, padding: 12px 24px, height: 48px, and border-radius: 8px. On hover, the background darkens to #c97d2a with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), signaling interactivity. On active/pressed, the background becomes #b86d1f with a reduced shadow (0 1px 3px rgba(0, 0, 0, 0.12)), indicating the button is engaged. Button-secondary uses a transparent background with a 1px border in primary color and text-color: {colors.primary}; on hover, the background becomes rgba(217, 142, 54, 0.08), a subtle fill that doesn't overwhelm. All buttons use typography.label-md (14px, 600 weight) for crisp, legible text. Transition: all 200ms ease-out ensures smooth st

Do's and Don'ts

**Do**

• Do use primary (#d98e36) exclusively for CTAs, active states, and key focal points—never on backgrounds or body text.
• Do maintain lg spacing (40px) between major sections to create visual breathing room and guide the eye through the page.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and containers for consistent, subtle depth without visual noise.
• Do use Montserrat at 600 weight for all headlines and labels to maintain geometric precision and architectural character.
• Do ensure all interactive elements have clear hover and focus states with 200ms transitions to signal responsiveness.

**Don't**

• Don't use secondary (#9d7460) or tertiary (#d0cfcd) as primary accent colors—they are supporting roles only.
• Don't apply border-radius greater than 1rem (16px) to standard UI elements; excessive rounding contradicts the architectural aesthetic.
• Don't use drop-shadows exceeding 30px blur or 60px spread; keep shadows subtle and warm-tinted (rgba(0, 0, 0, ...)).
• Don't mix typefaces; Montserrat is the exclusive font family across all UI, headings, and body text.
• Don't reduce spacing below sm (12px) in gutter or padding contexts; whitespace is a design tool, not a constraint to minimize.