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

# DDNA · Design System

> Meaningful jewelry in a quiet, immersive world

**Theme:** light · **Industry:** fashion · **Source:** https://d-d-n-a.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._

DDNA pairs a warm, understated canvas with floating, jewel-toned 3D forms to create an immersive jewelry homepage. Restrained navigation and typography keep the focus on the imagery and the brand’s personal, life-celebrating message.

## North star

Keep the warm canvas and open, floating composition dominant; let typography and controls stay quiet around the 3D jewelry imagery.

## Overview

The page is built around a single warm canvas, #e9ded6, which fills the first viewport and gives the jewel-like 3D forms room to float. Dark, soft-edged typography in #444242 keeps the wordmark and navigation legible without competing with the scene. The small violet #682ad5 accent is most visible in the floating chat control; it is a utility detail rather than a defining brand colour. Favorit is used for the large display heading, while Basis carries navigation and body copy in a quiet, consistent voice. A compact header sits at the top edge, with the logo left and a short navigation run right. The hero uses generous open space instead of cards or framed content: rendered spherical objects are distributed across the canvas, with soft shadows adding depth. Overall, the composition favors a comfortable, low-density rhythm and full-bleed imagery over conventional product-grid structure.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Porcelain Sand | `#e9ded6` | `--color-porcelain-sand` | brand | Dominant page canvas behind navigation and the full-bleed floating-object hero. |
| Soft Charcoal | `#444242` | `--color-soft-charcoal` | neutral | Wordmark and restrained navigation text against the warm canvas. |
| Violet Signal | `#682ad5` | `--color-violet-signal` | accent | Small chat launcher accent; avoid treating it as a broad section or CTA fill. |

### Semantic aliases

`--color-canvas` → `#e9ded6` (Porcelain Sand) · `--color-text` → `#444242` (Soft Charcoal) · `--color-text-muted` → `#e9ded6` (Porcelain Sand) · `--color-accent` → `#682ad5` (Violet Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#444242` | `#e9ded6` | 7.55:1 | AAA |
| `#682ad5` | `#e9ded6` | 5.51:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basis | `--font-body` | webfont | 400 | Navigation and body copy. | Inter |
| Favorit | `--font-display` | webfont | 400 | Display headings, including the hero message. | DM Sans |

- **Favorit:** Measured at regular weight; preserve the calm, unembellished display character.
- **Basis:** Regular weight with natural casing and understated presentation; avoid bold, crowded navigation.

### Type scale — Custom (ratio ≈ 2.143, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 400 | 2 | 0 | — | Favorit | Brand and hero display headings. |
| body | 14px | 400 | 1.5 | 0 | — | Basis | Supporting brand and product messaging. |
| nav | 14px | 400 | 1.5 | 0 | — | Basis | Header links for collections, personalization, story, and contact. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 40, 50 px.
- Section rhythm 50px · element gap — · card padding — · max content width —.

Use a single-column, full-bleed canvas rather than a boxed page frame. The measured header places the logo at the left and a compact navigation group at the right; the hero remains broadly open, with its heading aligned to the start rather than centered. Maintain comfortable breathing room and low content density, letting the large visual field carry the first screen. No measured maximum content width or card padding is supplied, so do not impose a rigid grid or invent those dimensions. Keep section transitions spacious and simple.

## Shape & elevation

- Radius: button `50%`
- Shadow `md` (other): `rgba(0, 0, 0, 0.05) 0px 4px 10px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The page is visually flat at the interface level: no prominent card frames, borders, or section dividers are measured. Depth comes from the soft shadows beneath rendered objects. Keep navigation and content unboxed; use layering sparingly, with the small floating chat control as a distinct utility element.

## Imagery

The first viewport is dominated by colorful, floating spherical 3D forms with reflective, jewel-like surfaces. Scatter objects at varied apparent sizes across the pale canvas and use soft, diffuse shadows to suggest depth. The forms belong to the rendered hero scene, not the measured brand palette; keep their saturated purples and blues confined to imagery rather than UI.

## Components

### Header navigation

Place a compact DDNA wordmark at the left and the Core Collections, Personalize, Our Story, and Contact links at the right; use #444242 text on #e9ded6.

### Immersive hero canvas

A full-bleed warm field with sparse floating 3D jewelry-like spheres and soft projected shadows; preserve generous negative space.

### Hero messaging

Use Favorit for the main brand statement and supporting message, with quiet sizing and natural casing rather than a loud promotional treatment.

### Chat launcher

A small circular floating utility control uses the measured violet accent #682ad5; keep it visually separate from the brand’s neutral canvas.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 100% · padding 0px · 400 11px Crisp Noto Sans Regular
- **Navigation item** (“Core Collections Personalize Our Story C”): transparent background · text #444242 · radius 0px · padding 0px · 400 14px Basis

## Do

- Use #e9ded6 as the dominant canvas.
- Keep header links small, calm, and dark.
- Give the hero visual generous open space.
- Use saturated jewel colors inside imagery, not as broad UI fills.
- Let soft rendered shadows supply depth.
- Keep interface framing minimal and unobtrusive.

## Don't

- Do not introduce unmeasured palette colors as brand tokens.
- Do not turn the hero into a dense product grid.
- Do not add heavy borders or card treatments.
- Do not overemphasize the violet chat accent.
- Do not crowd the navigation or hero with copy.
- Do not make the rendered spheres look like flat UI icons.

## Agent prompt

Build a new DDNA-style jewelry page with a quiet, immersive feel. Use Porcelain Sand (#e9ded6) as the dominant canvas and Soft Charcoal (#444242) for the wordmark, navigation, and restrained text. Reserve Violet Signal (#682ad5) for a small utility accent, not large backgrounds. Set display headings in Favorit or a close substitute such as DM Sans; use Basis or Inter for navigation and body copy, at regular weight. Keep the header compact, with brand left and a short link group right. Favor broad open space and full-bleed imagery over cards or dense grids. Create a few floating, reflective jewel-like 3D forms with soft shadows; keep their saturated colors within the artwork. Avoid heavy borders, invented measurements, and loud interface treatments.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed single-column canvas; compact header with logo left and navigation right. | top-level section navigation, personalization entry point, floating chat support | warm neutral canvas, floating 3D forms, soft object shadows, minimal header |

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