Mumbai Master Carpentry

Overview

Mumbai Master Carpentry is a heritage-rooted bespoke furniture and carpentry studio serving Mumbai's discerning homeowners and commercial clients for 15+ years. The brand embodies 'Artisanal Warmth'—a design philosophy that celebrates hand-crafted precision, generational expertise, and the timeless beauty of natural materials. The visual identity conveys quiet confidence: a rich amber accent (#c8883a) punctuates a refined palette of charcoal, cream, and white, evoking the warmth of wood grain and the solidity of master craftsmanship. The UI voice is direct, honest, and reassuring—never overselling, always grounded in tangible outcomes. Example sentence: 'Fifteen years. Seventy craftsmen. Five hundred projects. No surprises. Ever.'

Colors

The color system anchors on a warm, earthy primary—Amber (#c8883a)—deployed on all call-to-action buttons, accent lines, and interactive highlights. This is the brand's signature, evoking both the wood tones of the studio's materials and the trust of established heritage. Secondary Amber (#b07630) darkens on hover, creating tactile feedback via box-shadow: 0 6px 22px rgba(200,136,58,0.38). The surface stack is deliberately minimal: pure white (#ffffff) for primary content areas, soft greys (#f5f5f5, #fafafa) for subtle section breaks, and charcoal (#1a1a1a) for hero overlays and trust-bar backgrounds. On-surface text is charcoal (#1a1a1a) at 100% opacity for body copy, with muted grey (#666666) for secondary information. Borders use a light grey (#e8e8e8) at 1px, never harsh. The amber-lig

Typography

The type system pairs Playfair Display (serif, 700 weight for headlines) with DM Sans (sans-serif, 400–600 weights for body and UI). This pairing communicates 'heritage meets contemporary'—Playfair's elegant serifs anchor the brand's artisanal roots, while DM Sans's clean geometry ensures legibility at small sizes and across devices. Display (67px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and section breaks, commanding attention without aggression. Headline-lg (42px, 700 weight) scales section titles; headline-md (32px, 600 weight) subtitles. Body-lg (18px, 400 weight, 28px line-height) is used for hero subheadlines and testimonials, maintaining warmth. Body-md (16px, 400 weight, 24px line-height) is the default for card descriptions and form labels. Label-md (14p

Layout

The layout follows a 12-column grid with a fixed max-width of 1160px and 28px horizontal gutters (padding: 0 28px on .container). Sections use 96px vertical padding (padding: 96px 0) to create generous breathing room between major content blocks. The hero section spans 100vh (min-height: 640px) and centers content vertically, with a semi-transparent dark overlay (linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%)) to ensure text legibility over the background image. Service and portfolio grids use CSS Grid (grid-template-columns: repeat(3, 1fr) for services; CSS columns: 3 for masonry portfolio). Spacing tokens are semantic: lg (40px) separates major sections, md (24px) groups related cards, sm (12px) creates micro-spacing within components. The container max-width (116

Elevation & Depth

Depth is achieved through a restrained shadow system that reinforces hierarchy without visual noise. Level 1 (Base): flat surfaces with no shadow (e.g., body background, input fields). Level 2 (Standard Cards): box-shadow: 0 2px 12px rgba(0,0,0,0.07), applied to service cards, pricing cards, and why-us cards at rest. Level 3 (Elevated/Hover): box-shadow: 0 4px 24px rgba(0,0,0,0.1) on card hover, and box-shadow: 0 8px 40px rgba(0,0,0,0.13) on primary button hover. The trust bar and materials section use no shadow—they rely on solid background color (charcoal #1a1a1a) and border-right dividers (

Shapes

The shape philosophy is 'Refined Minimalism'—sharp corners dominate, with subtle rounding only where interaction or softness is warranted. Buttons use border-radius: 4px (rounded.sm), a crisp, modern edge that signals precision and control. Service cards, pricing cards, and why-us cards use border-radius: 14px (rounded.lg), softening their presentation without sacrificing sophistication. Input fields use border-radius: 0px (no rounding), emphasizing their functional, utilitarian role. Icons and circular badges use border-radius: 50% (rounded.full) for visual distinction. Portfolio items use bo

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: #c8883a, color: #ffffff, padding: 13px 30px, border-radius: 4px, and font-weight: 600 (DM Sans, 14px). On hover, the background shifts to #b07630, and a warm shadow (0 6px 22px rgba(200,136,58,0.38)) lifts the button. The transform: scale(1.03) adds subtle tactile feedback. Transition timing is 0.25s ease for all properties. Button-secondary uses a transparent background with a 2px border in amber (#c8883a), inverting on hover to fill with amber and white text. All buttons use cursor: pointer and white-space: nowrap to prevent text wrapping.

Containers & Surfaces Service cards and why-us cards follow a consistent pattern: background: #ffffff, border: 1px solid #e8e8e8, bord

Do's and Don'ts

**Do**

• Do use Amber (#c8883a) sparingly on CTAs, accent lines, and icon highlights—it's the brand's signature and loses impact if overused.
• Do pair Playfair Display headlines with DM Sans body copy to maintain the 'heritage meets contemporary' voice.
• Do apply the shadow system consistently: Level 2 (0 2px 12px rgba(0,0,0,0.07)) for cards at rest, Level 3 (0 8px 40px rgba(0,0,0,0.13)) on hover.
• Do use 96px vertical padding between major sections to create generous white space and visual breathing room.
• Do apply text-shadow: 0 2px 4px rgba(0,0,0,0.3) to small labels over busy backgrounds to ensure readability.

**Don't**

• Don't use rounded corners on buttons or inputs—keep them sharp (4px or 0px) to maintain the refined, precise aesthetic.
• Don't apply multiple shadows or blur effects; the system uses a single, clear shadow per elevation level.
• Don't exceed 1160px container width, even on ultra-wide displays—content legibility is paramount.
• Don't use system fonts (system-ui, sans-serif); always load Playfair Display and DM Sans from Google Fonts.
• Don't mix serif and sans-serif weights arbitrarily—use Playfair Display (700) for headlines, DM Sans (400–600) for body and UI only.