ÉCLAT · Design System

01 — Foundations

Colors

A restrained palette. Four brand tones set the mood, four neutrals carry the page, four semantics signal state. Click any swatch to copy its hex.

Brand

Neutrals

Semantic

--gold:    #C9A86A;
--bordeaux:#5B1E2C;
--ivory:   #F8F6F0;
--ink:     #1A1A1A;

02 — Foundations

Typography

Cormorant Garamond for display moments, Inter for interface clarity. Six scales from hero display to overline utility.

.display  { font-family: 'Cormorant Garamond'; font-weight: 400; font-size: 72px; line-height: 1.05; letter-spacing: -0.02em; }
.h1       { font-family: 'Cormorant Garamond'; font-weight: 500; font-size: 48px; line-height: 1.1;  }
.h2       { font-family: 'Cormorant Garamond'; font-weight: 500; font-size: 32px; line-height: 1.2;  }
.h3       { font-family: 'Inter';              font-weight: 600; font-size: 20px; line-height: 1.3;  }
.body     { font-family: 'Inter';              font-weight: 400; font-size: 16px; line-height: 1.6;  }
.caption  { font-family: 'Inter';              font-weight: 400; font-size: 13px; line-height: 1.4;  }
.overline { font-family: 'Inter';              font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; }

03 — Components

Buttons

Four variants across three sizes and three states. Each press yields a soft ripple — a small moment of feedback befitting the house.

<button class="btn btn-primary btn-md">Reserve now</button>
<button class="btn btn-secondary btn-md">Learn more</button>
<button class="btn btn-ghost btn-md">Cancel</button>
<button class="btn btn-danger btn-md">Remove</button>

/* sizes: btn-sm · btn-md · btn-lg */
/* states: :hover · :active · [disabled] */

04 — Components

Form inputs

A complete input family — each control honored across default, focus, filled, error and disabled states.

Full name

Default state

Full name focus

Focus state (always visible)

Full name

Filled

Full name

Name must be at least 5 characters.

Email address

We never share your email.

Password

At least 8 characters.

Personal note

Optional. Up to 500 characters.

Boutique

Appointment date

Membership ID

Disabled

Preferences

Subscribe to the ÉCLAT quarterly Invite me to private previews SMS notifications (unavailable in your region)

Preferred contact

Email Telephone Concierge

Switches

Enable private shopping invitations Allow location-based suggestions Third-party analytics (policy required)

<label class="field-label">Email address</label>
<input type="email" class="input" placeholder="you@eclat.com" />

<!-- States: .is-focus · .is-error · [disabled] -->

05 — Components

Cards

Elevated, outlined, and filled — three postures for three registers of importance.

Fine jewellery

Aurore pendant

18k yellow gold, single pearl. A whisper at the collarbone.

€ 4,280

ML

Marguerite Laurent

Private Client Advisor · Paris

Nineteen years with the house. Speaks French, English, Italian.

Private sales · Q1 2026

€ 12.4m

▲ 8.4% vs. Q4 '25

Boutiques reporting9 / 11

<article class="card card-elevated">
  <div class="card-media"></div>
  <div class="card-body">
    <div class="overline">Fine jewellery</div>
    <h3 class="card-title">Aurore pendant</h3>
  </div>
</article>

/* variants: .card-elevated · .card-outlined · .card-filled */

06 — Components

Navigation

Ways to move through the house — horizontal, vertical, and the small signposts in between.

Top navigation · variant A — serif wordmark

Top navigation · variant B — utility bar

Sidebar

Breadcrumbs

Tabs · three styles

Pagination · two styles

<nav class="tabs tabs-underline">
  <button class="tab active">Overview</button>
  <button class="tab">Materials</button>
</nav>

<nav class="breadcrumbs">
  <a href="#">Maison</a><span class="bc-sep">/</span>
  <span aria-current="page">Aurore</span>
</nav>

07 — Components

Feedback

Alerts, toasts, modals and tooltips — the house's way of being helpful without being loud.

Alerts

i

Heads up. Preview invitations are mailed the first Monday of each month.

✓

Reservation confirmed. A concierge will write to you within the hour.

!

Almost full. Only two appointments remain this week in Milan.

×

We could not process your card. Please verify the details and try again.

Toast · click to trigger

Modal · click to open

Tooltip · hover each

Badges & Chips

New Limited In stock Low Reserved Archive

Gold Yellow gold Pearl Under € 5,000 + Add filter

Progress & Spinner

Processing — please remain on this page.

<div class="alert alert-success">
  <span class="alert-icon">✓</span>
  <div><strong>Reservation confirmed.</strong> …</div>
</div>

<button onclick="showToast('Saved.','success')">Save</button>
<div class="spinner"></div>

08 — Components

Data display

For registers and records — tables, timelines, avatars, skeletons and the quiet moments before data arrives.

Sortable table · click a column header

Client	Boutique	Lifetime value	Status

Tree list

Avatar group

ML

RS

YA

KN

+7

Working on the Aurore capsule

M

Y

R

Timeline

Apr 18 · 09:14
Aurore pendant reserved
Marguerite Laurent · Place Vendôme
Apr 17 · 16:02
Private viewing scheduled
With M. Tanaka · Ginza salon, 19:00 JST
Apr 15 · 11:40
Quarterly catalogue dispatched
2,481 invitations · 14 markets
Apr 12 · 08:00
Atelier opened for the season
Summer capsule in production

Empty state

Nothing to display yet

When clients reserve a piece, their orders will appear here.

Skeleton loader

<table class="table">
  <thead><tr><th data-sort="name">Client</th>…</tr></thead>
  <tbody>…</tbody>
</table>

<ol class="timeline">
  <li class="t-item"><div class="t-dot"></div>…</li>
</ol>

09 — Components

Icons

A 24-icon outline set in the Heroicons manner. 1.5px strokes, 24×24 grid. Click to copy the SVG.

<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
  stroke="currentColor" stroke-width="1.5"
  stroke-linecap="round" stroke-linejoin="round">
  <!-- icon path -->
</svg>

A quiet languagefor modern luxury.

Aurore pendant

Marguerite Laurent

A quiet language
for modern luxury.