Rajat & Nidhi

Overview

Rajat & Nidhi is a luxury wedding invitation website that celebrates Indian matrimonial traditions through an ornate paper-cut aesthetic combined with celestial symbolism. The design embodies "Ornamental Maximalism"—a sophisticated blend of intricate botanical motifs, layered depth effects, and warm metallics against deep jewel tones. The visual language evokes the grandeur of traditional Indian wedding ceremonies while maintaining contemporary digital elegance. The brand personality is warm, celebratory, and deeply personal: it speaks to guests with genuine invitation and reverence for the occasion. Voice: poetic yet precise, never overwrought. Example sentence: "Join us as Rajat and Nidhi begin their journey together, surrounded by loved ones and blessed by tradition."

Colors

The color palette anchors on a deep teal background (#0c4860, #022938) that evokes both the night sky and precious gemstones, creating an intimate, luxurious canvas. The primary accent is a warm, burnished gold (#ac9545) used exclusively on CTAs, headings, and decorative elements—this is the signature brand color that draws the eye and signals interactivity. Secondary colors include a soft sage-green (#88b2a0) for subtle accents and dividers, and cream/off-white (#f5f5f5–#ffffff) for readable body text and card backgrounds. Gold (#ac9545) appears on all primary buttons, links, and the hero headline text; it should never be used for body copy or backgrounds. The teal (#0c4860) forms the hero section and key visual anchors. Cream surfaces (#ffffff, #fafafa) provide contrast for readable cont

Typography

The type system pairs serif elegance with contemporary clarity. Cormorant (serif, 700 weight) is reserved for display and headline scales (48px–72px), delivering the ornamental, ceremonial voice befitting a wedding invitation. Cormorant Upright (500 weight, 24px) serves as the title layer, bridging serif formality and functional hierarchy. Manrope (sans-serif, 400–600 weight) handles all body and label text (12px–18px), ensuring legibility on screen and a modern counterpoint to the serif headlines. Letter-spacing on display text is tightened to -0.04em to enhance the luxurious, composed feel; body text uses 0em spacing for neutral readability. Line-height is generous (1.4–1.5 for body, 1.17 for headlines) to support the ornate aesthetic without crowding. Apply text-shadow: 0 2px 4px rgba(0

Layout

The page uses a fluid, centered layout with a max-width of 1280px and 12-column grid. The hero section spans full-width with a deep teal background and ornate paper-cut illustration, centered text, and 64px (lg spacing) top/bottom padding. Content sections use 24px (gutter) horizontal margins on mobile, expanding to 40px (lg spacing) on desktop. The spacing scale follows a semantic rhythm: 8px (unit) for micro-adjustments, 12px (sm) for tight grouping, 24px (md) for section padding, 40px (lg) for major section separation, and 64px (xl) for hero/footer breathing room. Cards and event blocks are arranged in a 2–3 column grid on desktop, collapsing to single column on mobile. Container max-width is enforced at 1280px to maintain readability and visual balance. Whitespace is generous—never les

Elevation & Depth

Depth is achieved through a refined shadow and layering system that mimics the paper-cut aesthetic. Level 1 (Base): the teal hero background with subtle texture overlay (opacity 0.05–0.1). Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0,0,0,0.15), background: #ffffff or #fafafa, with a 1px border at rgba(0,0,0,0.06) to define edges. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0,0,0,0.12), background: #ffffff, used on interactive cards and modals. The paper-cut illustration in the hero uses CSS clip-path or SVG masking to create the layered, dimensional effect—each layer (stars

Shapes

The shape philosophy is "Refined Geometry"—sharp, intentional corners paired with selective rounding for human warmth. Buttons use 0.75rem (12px) border-radius, creating a subtle, modern softness without appearing playful. Cards use 1rem (16px) border-radius for a more generous, inviting feel. Input fields use 0.5rem (8px) border-radius for a clean, functional appearance. The hero illustration employs organic, flowing curves (clip-path with bezier curves) to contrast the geometric UI, reinforcing the paper-cut aesthetic. Dividers and accent lines are sharp (0px radius) to maintain precision. T

Components

Action Elements Buttons are the primary interactive layer. The button-primary component uses {colors.primary} (#ac9545) background, {colors.on-primary} (#ffffff) text, 12px 24px padding, 44px height, and {rounded.md} (12px). On hover, the background darkens to #9d8238 and the shadow elevates to 0 6px 16px rgba(0,0,0,0.2), with a 200ms ease-out transition. The button-secondary variant uses a 2px solid border at {colors.primary} with transparent background, inverting on hover to a filled {colors.primary-container} state. Both variants use {typography.label-md} (Manrope, 14px, 600 weight, 0.01em letter-spacing).

Containers & Surfaces The card-luxury component is the primary content container: {colors.surface} (#ffffff) background, {rounded.lg} (16px), {spacing.md} (24px) padding, and

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ac9545) exclusively on CTAs, links, and interactive focus states—never on backgrounds or body text.
• Do maintain generous whitespace (minimum 24px between sections) to honor the luxury aesthetic and prevent visual overwhelm.
• Do pair Cormorant serif headlines with Manrope sans-serif body text to balance ornamental elegance with contemporary clarity.
• Do apply subtle shadows (0 3px 8px rgba(0,0,0,0.15)) to cards to reinforce the paper-cut layering effect and visual hierarchy.
• Do use the teal background (#0c4860, #022938) only in hero and accent sections; keep primary content on cream/white surfaces.
• Do animate button and card hover states with 200–300ms ease transitions to signal interactivity without jarring the user.

**Don't**

• Don't use gold (#ac9545) for body copy, backgrounds, or non-interactive elements—reserve it as the exclusive accent color.
• Don't apply blur, glassmorphism, or transparency effects; the design relies on solid colors, shadows, and layering for depth.
• Don't mix serif and sans-serif fonts within a single text block; use Cormorant for headlines, Manrope for body.
• Don't reduce padding or margins below {spacing.sm} (12px) in cards or sections; the luxury aesthetic demands breathing room.
• Don't use harsh, high-contrast shadows (e.g., 0 20px 60px); keep shadows soft and subtle (0 3–8px with low opacity).
• Don't apply border-radius greater than {rounded.lg} (16px) to cards or buttons; the refined geometry requires intentional, moderate rounding.