# Wakawaka · Design system migration spec

> Source: https://wakawaka.world  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how extreme typographic scale and rigorous minimalism can create a powerful, premium brand identity without relying on color or complex UI components.

## 1. Identity DNA

The Wakawaka design system operates with the restraint of a minimalist gallery catalog, where every element is positioned with deliberate curatorial intent. Like a well-bound exhibition book, the visual language prioritizes sculptural form and quiet negative space over decorative flourish, letting the craftsmanship of both typography and photography speak with quiet authority.

**One-liner:** A sophisticated design studio portfolio showcasing functional wooden objects with bold, sculptural typography.
**Keywords:** furniture · studio · minimal · craft · index
**Analogy:** A minimalist gallery exhibition catalog.

## 2. Color

The palette is a study in restraint: an off-white ground (#EDEAE4) provides a warm, textured canvas for deep charcoal ink (#28282A) and soft greys (#C9C7C4). This high-contrast, strictly monochrome approach ensures that typography and photographic subjects remain the undeniable focal points.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EDEAE4` | main background |
| `--bg-soft` | `#D4D1CB` | card background |
| `--ink` | `#28282A` | body text |
| `--muted` | `#C9C7C4` | placeholder |
| `--line` | `rgba(40,40,42,1.0)` | divider |

**Color principle:** High-contrast, minimalist palette focused on letting the typography and photography take center stage.

Color serves the composition, never competing with it.

## 3. Typography

Typography functions as the primary sculptural element, with massive display type dominating the viewport in extreme negative tracking. The system pairs this expansive, headline-scale presence with uppercase small caps for navigation and metadata, creating a clear hierarchy through weight and spacing rather than decorative variation.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 560px | 0.8 | 500 | -50.4px | Hero headline |
| body | 14px | 1.6 | 400 | -0.28px | Body text |

**Type rules:**
- Uppercase small caps for navigation and metadata
- Heavy tracking on small uppercase text
- Extreme negative tracking on massive display text

## 4. Spacing

Vertical rhythm is generous, creating breathing room between typographic blocks while horizontal padding is minimized, allowing text to bleed to the very edges of the container.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 96 px
- **Rhythm:** Generous vertical spacing with minimal horizontal padding, allowing typography to bleed to edges.

## 5. Surfaces

Surfaces are deliberately flat, with no drop shadows or decorative borders. Separation between elements is achieved purely through shape, scale, and the strategic use of negative space.

- **Radius:** sm 0px · md 0px · lg 0px · pill 50px
- **Borders:** None; relies on shape and spacing for separation.

## 6. Layout

The layout skeleton is a full-bleed vertical stack, where oversized typography commands the viewport. This structure creates a single-column reading experience that mimics the sequential unfolding of a well-designed publication.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed vertical stack with oversized typography dominating the viewport.

## 7. Motion & Interaction

Motion philosophy is one of understated refinement. All transitions employ smooth cubic-bezier curves, providing a sense of polished intention without drawing attention to the interface itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.445, 0.05, 0.55, 0.95)`
- **Patterns:**
  - Subtle opacity and transform transitions on hover states.

- **Hover:** Subtle scale or opacity change.
- **Click:** Immediate response with no bounce.
- **Transition:** Smooth cubic-bezier curves for state changes.
- **Keyboard:** Standard focus states.

## 8. Voice & Don'ts

The editorial voice is minimal, quiet, and self-assured, favoring single-word, massive headlines over descriptive prose. This approach trusts the visual composition to communicate meaning, maintaining a tone of confident simplicity.

- **Tone:** Minimal, quiet, and self-assured.
- **Headline style:** Single-word, massive, and sculptural.
- **CTA style:** None visible.
- **Avoid:** Clutter / Excessive decoration / Complex navigation

### Don'ts
- ❌ Don't use a white background — screenshot shows an off-white (#EDEAE4) background.
- ❌ Don't add drop shadows to elements — screenshot shows completely flat design without shadows.
- ❌ Don't use small, tight display type — screenshot shows massive, expansive typography.
- ❌ Don't use wide letter-spacing on the hero text — screenshot shows extreme negative tracking.
- ❌ Don't use colorful accents — screenshot shows a strictly monochrome palette with no bright accent colors.
- ❌ Don't use rounded corners on layout elements — screenshot shows sharp, unrounded edges.

The system deliberately avoids clutter, excessive decoration, and complex navigation, proving that a rigorous subtraction of elements can yield a more powerful and focused brand statement.

## System Prompt (paste into AI tool)

```
A minimalist design studio portfolio for 'Waka Waka', a Los Angeles-based furniture maker. The visual identity relies on massive, ultra-tight grotesque-sans typography that bleeds to the edges of the screen, creating a sculptural effect. The color palette is strictly restrained: an off-white background (#EDEAE4), deep charcoal ink (#28282A), and soft greys (#C9C7C4) for texture. Photography is treated with a soft, grainy quality. Critical donts: never use rounded corners on layout elements, never add drop shadows, and never use wide letter-spacing on headlines. The design is about tension between the massive scale of the text and the quiet, empty space around it.
```