---
title: "Oakâme design system"
variant: extended
source: https://www.oakame.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/oakame-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Oakâme · Design System

> Reclaimed oak, presented with quiet editorial clarity

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.oakame.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Oakâme’s homepage pairs reclaimed-oak furniture with a restrained, editorial presentation. Warm off-white grounds oversized uppercase typography, fine outlined controls and expansive lifestyle photography.

## North star

Let warm canvas, dark uppercase typography and authentic reclaimed-oak photography carry the page; keep interface decoration minimal.

## Overview

The visual identity is built on a near-monochrome pairing: warm canvas #f6f1eb and deep brown-charcoal #403a34. The canvas continues across the page rather than alternating into conspicuous colour bands; the dark tone carries navigation, headings, body text, borders and outlined controls. Furniture and architectural photography supply the richer oak, stone, greenery and sky hues, so those image colours should not become interface accents. BwGradual is used throughout, from monumental uppercase display lettering to compact uppercase navigation and fine caption text. The layout feels editorial and spacious: a framed, full-bleed hero, broad stretches of open canvas, asymmetric image-and-copy arrangements, and product images arranged in loose grids. Hairline borders structure the header, buttons and information panels without adding shadow-heavy cards. Keep the experience tactile through real material photography, strong type contrast and generous breathing room rather than decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Oak Charcoal | `#403a34` | `--color-oak-charcoal` | brand | Primary text, uppercase navigation and links, fine outlines, and footer details on the light canvas. |
| Linen Canvas | `#f6f1eb` | `--color-linen-canvas` | surface | Continuous page canvas and header background, giving photography and dark typography a warm, quiet ground. |

### Semantic aliases

