The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Rattan Luxe Email Design System
Designed and developed a complete email design system for Rattan Luxe, a premium outdoor furniture brand.
This project focused on creating a cohesive, conversion-driven email experience that reflects the brand's luxury positioning while maintaining consistency across all customer touchpoints.
Project Scope
Welcome Email Series
Promotional Campaign Emails
Responsive Mobile-First Design
Email Design System
Reusable Components & Modules
Brand Consistency Guidelines
Design Goals
The objective was to create visually compelling emails that showcase Rattan Luxe's premium outdoor living collections while driving engagement and sales. Every element was carefully designed to balance aesthetics, readability, and conversion performance.
Key Features
✓ Luxury-focused visual design
✓ Mobile-responsive layouts
✓ Conversion-focused CTAs
✓ Modular and scalable system
✓ Consistent typography and color usage
✓ Optimized customer experience
Deliverables
A complete email design system featuring reusable templates, structured layouts, brand-aligned components, and responsive designs that can be easily scaled across future campaigns.
Tools Used: Figma, Klaviyo, Email Marketing Design Systems
Designed to strengthen brand perception, improve customer engagement, and support long-term email marketing growth.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Kumo — Interactive Matcha Tea Landing Page UI-UX
Choosing a drink online is often a flat and boring experience — static product cards don’t convey taste, freshness, or emotion. For a premium product like matcha, this makes it harder to stand out and convert.
This animated landing page for Kumo turns product selection into an interactive and sensory experience. Instead of reading long descriptions, users visually explore flavors through motion, ingredients, and composition.
yummy =)
🚀 𝗕𝘂𝗶𝗹𝘁 𝗦𝗶𝗹𝗲𝗻𝘁 𝗕𝗿𝗶𝗱𝗴𝗲 𝗳𝗼𝗿 𝘁𝗵𝗲 #𝗖𝗼𝗻𝗳𝗶𝗴𝗠𝗮𝗸𝗲𝗮𝘁𝗵𝗼𝗻
What started as a simple idea became an experiment in accessibility and human-centered design.
𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺:
Millions of people communicate through gestures every day, but most technology is built for voices, keyboards, and touchscreens.
I wanted to explore a different question:
"What if technology could learn how people already communicate?"
That's how Silent Bridge was born.
🔗 𝗟𝗶𝘃𝗲 𝗗𝗲𝗺𝗼:
https://brim-time-58435449.figma.site/
𝗠𝘆 𝗪𝗼𝗿𝗸𝗳𝗹𝗼𝘄
1️⃣ 𝗦𝘁𝗮𝗿𝘁𝗲𝗱 𝗶𝗻 𝗙𝗶𝗴𝗺𝗮 𝗠𝗮𝗸𝗲
I designed and generated the entire experience directly in Figma Make, focusing on accessibility, simplicity, and a premium user experience.
2️⃣ 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗖𝗮𝗺𝗲𝗿𝗮-𝗕𝗮𝘀𝗲𝗱 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲
Instead of traditional inputs, I wanted users to communicate through gestures using real-time camera tracking.
3️⃣ 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗲𝗱 𝗠𝗲𝗱𝗶𝗮𝗣𝗶𝗽𝗲 𝗛𝗮𝗻𝗱𝘀
MediaPipe tracks hand landmarks and understands gesture positions and movement patterns.
4️⃣ 𝗖𝘂𝘀𝘁𝗼𝗺 𝗦𝗶𝗴𝗻 𝗧𝗲𝗮𝗰𝗵𝗶𝗻𝗴
Users can:
• Record a gesture
• Assign a meaning
• Save it
The system learns and recognizes custom gestures.
5️⃣ 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗲𝗱 𝗦𝘂𝗽𝗮𝗯𝗮𝘀𝗲
Supabase stores:
• Gesture recordings
• Saved phrases
• Recognition history
6️⃣ 𝗖𝗼𝗺𝗺𝘂𝗻𝗶𝘁𝘆 𝗦𝗶𝗴𝗻 𝗟𝗶𝗯𝗿𝗮𝗿𝘆
Users can build and share their own visual language instead of relying only on predefined gestures.
𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗡𝗼𝘁𝗲
Before testing, clear existing custom gestures from the Teach page.
For best results:
• Open Teach Sign
• Remove all test gestures
• Record gesture
• Assign phrase
• Test recognition
𝗕𝘂𝗶𝗹𝘁 𝗪𝗶𝘁𝗵
• Figma Make - [ 𝗘𝘃𝗲𝗻 𝗠𝗲𝗱𝗶𝗮𝗣𝗶𝗽𝗲 𝗮𝗻𝗱 𝗦𝘂𝗽𝗮𝗯𝗮𝘀𝗲 𝗵𝗮𝘃𝗲 𝗯𝗲𝗲𝗻 𝗰𝗼𝗻𝗻𝗲𝗰𝘁𝗲𝗱 𝘂𝘀𝗶𝗻𝗴 𝗙𝗶𝗴𝗺𝗮 𝗠𝗮𝗸𝗲 ]
• MediaPipe Hands
• Supabase
This project is not about AI.
It's about accessibility.
It's about allowing technology to adapt to people instead of forcing people to adapt to technology.
Because every gesture has meaning.
𝗦𝗶𝗹𝗲𝗻𝘁 𝗕𝗿𝗶𝗱𝗴𝗲 — 𝗖𝗼𝗺𝗺𝘂𝗻𝗶𝗰𝗮𝘁𝗲 𝗕𝗲𝘆𝗼𝗻𝗱 𝗪𝗼𝗿𝗱𝘀.
#𝗖𝗼𝗻𝗳𝗶𝗴𝗠𝗮𝗸𝗲𝗮𝘁𝗵𝗼𝗻 #𝗙𝗶𝗴𝗺𝗮𝗠𝗮𝗸𝗲 #𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 #𝗠𝗲𝗱𝗶𝗮𝗣𝗶𝗽𝗲 #𝗦𝘂𝗽𝗮𝗯𝗮𝘀𝗲 #𝗕𝘂𝗶𝗹𝗱𝗜𝗻𝗣𝘂𝗯𝗹𝗶𝗰 #𝗗𝗲𝘀𝗶𝗴𝗻𝗙𝗼𝗿𝗚𝗼𝗼𝗱 #𝗜𝗻𝗻𝗼𝘃𝗮𝘁𝗶𝗼𝗻
I love this work man! Now I can even create my own language with hand sign 😅, gonna use it when my girl will mad at me 😋
A or B? Polling the community on my latest homepage revamp. 🚀
I am currently engineering a premium digital experience for a recent revamp project. I’m stuck between two structural directions and would love the Contra community's feedback before I take this from Figma into the final front-end build.
7 voted
88%
1 voted
12%
8 votes
Closed
The illustration in A makes it stand out
Challenges
View all
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?