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

# OhDada · Design System

> Quiet neutrals make kinetic objects the focus

**Theme:** light · **Industry:** ecommerce · **Source:** https://ohdada.de/ · **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._

OhDada pairs handcrafted kinetic sculptures with a calm, gallery-like storefront. Oversized expressive lettering introduces a long, staggered product gallery on warm neutral backgrounds.

## North star

Keep the page quiet and gallery-like so oversized type and alternating, in-context sculpture photography carry the experience.

## Overview

The page uses a restrained three-colour foundation: muted lavender-grey for the opening hero, warm greige across the product catalogue, and deep brown for the logo and product names. Creamy text on the hero creates a quiet contrast; the broader palette stays subdued so the sculptures’ vivid colours remain incidental highlights rather than site-wide branding. Typography supplies the main personality: a large, distinctive Roman display face forms the OhDada wordmark and elegant product labels, while a clean sans-serif handles the hero statement and functional copy. The hero is sparse and typographic, with the logo and short stacked descriptor aligned to the left. Below, the catalogue becomes a long, single-column editorial sequence, alternating image and label placement rather than compressing items into uniform cards. Generous blank areas and section breathing room preserve a gallery-like pace. Product photography is shown large and in context, with no visible card chrome, shadows, or decorative borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Gallery | `#e6e0d9` | `--color-warm-gallery` | neutral | Warm greige catalogue canvas and section background; also the pale contrasting hero statement. |
| Walnut Ink | `#5d3a19` | `--color-walnut-ink` | brand | Deep brown wordmark, product names, and primary text on the light catalogue canvas. |
| Quiet Lavender | `#b7b3be` | `--color-quiet-lavender` | surface | Muted lavender-grey full-width opening hero background. |

### Semantic aliases

`--color-canvas` → `#e6e0d9` (Warm Gallery) · `--color-surface` → `#b7b3be` (Quiet Lavender) · `--color-text` → `#5d3a19` (Walnut Ink) · `--color-text-muted` → `#e6e0d9` (Warm Gallery) · `--color-accent` → `#5d3a19` (Walnut Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#5d3a19` | `#e6e0d9` | 7.69:1 | AAA |
| `#5d3a19` | `#b7b3be` | 4.9:1 | AA |
| `#e6e0d9` | `#b7b3be` | 1.57:1 | fail |
| `#5d3a19` | `#e6e0d9` | 7.69:1 | AAA |
| `#5d3a19` | `#b7b3be` | 4.9:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue-haas-grotesk-display | `--font-body` | webfont | 500 | Hero descriptor and supporting sans-serif copy. | Inter |
| GrandSlang-Roman | `--font-display` | webfont | 100 | Expressive OhDada wordmark and refined product-name display lettering. | Bodoni Moda |

- **neue-haas-grotesk-display:** Measured at medium weight for body and lighter-looking hero text; sentence case, clean forms, and compact line spacing.
- **GrandSlang-Roman:** High-contrast Roman display style; preserve its distinctive editorial character and use sentence case for product names.

### Type scale — Custom (ratio ≈ 2.058, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | 0 | — | neue-haas-grotesk-display | Large hero brand lettering and visual identity. |
| h1 | 57.5px | 100 | 1 | 0 | — | GrandSlang-Roman | Expressive display heading and product-name treatment. |
| body | 17px | 500 | 1.18 | 0 | — | neue-haas-grotesk-display | Hero descriptor and supporting catalogue text. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 2, 5, 58, 115, 144 px.
- Section rhythm 115px · element gap — · card padding — · max content width 1152px.

The measured page max width is 1152px, with a spacious, low-density presentation. The opening hero is a full-width colour field with its content aligned to the left. A brief Products introduction leads into one long catalogue column; product image and label positions alternate from one item to the next, producing an irregular editorial rhythm instead of a conventional card grid. The measured section gap is 115px. Keep product titles visually separate from their images and retain broad areas of uninterrupted canvas.

## Shape & elevation

- No box shadows measured: the page is flat.

The design reads as flat and gallery-like: measured data reports no shadows, gradients, or defined borders. Images sit directly against the page canvas without visible card surfaces or rounded framing. Build separation through whitespace, background changes, and the staggered placement of media and labels, not through elevated boxes.

## Imagery

Product imagery consists of large photographs of hanging kinetic sculptures in bright domestic interiors. Images show the pieces in context, including their shadows, suspension lines, and surrounding furniture. Frames vary in placement and scale along the catalogue sequence, alternating from left to right against the warm canvas. Vivid blues, pinks, greens, and lilacs appear within individual works and should be treated as photographic content, not added to the core site palette.

## Components

### Hero wordmark

Large, brown, expressive OhDada lettering sits left on the lavender-grey hero field.

### Hero descriptor

Short cream sans-serif statement arranged as a compact stack beneath the wordmark.

### Products introduction

A simple brown section label introduces the catalogue on the warm greige canvas.

### Staggered product feature

Large contextual product photograph and separate display-style product label alternate sides down a single column.

### Product price

Small price text accompanies each sculpture name without a prominent badge or card treatment.

### Measured component styles

- **Link** (“Kaskasi 135€”): transparent background · text #0000ee · radius 0px · padding 0px · 400 0px neue-haas-grotesk-display
- **Navigation item** (“Handcrafted Kinetic Sculptures”): transparent background · text #e6e0d9 · radius 0px · padding 0px · 400 16px neue-haas-grotesk-display

## Do

- Use the measured three-colour palette for the page foundation.
- Keep the hero sparse and align its content to the left.
- Use expressive display typography for brand and product naming.
- Alternate product imagery and labels down the catalogue.
- Give the gallery generous breathing room.
- Keep photography contextual and let object colours remain image-led.

## Don't

- Do not turn the catalogue into a uniform multi-column card grid.
- Do not add unmeasured colours as global brand accents.
- Do not add shadows, gradients, or decorative borders.
- Do not overlay product labels on top of the photographs.
- Do not crowd the hero with extra navigation or promotional copy.
- Do not treat vivid sculpture colours as the page background palette.

## Agent prompt

Build a new OhDada-style storefront page with a quiet, gallery-like composition. Use Quiet Lavender (#b7b3be) for a full-width, typography-led hero, Warm Gallery (#e6e0d9) for the catalogue canvas, and Walnut Ink (#5d3a19) for the wordmark, headings, and product labels. Pair an expressive Roman display face with a restrained sans-serif for supporting text. Keep the hero content left-aligned and minimal. Introduce products with a simple section heading, then create a long single-column editorial sequence with large contextual photographs and separate labels alternating sides. Use generous whitespace and measured section rhythm; avoid card chrome, shadows, gradients, and invented brand colours. Let product-specific hues appear only inside the photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width lavender-grey field with large left-aligned wordmark and stacked descriptor. | brand introduction | oversized display lettering, muted colour block, left alignment |
| 2 | category-nav | Short warm-greige transition section with a simple left-aligned Products label. | catalogue introduction | plain text heading, warm neutral canvas |
| 3 | product-grid | Long single-column catalogue with large photographs and product labels alternating sides. | browse products, view product names and prices | staggered image sequence, separate product labels, editorial whitespace |

## Source CSS custom properties (selected)

```css
--border-radius: 10px;
--font-small-height: 23px;
```

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