IZANAMI

Overview

IZANAMI embodies the Japanese philosophy of Wa—the pursuit of harmony through balance, restraint, and intentional design. The brand serves individuals and communities seeking to reconnect with timeless principles of craft, contemplation, and belonging. The aesthetic is rooted in Architectural Minimalism with Zen influences: a near-black canvas (#0a0801) punctuated by a warm, earthy gold accent (#caa100) that evokes both tradition and refinement. The UI evokes a sense of calm clarity—like stepping into a carefully curated tea room where every element has purpose and nothing is superfluous.

The voice is meditative yet precise, never rushed or casual. Sentences are spare and weighted with meaning. Vocabulary draws from Japanese aesthetics (ma, yohaku no bi, shibui) and contemporary craft language. The brand speaks to the user as a fellow seeker, not a consumer. Example: 'Harmony is not something to be created—it is something to be remembered.'

Colors

The color system centers on a profound dark foundation (#0a0801 surface, #050400 surface-dim) that grounds the entire experience in contemplation and focus. Against this near-black canvas, the primary accent—a warm, muted gold (#caa100)—functions as the sole chromatic voice, reserved exclusively for interactive elements, CTAs, and moments of emphasis. This restraint is intentional: the gold appears sparingly, making each interaction feel deliberate and valued. Secondary colors are tonal neutrals: off-white (#d9d7d4) for body text and secondary surfaces, mid-gray (#a8a5a0) for tertiary information, and a graduated surface stack (surface-container-low #0f0d0a through surface-container-highest #1f1b17) that provides subtle depth without visual noise. The outline-variant (#4a4743) is used for

Typography

The type system reflects a hierarchy of contemplation: display-level headlines use Playfair Display (72px, 400 weight, -0.03em tracking) for hero moments that demand presence without aggression; headline-md shifts to Cinzel (32px, 0.02em tracking) for section titles, introducing a subtle serif formality that nods to Japanese typography traditions. Body copy relies on Helvetica Neue (16px, 400 weight, 24px line-height) for legibility and neutrality—a workhorse that recedes and lets content breathe. Labels and UI text use the same Helvetica at 14px with 0.02em tracking to maintain consistency. All type is left-aligned and uses generous line-height (1.5 to 1.75) to create visual rest. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (12px) when placed over textured backgrounds

Layout

The layout operates on a 12-column grid with a maximum container width of 1280px, allowing content to breathe on larger screens while maintaining focus. The spacing scale is semantic: gutter (24px) defines horizontal padding on sections, lg spacing (40px) separates major sections, and md spacing (24px) creates breathing room between components. The design favors asymmetry and white space (ma—the Japanese concept of meaningful emptiness) over symmetry; content often anchors to the left or right edge with substantial void on the opposite side. Vertical rhythm is strict: all margins and padding are multiples of 8px (the unit token). The footer and header are fixed, creating a persistent frame around scrolling content. Container max-width ensures text never exceeds 80 characters per line, main

Elevation & Depth

Depth is conveyed through subtle layering rather than dramatic shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for small UI elements like badges and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.20)) for floating elements and overlays. Shadows are soft and diffuse, never sharp—they suggest depth without drawing attention. The dark background (#0a0801) means shadows are visible but restrained; they enhance hierarchy without creating visual clutter. Interactive elements (buttons, links) do not use shadows i

Shapes

The shape philosophy is 'Soft-Technical Restraint'—minimal rounding that respects the grid and the eye. Buttons and inputs use a small, consistent border-radius of 0.5rem (8px), just enough to soften hard edges without introducing organic curves. Cards and larger containers use 0.75rem (12px) for a slightly more generous feel. The full (9999px) radius is reserved for badges and avatar-like elements. Dividers and lines are always 1px, never thicker, to maintain visual lightness. The rationale: sharp corners would feel cold and aggressive against the warm gold and dark canvas; excessive rounding

Components

Action Elements Buttons are the primary interaction point and must always include a visible border (1px solid) to define their clickable area. The primary button uses {colors.primary} background with {colors.on-primary} text, 44px height, and 12px 24px padding. On hover, shift to {colors.primary-container} with a smooth 0.3s transition. The secondary button is transparent with a {colors.on-surface} border; on hover, fill the background with {colors.surface-container-high} and change the border to {colors.primary}. Links are underlined with {colors.primary} and shift to {colors.primary-container} on hover—never remove the underline, as it is the primary affordance.

Containers & Surfaces Cards use {colors.surface-container} background with a 1px {colors.outline-variant} border and {

Do's and Don'ts

**Do**

• Do use the gold accent (#caa100) sparingly—reserve it for primary CTAs, focus states, and moments of emphasis. Overuse dilutes its power.
• Do maintain strict 8px spacing multiples throughout. This creates visual rhythm and makes the grid predictable for developers.
• Do pair Playfair Display (display headlines) with Helvetica Neue (body) to create contrast between formal and functional without clashing.
• Do always include a 1px border on cards, buttons, and inputs—the border is the primary visual affordance against the dark background.
• Do use the full surface-container stack (lowest through highest) to create subtle depth; avoid jumping directly from surface to surface-container-highest.

**Don't**

• Don't use bright, saturated colors or gradients. The gold is muted and warm; any accent should follow this restraint.
• Don't apply shadows to buttons in their default state. Shadows are reserved for elevated surfaces (cards, modals) and hover states.
• Don't exceed 80 characters per line of body text. Use the container-max-width (1280px) and generous margins to enforce this.
• Don't round corners excessively. Keep border-radius at 0.5rem (8px) for buttons and 0.75rem (12px) for cards; never exceed 1.5rem unless creating a badge.
• Don't use system fonts or generic sans-serif fallbacks in display headlines. Always load Playfair Display and Cinzel from Google Fonts to maintain the brand's typographic identity.