# Ohdada De · Design system migration spec

> Source: https://ohdada.de  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of how restraint and typography can create a premium, artisanal feel without complex UI.

## 1. Identity DNA

The system's DNA is modeled on a high-end art gallery's digital catalog, where every element is subservient to the art. Handcrafted kinetic sculptures are the protagonists, and the design's entire purpose is to frame them within a modern, refined context.

**One-liner:** A refined, gallery-like portfolio for handcrafted kinetic sculptures.
**Keywords:** handcrafted · kinetic · sculpture · artisanal · modern
**Analogy:** A high-end art gallery's digital catalog

## 2. Color

The palette is deliberately muted and earthy, built to recede. It provides a neutral stage of beige, grey, and brown, allowing the full spectrum of product photography to become the primary source of color and visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#b7b3be` | main background |
| `--bg-soft` | `#e6e0d9` | card background |
| `--ink` | `#5d3a19` | body text |
| `--line` | `rgba(230, 224, 217, 1)` | divider |

**Color principle:** A muted, earthy palette that lets product photography provide the color.

The principle is clear: the interface provides context, while the craft provides the character.

## 3. Typography

Typography balances expressive display with clean legibility. A fluid, transitional serif headlines the experience, its sculptural quality echoing the artistry of the products, while a humanist sans-serif provides a clear, understated foundation for body text.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 100 | normal | Hero headline |
| heading | 57.6px | 1.0 | 400 | normal | Section titles |
| body | 16px | 1.25 | 400 | normal | Body text |

## 4. Spacing

The rhythm is established through generous, deliberate padding that frames large photographic elements and section titles, creating a palpable sense of space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 115.2 px
- **Rhythm:** Generous padding around large photographic elements.

## 5. Surfaces

Depth is implied through negative space and image placement, not through applied effects. Surfaces are flat and borderless; imagery sits directly on the solid color backgrounds, with no shadows or UI chrome to mediate the relationship.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible UI borders; imagery sits directly on background.

## 6. Layout

The layout skeleton is fundamentally clean, relying on full-bleed sections to command attention. Content within these sections is centered, creating focused columns that guide the eye downward through the curated collection.

- **Grid:** 12 columns, gutter Nonepx
- **Breakpoints:** 768 px

**Skeleton:** Full-bleed sections with centered content.

## 7. Motion & Interaction

Motion philosophy treats animation as a graceful transition between states, not as decoration. Elements enter the viewport with long, smooth fades and transforms, mirroring the slow, deliberate appreciation one would give a physical sculpture.

- **Durations:** micro 500ms · small 1000ms · medium 1500ms
- **Easing:** `cubic-bezier(0.445, 0.05, 0.55, 0.95)`
- **Patterns:**
  - Smooth fade and transform animations for elements entering the viewport.

- **Hover:** Subtle opacity change on interactive elements.
- **Click:** Smooth transition to product detail.
- **Transition:** Long, elegant fades and transforms.

## 8. Voice & Don'ts

The editorial voice is sophisticated and understated, matching the visual restraint. Headlines are large and expressive through typography alone, while calls-to-action are minimal or absent, trusting the visual narrative to guide engagement.

- **Tone:** Sophisticated and understated
- **Headline style:** Large, expressive serif typography.
- **CTA style:** Minimal or absent in the screenshot.
- **Avoid:** loud colors / decorative UI chrome / cluttered layouts

### Don'ts
- ❌ Don't use saturated, neon colors — screenshot shows a muted, earthy palette instead.
- ❌ Don't use a busy, decorative background — screenshot shows solid color blocks instead.
- ❌ Don't use sharp, geometric sans-serif fonts for headlines — screenshot shows a fluid, transitional serif instead.
- ❌ Don't use heavy drop shadows or 3D effects — screenshot shows flat, clean imagery instead.
- ❌ Don't crowd elements together — screenshot shows generous white space and padding instead.
- ❌ Don't use complex UI components like cards with heavy borders — screenshot shows minimal, borderless layouts instead.

The system deliberately avoids saturated colors, decorative UI chrome, and cluttered layouts, trusting in the power of space, type, and imagery to convey its premium, artisanal character.

## System Prompt (paste into AI tool)

```
Oh Dada is a premium digital portfolio for handcrafted kinetic sculptures. The design DNA is minimalist and gallery-like, focusing on high-quality product photography against a muted, earthy color palette (beige #e6e0d9, grey #b7b3be, brown #5d3a19). Typography uses a fluid, transitional serif for display and a clean humanist sans-serif for body text. Key critical donts: avoid saturated colors, avoid cluttered layouts, and avoid heavy UI borders. The system prioritizes generous spacing and smooth, long-form motion to create an elegant, refined browsing experience that highlights the physical craftsmanship of the products.
```