Lavichique Design System
A unified design system for luxury fashion experiences
Color Palette
Brand Colors
For UI elements, buttons, and text highlights
Light
#fbe122
Pantone 107 C
Primary
#f1c400
Pantone 7406 C
Dark
#e6b10e
Pantone 7405 U
Background Colors
For site background and gradients
Light
#00a3e1
Pantone 2191 C
Primary
#2651e9
Azul
Dark
#4c00f1
"Overdue Blue"
Primary Gradient
Used for primary buttons and branded text
brand-dark → brand-primary (20-80%) → brand-light
Background Gradient
Fixed viewport gradient using all 3 background colors
Dark → Primary → Light
Product Cards
Leather Handbag
Charles & Ron
£8.00 / day
RRP £120
Dress 1
Casual Blouse
Charles & Ron
€9.00/day
RRP €180
Materials (Surfaces)
Glass Surface
Translucent with blur, great for frames.
Luxury Glass
Enhanced depth with inner highlight.
Panel
Opaque well for dense content.
Typography System
Headings (Serif)
Libre Baskerville for headings and titles
Heading Large (H1)
Heading Medium (H2)
Heading Small (H3)
Heading XS (H4)
Body Text (Sans-serif)
Inter for body text and UI elements
Body Large
Body Normal
Body Small
Body Muted
Semantic Variants
Different text styles for different purposes
Body Normal (Medium weight)
Body Muted (Normal weight)
Brand text (Gradient)
Button Primary
Button Secondary
Success text
Warning text
Error text
Font Families
Available font family options
Libre Baskerville (Heading)
Inter (Body)
Text Buttons
Text Button Variants
Minimal text buttons for secondary actions and navigation
Text buttons are ideal for secondary actions, navigation links, and minimal UI elements
Buttons
Primary CTA
Main call-to-action buttons
Secondary CTA
Alternative action buttons
Form Components
Input Fields
Text input components with variants
Other Form Elements
Select, textarea, and checkbox components
You must agree to continue
Feedback Components
Alerts
Status messages and notifications
Success!
Warning
Error
Badges
Status indicators and labels
Loading Components
Loading Skeletons
Skeleton loading states for content
Loading Page
Full page loading state
Loading...
Please wait while we prepare your experience
Glass Card System
Glass Container + Content Well Pattern
Content Well Example
Glass container frames content wells for optimal readability
This demonstrates the recommended pattern: glass container for framing, content well for readable text. Perfect for forms and detailed content.
Hero Card
For prominent, attention-grabbing content
Perfect for landing pages, featured content, and primary CTAs.
Body Card
For general content with good readability
Ideal for articles, descriptions, and general information display.
Luxury Card
For premium, high-end content
Perfect for showcasing premium products and exclusive content.
Form Card
For forms and interactive content
Navigation
For navigation elements
Dashboard
Profile
Settings
Status Card
For alerts, notifications, status info
✓ Success message
⚠ Error message
Modal Components
Basic Modal
Simple modal with open/close functionality