# Wedding Invitation Website — Design System

## 1. Purpose and reference

This design system describes the visual style, page structure, and interactions visible in the supplied 31-second mobile video. It’s a guide for recreating a similar site. Colors, fonts, and spacing are estimates from the recording; the original source code and desktop layout aren’t available.

The site is a romantic, playful wedding invitation with a handcrafted scrapbook look. It combines a warm ivory background, burgundy fabric-like panels, olive handwritten lettering, illustrated flowers, hanging ornaments, and portraits of the couple. The overall tone is cute yet ceremonial: playful illustrations frame clear event information.

## 2. Design principles

- Keep the invitation intimate with a narrow, centered, single-column layout.
- Mix playful display lettering and illustrations with clear, readable event details.
- Use flowers, beads, stars, and textile textures to frame content without covering it.
- Make the page feel like one continuous story, from the couple reveal to the closing message.
- Design for mobile first. On larger screens, keep the invitation centered and narrow.

## 3. Color palette

These are approximate starting points. Adjust them against the video reference during implementation.

| Token | Approximate color | Use |
|---|---|---|
| `paper` | `#FCFAF6` | Main page background |
| `wine` | `#4A1017` | Textile panels, main headings, strong accents |
| `wine-deep` | `#31090F` | Panel shadows and illustration details |
| `olive` | `#85864D` | Handwritten display headings |
| `ink` | `#342528` | Body copy and labels |
| `muted` | `#8D7F7B` | Supporting text and captions |
| `ornament-silver` | `#C9C6C1` | Hanging baubles and pale ornament details |
| `flower` | `#F7F3ED` | Lily petals and light decorative accents |

Use a warm off-white rather than pure white. Reserve the darkest colors for short, high-emphasis sections; keep most information on the paper background.

## 4. Typography

The design contrasts informal display lettering with restrained information text.

- **Display headings:** Rounded handwritten or hand-lettered style. Use olive for introductory and decorative headings, burgundy for ceremonial labels such as `AKAD`, `RESEPSI`, and `LOKASI`.
- **Names:** Friendly rounded display face in burgundy, larger than body copy. Put each partner’s name on a separate line with an ampersand between them.
- **Body:** Readable sans serif in warm dark ink. Keep paragraphs centered, narrow, and comfortably spaced.
- **Utility labels:** Uppercase or small caps with extra letter spacing, as used for the countdown heading and labels.

Suggested fallback stacks:

```css
:root {
  --font-display: "Comic Sans MS", "Trebuchet MS", cursive;
  --font-body: "Nunito Sans", "Arial", sans-serif;
}
```

For a closer match, use a genuine handwritten font for headings and a clean rounded sans serif for body text. Don’t use the display font for long paragraphs or event logistics.

## 5. Layout and spacing

- **Main canvas:** Centered portrait layout. On desktop, use a content width around `420–520px`; on mobile, use the full viewport width with `20–28px` side padding.
- **Section spacing:** Leave roughly `64–96px` between major sections and `8–16px` between related event details.
- **Alignment:** Mostly centered. Decorative elements may extend to the edges or hang in from the top corners.
- **Text width:** Keep paragraphs around `260–330px` wide for a keepsake-card feel.
- **Cards and panels:** Use rounded corners around `14–20px` for the calendar and portrait cards. The burgundy countdown panel creates a wide horizontal break in the page.
- **Layering:** Ornaments and flowers can overlap section edges, but must not obscure text or controls.

## 6. Page structure and content sequence

Build the experience as one vertically scrolling page, in this order:

1. **Opening cover** — Burgundy textile or envelope motif, hanging bead or ornament detail, a handwritten title such as “These Kids are Getting Married,” and an invitation-opening control.
2. **Couple reveal** — Two illustrated portraits, the couple’s names, and the wedding date. The video shows “Willow & Kala” and `11.09.26`; these are reference content, not required names or dates.
3. **Floral transition** — Calla lily illustration and a short “Celebrating” line to introduce the announcement.
4. **Wedding announcement** — Couple portraits or illustrated panels, each partner’s name, and family attribution.
5. **Countdown** — Burgundy textile panel with a subtle woven texture, a short heading such as “OUR BIG DAY AWAITS,” a large digital countdown, and small time-unit labels.
6. **Calendar** — Rounded burgundy calendar card with month title, weekday row, date grid, and the wedding date highlighted. Decorate the surrounding area with silver baubles and small stars.
7. **Ceremony details** — Separate `AKAD` and `RESEPSI` groups with date, time, and timezone. Use a heading followed by concise details.
8. **Location** — Map preview, location heading, and caption. Make the map or a nearby button open directions.
9. **Wedding gift** — Handwritten olive heading, brief gift instructions, and illustrated bank-card elements. Keep account details as editable content, not embedded in decorative images.
10. **Closing message** — Couple portraits, a short centered paragraph, and a handwritten sign-off such as “See You at Our Wedding Day.”
11. **Footer** — Burgundy textile strip with the couple’s names and any small links, such as privacy or design credit.

## 7. Illustration and decoration

