Visual design system / Wedding invitationEdition 01 · October 2026

A keepsake in seven chapters

Soft blue.
One love story.

A gentle, hand-drawn invitation system balancing the formality of a wedding ceremony with the warmth of a personal note. White space keeps each moment calm; blue carries the story; small red hearts mark what matters.

Explore the story View foundations

♡

We're
getting
marriedAKBAR & DINA31 · 10 · 2026

with love, always

01 / Foundations

Color, type & rhythm

Use a mostly white canvas and reserve saturated blue for the story's anchors. The red is an accent for dates, hearts, and tiny moments of emphasis.

Keepsake blue#4D8AA5 · primary

Deep tide#34718D · headings

Blue wash#E7F0F3 · surfaces

Heart red#BD5358 · accent

Warm paper#FBFAF7 · canvas

Display serif · Playfair Display

A day to remember

Use for section titles and formal statements. Keep line lengths short.

Handwritten · Caveat

A little note from us

Use sparingly for names, small labels, and handwritten warmth.

Interface sans · DM Sans

H1We're getting married

H2The wedding day

BodyJoin us as we begin our next chapter together.

LabelSave the date

02 / Layout & motifs

Light, airy, intentional

Portrait-first pages echo a phone invitation. Let illustrations frame content instead of compete with it.

▯

Portrait canvas

Design around a 9:16 viewport. Keep key text within the central 80% width.

〰

Hand-drawn linework

Use thin blue outlines for flowers, rings, birds, and small scene illustrations.

♥

Heart as punctuation

Small red hearts connect dates, milestones, and the couple's story.

◌

Decorative frames

Soft scallops or postage-stamp edges create a keepsake feel on feature panels.

↕

Vertical pacing

Stack milestones and event details. Use generous gaps to keep the scroll unhurried.

♫

Quiet interaction

Audio controls and opening actions stay compact, clear, and easy to tap.

03 / Page-by-page story

Seven moments, one journey

Recommended sequence follows the supplied screens. Each page has one job, a clear emotional beat, and a consistent visual signature.

Welcome / cover

01 — OPEN

Illustrated wedding invitation cover with couple drawing and open invitation button

Set the tone immediately: a playful couple illustration, names, wedding date, and one clear “Open Invitation” action.

Illustrated heroPrimary CTAPersonal

Countdown

02 — ANTICIPATE

Build anticipation with a prominent countdown, a short welcome note, and a small keepsake-style couple illustration.

TimerRings motifMilestone

The bride & groom

03 — INTRODUCE

Introduce both people as equals. Pair portrait medallions with names and brief, warm descriptions on a shared blue field.

Paired profilesPhoto medallionsBlue panel

Save the date & schedule

04 — INVITE

Save the date screen with heart-shaped date marker and event schedule

Make the date the visual anchor. Organize ceremony and reception in a vertical timeline with time, location, and small illustrations.

Date anchorTimelineEvent details

Schedule continuation

05 — GUIDE

Continuation of wedding event details, with wedding location and venue illustration

Continue the itinerary without repeating the opening. Use a venue illustration and map or directions link for practical details.

VenueDirectionsContinuation

Our love story

06 — REMEMBER

$Love story copy inside a blue scalloped frame$

Give the couple's story its own calm reading surface. Use a scalloped blue frame, readable line length, and restrained floral corners.

Editorial copyScalloped frameReflective

Wedding gift

07 — SHARE

Share gift preferences and transfer details with care. Label accounts clearly and provide a simple copy action where supported.

Clear detailsCopy actionClosing gesture

04 / Reusable components

Small parts, familiar language

Keep interactions visually modest and consistent so the invitation still feels like a personal keepsake.

Primary action

OPEN INVITATION

Short verb label · high contrast · generous tap area

Date marker

31.10
2026

Event timeline

Akad nikah
10:00 · Ceremony

Profile portrait

✿

Circular crop · fine double border

Decorative divider

— ❧ —

Thin ornament to mark a story transition

Supporting link

View location ↗

Understated, recognizable, and descriptive

05 / Design guidance

Keep it heartfelt and legible

The decorative character should add warmth while preserving reading comfort and clear event logistics.

Keep

One primary message or action per screen.
High contrast for names, dates, venue, and schedule.
Consistent blue line weight across illustrations.
Text blocks short enough to read comfortably on mobile.
Real portrait photography framed consistently.

Watch for

Script type for long passages or tiny captions.
Red accents used as large backgrounds.
Decorative art placed behind essential details.
Event times or locations split across awkward breaks.
Autoplay audio without an obvious pause control.