Seer Varisai Thattu Design System
A complete, production-ready visual foundation combining traditional South Indian wedding heritage with modern luxury web experience.
Brand Palette & Ratio System
Carefully balanced tones communicating South Indian tradition, celebration, warmth, and luxury.
--primary--accent--background--secondary--foreground--cardRecommended Color Ratio Balance (docs/color-system.md)
Font Pairings & Scale
Cormorant Garamond (Serif) for storytelling and headers combined with Manrope (Sans) for modern UI clarity.
Seer Varisai Thattu
Desktop: 72–96px | Line Height: 1.02 | Serif DisplayTraditional Ceremonial Gift Arrangements
Desktop: 56–72px | Line Height: 1.05Crafted for Weddings & Auspicious Occasions
Desktop: 44–56px | Line Height: 1.1Signature Fruit & Sweet Trays Set
Desktop: 32–40px | Line Height: 1.15Customized Requirements & Budget Options
Desktop: 26–32px | Line Height: 1.2We are an artisanal studio creating handcrafted Seer Varisai gift trays with fresh flowers, traditional sweets, fruits, silk clothes, and brass decor.
Size: 18–20px | Line Height: 1.6 | Sans BodyCustomers can easily browse our previous work, select their occasion, specify the exact number of trays needed, and place custom enquiries directly via WhatsApp or online contact.
Size: 16px | Line Height: 1.6Artisanal Studio & Venue Service • 100% Authentic Quality Guarantee • Delivered to your event venue
Size: 12–13px | Line Height: 1.5Buttons & Call-to-Action States
Buttons designed for primary conversion, secondary navigation, WhatsApp quick contact, and loading feedback.
Product Cards, Collection Banners & Testimonials
Modular cards presenting Seer Varisai Thattu offerings with high imagery and warm shadows.
Royal Wedding Seer Varisai Set
Complete traditional set featuring fresh fruit arrangements, dry fruits, sweets, coconuts, flowers, and silver/brass accessories.
Engagement Thamboolam Collection
"The Seer Varisai Thattu arrangement for my daughter's wedding was breathtaking! Every single guest commented on the traditional elegance and fresh flowers."
Form Controls & Enquiry Playground
Accessible inputs, occasion selectors, quantity counters, and validation state feedback.
Custom Tray Enquiry Form Demo
Checkboxes & Tick Animations
ui-checkboxInput Field States
Every enquiry is directly managed by our lead plating designers. We strictly safeguard customer privacy and event details.
Section Themes & Container Gutters
Demonstrating the 5 official section themes specified in docs/color-system.md.
Warm Ivory Background
Primary website background (60–70% balance). Clean, airy, editorial.
Sand Beige Background
Used for alternate content sections, collections, and background contrast.
Deep Maroon Hero Theme
Used for cinematic hero headers, major CTAs, and festive highlights.
Soft White Card Surface
Used for elevated components, product cards, forms, and dialogs.
Traditional South Indian Texture Pattern
Subtle radial gold dot matrix overlay giving authentic Tamil heritage depth.
Traditional South Indian Motifs
SVG vector graphics inspired by Tamil wedding tradition: Lotus, Kolam flourishes, and Thattu trays.
Lotus Floral Motif
Symbol of purity, prosperity, and divine blessing in Tamil weddings.
Kolam Corner Flourish
Realistic traditional antique-gold Kolam corner flourish artwork asset.
Ceremonial Thattu Tray
The central brass tray vector icon representing the core business service.
Ornamental Divider
Used inside headings & footers to elegantly divide content blocks.
Brass Platter Splash
Rotating ornate brass tray animation with gold progress bar & brand intro.
Animation Foundations & Lenis Smooth Scroll
Smooth reveals powered by Motion for React and Lenis smooth scroll ticker integration.
Fade Up Entrance
y: 35px → 0px with luxury ease cubic-bezier(0.22, 1, 0.36, 1).
Staggered Grid Reveal
Stagger child elements with 120ms progressive delay interval.
Cinematic Smooth Scroll
Synchronized with GSAP ScrollTrigger ticker & respects reduced-motion.
Skeletons, Toast Feedback & Slide-over Drawer
Reusable application state indicators, loading shimmers, notifications, and responsive drawers.
Shimmer Skeleton Loading States
ui-skeletonInteractive Overlays Playground
Overlays & DrawersTest the new reusable feedback components built with design system CSS variables and Motion transitions.
GSAP 3 Animation System Showcase
Timeline-driven hero intros, clip-path mask reveals, multi-layer parallax, and pinned horizontal scrolling sections.
1. Hero Animation Sequence Timeline
Seer Varisai Thattu Artistry
Every tray is crafted with fresh flowers, traditional sweets, fruits, and brass embellishments.
2. Masked Line Text Reveal
"Preserving rich South Indian heritage through meticulous tray presentation."
Smooth clip-path mask reveals each paragraph line sequentially without layout shifts or text jumpiness.
3. Image Curtain Mask Reveal
4. Multi-Layer Scroll Parallax
GSAPParallaxCinematic Multi-Depth Layers
Background moves smoothly relative to foreground content, synchronized with Lenis requestAnimationFrame ticker.
5. Horizontal Scroll Storytelling Track
GSAPHorizontalScrollScroll down to translate through the showcase cards horizontally:
1. Flowers & Garlands
Fresh jasmine, marigold & lotus decor.
2. Traditional Sweets
Handcrafted ghee sweets & dry fruits.
3. Fruit Arrangements
Exotic and seasonal fruit baskets.
4. Silk & Coconuts
Kanchipuram silk towel & decorated coconuts.
5. Brass & Silver
Polished brass lamps & silver platters.