Noho

Overview

Noho is a contemporary furniture design studio from New Zealand that creates flexible, playful pieces for modern living. The brand embodies 'Warm Minimalism'—a design philosophy that balances austere geometric forms with tactile, inviting materials and a carefully curated neutral palette. The interface evokes a gallery-like serenity: warm beige backgrounds (#f1eee9), soft taupe accents (#d7d1c7), and deep charcoal text (#3c3c3c) create a sophisticated, approachable aesthetic that mirrors the brand's furniture philosophy. The visual language is intentionally restrained, allowing vibrant product photography to become the hero.

The brand voice is confident yet unpretentious—direct, conversational, and grounded in craft. Noho speaks to design-conscious consumers who value flexibility, sustainability, and playfulness in their living spaces. The tone avoids corporate jargon; instead, it uses warm, human language. Example sentence: 'Chairs that care—designed to move with you, not against you.'

Colors

The color system is built on a warm, earthy foundation that prioritizes legibility and calm. Primary (#ffffff) serves as the dominant surface for interactive elements and input fields, paired with on-primary (#3c3c3c) for maximum contrast and accessibility. The surface stack progresses through warm beiges: surface (#f1eee9) as the page background, surface-dim (#e7e2da) for subtle depth, and surface-container (#d7d1c7) for secondary containers. Surface-container-high (#cdc0b0) and surface-container-highest (#c5b8a8) create a gentle hierarchy for hover states and elevated components without introducing visual harshness. On-surface (#3c3c3c) is the primary text color, applied at 100% opacity for body copy and 60% opacity (rgba(60, 60, 60, 0.6)) for secondary information. Secondary (#d7d1c7) a

Typography

The type system pairs Switzer (a geometric sans-serif with warmth and personality) for headlines and interactive elements with Arial/sans-serif for body copy, creating a clear hierarchy between navigation and content. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements; headline-lg (40px, 600 weight) for major section breaks; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading rhythms for descriptive copy. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, form labels, and navigation items, ensuring interactive elements feel distinct and clickable. All headlines use -0.02em to -0.04em letter-spacing to create visual tigh

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid, responsive structure that adapts gracefully from desktop (940px container) to tablet (728px) to mobile (full-width). The gutter spacing is consistently 24px, creating breathing room between sections without excessive white space. The spacing scale is semantic: lg (40px) separates major sections (hero to about, about to product gallery); md (24px) is used for component padding and moderate vertical rhythm; sm (12px) for internal component spacing and list items. The hero section uses 80px vertical padding to establish visual weight and draw focus to the headline and product grid. Container max-width of 1280px ensures content remains scannable on ultra-wide displays. The grid employs a 2-column layout on des

Elevation & Depth

Depth in this system is achieved through subtle layering and soft shadows rather than dramatic contrast. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor interactive elements like hover states on buttons; md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards, dropdowns, and modals; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for hero imagery and full-width overlays. Shadows are warm-tinted by default (using rgba(0, 0, 0, ...) with the page background's warmth creating perceived softness). Cards and containers use no shadow by default, relying instead on background color shi

Shapes

The shape philosophy is 'Geometric Softness'—sharp enough to feel contemporary and intentional, but rounded enough to feel approachable and human. Border-radius follows a minimal scale: DEFAULT (0.5rem / 8px) is applied to buttons, inputs, and small components, creating a subtle softness without sacrificing geometric clarity; md (0.75rem / 12px) for cards and larger containers; lg (1rem / 16px) for hero sections and full-width elements; full (9999px) for badges and pill-shaped elements. The hero image grid uses DEFAULT (8px) radius on individual tiles, allowing the grid structure to remain vis

Components

Action Elements Buttons are the primary interactive affordance and use a white background (#ffffff) with dark text (#3c3c3c) to ensure maximum contrast and clarity. Primary buttons (button-primary) have a 1px border in on-surface (#3c3c3c), 40px height, 9.33px vertical padding, and 30px horizontal padding. On hover, the background transitions to surface-container-low (#ede9e3) with a 150ms ease-in-out transition, creating a subtle visual feedback without changing text color. Secondary buttons (button-secondary) use a transparent background with a 1px border, allowing them to sit quietly in the layout until interaction. All buttons use label-md typography (14px, 600 weight) and DEFAULT radius (8px). Focus states apply a 2px outline in primary (#ffffff) with a 2px offset, ensuring keyboa

Do's and Don'ts

**Do**

• Do use the warm beige palette (#f1eee9, #e7e2da, #d7d1c7) as the foundation for all backgrounds and containers—it creates visual cohesion and reflects the brand's approachable minimalism.
• Do apply on-surface (#3c3c3c) at 100% opacity for primary text and 60% opacity (rgba(60, 60, 60, 0.6)) for secondary information to maintain hierarchy without introducing new colors.
• Do use Switzer for all headlines, navigation, and interactive labels to establish the brand's geometric, contemporary voice; reserve Arial for body copy to ensure readability.
• Do transition all interactive elements (buttons, cards, inputs) with 150ms–200ms ease-in-out timing to create a responsive, polished feel.
• Do apply DEFAULT radius (8px) consistently across buttons, inputs, and small components to maintain the 'Geometric Softness' aesthetic.

**Don't**

• Don't introduce colors outside the defined palette—the warm neutrals and error red are intentional; adding bright accents or saturated colors breaks the gallery-like serenity.
• Don't use shadows as the primary depth mechanism; rely instead on background color shifts and subtle 1px borders to maintain the flat, contemporary aesthetic.
• Don't apply letter-spacing greater than -0.04em on headlines or less than 0em on body copy; the defined values are calibrated for the Switzer and Arial pairing.
• Don't exceed lg (40px) spacing between major sections or use inconsistent gutter widths; the 24px gutter is the rhythm anchor for the entire layout.
• Don't round corners beyond lg (1rem / 16px) on standard components; excessive rounding dilutes the geometric precision and makes the interface feel soft rather than intentional.