House of Honey

Overview

House of Honey is a female-led interior design collective based in California that creates soulful, expressive spaces celebrating life through craft and character. The design system embodies 'Warm Maximalism'—a philosophy that rejects sterile minimalism in favor of layered, tactile environments where bold color, natural materials, and curated objects coexist with intention. The brand personality is confident yet approachable, speaking in a voice that is conversational, opinionated, and grounded in the sensory experience of inhabiting a space. The UI evokes the studio's physical aesthetic: a dark, intimate canvas (near-black at #0e0e0e) punctuated by warm, creamy accents (#edccbe) and strategic pops of energy—hot pink (#fc72c4), honey gold (#edbc00), and sage green (#d8ce7e)—that mirror the vibrant objects and textiles found in their interiors. Example sentence in brand voice: 'We design spaces where your morning coffee tastes better and your friends want to stay longer.'

Colors

The color system is rooted in the tactile warmth of natural materials—clay, linen, honey, and aged wood—layered against a sophisticated dark backdrop. Primary (#edccbe, a warm blush-pink) is the signature accent used on all call-to-action buttons, active navigation states, and key interactive elements; it reads as both approachable and intentional. The dark brown background (#0e0e0e) provides visual rest and allows photography and accent colors to dominate. Secondary colors—sage light-green (#d8ce7e) and hot pink (#fc72c4)—are used sparingly for status indicators, highlights, and tertiary CTAs, creating visual rhythm without chaos. The surface stack uses near-black tones (surface #0e0e0e, surface-container #1a1a1a, surface-container-highest #323232) to maintain contrast and legibility whil

Typography

The type system pairs serif and sans-serif voices to reflect the studio's duality: craft and precision. Canora (a custom serif) is reserved for display, headlines, and hero statements—its generous letterforms and generous line-height (92px for display, -0.02em tracking) evoke printed design and editorial authority. Neue Haas Grotesk (a geometric sans-serif) handles all body copy, navigation, and UI labels, providing clarity and rhythm at smaller scales. The hierarchy is deliberately compressed: display (84px) drops to headline-lg (56px) to headline-md (40px), then to body-lg (18px), ensuring no jarring jumps. All body text uses a 1.3 line-height (28px for 18px type) to create generous breathing room—a nod to the studio's philosophy of white space as a design material. Small labels (12px) r

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing flexible content arrangement from mobile (single column) to desktop (multi-column galleries). The gutter is consistently 24px, creating rhythm and breathing room between sections. White space is treated as a design element, not an afterthought: section separation uses lg spacing (40px) to create visual pauses, while component-level spacing uses md (24px) for internal padding and sm (12px) for nested elements. The container max-width of 1280px ensures photography and hero imagery remain impactful without overwhelming the viewport. Fluid typography scales from 375px (mobile minimum) to 1600px (desktop maximum) using CSS custom properties, ensuring the type system remains proportional across all devices. The dark bac

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background shifts rather than dramatic layering. Level 1 (Base): the dark background (#0e0e0e) with no shadow. Level 2 (Cards & Containers): surface-container (#1a1a1a) with a 1px border (outline-variant #5a4a3a) and box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a barely-perceptible lift. Level 3 (Modals & Elevated Surfaces): surface-container-high (#262626) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) and a semi-transparent overlay (rgba(0, 0, 0, 0.6)) behind the modal. Interactive hover states elevate cards to Level 3 w

Shapes

The shape philosophy is 'Architectural Softness'—sharp enough to feel intentional and modern, soft enough to feel approachable and human. Buttons use rounded: DEFAULT (0.5rem / 8px) for a subtle, refined edge that reads as contemporary without being playful. Cards and containers use rounded: md (0.75rem / 12px) to add visual warmth while maintaining clarity. Navigation links and interactive elements transition to rounded: full (9999px) on hover or active state, creating a pill-shaped highlight that feels like a physical selection. Input fields use rounded: DEFAULT (8px) to match buttons and ma

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses backgroundColor: {colors.primary} (#edccbe), textColor: {colors.on-primary} (#331917), padding: 12px 24px, height: 48px, and rounded: {rounded.DEFAULT} (8px). All buttons include transition: all 400ms cubic-bezier(0.65, 0.05, 0.36, 1) for smooth state changes. On hover, button-primary-hover shifts to backgroundColor: {colors.primary-fixed-dim} (#edccbe with reduced opacity) and rounded: {rounded.lg} (16px), creating a tactile feedback loop. button-secondary uses a transparent background with a 1px border (primary color) and the same padding/height; on hover, it inverts to solid primary background. All buttons use label-md typography (14px, 400 weight, 0.01em tracking) for consistent labeling.

Containe

Do's and Don'ts

**Do**

• Do use primary (#edccbe) as the sole accent color for CTAs, active states, and focus indicators—its warmth is the brand signature.
• Do maintain the dark background (#0e0e0e) edge-to-edge to create an immersive, gallery-like experience that lets content breathe.
• Do pair Canora serif for headlines and Neue Haas Grotesk sans-serif for body copy to reinforce the craft-meets-precision brand voice.
• Do apply 24px gutter spacing between sections and 12px padding within components to create visual rhythm and prevent cognitive overload.
• Do use rounded: full (9999px) on active navigation and badges to create a distinctive, recognizable visual signature.
• Do apply smooth 300–400ms transitions on all interactive elements to signal interactivity without jarring movement.

**Don't**

• Don't use pure white (#ffffff) for text or backgrounds—always use the warm blush (#edccbe) or cream (#fff8ef) to maintain the tactile, handcrafted feel.
• Don't apply harsh shadows (box-shadow: 0 16px 40px) on cards; keep shadows subtle (0 1px 2px or 0 4px 12px) to preserve the intimate atmosphere.
• Don't mix serif and sans-serif at the same scale—reserve Canora for display/headlines only; use Neue Haas Grotesk for all body and UI text.
• Don't use sharp corners (0px border-radius) anywhere in the component system; minimum 8px radius maintains the approachable, human-centered aesthetic.
• Don't introduce new accent colors beyond primary (#edccbe), secondary (#d8ce7e), and tertiary (#fc72c4)—additional colors dilute the intentional, curated brand voice.
• Don't reduce line-height below 1.3 for body text; generous vertical spacing (28px for 18px type) is essential to the studio's philosophy of white space as design.