Oakâme

Overview

Oakâme represents a contemporary movement we call 'Artisanal Minimalism'—a design philosophy that celebrates the inherent beauty of reclaimed materials without ornamentation. The brand serves discerning customers who value sustainability, craftsmanship, and the patina of history; the UI evokes the calm, grounded presence of a heritage object. Every interface element is intentionally sparse, allowing the warmth of natural wood tones and the restraint of a warm-beige palette to communicate authenticity and timelessness.

The brand voice is conversational yet authoritative: knowledgeable about materials and provenance, never breathless or trendy. Oakâme speaks in declarative sentences that honor the object's story. Example: 'This oak beam was salvaged from a 19th-century Burgundy wine cellar—each grain tells a century of climate and craft.' The vocabulary is precise (reclaimed, salvaged, handcrafted, sustainable) and avoids marketing hyperbole.

Colors

The color system is anchored in a warm, off-white surface (#f6f1eb) that mimics aged linen and reclaimed wood dust, paired with a deep charcoal primary (#403a34) that grounds all interactive elements. Primary (#403a34) is used exclusively for CTAs, navigation text, and active states—it is the brand's signature accent, appearing on buttons (padding 9px 18px, border-radius 4px), links, and focus indicators. Secondary (#7f54b3), a muted plum, supports accent highlights and tertiary information; it appears rarely, reserved for badges and secondary UI signals. Tertiary (#b3af54), a soft ochre, reinforces warmth and appears in supporting graphics and decorative accents.

The surface stack is deliberately compressed: surface (#f6f1eb) is the primary canvas, with surface-container variants (surfac

Typography

The type system uses BwGradual, a geometric sans-serif that balances warmth with clarity, reinforcing the brand's artisanal-yet-refined character. Display (60px, weight 500, line-height 68px) anchors hero sections and product names; Headline-lg (44px, weight 500) is reserved for major section titles; Body-md (16px, weight 400, line-height 24px) is the workhorse for product descriptions and body copy. All type is set with minimal letter-spacing (0em to 0.01em) to preserve the font's organic character. On small labels over busy product photography, apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility without compromising the minimalist aesthetic. Headings use weight 500 (not bold) to maintain visual restraint; emphasis is achieved through size and color, not weight.

Layout

The layout follows a 12-column grid with a max-width of 1280px, using a fluid container that respects the gutter spacing of 24px on each side. Page rhythm is established through lg spacing (40px) between major sections—hero, product grid, testimonials—creating breathing room that honors the brand's minimalist philosophy. The container max-width of 1280px ensures product imagery remains prominent without overwhelming the viewport. White-space is treated as a design material: md spacing (24px) separates card groups, sm spacing (12px) is used within cards for label-to-field relationships. The spacing scale is semantic: unit (8px) is the baseline, xs (4px) for micro-interactions, sm (12px) for field padding, md (24px) for component padding, lg (40px) for section separation, xl (64px) for hero

Elevation & Depth

Depth is conveyed through subtle shadows and border definition rather than dramatic layering. The elevation system uses three levels: sm (0 1px 2px 0 rgba(18, 18, 23, 0.05)) for base cards and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements and overlays. All interactive surfaces (cards, buttons, inputs) receive a 1px solid border in outline-variant (#cfc8d8) to define edges without relying on shadow alone. Hover states elevate from sm to md shadow, creating a tactile sense of lift. The flat, border-driven a

Shapes

The shape philosophy is 'Architectural Restraint': corners are softened but not rounded. Buttons and inputs use border-radius 4px (0.25rem), creating a subtle break from hard edges without introducing the playfulness of larger radii. Cards use border-radius 4px as well, maintaining visual consistency and a refined, gallery-like presentation. The DEFAULT radius (8px / 0.5rem) is reserved for larger containers and modals. Full-radius (9999px) is used only for badge components and icon buttons, where the circular form signals a discrete, self-contained element. This graduated approach—4px for pri

Components

Action Elements Buttons are the primary interactive surface. The button-primary component uses backgroundColor {colors.primary} (#403a34), textColor {colors.on-primary} (#f6f1eb), padding 9px 18px, height 40px, and border-radius 4px with a 1px solid border in {colors.primary}. On hover, the button-primary-hover state transitions the backgroundColor to {colors.primary-container} (#e9e6ed) and textColor to {colors.on-primary-container} (#2a2520), with a border shift to {colors.outline} (#767676). The transition duration is 200ms ease-out. Button-secondary uses a transparent background with a 1px outline border in {colors.outline}, allowing the primary text color to dominate; on hover, it fills with {colors.surface-container-high} (#ddd9d4). All buttons use typography {typography.label-md

Do's and Don'ts

**Do**

• Do use primary (#403a34) exclusively for CTAs and active states—it is the brand's signature accent and must remain rare and impactful.
• Do maintain the 4px border-radius on buttons and cards to preserve the refined, architectural aesthetic; avoid larger radii that would introduce playfulness.
• Do apply md spacing (24px) between major sections and sm spacing (12px) within cards to create a breathing, gallery-like rhythm.
• Do use weight 500 (not bold) for headings and rely on size and color for emphasis, honoring the brand's minimalist restraint.
• Do apply elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to create a tactile sense of lift without dramatic depth.

**Don't**

• Don't use secondary (#7f54b3) or tertiary (#b3af54) as primary interactive colors—they are supporting accents only.
• Don't apply border-radius larger than 8px to buttons or cards; the brand's architectural restraint depends on subtle, not rounded, corners.
• Don't use shadows larger than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) or the interface will feel heavy and undermine the minimalist aesthetic.
• Don't mix BwGradual with system fonts or serif typefaces; the entire system depends on BwGradual's geometric warmth.
• Don't reduce the gutter spacing below 24px or the layout will feel cramped and lose its gallery-like breathing room.