# Dae · Design system migration spec

> Source: https://daehair.com  ·  Curated by OpenDesign  ·  en

> Worth including for its strong, cohesive visual identity that successfully blends warm, natural aesthetics with a clear e-commerce structure.

## 1. Identity DNA

Dae's visual identity is built on the feeling of a sunny desert road trip with your best hair products. The system pairs a warm, earthy foundation with playful accents, creating a brand that feels both inviting and grounded in a natural aesthetic.

**One-liner:** Warm, desert-inspired haircare that is playful and inviting.
**Keywords:** warm · playful · natural · desert · inviting
**Analogy:** A sunny desert road trip with your best hair products

## 2. Color

The color palette is anchored by a creamy base, avoiding stark white, with earthy browns providing depth and structure. Energetic pink accents punctuate the warmth for promotional moments and calls to action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFDF5` | main background |
| `--bg-soft` | `#EDD6C4` | card background |
| `--ink` | `#BE6A14` | body text |
| `--ink-soft` | `#6A6C77` | secondary text |
| `--muted` | `#DDA69D` | placeholder |
| `--accent` | `#E92C5B` | single accent |
| `--line` | `rgba(190,106,20,1)` | divider |

**Color principle:** Earthy desert warmth anchored by a creamy base and punctuated by energetic pink accents.

The principle is one of earthy desert warmth, where every hue contributes to an inviting and cohesive atmosphere.

## 3. Typography

The typographic voice blends elegant didone-serif displays for product names with a clean geometric-sans for body text. This pairing creates a clear hierarchy, with all-caps sans-serif used for secondary calls to action and the monospaced marquee text.

- **Display:** didone-serif
- **Body:** geometric-sans
- **Mono:** mono-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 400 | -0.5px | Hero product name |
| heading | 24px | 1.2 | 700 | 1px | Section title |
| body | 15px | 1.33 | 400 | 0.4px | General text |

**Type rules:**
- Use all-caps for secondary calls to action and promotional badges.
- Use uppercase monospaced text for the scrolling brand values marquee.

## 4. Spacing

Spacing follows a rhythm of generous padding within content blocks and clear vertical separation between them.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding within sections and clear vertical spacing between content blocks.

## 5. Surfaces

Surfaces are defined by their content rather than shadows, relying on generous whitespace and photography for depth. Borders are minimal and purposeful, applied as thin 1px solid lines on interactive elements.

- **Radius:** sm 3px · md 10px · lg 0px · pill 999px
- **Shadows:**
  - none
- **Borders:** 1px solid accent brown for buttons and marquee dividers.

## 6. Layout

The layout skeleton begins with a full-width, cinematic hero. This flows into a descriptive left column paired with a horizontal product grid on the right, creating a balanced, image-centric composition.

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

**Skeleton:** Full-width hero followed by a descriptive left column with a horizontal product grid on the right.

## 7. Motion & Interaction

Motion philosophy is one of calm, constant movement rather than dramatic effect. Subtle transitions govern interactive states, while a continuous horizontal scrolling marquee provides a steady, meditative rhythm.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Continuous horizontal scrolling for the values marquee.

- **Hover:** Subtle opacity or color shift on navigation links and buttons.
- **Click:** Standard button press effect.
- **Transition:** 0.3s transitions for most interactive states.
- **Keyboard:** Standard focus rings.

## 8. Voice & Don'ts

The editorial voice is warm, approachable, and slightly poetic, communicated through large serif headlines and clean CTAs. It deliberately steers clear of clinical jargon and harsh digital aesthetics.

- **Tone:** Warm, approachable, and slightly poetic.
- **Headline style:** Large, elegant serif typography for product names.
- **CTA style:** Clean, uppercase, sans-serif for clear calls to action.
- **Avoid:** Clinical or overly technical haircare jargon. / Harsh, neon, or purely digital color palettes. / Rigid, grid-heavy corporate layouts.

### Don'ts
- ❌ Don't use stark, clinical white backgrounds — screenshot shows warm cream (#FFFDF5) instead.
- ❌ Don't use neon or purely digital accent colors — screenshot uses natural warm pinks (#DDA69D, #E92C5B).
- ❌ Don't use harsh, boxy buttons — screenshot uses rounded, pill-shaped buttons with thin borders.
- ❌ Don't use dense, text-heavy layouts — screenshot relies heavily on generous whitespace and photography.
- ❌ Don't use modern, minimalist sans-serifs for hero text — screenshot uses a prominent didone-serif for product names.
- ❌ Don't use rigid, hard-edged grid containers — screenshot uses softer, more organic grid alignments.

What it doesn't do is just as defining: it rejects stark whites, neon accents, and rigid corporate grids in favor of softness and natural warmth.

## System Prompt (paste into AI tool)

```
This is a warm, consumer-facing haircare brand site. It uses a desert-inspired palette of creams (#FFFDF5), tans (#EDD6C4), and earthy browns (#BE6A14), with energetic pink accents (#E92C5B) for promotional elements. Typography mixes elegant didone-serif displays with clean geometric-sans body text. Key critical dons: Never use stark white backgrounds, avoid neon colors, and do not use harsh boxy UI components. The layout is generous and image-heavy, relying on cinematic photography.
```