Heavens Furniture

Overview

Heavens Furniture embodies a philosophy of **Architectural Minimalism with Tactile Warmth**—a design language that treats furniture not as isolated objects but as orchestrated components within a holistic spatial narrative. The brand serves discerning clients who view their living environments as extensions of identity, not mere commodity purchases. The aesthetic is deliberately restrained: a neutral, light-filled canvas (rgb(239, 239, 240)) punctuated by deep charcoal overlays and the precise accent of cobalt blue (#007bff), creating visual hierarchy through restraint rather than saturation. The emotional response is one of quiet confidence—the UI conveys expertise, intentionality, and respect for the user's time.

The voice is consultative and precise, never breathless or colloquial. Heavens speaks in declarative statements about purpose and concept: 'We go beyond producing and selling furniture. With focus on the full concept and idea of the room.' The vocabulary favors terms like 'collection,' 'individually designed,' 'purpose,' and 'concept'—language that positions furniture as curated experience rather than transactional commodity. Example sentence in brand voice: 'Each piece is shaped to fill a specific purpose within the room's spatial and aesthetic logic.'

Colors

The color system operates on a principle of **Neutral Dominance with Purposeful Accent**. The primary surface palette—#efeff0 (surface), #e0e0e1 (surface-dim), #ffffff (surface-bright)—creates a luminous, gallery-like backdrop that allows product imagery and spatial concepts to dominate visual attention. This neutral stack is anchored by deep on-surface text (#393939) and supported by a warm gray secondary (#6c757d) for supporting information and disabled states.

The primary accent color is #007bff (cobalt blue), deployed exclusively on interactive CTAs, focus states, and navigation highlights. This blue is never used for passive elements; it signals actionability and brand presence. Secondary accent #28a745 (green) is reserved for success states and affirmative actions (e.g., 'Add to Car

Typography

The type system pairs **Futura PT** (a geometric sans-serif with architectural precision) for headlines and labels with **Futura PT Light** for body copy, creating a visual distinction between structural hierarchy and readable content. Display (60px, 700 weight, -0.02em tracking) and Headline-lg (40px, 700 weight) are reserved for hero statements and section titles; their tight negative letter-spacing (-0.015em to -0.02em) reinforces the brand's architectural aesthetic. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) maintain generous line-height (1.55–1.5 ratio) to ensure readability over product imagery and complex layouts. Labels (14px and 12px, 600 weight) use increased letter-spacing (0.02em to 0.03em) to emphasize UI affordances and butto

Layout

The layout operates on a **12-column fluid grid** with a maximum container width of 1200px, ensuring responsive scaling from mobile (single column) through desktop (multi-column product grids). The page rhythm is governed by the block-gap spacing token (24px), applied consistently between sections to create visual breathing room without excessive whitespace. Hero sections occupy 100vh (full viewport height) with dark overlay (rgba(0, 0, 0, 0.3) to 0.5) to ensure text legibility over product photography. Content sections use lg spacing (40px) for vertical separation between major sections (e.g., hero to product grid, product grid to testimonials), md spacing (24px) for intra-section grouping, and sm spacing (12px) for compact list items and form fields. The gutter (24px) is applied symmetri

Elevation & Depth

Depth is conveyed through a **three-tier shadow system** that mirrors physical card elevation without introducing visual clutter. Level 1 (Base/Flat): no shadow; used for inline text, badges, and passive UI. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to product cards, form inputs, and dropdown panels at rest. Level 3 (Elevated/Interactive): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); triggered on hover, focus, or modal presentation. The shadow color is always black (0, 0, 0) with opacity ranging from 0.06 (sm) to 0.15 (md) to 0.12 (lg), never using colored shad

Shapes

The shape language is **Soft-Technical Minimalism**: rounded corners are applied sparingly and purposefully, never as decorative flourish. Buttons and form inputs use 0.5rem (8px) border-radius, a subtle softening that prevents harsh rectangularity while maintaining geometric clarity. Cards and modals use 0.75rem (12px) radius, slightly more generous to signal containment and separation from the page background. Dropdown panels and popovers use 1rem (16px) radius to emphasize their transient, floating nature. The full-radius token (9999px) is reserved exclusively for badges and pill-shaped ele

Components

Action Elements Buttons are the primary affordance for user intent. **button-primary** uses background #007bff with white text (14px, 600 weight Futura PT), 12px vertical and 24px horizontal padding, 44px height, and 0.5rem radius. On hover, shift background to #0056b3 (darker blue, -20% lightness) and apply transition: background-color 200ms ease-in-out. Never add shadow on button hover; the color shift alone signals state change. **button-secondary** inverts the logic: transparent background with #007bff text and 1px solid #007bff border. On hover, fill the background with #e7f1ff (primary-container) and shift text to #003d99 (on-primary-container), maintaining the 200ms transition. Focus state (keyboard navigation) adds box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) to both variants,

Do's and Don'ts

**Do**

• Do use the primary blue (#007bff) exclusively for interactive elements—buttons, links, focus states, and active navigation. Never use it for passive backgrounds or decorative elements.
• Do maintain the 24px block-gap spacing between major sections; this rhythm is the backbone of the layout's visual breathing room.
• Do apply the three-tier shadow system consistently: no shadow for flat UI, 0 3px 8px for standard cards, 0 8px 24px for elevated/interactive states.
• Do use Futura PT (700 weight) for all headlines and labels; reserve Futura PT Light (400 weight) for body copy to create clear hierarchy.
• Do apply 200–240ms transitions on all interactive state changes (hover, focus, active); use cubic-bezier(0.2, 0, 0, 1) easing for a confident, snappy feel.
• Do ensure all text over product imagery includes sufficient contrast; apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels if needed.

**Don't**

• Don't introduce new accent colors on hover or interaction; only shift saturation, brightness, or apply shadow elevation of existing primary/secondary colors.
• Don't use hard corners (0px radius) on any interactive element; minimum 0.5rem (8px) for buttons and inputs, 0.75rem (12px) for cards.
• Don't stack multiple shadows on a single element; each layer uses one shadow value appropriate to its elevation tier.
• Don't exceed 1200px container max-width; this ensures product imagery remains legible and the layout doesn't feel stretched on ultra-wide displays.
• Don't apply letter-spacing tighter than -0.02em on headlines; the brand's architectural precision should never sacrifice readability.
• Don't use system fonts (system-ui, sans-serif) in production; always specify Futura PT with -apple-system as fallback for web safety.