# Danielaandmoe · Design system migration spec

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

> This site is worth including as a prime example of blending editorial typography with organic, playful illustration in a refined, warm aesthetic.

## 1. Identity DNA

This design system translates the haptic ritual of a high-end printed wedding invitation suite into a digital editorial format. The result is a warm, illustrative website that prioritizes elegance and celebration through generous whitespace and refined typography.

**One-liner:** An elegant, warm, and illustrative editorial website for a wedding celebration.
**Keywords:** Wedding · Celebration · Editorial · Warm · Invitation
**Analogy:** A high-end printed wedding invitation suite translated into a digital editorial format.

## 2. Color

The color system is built on a warm, earthy foundation: a soft peach (#FEF1EC) background hosts deep navy (#11223F) text for sophisticated contrast, punctuated by terracotta accents for visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FEF1EC` | main background |
| `--ink` | `#11223F` | body text |
| `--ink-soft` | `#F7BCA5` | secondary text |
| `--muted` | `#FF5734` | placeholder |
| `--line` | `rgba(255,87,52,1.0)` | divider |

**Color principle:** A warm, earthy palette centered around a soft peach background and deep navy text, punctuated by terracotta accents.

The principle is to create a palette that feels both celebratory and grounded, avoiding stark whites in favor of a soft, warm base.

## 3. Typography

The typographic voice pairs a refined **didone serif** for headlines—conveying elegance and formality—with a clean **humanist sans-serif** for body copy, ensuring readability at smaller sizes.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 400 | -1px | Hero headline |
| h1 | 28px | 1.2 | 400 | 0 | Section headlines |
| body | 16px | 1.6 | 400 | 0 | Body text |
| label | 12px | 1.0 | 500 | 2.4px | Uppercase labels |

**Type rules:**
- Use didone-serif for all major display and heading text to convey elegance.
- Use humanist-sans for body copy and smaller labels to maintain readability.
- Apply generous tracking to all uppercase labels for a refined, airy feel.

## 4. Spacing

Spacing follows a flexible, spacious rhythm, with generous padding and margins designed to let content and decorative elements breathe without constraint.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A flexible, spacious rhythm that prioritizes generous padding and margins to let the illustrations breathe.

## 5. Surfaces

Depth is achieved not through shadows, but through flat color layers and the overlap of organic illustrations. Borders are minimal: a single 1px solid navy line defines button outlines, while thin terracotta lines act as decorative dividers.

- **Radius:** sm 0px · md 0px · lg 0px · pill 200px
- **Borders:** A 1px solid navy border is used primarily for button outlines, while thin terracotta lines serve as decorative dividers.

## 6. Layout

The structural skeleton is a clean, centered single-column layout for primary content. This orderly core is then decorated with floating, asymmetric organic illustrations that break the grid in a controlled, artistic manner.

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

**Skeleton:** A clean, centered single-column layout for content, heavily decorated with floating, asymmetric organic illustrations.

## 7. Motion & Interaction

Motion philosophy centers on fluidity and tactile response. Transitions are smooth and deliberate, while interactive elements like buttons feature a slightly bouncy, elastic easing curve for a playful, physical feel.

- **Durations:** micro 125ms · small 275ms · medium 750ms
- **Easing:** `cubic-bezier(0.52, 0.12, 0.46, 1.1)`
- **Patterns:**
  - Elastic, slightly bouncy transitions for interactive elements like buttons.
  - Smooth, slow ease-out transitions for background and transform properties.

- **Hover:** Subtle background and color shifts using a custom cubic-bezier easing curve.
- **Click:** Immediate tactile response via fast transitions.
- **Transition:** Global transitions applied to all elements for a cohesive, fluid feel.
- **Keyboard:** Standard focus states, though not visually prominent in the provided captures.

## 8. Voice & Don'ts

The editorial voice is warm, personal, and celebratory, yet refined. Headlines adopt a formal, artistic style, while calls to action are understated and clean, using ghost buttons with wide letter-spacing.

- **Tone:** Warm, personal, and celebratory, yet refined and elegant.
- **Headline style:** Formal and artistic, utilizing a classic serif typeface.
- **CTA style:** Understated and clean, using ghost buttons with wide letter-spacing.
- **Avoid:** Harsh, overly bright colors. / Aggressive or urgent copy. / Cluttered, dense layouts.

### Don'ts
- ❌ Don't use a stark white background — screenshot shows a soft, warm peach (#FEF1EC) base.
- ❌ Don't use blocky, rigid geometric shapes — screenshot shows organic, flowing, hand-drawn illustrations.
- ❌ Don't use bold, heavy sans-serifs for headlines — screenshot uses an elegant, thin didone serif.
- ❌ Don't use standard rectangular image frames — screenshot uses circular and organically masked photos.
- ❌ Don't use drop shadows for depth — screenshot relies on flat color layers and illustration overlap.
- ❌ Don't use a cluttered, dense grid — screenshot features generous whitespace and floating elements.

The system deliberately avoids harsh brightness, aggressive copy, cluttered density, and rigid geometric shapes in favor of its signature organic, hand-drawn aesthetic.

## System Prompt (paste into AI tool)

```
A warm, editorial wedding website that blends elegant typography with organic, hand-drawn illustrations. The design uses a soft peach (#FEF1EC) background and deep navy (#11223F) text for a sophisticated contrast. The typography mixes a refined didone serif for headlines with a clean humanist sans-serif for body copy, both set with generous letter-spacing. Key interactions feature a custom bouncy easing curve. Do not use stark whites, rigid geometric shapes, or heavy bold fonts. Maintain a spacious, breathing layout that allows the decorative illustrations to stand out without cluttering the content.
```