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

# Waka Waka · Design System

> Quiet neutrals, oversized type, and crafted objects.

**Theme:** light · **Industry:** design · **Source:** https://wakawaka.world/ · **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._

Waka Waka presents its furniture and functional objects through a restrained, image-led studio homepage. Oversized wordmarks, calm neutral fields, and an asymmetric product grid give the work room to speak.

## North star

Let oversized, tightly set typography and generously quiet space frame the furniture photography without adding decorative UI.

## Overview

The page uses a quiet, warm-neutral foundation rather than a conventional accent colour. Gallery White (#edeae4) forms the main canvas, while Soft Putty (#d4d1cb) and Stone Grey (#c9c7c4) appear in broad image or card fields; Ink (#28282a) carries the wordmark, navigation, labels, and links. Waka Sans is the defining typographic asset: the brand name is set extremely large and heavy, while navigation and captions are small, tightly tracked, and often uppercase. A broad editorial grid balances a small furniture image with a much larger close-up, then returns to oversized branding and compact footer details. Generous blank areas keep the dense visual weight of the wordmark from feeling crowded. Photography stays natural and object-focused, with muted colour and minimal framing. The overall effect is an exhibition-like portfolio, not a conventional retail catalogue.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#28282a` | `--color-soft-ink` | brand | Wordmark, headings, navigation, links, and compact footer text. |
| Gallery White | `#edeae4` | `--color-gallery-white` | neutral | Warm, pale canvas behind the hero, product content, and lower brand section. |
| Studio Putty | `#d4d1cb` | `--color-studio-putty` | surface | Dominant muted field in the screenshot and a subdued background for product imagery. |
| Stone Grey | `#c9c7c4` | `--color-stone-grey` | surface | Flat card surface measured for product content; keep it subordinate to the photography. |

### Semantic aliases

`--color-canvas` → `#edeae4` (Gallery White) · `--color-surface` → `#d4d1cb` (Studio Putty) · `--color-surface-2` → `#c9c7c4` (Stone Grey) · `--color-text` → `#28282a` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#28282a` | `#edeae4` | 12.26:1 | AAA |
| `#28282a` | `#d4d1cb` | 9.66:1 | AAA |
| `#28282a` | `#c9c7c4` | 8.72:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Waka Sans | `--font-body` | webfont | 500, 700 | Brand wordmark, navigation, product labels, captions, and page text. | Manrope |

- **Waka Sans:** Use the measured 500 and 700 weights. Wordmarks are exceptionally large and heavy; small navigation and captions use tight tracking, with frequent uppercase.

### Type scale — Custom (ratio ≈ 5.578, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 560px | 700 | 0.8 | -0.09em | — | Waka Sans | Oversized Waka wordmark repeated in the opening and closing brand panels. |
| h1 | 24px | 500 | 0.83 | -0.03em | — | Waka Sans | Compact page or product heading where a semantic heading is needed. |
| body | 18px | 500 | 1 | -0.02em | uppercase | Waka Sans | Uppercase supporting copy and short descriptive statements. |
| caption | 14px | 500 | 1 | -0.03em | uppercase | Waka Sans | Tiny uppercase product labels and photo credits. |
| nav | 14px | 500 | 1 | -0.03em | uppercase | Waka Sans | Small uppercase studio navigation and location details. |
| link | 10px | 500 | 1 | -0.02em | — | Waka Sans | Small understated object links and image attribution. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 6, 11, 20, 27, 95, 173 px.
- Section rhythm 95px · element gap — · card padding 290px · max content width —.

Build a wide editorial canvas with a loose, asymmetric two-column product area. The large wordmark spans most of the page width and acts as both identity and structural anchor. Pair a smaller, near-square object photograph with a much larger close-up, aligned along their top edges. Keep navigation and footer information discreet and edge-positioned. Measured section rhythm includes a generous gap between the brand panels and the product content; avoid compressing the open space or adding a rigid card grid.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)` on interactive elements.

The design is essentially flat: measured cards have square corners, with no shadows or gradients. Separate content through canvas changes, whitespace, and image scale rather than raised panels. The screenshot includes a fine pale horizontal rule as a quiet divider; keep borders rare and hairline-light.

## Imagery

Use natural furniture photography as the primary content: show a complete object in one frame and a tightly cropped material or construction detail in another. Keep colour muted and lighting soft, with restrained contrast so the wood and form remain legible against neutral surroundings. Images are flat, unframed rectangles rather than illustrations or decorative mockups.

## Components

### Oversized wordmark

Set “Waka” in Waka Sans at display scale, heavy weight, tight tracking, and near-black ink; use it as a dominant visual block rather than a conventional small logo.

### Studio navigation

Use small, compact uppercase text for the brand, furniture index, studio, and location details, with no filled navigation container.

### Asymmetric product pair

Place a smaller full-object chair photograph beside a substantially larger close crop, aligned at the top within an open two-column composition.

### Object label

Attach a concise uppercase object name near its image, styled as small, unobtrusive text in Soft Ink (#28282a).

### Photo credit

Present attribution as a tiny, quiet caption adjacent to the relevant photograph; keep it secondary to the product.

### Studio footer

Arrange functional category, location, contact, social, and copyright details as compact text groups across the lower edge.

### Measured component styles

- **Primary button**: transparent background · text #28282a · radius 0px · padding 0px · 500 14px Waka Sans
- **Link** (“Object CYLINDER BACK”): transparent background · text #28282a · radius 0px · padding 0px · 400 14px Waka Sans
- **Card**: background #c9c7c4 · text #28282a · radius 0px · padding 1161.5px 0px 0px 0px · 400 14px Waka Sans
- **Navigation item** (“WAKA WAKA”): transparent background · text #28282a · radius 0px · padding 0px · 400 14px Waka Sans

## Do

- Use Waka Sans or a close geometric sans substitute.
- Make the wordmark the dominant typographic element.
- Keep the canvas warm and neutral.
- Use asymmetric product-image proportions.
- Keep captions and navigation small and tightly tracked.
- Preserve generous open space around content.

## Don't

- Do not add bright accent colours.
- Do not round cards or add drop shadows.
- Do not force product images into equal-sized tiles.
- Do not use large blocks of explanatory copy.
- Do not decorate the layout with gradients or badges.
- Do not let interface chrome compete with the furniture.

## Agent prompt

Create a new studio or product page in the Waka Waka visual style. Use Gallery White (#edeae4) as the warm canvas, Soft Ink (#28282a) for type, and reserve Studio Putty (#d4d1cb) and Stone Grey (#c9c7c4) for quiet image or card fields. Use a close geometric sans such as Manrope if Waka Sans is unavailable. Make the brand or page title oversized, bold, and tightly tracked. Build an open asymmetric editorial grid with one smaller full-object image beside a larger detail photograph. Keep navigation, labels, credits, and footer information tiny and unobtrusive. Use whitespace and image scale to create hierarchy; keep corners square, surfaces flat, and decoration minimal. Do not add unmeasured colours, shadows, or ornamental UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse full-width neutral field with a centrally placed oversized wordmark and small edge details. | brand-first entry, minimal orientation | oversized wordmark, fine divider, tiny studio copy |
| 2 | product-showcase | Open two-column editorial grid pairing a small full-object image with a large close-up. | object discovery, image-led browsing | asymmetric photography, compact object labels, subtle photo credits |
| 3 | footer | Large repeated wordmark above compact, horizontally arranged studio and contact details. | studio contact access, social navigation | oversized brand type, small text groups, quiet neutral canvas |

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