Northwood Australia

Overview

Northwood Australia is a custom cabinet maker serving Melbourne's northern suburbs with a design philosophy rooted in **Craft Authenticity**—a movement that celebrates precision, materiality, and the honest expression of handmade quality. The brand aesthetic combines warm, earthy tones (tan and deep ink) with serif typography (Fraunces) to evoke a sense of timeless craftsmanship, while the sans-serif body copy (Plus Jakarta Sans) ensures clarity and modernity. The UI conveys calm competence: every interaction feels deliberate, every measurement precise, every finish considered. The emotional response is one of trust—users sense that Northwood doesn't cut corners, that their cabinetry will be built to their exact specifications in a local factory, not shipped flat-pack from overseas.

The brand voice is conversational yet authoritative, grounded in specificity rather than marketing hyperbole. Tone examples: "Measure, make, install — one team, start to finish" (action-oriented, local ownership); "Cabinetry done properly, by people who care" (human-centered, quality-focused). Vocabulary favors concrete nouns (factory, measure, install, custom) over abstractions. The personality is approachable but not casual—a Melbourne craftsperson who knows their trade and respects the client's investment.

Colors

The color system centers on a warm, sophisticated palette that reflects both the materiality of wood and the refined taste of Melbourne homeowners. **Primary (#c9a47c, tan-400)** is the signature accent used on all call-to-action buttons ('Get a Free Quote'), interactive states, and brand highlights. It appears frequently enough to anchor the identity but sparingly enough to maintain impact—applied at 15px 27px padding on buttons with a 999px border-radius for a soft, approachable feel. **Secondary (#3f5575, ink-400)** is a deep, professional blue-gray used for headings, body text, and structural elements; it conveys stability and expertise. **Tertiary (#b88f63, tan-500)** is a deeper warm tone reserved for badges, accents, and secondary highlights, creating visual rhythm without competing

Typography

The type system pairs **Fraunces Variable** (serif, 600 weight) for display and headlines with **Plus Jakarta Sans Variable** (sans-serif, 400–700 weights) for body and UI text. This pairing communicates 'heritage meets clarity'—the serif conveys craft and permanence (display at 66px, headline-lg at 40px, headline-md at 28px, all with -0.018em letter-spacing for tightness and authority), while the sans-serif ensures legibility and modernity in dense information (body-lg at 18px, body-md at 16px, both at 400 weight with 1.5 line-height for breathing room). Labels use 600–700 weight at 12–14px with 0.01–0.16em letter-spacing to create visual hierarchy in buttons and badges. On small labels over busy backgrounds (e.g., the 'Crafted in Epping' badge), apply text-shadow: 0 2px 4px rgba(0, 0, 0,

Layout

The layout follows a **fluid-to-fixed hybrid** model: the container-max-width is 1280px (80rem), with responsive padding using clamp(1.25rem, 4vw, 2.75rem) to adapt gracefully from mobile to desktop. The grid uses 12 columns with a gutter of 24px (md spacing). Sections use clamp(4.5rem, 9vw, 8rem) for padding-block, ensuring rhythm scales with viewport size. The hero section pairs a large serif headline (66px) with body copy at 18px, creating a 3:1 visual hierarchy. White-space is generous—lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) tightens internal component spacing. The design avoids cramped layouts; breathing room reinforces the 'craft' aesthetic. The sticky header (z-50) uses a semi-transparent cream background (rgba(250,

Elevation & Depth

Depth is achieved through a **layered shadow system** that mimics the physical stacking of materials—reflecting how custom cabinetry is built in layers. **Level 1 (Base)**: no shadow; flat surfaces like body background (#faf6ef). **Level 2 (Cards & Containers)**: box-shadow: 0 2px 8px -2px rgba(22, 36, 59, 0.1), 0 8px 24px -8px rgba(22, 36, 59, 0.14) — subtle, warm shadows that suggest proximity without drama. **Level 3 (Elevated/Hover)**: box-shadow: 0 6px 16px -6px rgba(22, 36, 59, 0.16), 0 22px 48px -12px rgba(22, 36, 59, 0.22) — used on card-hover and button-primary-hover states, creating

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used strategically to soften the precision of custom cabinetry while maintaining a professional, measured aesthetic. **Buttons** use 999px border-radius (full) for a pill shape that feels approachable and modern—the extreme roundness signals 'call-to-action' without aggression. **Cards and containers** use 1.5rem (24px, xl) for a gentle curve that suggests craftsmanship without being organic or playful. **Input fields** use 0.5rem (8px, DEFAULT) for a subtle, restrained curve that maintains legibility and focus states. **Glass sur

Components

Action Elements **Button-Primary** (#c9a47c, 15px 27px padding, 48px height, 999px radius) is the dominant CTA. It uses a gradient shine effect (linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent)) that translates 120% on hover, creating a subtle 'sweep' animation over 0.7s ease-soft. On hover, the button lifts 3px (transform: translateY(-3px)) and shadow elevates from md to lg elevation. The text color is ink-800 (#101b2d) for maximum contrast. **Button-Secondary** uses a 2px inset border (outline-variant, #a6b3c6) with transparent background; on hover, a scaleX(1) transform reveals a full ink-700 background over 0.4s, and text inverts to cream. Both buttons use transition: transform 0.35s ease-soft, box-shadow 0.35s ease-soft for smooth, coordinated motion.

#

Do's and Don'ts

**Do**

• Do use primary (#c9a47c) exclusively for CTAs and interactive highlights—it's the brand's signature and must remain rare enough to command attention.
• Do pair Fraunces serif headings with Plus Jakarta Sans body copy to create the 'heritage meets clarity' voice; never reverse or mix weights unexpectedly.
• Do apply the ease-soft cubic-bezier(0.22, 1, 0.36, 1) timing function to all interactive transitions (buttons, cards, inputs) for a cohesive, intentional feel.
• Do use the full shadow stack (sm/md/lg elevation) to create clear depth hierarchy; never flatten the design with no shadows or use pure black shadows.

**Don't**

• Don't use secondary (#3f5575) as a button background—it's reserved for text and structural elements; primary is always the CTA color.
• Don't apply border-radius smaller than 8px (DEFAULT) to buttons or cards; the soft-technical aesthetic requires at least 1rem (16px) for glass surfaces.
• Don't mix serif and sans-serif weights arbitrarily; Fraunces is always 600 weight for headings, Plus Jakarta Sans is 400 for body and 600–700 for labels.
• Don't use transitions longer than 0.4s or timing functions other than ease-soft; the brand's motion should feel deliberate and quick, never sluggish or jarring.