`--color-canvas` → `#f6f1eb` (Linen Canvas) · `--color-surface` → `#403a34` (Oak Charcoal) · `--color-text` → `#403a34` (Oak Charcoal) · `--color-border` → `#403a34` (Oak Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#403a34` | `#f6f1eb` | 9.99:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BwGradual | `--font-body` | webfont | 400, 700, 500 | Sole measured typeface for display, headings, body copy, navigation, links and captions. | Montserrat |

- **BwGradual:** Use uppercase for navigation and most prominent headings; display and H1 are bold, while captions stay small and sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.657, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 250px | 700 | 1.2 | 0 | uppercase | BwGradual | Oversized uppercase wordmark-like and campaign typography. |
| h1 | 180px | 700 | 1.2 | -0.056em | uppercase | BwGradual | Large uppercase hero and lead headings. |
| h2 | 120px | 500 | 1.24 | -0.004em | uppercase | BwGradual | Section titles, often uppercase and medium weight. |
| h3 | 60px | 700 | 1.2 | 0 | uppercase | BwGradual | Bold uppercase supporting section headings. |
| h4 | 50px | 500 | 1.2 | 0 | uppercase | BwGradual | Medium-weight uppercase smaller section headings. |
| body | 20px | 700 | 1.25 | 0 | uppercase | BwGradual | Emphasized uppercase statements and compact copy blocks. |
| caption | 12px | 400 | 1.5 | 0 | — | BwGradual | Small, regular-weight product labels and image notes. |
| nav | 180px | 700 | 1.2 | -0.056em | uppercase | BwGradual | Compact uppercase navigation labels and menu typography. |
| link | 60px | 700 | 1.2 | 0 | uppercase | BwGradual | Prominent uppercase calls to action and category links. |
| eyebrow | 10px | 700 | 1.2 | 0.1em | uppercase | BwGradual | Tiny tracked uppercase labels above section content. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 3, 5, 7, 8, 10, 15, 17, 20, 30, 50 px.
- Section rhythm 250px · element gap 20px · card padding — · max content width 1380px.

A spacious editorial composition within a measured page maximum of 1380px. The opening is a nearly full-bleed image framed by a thin dark outline and a compact segmented navigation bar. Later sections mix asymmetrical two-column image-and-copy layouts with loose product grids and broad open intervals. Keep alignment varied but deliberate: left-anchored statements, offset images and occasional centered footer content. The measured spacing scale is broad and the page density is spacious; avoid compressing its long-form section rhythm.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The page is predominantly flat: no measured shadows, gradients or rounded-corner scale. Use thin #403a34 outlines to define the navigation, button-like links and information panels. Images provide depth through their lighting and composition; avoid floating card treatments, heavy borders or artificial elevation.

## Imagery

Use large, natural-light photographs of furniture in architectural settings, reclaimed timber, old beams and calm interiors. Hero imagery is immersive and wide, with product name typography overlaid near the lower edge and small image thumbnails nearby. Product imagery is cleanly framed against neutral interiors; documentary material photos add provenance. Treat the photographs as the source of wood, stone, landscape and textile colour, not as a cue to add new UI colours.

## Components

### Segmented header

A thin outlined navigation bar on #f6f1eb, divided into cells for the logo, product menu, stock, concept, lookbook and utility links.

### Immersive product hero

Large lifestyle photograph with a small uppercase product category, oversized white product name and a row of image thumbnails along the lower edge.

### Outlined text CTA

Square-corner, unfilled control with a 1px #403a34 border, uppercase BwGradual label and generous horizontal padding.

### Asymmetric feature section

Editorial copy and photography placed in offset columns, with ample #f6f1eb space between content elements.

### Furniture product grid

Clean product photographs in an airy, uneven grid, accompanied by compact uppercase item names and restrained discovery links.

### Information accordion

Flat, finely ruled rows for NFC provenance questions, using compact text and no shadow or rounded container.

### Oversized footer wordmark

Structured footer with thin outlined link rows, centered brand details and a very large cropped uppercase Oakâme wordmark.

### Measured component styles

- **Primary button** (“NOTRE CONCEPT EN RUPTURE DE STOCK NOTRE ”): transparent background · text #403a34 · border 1px solid #403a34 · radius 0px · padding 15px 50px · 700 12px BwGradual · uppercase
- **Link** (“EN STOCK,”): transparent background · text #403a34 · radius 0px · padding 0px · 700 60px BwGradual · uppercase
- **Card** (“RECYCLÉ, QUALITÉ, FAIT-MAIN Oakâme est ”): transparent background · text #403a34 · border 1px solid #403a34 · radius 0px · padding 0px · 400 12px BwGradual
- **Navigation item** (“PRODUITS PRODUITS”): transparent background · text #403a34 · radius 0px · padding 0px · 700 10px BwGradual · uppercase

## Do

- Use #f6f1eb as the consistent page canvas.
- Set interface text and rules in #403a34.
- Use BwGradual-style uppercase display and navigation typography.
- Show furniture in authentic, naturally lit settings.
- Build hierarchy with whitespace and image scale.
- Use thin square-corner outlines for controls and dividers.

## Don't

- Do not introduce unmeasured accent colours into the interface.
- Do not alternate the page with invented coloured section bands.
- Do not add gradients, shadows or rounded cards.
- Do not replace the photographic material story with illustrations.
- Do not make the layout dense or uniformly centered.
- Do not use decorative lowercase styling for prominent headings.

## Agent prompt

Build a new Oakâme-style furniture page as an airy editorial storefront. Use Linen Canvas (#f6f1eb) for the continuous background and Oak Charcoal (#403a34) for typography, links, navigation and hairline borders. Use a BwGradual-like geometric sans, with bold uppercase display headings, compact uppercase navigation and small restrained captions. Lead with a wide, immersive photograph of reclaimed-oak furniture in a naturally lit architectural setting; let the image provide the wood and landscape colours. Compose the rest with asymmetrical image-and-copy sections, open product grids, fine outlined CTAs and flat information rows. Preserve generous spacing and varied alignment within a measured max-width of 1380px. Keep corners square and avoid shadows, gradients, extra UI colours or dense card layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Framed full-bleed furniture image with product label, oversized title and thumbnail strip. | Featured product, Image selection thumbnails | Segmented top navigation, Overlaid uppercase title, Thin image frame |
| 2 | other | Single-column introduction on an uninterrupted light canvas. | Brand positioning, Concept link | Large uppercase statement, Outlined text link |
| 3 | feature-split | Editorial two-column composition with staggered tree and timber-building photography. | Material provenance, Quality explanation | Offset photography, Compact uppercase copy, Open canvas |
| 4 | product-grid | Loose two-column product arrangement with varied image sizes and aligned labels. | Product discovery, Browse all products | Interior product photography, Uppercase product names, Minimal text links |
| 5 | feature-split | Outlined editorial panel mixing copy, reclaimed-beam photography and oversized display text. | Sustainability story, Read more | Fine panel rules, Large uppercase keyword, Material photograph |
| 6 | faq | Asymmetric two-column story with large split heading, NFC image, copy and ruled FAQ rows. | NFC provenance information, Expandable questions | Oversized split heading, Fine accordion rules, Outlined question link |
| 7 | category-nav | Left-aligned category statement above a four-column strip of furniture images. | Stock category browsing, Image-led category selection | Bold uppercase category text, Small image tiles, Compact links |
| 8 | hero | Full-bleed lifestyle photograph spanning the page width. | Brand mood setting | Edge-to-edge photography |
| 9 | footer | Outlined footer grid with centered brand details, link rows and oversized cropped wordmark. | Social links, Site navigation, Regional support disclosure | Thin cell borders, Centered brand statement, Large display wordmark |

## Source CSS custom properties (selected)

```css
--wc-primary: #7F54B3;
--wc-primary-text: white;
--wc-secondary: #e9e6ed;
--wc-secondary-text: #515151;
--wc-highligh-text: white;
--wc-content-bg: #fff;
--wc-subtext: #767676;
--color-black: 64 58 52;
--color-white: 246 241 235;
--color-gray: 155 151 147;
--color-grid: 0 0 255;
--color-blue: 0 0 255;
--ease-out: cubic-bezier(0.23,1,0.32,1);
--ease-in: cubic-bezier(0.12,0,0.39,0);
--ease-in-out: cubic-bezier(0.86,0,0.07,1);
--ease-out-back: cubic-bezier(0.175,0.885,0.32,1.275);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/oakame-com