Oakame

---
version: alpha
name: Oakame-design-analysis
description: "A warm, editorial e-commerce interface for artisanal reclaimed-oak furniture, anchored on a cream canvas (#f6f1eb) with dark warm-brown ink (#403a34). The system reads as quiet gallery-catalogue minimalism — full-bleed lifestyle photography, oversized BwGradual display type, sharp 0px corners everywhere, no shadows, and thin-outlined tracked-uppercase buttons. Brand voltage comes from massive display headlines and immersive product photography rather than color; the palette is deliberately monochromatic warm-neutral."

colors:
  primary: "#403a34"
  ink: "#403a34"
  ink-strong: "#2f2f2f"
  body: "#515151"
  muted: "#767676"
  muted-soft: "#a1a1a1"
  canvas: "#f6f1eb"
  surface: "#ffffff"
  surface-soft: "#efefef"
  surface-lavender: "#e9e6ed"
  surface-lavender-strong: "#cfc8d8"
  hairline: "#cccccc"
  hairline-cool: "#bfc3c8"
  black: "#000000"
  accent-purple: "#7f54b3"
  accent-olive: "#b3af54"
  accent-red: "#b94a48"
  accent-red-strong: "#aa0000"
  accent-blue: "#579af6"
  accent-slate: "#3f4b5b"

typography:
  display:
    fontFamily: "BwGradual, Poppins, sans-serif"
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: normal
  title:
    fontFamily: "BwGradual, Poppins, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: normal
  body:
    fontFamily: "BwGradual, Poppins, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
  caption-uppercase:
    fontFamily: "BwGradual, Poppins, sans-serif"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em

rounded:
  none: 0px

spacing:
  xxs: 4px
  xs: 8px
  sm: 10px
  md: 15px
  lg: 20px
  xl: 30px
  xxl: 50px
  section: 100px

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.none}"
  button-primary:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.none}"
    padding: 0px 20px
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.none}"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.canvas}"
    typography: "{typography.display}"
    rounded: "{rounded.none}"
  product-title-overlay:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.display}"
    rounded: "{rounded.none}"
  card:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  info-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 30px
  faq-accordion-item:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 20px
  thumbnail-tile:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.none}"

---

## Overview

