J'adore Bag Design SystemLegacy format
A luxury, editorial design system for J'adore Bag — Bangkok's premier luxury bag spa and revitalization service. The aesthetic is cinematic minimalism: vast white canvas, deep emerald tones, and gold accents that elevate every touchpoint to high-fashion standards.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Corner Radius
Spacing
Base: 8pxA luxury, editorial design system for J'adore Bag — Bangkok's premier luxury bag spa and revitalization service. The aesthetic is cinematic minimalism: vast white canvas, deep emerald tones, and gold accents that elevate every touchpoint to high-fashion standards.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Standard
Standard
Elevation & Depth
Do's & Don'ts
Do
Component Guidelines
### Navigation
• Fixed position, transparent → cream glass on scroll
• Logo: Playfair Display 1.6rem + Cormorant Garamond overline
• Nav links: Lato 0.82rem uppercase, gold underline on hover
• CTA button: Outlined emerald, fills on hover
### Buttons
• Primary: Gold background, emerald-dark text, pill shape
• Secondary: Transparent, white border, white text
• Form Submit: Emerald background, white text, full width
• Pricing CTA (outline): Transparent, white border (dark bg), gold border on hover
### Cards
• Cream background with subtle emerald border (0.12 opacity)
• Gold-to-emerald gradient top accent line on hover (3px, animated scale)
• Translate-Y lift on hover with shadow transition
### Forms
• Cream background inputs matching page background
• Gold border + gold glow on focus
• Uppercase labels in emerald dark
• Full-width emerald submit button with pill shape
Animations
• Hero: Staggered fade-up entrance (0.3s delay increments)
• Scroll Reveal: TranslateY(40px) → 0 with 0.8s cubic-bezier transition
• Navbar: Backdrop blur glass effect on scroll (20px blur)
• Service Card: Top gradient line scales from 0 to 1 on hover
• Marquee: Infinite horizontal scroll, 30s linear loop
• Hero Glow: 6s pulse animation on radial gradient orb
Logo Usage
• Primary: "J'adore Bag" in Playfair Display 1.6rem
• Sub-mark: "Luxury Bag Spa" in Cormorant Garamond, gold, 0.7rem uppercase
• Always displayed vertically stacked
Image Treatment
• Hero: Full-bleed emerald gradient background (no photo required)
• Before/After: Split comparison with gold divider line
• Service Icons: Emoji on gold-muted rounded square backgrounds
• Testimonial Avatars: Gold-muted circle with Playfair initial
Key Principles
1. Monochrome + Gold: Never use fuchsia or bright colors — emerald + gold only
2. Editorial Whitespace: Generous padding, breathing room between elements
3. Typography Hierarchy: Playfair (display) → Cormorant (accent) → Lato (body)
4. Gold as Accent Only: Never use gold for large backgrounds, only highlights
5. Product Primacy: If images were added, they should always be the visual focus
Use with MCP
Don't have the MCP? Install it here