- Use friendly, flat illustrations with slightly imperfect lines, burgundy outlines, and warm skin tones.
- Use calla lilies with pale petals and deep burgundy centers as the main floral motif.
- Repeat small white beads, hanging silver baubles, tiny stars, and burgundy textile forms throughout the page.
- Give burgundy panels a subtle woven or embroidered texture. Keep it low contrast so text remains readable.
- Keep illustrations consistent in style. Avoid glossy 3D elements or photographic decoration.
- Decorative assets should have transparent backgrounds where appropriate. Mark purely decorative images with empty alt text: `alt=""`.

## 8. Interaction and motion

### Opening

The video starts with the invitation title partly revealed, then shows the full title and couple introduction. Recreate this with a brief, gentle reveal. An envelope or cover may open vertically or fade away to show the first section. Keep an `Open Invitation` control visible, and allow scrolling if someone skips the animation.

### Scrolling

- Reveal sections with restrained fades or slight upward movement as they enter view.
- Use staggered timing only for small groups, such as the title, names, and date.
- Keep ornaments still or give them a subtle sway.
- Avoid strong parallax that makes text harder to read.
- Animate countdown digits only while the event is in the future.

### Music

The video shows a small star-like `Tap to Play Music` control near the top. Provide play and pause states with an accessible label. Don’t autoplay music with sound. The page should work normally if audio is unavailable or blocked.

### Calendar and map

- Make the selected date visually distinct.
- Make the map preview an accessible link or button that opens directions.
- Ensure tap targets are at least `44 × 44px`, even if their visible icons are smaller.

### Accessibility and reduced motion

- Respect `prefers-reduced-motion` by removing scroll reveals, swaying, and opening transitions when enabled.
- Use semantic headings, descriptive control labels, visible keyboard focus, and sufficient text contrast.
- Keep names, dates, event details, location, and gift instructions as selectable text. Don’t make essential information available only through images or animation.

## 9. Responsive behavior

- **Mobile (`≤ 600px`):** Single-column layout with `20–28px` side padding. Decorative artwork may crop at the edges; text and controls should remain readable.
- **Tablet (`601–900px`):** Keep a narrow centered column. Don’t convert the story into a conventional multi-column landing page.
- **Desktop (`> 900px`):** Center the invitation on a quiet paper-colored background. Keep a portrait-like content width and preserve the vertical story.
- Scale illustrations proportionally. Avoid fixed heights that crop content on small screens or when text is zoomed.

## 10. Suggested design tokens

```css
:root {
  --color-paper: #FCFAF6;
  --color-wine: #4A1017;
  --color-wine-deep: #31090F;
  --color-olive: #85864D;
  --color-ink: #342528;
  --color-muted: #8D7F7B;
  --color-silver: #C9C6C1;

  --content-max: 520px;
  --page-gutter: 24px;
  --radius-card: 18px;
  --space-section: 80px;
  --space-group: 14px;

  --font-display: "Comic Sans MS", "Trebuchet MS", cursive;
  --font-body: "Nunito Sans", "Arial", sans-serif;
}
```

## 11. Component inventory

- `InvitationCover` — Opening title and open control
- `MusicToggle` — Optional user-initiated audio control
- `CouplePortraits` — Paired illustrated faces
- `SectionHeading` — Handwritten or small uppercase heading variants
- `WeddingAnnouncement` — Couple names and family attribution
- `CountdownPanel` — Textile panel and timer
- `CalendarCard` — Month grid with highlighted wedding date
- `EventDetail` — Ceremony or reception details
- `LocationPreview` — Map image and directions link
- `WeddingGift` — Gift instructions and account/card presentation
- `ClosingMessage` — Portraits, thank-you copy, and sign-off
- `InvitationFooter` — Textile footer and small links
- `DecorativeOrnament` / `FloralIllustration` — Reusable non-interactive artwork

## 12. Content and implementation notes

- Replace all names, dates, family descriptions, location, map, bank information, and event times with the intended details.
- Use one canonical event date and time to generate both the calendar highlight and countdown.
- Keep Indonesian event labels and date/time formatting consistent with the audience. The reference uses Indonesian ceremony labels and WIB.
- Use real text for meaningful content, not a flattened screenshot. Decorative artwork can be image or SVG assets.
- Optimize portrait and floral assets for mobile, reserve their aspect ratios to reduce layout shifts, and lazy-load assets below the opening section.
- Treat exact fonts, colors, opening mechanics, and responsive behavior as estimates because the recording does not expose the original source code or desktop layout.

## 13. Visual acceptance checklist

- [ ] The page reads as a warm ivory, burgundy, and olive wedding invitation.
- [ ] The couple reveal and portraits appear before the event logistics.
- [ ] Countdown, calendar, ceremony details, location, gift, and closing message follow the video’s sequence.
- [ ] Burgundy panels have a subtle textile feel without reducing text contrast.
- [ ] The page remains a narrow portrait composition on desktop and readable on mobile.
- [ ] Music is user-initiated, and motion respects reduced-motion preferences.
- [ ] Names, dates, event details, map destination, and gift information are editable content rather than part of a single image.