Oakame is a French e-commerce surface for artisanal reclaimed-oak furniture, and its marketing/landing page reads as quiet gallery-catalogue minimalism. The page floor is a warm cream canvas (`{colors.canvas}` — #f6f1eb), all text is dark warm-brown ink (`{colors.ink}` — #403a34), and the layout is dominated by full-bleed lifestyle photography and oversized display typography. Everything is flat: no shadows were measured, and every measured corner radius is 0px — the system is sharp-edged and architectural.

Type voice is single-family: **BwGradual** carries everything, from the 50px `{typography.display}` headline down to the 10px tracked-uppercase `{typography.caption-uppercase}` used on nav and buttons. The brand does not split display and body across two faces — it modulates one family across a very wide size range (the giant "ZOLA" / "LÉ RECYC" / category headlines in the screenshots are much larger than the measured 50px h1, scaled up as art-directed display moments).

Brand voltage comes from two things only: **massive display headlines** and **immersive edge-to-edge product photography**. The palette is deliberately monochromatic warm-neutral — cream, brown, white, gray. The lavender/purple/red/blue accents that appear in the measured data (`#7f54b3`, `#e9e6ed`, `#b94a48`, `#579af6`, etc.) are almost certainly WooCommerce framework defaults leaking through the CSS rather than brand-intentional colors (see Known Gaps) and should not be treated as part of the visible brand system.

**Key Characteristics:**
- Warm cream canvas (`{colors.canvas}` — #f6f1eb) with dark warm-brown ink (`{colors.ink}` — #403a34). No white page floor — white (`{colors.surface}`) appears only on inset tiles/panels.
- Single typeface (BwGradual) across the whole system, modulated by size and weight rather than by family.
- Sharp corners everywhere — every measured radius is `{rounded.none}` (0px). No rounded cards, no pill buttons.
- No shadows measured — the system is entirely flat. Depth comes from photography and from thin hairline outlines.
- Thin-outlined, tracked-uppercase buttons (`{typography.caption-uppercase}` — 10px / 700 / 0.1em) with 0px 20px padding. Buttons read as small architectural labels, not filled CTAs.
- Full-bleed lifestyle photography anchors the hero and product moments; a thumbnail strip sits over the hero image bottom-right.
- Oversized display headlines used as compositional elements ("ZOLA", the category run-on headline).

## Colors

### Brand & Core
- **Primary / Ink** (`{colors.primary}` / `{colors.ink}` — #403a34): The single dominant color — a dark warm brown used for all headlines, body text, button labels, nav, and outlines. This is the action color and the text color simultaneously.
- **Ink Strong** (`{colors.ink-strong}` — #2f2f2f): A near-black used for the highest-contrast text moments.
- **Body** (`{colors.body}` — #515151): Secondary running-text gray.
- **Muted** (`{colors.muted}` — #767676): Tertiary text — captions, meta labels.
- **Muted Soft** (`{colors.muted-soft}` — #a1a1a1): Faintest text — fine print, disabled labels.

### Surface
- **Canvas** (`{colors.canvas}` — #f6f1eb): The universal warm-cream page floor. Nav, footer, and most bands sit on it.
- **Surface** (`{colors.surface}` — #ffffff): Pure white — appears on inset thumbnail tiles and small panels, not as the page background.
- **Surface Soft** (`{colors.surface-soft}` — #efefef): A cool light-gray used on divider fills / faint panels.
- **Surface Lavender** (`{colors.surface-lavender}` — #e9e6ed) and **Surface Lavender Strong** (`{colors.surface-lavender-strong}` — #cfc8d8): Cool lavender-gray tones measured at low frequency; likely framework UI surfaces (see Known Gaps).

### Hairline
- **Hairline** (`{colors.hairline}` — #cccccc): The 1px outline tone on cards, FAQ accordion rows, and outlined buttons on cream.
- **Hairline Cool** (`{colors.hairline-cool}` — #bfc3c8): A cooler border alternative.

### Framework / Incidental Accents
These were measured at very low frequency and are almost certainly WooCommerce default styling (notice/button/link colors) rather than brand-intentional hues. Documented for faithfulness, not for use:
- **Accent Purple** (`{colors.accent-purple}` — #7f54b3) — the WooCommerce default purple.
- **Accent Olive** (`{colors.accent-olive}` — #b3af54)
- **Accent Red / Red Strong** (`{colors.accent-red}` — #b94a48, `{colors.accent-red-strong}` — #aa0000) — validation/error defaults.
- **Accent Blue** (`{colors.accent-blue}` — #579af6) — link/info default.
- **Accent Slate** (`{colors.accent-slate}` — #3f4b5b)
- **Black** (`{colors.black}` — #000000)

## Typography

### Font Family
The entire system runs on **BwGradual** — a commercial humanist/geometric sans from Branding With Type. It carries display headlines, titles, body copy, and tracked-uppercase labels alike. There is no secondary family in the measured data.

BwGradual is a licensed commercial webfont and is not freely redistributable. Although it was not flagged in `fonts_licensed`, it should not be shipped without a license. A usable **open-source substitute** is **Poppins** (geometric, similar rounded proportions) at matching weights, or **Nunito Sans** for a slightly softer read. The declared fallback stack is `BwGradual, Poppins, sans-serif`.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display}` | 50px | 500 | 1.2 | normal | h1 headlines; scaled up further for the marquee "ZOLA" / category display moments |
| `{typography.title}` | 18px | 500 | 1.4 | normal | h3 sub-heads, card titles |
| `{typography.body}` | 12px | 400 | 1.5 | normal | Running paragraph text, descriptions |
| `{typography.caption-uppercase}` | 10px | 700 | 1.2 | 0.1em | Nav items, button labels, small tracked meta labels ("CANAPÉ", "NOTRE CONCEPT") |

### Principles
The system uses **one family, wide dynamic range**. Contrast is created by jumping from 10px tracked-uppercase micro-labels straight to a 50px+ display headline — the mid-sizes (title 18px, body 12px) are used sparingly. Body copy is unusually small (12px), which reinforces the editorial/catalogue feel where photography and headlines dominate and text recedes.

The `{typography.caption-uppercase}` role is the system's connective tissue: nav links, buttons, and category eyebrows all share the 10px / 700 / 0.1em tracked-uppercase treatment. It is the only tracked style in the system.

### Note on Font Substitutes
If BwGradual is unavailable, use **Poppins** (500 for display/title, 400 for body, 700 for the tracked-uppercase labels). Keep the 0.1em tracking on the uppercase role — that tracking is a core part of the label voice.

## Layout

### Spacing System
- **Base rhythm:** small increments cluster at 8px and 20px (the two most frequent measured values), with 15px and 30px close behind.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 15px · `{spacing.lg}` 20px · `{spacing.xl}` 30px · `{spacing.xxl}` 50px · `{spacing.section}` 100px.
- **Larger measured intervals** (68px, 80px, 100px, 150px, 200px) drive the very generous vertical gaps between editorial bands — the landing page uses extreme whitespace between sections, letting single headlines and photographs float on the cream canvas.
- **Component padding:** buttons use 0px vertical × 20px horizontal (`{spacing.lg}`); info panels and FAQ rows use `{spacing.xl}` (30px) / `{spacing.lg}` (20px).

### Grid & Container
- **Hero:** full-bleed edge-to-edge photography with a bottom-left product title overlay and a bottom-right 4-up thumbnail strip.
- **Editorial bands:** sparse, asymmetric placement — single labels and headlines positioned at the left, right, or center of otherwise empty cream space (visible in the long-scroll screenshot).
- **Product grid:** category names ("ZOLA", "CAMUS", "BONAPARTE", "BOCUSE", "GAUGUIN", "DESCARTES") laid out in a loose multi-column arrangement.
- **FAQ / info:** two-column split with an intro block on the left and accordion rows on the right.

### Whitespace Philosophy
Oakame uses **extreme, gallery-grade whitespace** — the vertical gaps between bands run to 100–200px, and most bands hold a single headline or a small cluster of labels. The effect is unhurried and premium: the page reads like a printed lookbook where each spread breathes.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Default for all bands and text on cream |
| Hairline outline | 1px `{colors.hairline}` border | Outlined buttons, FAQ accordion rows, bordered info panels |
| Photographic depth | Full-bleed imagery | Hero and product photography carry their own real-world depth |

No shadow tokens were measured (`shadows: []`). The system is deliberately **flat and sharp** — depth is delivered entirely by photography and by thin hairline outlines, never by drop shadows or blur. There is no glassmorphism, no neumorphism, no elevation layering.

### Decorative Depth
- The hero thumbnail strip sits directly over the photograph with no shadow — it reads as flat inset tiles on the image.
- Oversized display headlines that bleed off the edge of their container (e.g., "LÉ RECYC") act as compositional depth cues without any elevation styling.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Everything — buttons, cards, panels, thumbnails, inputs |

The entire system is sharp-cornered. Both measured components (`button-primary`, `card`) report a 0px radius, and no other radius values were captured. Rectangular geometry is a core brand signal — it reinforces the architectural, furniture-catalogue tone.

### Photography Geometry
Hero and product imagery are full-bleed rectangles with hard 0px corners. Thumbnail tiles in the hero strip are equal-width rectangles, also square-cornered. No circular avatars or rounded image masks were observed.

## Components

### Navigation

**`top-nav`** — Cream-canvas top bar spanning the page. Carries the "oakame" wordmark at left (a lowercase serif-styled logo lockup with a circumflex accent), a centered/left "PRODUITS" dropdown, and a right cluster of `{component.nav-link}` items ("EN STOCK", "NOTRE CONCEPT", "LOOKBOOK", "ESPACE PRO") plus account, cart, and "FR" language selector icons. All labels use `{typography.caption-uppercase}` (10px / 700 / 0.1em). Flat, no shadow, `{rounded.none}`.

**`nav-link`** — Individual tracked-uppercase menu item. Transparent background, `{colors.ink}` text, `{typography.caption-uppercase}`.

### Buttons

**`button-primary`** — The system's button, rendered as a thin-outlined tracked-uppercase label rather than a filled CTA. Transparent background, `{colors.ink}` text and 1px `{colors.hairline}` outline, `{typography.caption-uppercase}`, padding 0px × 20px, `{rounded.none}`. Used for "NOTRE CONCEPT", "TOUS NOS PRODUITS", "EN SAVOIR PLUS", "PLUS DE QUESTIONS". No filled/inverted variant was measured (default state only).

### Cards & Containers

**`card`** — Base container: sharp `{rounded.none}` corners, no shadow. Background is transparent (sits on cream). Used as the structural wrapper for content blocks.

**`info-card`** — Text panel (e.g., the "RECYCLÉ, QUALITÉ, FAIT-MAIN" concept block and its body copy). Cream background, `{colors.body}` text in `{typography.body}`, thin hairline outline, `{spacing.xl}` (30px) padding, `{rounded.none}`.

**`faq-accordion-item`** — Collapsible row in the "QU'EST QU'UNE PUCE NFC ?" FAQ block. Cream background, `{colors.ink}` label, `{typography.body}`, hairline divider outline, `{spacing.lg}` (20px) padding, `{rounded.none}`.

**`thumbnail-tile`** — Small rectangular image tile in the hero's bottom-right 4-up strip. White (`{colors.surface}`) mount, `{rounded.none}`, no shadow — flat inset over the hero photograph.

### Hero & Overlays

**`hero-band`** — Full-bleed lifestyle photograph (reclaimed-oak sofa in a Mediterranean setting). Carries a bottom-left product title overlay and a bottom-right thumbnail strip. Text over image is set in `{colors.canvas}` (cream reads as near-white on the warm photo).

**`product-title-overlay`** — Bottom-left product label lockup: a small `{typography.caption-uppercase}` eyebrow ("CANAPÉ") above an oversized `{typography.display}` product name ("ZOLA", scaled well beyond 50px as an art-directed display moment). Text color `{colors.canvas}`, no background fill.

### Footer

**`footer`** — Cream-canvas footer that closes the page. Carries the Oakame monogram/mark and tracked-uppercase link labels (`{typography.caption-uppercase}`) plus a tagline ("MOBILIER DESIGN, ÉCO-RESPONSABLE ET…"). Flat, `{rounded.none}`, no shadow. Unlike many systems, the footer does NOT invert to dark — it stays on the same warm cream floor as the rest of the page.

## Do's and Don'ts

### Do
- Keep the palette monochromatic warm-neutral: `{colors.ink}` on `{colors.canvas}`, with white (`{colors.surface}`) only for inset tiles. This restraint is the brand.
- Use `{typography.caption-uppercase}` (10px / 700 / 0.1em) for every nav item, button, and eyebrow label — the tracked-uppercase treatment is the connective voice.
- Set headlines in `{typography.display}` and scale them large as compositional elements. Big BwGradual is the primary brand gesture.
- Keep every corner sharp (`{rounded.none}`). Rectangular geometry is intentional.
- Keep the system flat — no shadows. Let photography and hairline outlines carry depth.
- Give bands extreme vertical whitespace (up to `{spacing.section}` and beyond). The gallery pacing is deliberate.
- Render buttons as thin-outlined tracked labels, not filled blocks.

### Don't
- Don't introduce the framework accent colors (`{colors.accent-purple}`, `{colors.accent-red}`, `{colors.accent-blue}`, etc.) into the brand surface — they are WooCommerce leakage, not brand hues.
- Don't add drop shadows or rounded corners — both break the flat, sharp, architectural language.
- Don't invert the footer to a dark surface; Oakame closes the page on the same cream floor.
- Don't fill buttons with a solid ink block; the brand button is outlined and tracked.
- Don't densify the layout — the extreme whitespace is a core premium signal.
- Don't add a second typeface; BwGradual (or its substitute) carries everything.
- Don't document hover states — default and pressed only.

## Responsive Behavior

Responsive breakpoints were not measured in this single-page (landing, desktop) capture. The following is inferred from the layout structure and marked accordingly; treat specifics as **derived**.

### Breakpoints (derived)

| Name | Width | Key Changes (derived) |
|---|---|---|
| Mobile | < 768px | Nav collapses to a menu toggle; hero title scales down; product-name grid stacks 1-up; thumbnail strip likely wraps or hides |
| Tablet | 768–1024px | Nav tightens; category grid reduces columns; two-column FAQ likely stacks |
| Desktop | > 1024px | Full horizontal nav, full-bleed hero with bottom-right thumbnail strip, multi-column category grid (as captured) |

### Touch Targets
- `{component.button-primary}` uses 0px vertical padding with a 10px label — the effective tap height is small and would need enlargement on touch devices (derived; not verified).
- Nav icons (account, cart, language) cluster at the top-right; exact hit-area sizing was not measured.

### Collapsing Strategy (derived)
- Full-bleed hero photography should scale proportionally, keeping the product-title overlay bottom-left.
- The loose multi-column category listing should reduce to fewer columns then single-column.
- The two-column FAQ/info split should stack intro-over-accordion.

## Iteration Guide

1. Focus on ONE component at a time; reference its YAML key directly (`{component.button-primary}`, `{component.faq-accordion-item}`).
2. Variants (`-active`, `-disabled`) should be added as separate `components:` entries once measured — none were captured here.
3. Use `{token.refs}` everywhere; never inline a hex in a component.
4. Never document hover; default and Active/Pressed states only.
5. Keep the trinity intact: cream canvas + brown ink + oversized BwGradual display. Color restraint is the brand.
6. Keep corners sharp and surfaces flat — resist adding radius or shadow tokens unless a future capture measures them.
7. When emphasizing: scale the display headline larger before reaching for weight or color.

## Known Gaps

- Only one page (landing) at one desktop viewport was captured; no responsive breakpoints, no hover/active/disabled states, and no interior product/cart pages were measured.
- **BwGradual is a licensed commercial webfont** — it was NOT flagged in `fonts_licensed`, but it should not be shipped without a license; Poppins/Nunito Sans substitutes are documented in Typography.
- The measured accent colors (`#7f54b3`, `#e9e6ed`, `#cfc8d8`, `#b3af54`, `#b94a48`, `#aa0000`, `#579af6`, `#3f4b5b`) appeared at very low frequency and match WooCommerce framework defaults; they are documented for faithfulness but flagged as likely non-brand leakage. Confirmation would require inspecting rendered elements.
- No border-radius or shadow tokens were measured (`radius: []`, `shadows: []`); the flat/sharp reading is inferred from the two components that reported 0px / none.
- Only four type sizes were measured (50 / 18 / 12 / 10px). The very large display headlines visible in the screenshots ("ZOLA", "LÉ RECYC", the category run-on) exceed 50px and were not individually measured — their sizes are treated as scaled `{typography.display}` moments (derived).
- No `on-primary` / inverted button text color was measured because the button is outlined rather than filled; a filled-button variant, if it exists, is undocumented.
- Exact nav-bar height, hero aspect ratio, and container max-width were not captured.
- No h2 role was measured; the hierarchy jumps from `{typography.display}` (h1) to `{typography.title}` (h3).

<!-- Documented by Duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/oakame/design-md -->