Furniturewalla

Overview

Furniturewalla embodies 'Architectural Minimalism with Warmth'—a design philosophy that prioritizes clean lines, generous whitespace, and a restrained material palette anchored by warm earth tones and deep charcoal accents. The brand serves affluent homeowners seeking bespoke, handcrafted furniture that transcends trend cycles; the UI evokes the serene confidence of a luxury showroom, where every element breathes intentionality and craftsmanship. The aesthetic is deliberately understated: cream backgrounds (#ffffff, #f1ede6), warm taupe accents (#cbad8d), and near-black text (#1a1a1a) create a tactile, almost textile-like visual experience that mirrors the furniture itself.

The brand voice is refined yet approachable—never precious, never breathless. Furniturewalla speaks with the authority of a master craftsperson who understands that true luxury whispers rather than shouts. Vocabulary favors precision: 'bespoke,' 'master craftsmanship,' 'timeless elegance,' 'curated collections.' Example sentence: 'This sectional, handstitched in our Mumbai atelier, arrives ready to anchor your living room for decades.'

Colors

The color system is rooted in a 'warm-neutral' foundation that reflects the tactile, organic nature of fine furniture. Primary (#000000) is pure black, reserved exclusively for CTAs ('Consult with us' buttons), primary navigation, and high-contrast text—it commands attention without aggression. Secondary (#cbad8d), a warm taupe derived from natural leather and wood tones, appears on accent elements, hover states, and decorative borders, creating visual warmth that prevents the palette from feeling austere. Tertiary (#4e91f0), a soft periwinkle-blue, is used sparingly for secondary CTAs, badges, and informational highlights, providing a cool counterpoint to the warm neutrals.

The surface stack is deliberately minimal: Surface (#ffffff) is the default canvas; Surface-Container (#f1ede6) and

Typography

The type system pairs Cormorant (serif, 400 weight) for display and headline scales with Nunito (sans-serif, 300–600 weight) for body and label text. This pairing—elegant serif headlines over clean, geometric sans-serif body copy—communicates both heritage and modernity. Display (60px, 400 weight, -0.02em tracking) is reserved for hero statements and major section titles; Headline-LG (40px, 400 weight) anchors subsections; Body-MD (16px, 300 weight, 0.06rem letter-spacing) is the workhorse for product descriptions and navigation. The 300-weight body creates an airy, refined feel—never heavy or corporate. Label-MD (14px, 600 weight) is applied to buttons and form labels, providing visual hierarchy through weight rather than size. On small labels over busy backgrounds (e.g., badges on produc

Layout

The layout follows a 12-column grid with a fixed container max-width of 1200px, centered with symmetric margins. Page rhythm is governed by lg spacing (40px) for section separation and md spacing (24px) for component-level padding. The design favors asymmetrical whitespace: hero sections often occupy 60–70% of the viewport height, with breathing room above and below key content blocks. Gutter width is 24px on desktop, collapsing to 12px on mobile. The grid is fluid within the container, allowing product cards and text blocks to reflow naturally. Sections are stacked with 0px vertical spacing (--spacing-sections-desktop: 0px), relying instead on padding within sections to create rhythm, which reinforces the minimalist aesthetic by avoiding artificial gaps.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bold contrast. The elevation system uses three tiers: Level 1 (Base, no shadow) for the page background and default cards; Level 2 (Standard, 0 3px 8px rgba(0, 0, 0, 0.15)) for interactive cards and modals; Level 3 (Elevated, 0px 1px 20px 0px rgba(0, 0, 0, 0.1)) for floating elements like the chat widget and dropdown menus. Shadows are soft and diffuse, never sharp—the blur radius ranges from 8px to 20px, and opacity is kept below 15% to maintain the airy, minimalist feel. On hover, cards transition to a slightly elevated shadow

Shapes

The shape philosophy is 'Architectural Sharpness with Restraint'—sharp 90-degree corners (0px radius) dominate the system, reflecting the clean lines of modern furniture design and the precision of the brand. Buttons use 0px radius by default, creating a utilitarian, no-nonsense appearance. Inputs also default to 0px radius, with a 1px border at rgba(0, 0, 0, 0.55) opacity. Exceptions are intentional: badges use full (9999px) radius for a soft, approachable feel; the chat widget uses 24px radius (xl) to soften its floating presence; variant pills use 40px radius (--variant-pills-radius) for a

Components

Action Elements Buttons are the primary interaction mechanism. Button-Primary (background: #000000, text: #f3f3f3, padding: 0 30px, height: 48px, radius: 0px) is used for high-priority CTAs like 'Consult with us' and 'Add to Cart.' The 300-weight Nunito label creates a refined, understated feel. On hover, the background transitions to Primary-Container (#3a2c23, a warm dark brown) with a 150ms ease transition, providing tactile feedback without color shock. Button-Secondary (background: rgba(255, 255, 255, 0.15), text: #f3f3f3, padding: 8px 18px, height: 32px, radius: 9999px) is used for secondary actions like 'Log in' or 'Learn More'; the rounded corners and transparent background create visual distinction. On hover, opacity increases to rgba(255, 255, 255, 0.25).

Containers & Su

Do's and Don'ts

**Do**

• Do use Cormorant serif for all headlines and display text to establish hierarchy and luxury positioning.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to reinforce the minimalist aesthetic.
• Do apply warm taupe (#cbad8d) accents to secondary CTAs and hover states to add warmth without compromising restraint.
• Do use 0px border-radius on buttons, inputs, and cards to maintain architectural precision and differentiate from competitors.
• Do transition all interactive elements (buttons, cards, inputs) over 150–200ms with ease timing to feel responsive and refined.
• Do apply text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) to small labels over busy product photography for legibility.

**Don't**

• Don't use bright, saturated colors or high-contrast overlays; the palette is deliberately warm and muted to reflect luxury restraint.
• Don't apply rounded corners to primary buttons or inputs; sharp edges reinforce the architectural, precision-focused brand identity.
• Don't use system fonts or generic sans-serifs; Nunito and Cormorant are essential to the brand voice and must be loaded via @font-face.
• Don't add drop shadows with opacity above 15% or blur radius below 8px; shadows should be soft and diffuse, never harsh or dramatic.
• Don't use more than three accent colors in a single page section; the palette is intentionally restrained to avoid visual chaos.
• Don't apply animations or transitions longer than 300ms; the brand moves with quiet confidence, not theatrical flourish.