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

# Daniela and Moe Wedding 2019 · Design System

> A sun-warmed botanical celebration, told like an editorial

**Theme:** light · **Industry:** other · **Source:** https://danielaandmoe.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._

A long-form wedding site blends romantic editorial typography with a sunny, hand-drawn botanical world. Its soft peach canvas, dark ink text, and occasional white information panels guide guests through the celebration weekend.

## North star

Keep the warm editorial canvas quiet and readable, letting expressive serif typography and botanical illustrations frame—not compete with—the guest information.

## Overview

The page is built around a warm, pale peach canvas (#fef1ec) that keeps the long itinerary visually cohesive. Deep navy (#11223f) carries nearly all readable text, from the fine navigation and small uppercase labels to the oversized names and section headings. Coral (#ff5734) is a restrained accent for rules, links, and small details; white panels give the quiz, lodging, and recommendation content clear reading surfaces. Canela Web supplies a delicate, high-contrast editorial voice for names and select headings, while Calibre handles functional copy and widely tracked uppercase labels. The layout alternates centered story passages with carefully aligned event details and multi-column information panels. Hand-drawn botanical illustrations frame rather than interrupt the content, while event photographs and a venue diagram add place-specific texture. Generous gaps between sections create a leisurely scroll; thin rules and square-edged panels keep the page composed rather than ornate.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#11223f` | `--color-midnight-ink` | brand | Primary text, navigation, headings, and outlined MAP controls. |
| Blush Canvas | `#fef1ec` | `--color-blush-canvas` | brand | Dominant page and section background, creating the consistent warm field. |
| Wedding Coral | `#ff5734` | `--color-wedding-coral` | accent | Thin borders, selected links, and small coral details; not the main text colour. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Quiz tiles, lodging and recommendation panels, and form fields. |
| Petal Peach | `#f7bca5` | `--color-petal-peach` | accent | Subtle secondary accent, including small navigation details and decorative touches. |

### Semantic aliases

`--color-canvas` → `#fef1ec` (Blush Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#11223f` (Midnight Ink) · `--color-border` → `#ff5734` (Wedding Coral) · `--color-accent` → `#ff5734` (Wedding Coral) · `--color-accent-2` → `#f7bca5` (Petal Peach) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#11223f` | `#fef1ec` | 14.35:1 | AAA |
| `#11223f` | `#ffffff` | 15.86:1 | AAA |
| `#ff5734` | `#fef1ec` | 2.85:1 | fail |
| `#ff5734` | `#ffffff` | 3.15:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| calibre | `--font-body` | webfont | 300, 400 | Body copy, uppercase captions and eyebrows, form controls, and functional labels. | Inter |
| Canela Web | `--font-display` | webfont | 400, 500, 100 | Display names, section titles, navigation, and expressive text links. | Cormorant Garamond |

- **calibre:** Use light weights for body copy; captions and buttons are small, uppercase, and widely tracked.
- **Canela Web:** Use refined, light-to-regular serif styling; reserve the most dramatic scale for names and major display headings.

### Type scale — Perfect Fifth (ratio ≈ 1.496, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 500 | 0.85 | 0 | — | Canela Web | Oversized names in the opening hero. |
| h1 | 48px | 400 | normal | 0.2em | uppercase | calibre | Spaced uppercase section headings and major labels. |
| h2 | 36px | 300 | normal | 0 | — | calibre | Large, light sans headings for secondary sections. |
| h3 | 32px | 400 | 1.6 | 0 | — | Canela Web | Serif headings within content sections. |
| h4 | 28px | 100 | normal | 0 | — | Canela Web | Light serif subheadings for smaller editorial blocks. |
| body | 16px | 300 | normal | 0 | — | calibre | Guest-facing story, schedule, and venue descriptions. |
| caption | 12px | 400 | normal | 0.2em | uppercase | calibre | Small uppercase metadata and compact section labels. |
| button | 12px | 400 | normal | 0.2em | uppercase | calibre | Uppercase RSVP and form action text. |
| nav | 28px | 100 | normal | 0 | — | Canela Web | Serif navigation links across the top. |
| link | 24px | 400 | 2 | 0 | — | Canela Web | Serif text links in recommendations and supporting content. |
| eyebrow | 12px | 400 | normal | 0.2em | uppercase | calibre | Small uppercase category labels above headings. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 12, 15, 16, 20, 24, 32, 40, 64, 96 px.
- Section rhythm 64px · element gap — · card padding 32px · max content width 920px.

A long, single-page editorial scroll with a measured page max width of 920px. The opening and story passages are centered; event schedules use two-column compositions, with dates and details on one side and circular venue photography on the other. Quiz, lodging, and recommendation content uses multi-column grids. Sections are separated by generous 64px rhythm and smaller pauses, with light hairlines marking schedule boundaries. Overall density is comfortable: detailed information is broken into labelled groups rather than packed into dense blocks.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.275s ease-out` on interactive elements.

The interface is predominantly flat, with no measured shadows. White panels and tiles sit directly against the peach canvas; fine coral rules define some panel edges and separate itinerary entries. Components are square-edged, and botanical artwork may overlap section margins as decorative layering without adding interface depth.

## Imagery

Hand-drawn botanical artwork is the defining visual layer, appearing around the hero and section edges in dark green, yellow, olive, coral, and pale peach; these are illustration colours, not measured brand tokens. Event photos are cropped into circular vignettes. Small quiz illustrations and a large venue diagram add context, while the California map is treated as a broad decorative feature.

## Components

### Top navigation

A slim, centered row of Canela serif links on the peach canvas, separated from the hero by a thin navy hairline.

### Hero title

A centered date label above oversized, two-line Canela names, framed by full-bleed botanical illustration.

### Story section

A narrow centered text passage with a small uppercase eyebrow, spaced uppercase heading, and light body copy.

### Quiz grid

Question tiles use white surfaces in a four-column grid, with compact illustrations and short prompts; the introductory tile remains on the peach ground.

### Event itinerary

Date and venue details sit in a two-column schedule, supported by small uppercase metadata labels, circular venue photography, and outlined MAP links.

### Recommendation panels

White lodging and Eat/Drink/Play panels organize useful local suggestions into clearly labelled columns.

### RSVP form

White rectangular fields and response options sit on the peach canvas, paired with compact labels and a coral Submit action.

### Measured component styles

- **Primary button** (“Submit”): background #ff5734 · text #ffffff · radius 0px · padding 1px 6px · 400 20px calibre
- **Secondary button** (“MAP”): transparent background · text #11223f · border 1px solid #11223f · radius 0px · padding 12px 96px · 400 12px calibre · uppercase
- **Link** (“Loqui $$”): transparent background · text #11223f · radius 0px · padding 0px · 400 24px Canela Web
- **Input**: background #ffffff · text #11223f · radius 0px · padding 20px · 500 24px calibre
- **Card** (“What is a boochu box?”): background #ffffff · text #11223f · radius 0px · padding 32px · 300 24px calibre
- **Navigation item** (“Our Story Fun Facts Events Reception Hot”): transparent background · text #11223f · radius 0px · padding 0px · 100 28px Canela Web

## Do

- Use Blush Canvas (#fef1ec) as the continuous page ground.
- Set readable copy in Midnight Ink (#11223f).
- Pair Canela-style display serif with restrained Calibre-style sans copy.
- Use botanical artwork as an edge-framing layer.
- Break practical details into labelled, scannable groups.
- Keep panels flat, white, and square-edged.

## Don't

- Do not replace the peach canvas with a generic white page.
- Do not use coral as the main paragraph colour.
- Do not let decorative illustrations obscure essential text.
- Do not add heavy shadows or rounded-card styling.
- Do not compress the itinerary into dense, unlabeled prose.
- Do not apply display serif styling to every label.

## Agent prompt

Build a new long-form page in the style of this wedding site. Use Blush Canvas (#fef1ec) as the continuous background, Midnight Ink (#11223f) for text and navigation, and Wedding Coral (#ff5734) only for restrained rules and link accents; use Gallery White (#ffffff) for information panels and fields. Pair an elegant editorial serif like Canela Web with a clean, lightweight sans like Calibre. Create a spacious scroll with centered story sections, labelled two-column schedules, and simple multi-column panels. Frame the content with hand-drawn botanical illustrations and use circular crops for supporting place photography. Keep surfaces flat, borders fine, and corners square. Preserve strong text contrast and generous breathing room so practical details remain easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-height centered title beneath a slim horizontal navigation; botanical art frames the edges. | Top-level anchor navigation, Date establishes event context | Oversized serif names, Small tracked date label, Illustrated framing |
| 2 | other | Centered, narrow text passage with generous surrounding whitespace. | Narrative introduction | Uppercase eyebrow, Spaced heading, Light body copy |
| 3 | feature-grid | Introductory tile and seven quiz cards arranged as a four-column grid. | Hover for answer, Question-based discovery | White tiles, Small illustrations, Fine coral outline |
| 4 | other | Centered heading and paragraph, with decorative botanical artwork near the margins. | Celebration overview | Uppercase eyebrow, Spaced heading, Editorial paragraph |
| 5 | timeline | Large serif title within an open section heading area. | Signals upcoming schedule | Serif display title, Small uppercase eyebrow, Fine horizontal rule |
| 6 | timeline | Two-column event detail with location photo and labelled schedule information. | Map link, Time, place, parking, and details | Circular venue photo, Outlined MAP control, Small metadata labels |
| 7 | timeline | Two-column schedule with reception details and a venue image. | Map link, Dress and parking information | Date and event headings, Fine separators, Circular photo |
| 8 | other | Large, near-full-width illustrated venue plan between itinerary entries. | Venue wayfinding | Annotated map, Decorative labels, Open peach margins |
| 9 | timeline | Compact two-column after-party entry with circular location photo. | Late-night schedule details, Map link | Small uppercase labels, Circular image, Section rule |
| 10 | timeline | Two-column event listing with beach photo and labelled logistics. | Map link, Outdoor event details | Circular photo, Fine divider, Decorative edge illustration |
| 11 | product-showcase | Full-bleed illustrated map with a large display heading and decorative botanical corners. | Geographic orientation | Large serif city name, Illustrated map, Edge-framing leaves |
| 12 | feature-grid | White panel with a centered section title and two accommodation columns. | Compare stay options, Details and booking guidance | White surface, Column layout, Compact uppercase labels |
| 13 | feature-grid | Three adjoining recommendation columns for Eat, Drink, and Play. | Browse local suggestions, Outbound links | White panels, Serif category headings, Small category illustrations |
| 14 | other | Centered copy block with generous spacing and a text link. | Optional registry link | Uppercase eyebrow, Tracked heading, Understated link |
| 15 | contact | Centered section heading above a two-column RSVP form and adjacent botanical decoration. | Name entry, Accept or decline choice, Dietary and guest details | White rectangular fields, Coral submit button, Compact uppercase labels |

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