Campaign Image

Maison Eclat

Crafted for the exceptional. A legacy of exquisite artistry.

Discover the Collection

Timepieces

Meridian Chronograph

$4,800

Leather Goods

Onyx Clutch

$2,400

Fine Jewelry

Aurelia Necklace

$7,200

The Art of Distinction

Founded in 1892 in the heart of Paris, Maison Eclat has cultivated an unwavering dedication to the art of fine craftsmanship. Every piece represents hundreds of hours of meticulous handwork by our master artisans, carrying forward a tradition that spans four generations.

We believe that true luxury is not merely about materials or price, but about the invisible thread that connects intention, craft, and the person who will carry our work into the world. Each creation is a conversation between past and future.

Stay Informed

Receive exclusive previews and invitations to private events.

Theme Config

Edit the CSS custom properties below and click Apply to see changes live. Copy the config to use in your own project.

:root {
  /* Colors — deep navy/gold, minimal borders */
  --background: 220 20% 98%;
  --foreground: 220 25% 10%;
  --card: 220 15% 99%;
  --card-foreground: 220 25% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 10%;
  --primary: 220 60% 25%;
  --primary-foreground: 45 80% 80%;
  --secondary: 220 10% 95%;
  --secondary-foreground: 220 15% 40%;
  --accent: 45 30% 92%;
  --accent-foreground: 220 60% 20%;
  --muted: 220 10% 95%;
  --muted-foreground: 220 8% 50%;
  --destructive: 0 65% 45%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 50% 38%;
  --success-foreground: 0 0% 100%;
  --warning: 45 80% 50%;
  --warning-foreground: 220 25% 10%;
  --border: 220 8% 90%;
  --input: 220 8% 90%;
  --ring: 220 60% 25%;
  --chart-1: 220 60% 25%;
  --chart-2: 45 80% 50%;
  --chart-3: 160 40% 40%;
  --chart-4: 340 40% 45%;
  --chart-5: 280 30% 45%;

/* Sidebar */
  --sidebar-background: 220 25% 8%;
  --sidebar-foreground: 220 10% 80%;
  --sidebar-primary: 45 80% 65%;
  --sidebar-primary-foreground: 220 25% 8%;
  --sidebar-accent: 220 20% 15%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 220 15% 16%;
  --sidebar-ring: 220 60% 25%;

/* Typography — serif headings */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 300;
  --font-weight-medium: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;

/* Shadows — subtle, luxurious */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.02);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.03), 0 1px 2px -1px rgb(0 0 0 / 0.02);
  --shadow-lg: 0 6px 12px -3px rgb(0 0 0 / 0.04), 0 2px 4px -2px rgb(0 0 0 / 0.02);
  --shadow-xl: 0 12px 24px -6px rgb(0 0 0 / 0.05), 0 4px 8px -4px rgb(0 0 0 / 0.02);

/* Glass & overlay */
  --overlay-opacity: 0.4;
  --backdrop-blur: 12px;
  --glass-bg: rgba(252, 252, 254, 0.9);
  --glass-border: rgba(255, 255, 255, 0.2);

/* Spacing & density — generous */
  --spacing-scale: 1.2;
  --container-max-width: 1200px;
  --container-padding: 2.5rem;
  --card-padding: 2rem;
  --input-height: 3rem;
  --button-height: 2.75rem;
  --section-gap: 6rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;
  --heading-weight: 400;
  --heading-letter-spacing: -0.03em;
  --heading-line-height: 1.15;

/* Shape — large radius */
  --radius: 0.75rem;
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --avatar-radius: 9999px;
  --badge-radius: 9999px;
  --button-radius: 0.5rem;
  --input-radius: 0.375rem;
  --card-radius: 0.75rem;
  --tooltip-radius: 0.375rem;

/* Component shadows */
  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.02);
  --dropdown-shadow: 0 6px 12px -3px rgb(0 0 0 / 0.04), 0 2px 4px -2px rgb(0 0 0 / 0.02);
  --dialog-shadow: 0 12px 24px -6px rgb(0 0 0 / 0.05), 0 4px 8px -4px rgb(0 0 0 / 0.02);
  --button-shadow: none;

/* Borders & dividers */
  --border-width: 1px;
  --border-style: solid;
  --divider-style: solid;
  --divider-opacity: 0.08;

/* Inputs */
  --input-style: bordered;
  --input-border-on-focus: 0;
  --placeholder-opacity: 0.4;

/* Buttons */
  --button-style: filled;
  --button-weight: 400;
  --hover-effect: darken;
  --active-effect: scale-down;
  --disabled-opacity: 0.4;

/* Links */
  --link-style: underline;
  --link-weight: inherit;

/* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: ring;

/* Icons */
  --icon-style: outlined;
  --icon-stroke-width: 1;
  --icon-size: 1.25rem;

/* Scrollbar */
  --scrollbar-style: thin;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.08);

/* Selection */
  --selection-background: 220 60% 25%;
  --selection-foreground: 45 80% 80%;

/* Tooltips */
  --tooltip-style: dark;

/* Tables */
  --table-style: clean;
  --table-header-weight: 500;

/* Loading */
  --spinner-style: circle;

/* Motion */
  --transition-duration: 250ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-speed: normal;
  --hover-transition: 250ms ease;
  --enter-transition: 300ms ease-out;
  --exit-transition: 200ms ease-in;
}

RBuilt with Refraction UI