Kōzōwood Industries

Overview

Kōzōwood is a sustainable housing innovator that elevates wood construction into a refined craft. The design system embodies 'Warm Minimalism'—a philosophy that marries the tactile authenticity of natural materials with architectural precision. The visual language prioritizes clarity and restraint, using warm earth tones (terracotta #ab8867, sand #f4efeb, deep brown #3e362e) to evoke the material heritage of wood while maintaining contemporary sophistication. The UI speaks to architects, builders, and homeowners who value both environmental responsibility and design excellence.

The brand voice is measured, authoritative, and grounded. Kōzōwood avoids hyperbole; instead, it presents facts with quiet confidence. Vocabulary emphasizes craftsmanship, sustainability, and innovation—never marketing jargon. Example sentence: 'Our modular system reduces construction time by 40% while maintaining structural integrity and aesthetic coherence.'

Colors

The color palette draws from natural wood grain, earth, and light—creating a warm, inviting foundation that feels both premium and approachable. Primary (#ab8867) is the signature terracotta-brown used for interactive elements, CTAs, and brand accents; it appears on buttons, links, and focus states to guide user attention without aggression. Secondary (#ba945a) provides a lighter, more refined accent for supporting actions and highlights. The surface stack ranges from cream (#f4efeb) for main backgrounds to deeper neutrals (#3e362e, #2e2a23) for text and structural elements. On-surface (#3e362e) is the primary text color—a deep brown that reads clearly against light backgrounds while maintaining warmth. Tertiary (#71836b) is a muted sage green reserved for status indicators, success states

Typography

The type system pairs PPMori (a geometric sans-serif with warmth and personality) for body copy and UI labels with Ogg (a refined serif) for display and editorial headings. This pairing creates visual hierarchy while maintaining the brand's sophisticated-yet-approachable tone. Display (60px, -0.05em letter-spacing) anchors hero sections with commanding presence; Headline-lg (40px, -0.04em) structures major sections; Body-md (16px, -0.02em) ensures readable body text at all scales. Ogg headlines (Ogg at 30–34px) introduce editorial moments and case studies, signaling a shift to storytelling. All type uses negative letter-spacing (-0.01em to -0.05em) to tighten spacing and reinforce the precision aesthetic. Apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.05) on small labels (≤12px) when placed o

Layout

The layout uses a 32-column fluid grid with responsive padding (max(6px, calc(-4.14px + 2.6vw))) and gutters (max(2px, calc(-0.964px + 0.76vw))), scaling smoothly from mobile (410px) to ultra-wide (2000px). Container max-width is fixed at 1290px to maintain reading comfort and visual control. Section separation uses lg spacing (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. The grid's 32-column structure allows flexible 2-column, 4-column, and 8-column layouts depending on content type. Whitespace is generous but purposeful—never excessive, never cramped. Hero sections occupy full viewport height with centered text (max 60% width) to emphasize the hero image. Cards and content blocks use md padding (24px) internally, with lg spacing (40px) between sections to cr

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bold contrast. Level 1 (Base): flat surfaces with no shadow, using only color and typography for definition. Level 2 (Cards, inputs): box-shadow 1px 2px 16px rgba(0, 0, 0, 0.1) creates a soft, diffused lift suggesting proximity to the viewer. Level 3 (Modals, overlays): box-shadow 0 16px 40px rgba(0, 0, 0, 0.12) with backdrop-filter blur(8px) and rgba(226, 222, 213, 0.3) background creates a frosted-glass effect that feels premium and intentional. Hover states on interactive elements transition smoothly (200ms ease-out) to a sli

Shapes

The shape philosophy is 'Architectural Precision'—favoring clean lines and subtle rounding that suggests craftsmanship without softness. Buttons and inputs use 6px border-radius (DEFAULT), a modest curve that feels intentional and modern without appearing playful. Cards and larger containers use 12px (lg), creating a slightly more pronounced but still restrained corner. Full-width elements (badges, pills) use 9999px (full) for visual clarity. The 2px radius on form inputs (e.g., country selector) reinforces precision and technical accuracy. No element uses 0px radius (hard corners) except in r

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use {colors.primary} (#ab8867) background with white text, 12px vertical and 24px horizontal padding, and 6px border-radius. On hover, the background shifts to {colors.primary-container} (#c09a5f) with a 200ms ease-out transition. Secondary buttons use a semi-transparent overlay (rgba(226, 222, 213, 0.3)) with a 1px border in {colors.outline-variant}, maintaining visual hierarchy without competing for attention. Links are unstyled by default (color: inherit) but gain an underline and primary color on hover, with a 150ms transition.

Containers & Surfaces Cards are the primary content container, using {colors.surface-container} (#eae7dd) background, 12px border-radius, 24px padding, and the md shadow (

Do's and Don'ts

**Do**

• Do use primary (#ab8867) for primary CTAs, focus states, and brand-critical interactive elements—it's the signature accent that anchors the visual identity.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to create visual breathing room and emphasize content hierarchy.
• Do apply negative letter-spacing (-0.02em to -0.05em) on all headings to tighten the type and reinforce precision and sophistication.
• Do use the frosted-glass overlay effect (backdrop-filter blur(8px) + rgba(226, 222, 213, 0.3)) for modals and floating elements to create premium depth.
• Do pair PPMori body copy with Ogg headlines to signal shifts between functional UI and editorial storytelling moments.
• Do transition all interactive state changes (hover, focus, active) over 150–200ms with ease-out timing to maintain visual fluidity.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to the defined surface and on-surface palette (#3e362e, #f4efeb) to maintain warmth.
• Don't apply hard shadows (box-shadow with large blur or spread)—use the defined elevation scale (sm, md, lg) with soft, diffused shadows that feel natural.
• Don't mix PPMori and Ogg in the same line or paragraph; use Ogg exclusively for display/headline roles and PPMori for all body and UI text.
• Don't use secondary (#ba945a) or tertiary (#71836b) as primary CTAs—reserve them for supporting actions, status indicators, and environmental messaging.
• Don't round corners beyond 12px (lg) except for badges and pills (full)—excessive rounding contradicts the architectural precision philosophy.
• Don't apply color overlays or filters that desaturate the warm earth tones; the palette is intentionally warm and should remain so across all states.