---
name: Danielaandmoe
description: "This site is worth including as a prime example of blending editorial typography with organic, playful illustration in a refined, warm aesthetic."
version: alpha

colors:
  background: "#FEF1EC"
  primary: "#11223F"
  secondary: "#F7BCA5"
  neutral: "#FF5734"
  line: "rgba(255,87,52,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"
  label:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "2.4px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 200px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An elegant, warm, and illustrative editorial website for a wedding celebration.

*A high-end printed wedding invitation suite translated into a digital editorial format.*

## Colors

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

- **Background (`#FEF1EC`)** — uses `bg` token
- **Primary text (`#11223F`)** — uses `ink` token
- **Secondary text (`#F7BCA5`)** — uses `ink-soft` token
- **Muted (`#FF5734`)** — uses `muted` token
- **Borders (`rgba(255,87,52,1.0)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* A flexible, spacious rhythm that prioritizes generous padding and margins to let the illustrations breathe.

## Elevation & Depth

- Borders: A 1px solid navy border is used primarily for button outlines, while thin terracotta lines serve as decorative dividers.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 200px

## Components

- **button:** Ghost buttons with a 1px navy border and uppercase, tracked-out text.
- **card:** Image cards presented in circular or organic masks, accompanied by structured text details.
- **hero:** A full-viewport hero featuring a large didone headline and surrounding organic illustrations.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```