Beyond Invitation

Overview

Beyond Invitation is a premium Indian wedding stationery brand that transforms celebration moments into heirloom-quality keepsakes. The brand serves affluent Indian couples and families seeking bespoke, designer-led invitation experiences across Hindu, Muslim, Christian, and secular ceremonies. The aesthetic is "Opulent Minimalism"—a sophisticated fusion of rich jewel tones (deep burgundy #7b1c2e, warm gold #c9a84c) with refined cream and ivory surfaces, creating an impression of understated luxury and cultural reverence. The visual language evokes the tactile warmth of premium paper stocks, embossed details, and ceremonial craftsmanship, while maintaining a contemporary, digitally-native interface. The UI conveys calm confidence: every interaction feels intentional, every color choice deliberate, every transition smooth and respectful of the user's emotional investment in their celebration.

The brand voice is warm, knowledgeable, and celebratory without being breathless. Tone vocabulary: "bespoke," "heritage," "curated," "artisanal," "timeless." The copy avoids hyperbole and instead anchors itself in craft, cultural authenticity, and the permanence of the printed word. Example sentence in brand voice: "Your invitation is the first chapter of your story—we craft it with the reverence it deserves."

Colors

The color system centers on a deep burgundy primary (#7b1c2e) paired with warm metallics and creams, evoking Indian wedding aesthetics while maintaining contemporary sophistication. Primary (#7b1c2e) is deployed on all call-to-action buttons, interactive states, and brand-critical elements—it commands attention without aggression, grounding the interface in cultural warmth. Secondary gold (#c9a84c) and tertiary champagne (#d6b36a) provide supporting accents for highlights, badges, and decorative elements, creating a cohesive warm palette. The surface stack ranges from pure white (#ffffff) at the brightest level to warm cream (#fbf7f0) and soft beige (#f7ead6) for container backgrounds, ensuring readability while maintaining the premium, paper-like aesthetic. On-surface text is a deep brown

Typography

The type system uses Assistant (a geometric, humanist sans-serif) across all scales, creating visual consistency and a contemporary, approachable tone that contrasts beautifully with the opulent color palette. Display (60px, 800 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence; Headline-lg (40px, 700 weight) structures primary content sections; Headline-md (28px, 700 weight) organizes subsections and card titles. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) provide comfortable reading for product descriptions and long-form content, with generous line-height (1.5–1.75) to enhance legibility on screens. Label-md (14px, 700 weight) and Label-sm (12px, 600 weight, 0.05em tracking) handle UI labels,

Layout

The layout employs a 12-column fluid grid with a max-width of 1500px, centered on viewport. The page rhythm uses lg spacing (40px) for major section separation, md spacing (24px) for card-to-card gutters and internal padding, and sm spacing (12px) for tighter component groupings. The hero section occupies full viewport height with a split-screen visual treatment: left side features the primary burgundy background with subtle radial grain texture (24px spacing, 1px circles at rgba(230, 201, 122, 0.28)), right side uses a darker carbon tone. A vertical dividing line (1px gradient from gold/50 to transparent) bisects the viewport, creating ceremonial symmetry. Content sections below the fold use 40px top/bottom margins and 24px horizontal gutters on mobile, scaling to 64px margins on desktop.

Elevation & Depth

Depth is conveyed through a layered glassmorphic system combined with subtle shadows, creating visual hierarchy without harsh contrast. Level 1 (Base): Dynamic background gradient with radial grain texture (background-image: radial-gradient(circle, rgba(230, 201, 122, 0.28) 0 1px, transparent 1.5px), background-size: 24px 24px) and an overlay gradient (background: linear-gradient(to bottom-right, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15))). Level 2 (Standard Card): backdrop-filter: blur(8px), background: rgba(255, 255, 255, 0.45), border: 1px solid rgba(255, 255, 255, 0.6), box-shadow: 0

Shapes

The shape philosophy is "Ceremonial Softness"—a deliberate balance between sharp architectural precision and organic approachability. Buttons use full rounding (border-radius: 9999px) to create pill-shaped affordances that feel inviting and premium, echoing the rounded edges of luxury packaging. Cards and containers use xl rounding (1.5rem / 24px) to soften corners while maintaining structural clarity; this radius appears on product cards, modals, and input fields. Inputs and form elements use full rounding (9999px) for text fields and select dropdowns, creating a cohesive, touchable interface

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: {colors.primary} (#7b1c2e), text-color: {colors.on-primary} (white), typography: {typography.label-md}, rounded: {rounded.full}, padding: 12px 24px, height: 44px. On hover, background shifts to {colors.primary-container} (#85172b) with box-shadow: 0 3px 8px rgba(123, 28, 46, 0.2) and transition: background-color 240ms ease, box-shadow 240ms ease. On active/pressed, background becomes {colors.primary-fixed-dim} (#7b1c2e) with box-shadow: 0 1px 3px rgba(123, 28, 46, 0.3). Button-secondary uses background: rgba(123, 28, 46, 0.1), text-color: {colors.primary}, border: 1px solid rgba(123, 28, 46, 0.2), and on hover, background increases to rgba(123, 28, 46, 0.15) with border-color: rgba(123, 28, 46,

Do's and Don'ts

**Do**

• Do use the primary burgundy (#7b1c2e) exclusively for CTAs, focus states, and brand-critical interactions—never dilute it with secondary colors on the same button.
• Do maintain at least 24px of white-space around premium product imagery and hero sections to preserve the luxury aesthetic and prevent visual clutter.
• Do apply the full rounding (9999px) consistently to all interactive elements (buttons, inputs, pills) so users intuitively recognize them as tappable.
• Do use the glassmorphic card treatment (backdrop-filter: blur(8px), rgba(255, 255, 255, 0.45)) for all content containers to create depth and visual separation without harsh shadows.
• Do pair warm metallics (gold #c9a84c, champagne #d6b36a) with the burgundy primary for accents and highlights—never use cool grays or blues, which break the warm, ceremonial tone.
• Do animate all state transitions (hover, focus, active) over 240ms using ease timing to create premium, intentional micro-interactions.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use the warm palette (deep brown #2a1810 for text, cream #fbf7f0 for surfaces) to maintain tonal warmth.
• Don't apply box-shadow values exceeding 0 8px 24px rgba(0, 0, 0, 0.15)—heavy shadows undermine the glassmorphic aesthetic and feel dated.
• Don't mix rounded and sharp corners on related components (e.g., a button with 9999px radius next to a card with 0px radius)—consistency in geometry is essential to brand coherence.
• Don't use the secondary or tertiary colors as primary CTAs—reserve burgundy (#7b1c2e) for all high-priority actions to maintain clear visual hierarchy.
• Don't reduce padding below {spacing.md} (24px) on cards or containers—the brand's luxury positioning demands generous internal breathing room.
• Don't animate transitions faster than 200ms or slower than 400ms—the sweet spot (240ms) feels premium; faster feels jarring, slower feels sluggish.