Wevitation Mildness

Overview

Wevitation Mildness is a digital wedding invitation platform designed for contemporary Indonesian celebrations. It serves couples and their guests by transforming traditional invitation ceremonies into elegant, interactive web experiences. The aesthetic movement is 'Romantic Minimalism'—combining ornamental botanical illustrations (soft blue roses, eucalyptus leaves, delicate florals) with restrained, clean interface geometry. The UI evokes a sense of refined celebration: intimate yet sophisticated, personal yet polished. The brand personality is warm, respectful, and celebratory—never frivolous. Voice is conversational but dignified, using Indonesian cultural references naturally. Example sentence in brand voice: 'Kepada Lia—kami mengundang Anda untuk merayakan momen istimewa Via & Andra pada 28 Maret 2026.'

Colors

The color palette centers on a serene, cool-toned foundation that mirrors the soft blue florals dominating the visual language. Primary (#4b6b99) is a muted slate-blue used exclusively for interactive elements—call-to-action buttons ('Buka Undangan'), links, and focus states—creating a calm, trustworthy accent against the pale cream and white surfaces. Secondary (#03a360) is a soft sage-green reserved for status indicators, success states, and accent details. Tertiary (#ffc700) is a warm, muted gold used sparingly for highlights and decorative badges. The surface stack progresses from near-white (#ffffff, surface-bright) through soft off-whites (#f5f8fa, surface-container-low) to pale blue-grays (#dfe5eb, surface-container-highest), creating subtle depth without harsh contrast. On-surface

Typography

The type system pairs two Google Fonts: Great Vibes (a flowing, elegant script) for display and ceremonial headings, and Philosopher (a geometric, humanist sans-serif) for all body, interface, and label text. Great Vibes at 48px with 0.02em letter-spacing is used for the couple's names and major section titles, evoking handwritten invitation elegance. Philosopher at 700 weight and 32px (headline-lg) anchors section headers; at 600 weight and 28px (headline-md) it frames subsections. Body text uses Philosopher at 14px, 400 weight, with 22px line-height (1.57x), ensuring comfortable reading on mobile and desktop. Labels and button text use 12px, 500 weight, with 0.04em letter-spacing for crisp, scannable interface hierarchy. On small labels over busy backgrounds (e.g., date badges overlaid o

Layout

The page uses a fluid, mobile-first grid with a 1280px container max-width for desktop. The layout rhythm is built on 8px units: spacing tokens (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) create consistent breathing room. Hero sections use lg spacing (40px) for vertical separation between major content blocks; card interiors use md spacing (24px) for padding. The grid is 12 columns on desktop, collapsing to 4 columns on tablet and single-column on mobile. White-space philosophy prioritizes clarity over density: invitation details (date, location, recipient name) are never crowded; each element sits within its own breathing room. The 'Kepada:' label and recipient name use md spacing (24px) below the date block, creating a natural visual hierarchy. Container padding is consistently gut

Elevation & Depth

Depth is conveyed through subtle layering and soft shadows rather than dramatic contrast. Level 1 (Base): the background is a soft gradient from #f5f8fa to #eff2f5, with optional floral imagery providing visual interest. Level 2 (Standard Cards): cards use rgba(255, 255, 255, 0.8) background with a 1px border of rgba(255, 255, 255, 0.5) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a frosted-glass effect that sits gently above the background. Level 3 (Elevated/Modals): modals and prominent containers use rgba(255, 255, 255, 0.95) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), estab

Shapes

The shape philosophy is 'Soft-Technical Elegance'—combining gentle, approachable curves with precise, functional geometry. Buttons use rounded: md (0.75rem / 12px), creating a friendly, inviting appearance without appearing childish. Cards and elevated containers use rounded: xl (1.5rem / 24rem), echoing the soft botanical aesthetic and providing visual softness. Input fields use rounded: DEFAULT (0.5rem / 8px), maintaining interface clarity while staying harmonious with the overall palette. The most prominent card (invitation hero) uses rounded: xl (24px) with a 30px border-radius on the top

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses {colors.primary} (#4b6b99) background, white text, 12px Philosopher 500 weight, 0.75rem radius, 8px 17px padding, and {elevation.md} shadow. On hover (button-primary-hover), the background darkens to #3d5580 with a 150ms ease-in-out transition—no shadow change, maintaining visual stability. On active (button-primary-active), the background further darkens to #2f4568. Secondary buttons (button-secondary) use white background with 1px {colors.outline-variant} border, on-surface-variant text, and the same padding/radius. On hover, the background shifts to {colors.surface-container-low} (#f5f8fa) and text becomes on-surface (#181c32), creating a subtle fill effect.

Containers & Surfac

Do's and Don'ts

**Do**

• Do use {colors.primary} (#4b6b99) exclusively for interactive CTAs and focus states—it's the brand's signature accent and must remain reserved and intentional.
• Do apply 150ms ease-in-out transitions to all hover and focus state changes to maintain the brand's calm, refined interaction rhythm.
• Do pair Great Vibes script (display) with Philosopher sans-serif (body/interface) consistently—never mix other typefaces, as this pairing is core to the brand identity.
• Do use the full surface stack (surface-container-lowest through surface-container-highest) to create subtle depth; avoid pure white (#ffffff) as a default background—use surface-bright or surface-container-low instead.
• Do maintain 24px (md spacing) as the default card padding and 40px (lg spacing) between major sections to preserve the brand's unhurried, spacious aesthetic.

**Don't**

• Don't use secondary (#03a360) or tertiary (#ffc700) as primary interactive colors—they are supporting accents only and must never compete with primary for user attention.
• Don't apply harsh shadows (box-shadow values exceeding 0 8px 24px rgba(0, 0, 0, 0.12))—the brand uses soft, diffused elevation, never dramatic depth.
• Don't reduce line-height below 1.5x on body text (14px × 1.5 = 21px minimum)—readability and breathing room are non-negotiable in this romantic, unhurried aesthetic.
• Don't use border-radius values smaller than 0.5rem (8px) on interactive elements; sharp corners feel harsh and contradict the soft botanical aesthetic.
• Don't mix Philosopher weights arbitrarily—use 400 for body, 500 for labels, 600 for subsections, and 700 for headlines; inconsistent weights fragment the visual hierarchy.