Signature
Collection 03
UI Components
Twenty-four copy-ready blocks, each carrying a stable data-component id. Every one is theme-aware, keyboard accessible and uses the same tokens as the storefront.
01
data-component ids are stable
Actions
.btn · .btn--gold · .btn--ghost · .btn--light · .btn--sm · .btn--lg · .btn--block
.icon-btn round · .icon-btn--badge with count
02
data-component ids are stable
Labels & tags
Signature
Bestseller
New
House classic
50 ml
Delivered
Shipped
.product-card__badge · .pill / .pill--solid / .pill--gold · .status
BergamotTunisian NeroliAmbroxanOlibanumGuaiac Wood
.chip / .chip.is-active · .note-chip with a per-tier --tier-color
03
data-component ids are stable
Navigation & links
An inline shipping note inside body copy picks up an underline automatically.
.link-arrow · .link-arrow--back · inline links underlined inside body copy
.crumbs — pass an array of {label, href} to the breadcrumbs() helper
.pager / .pager button.is-on / .pager__gap
.seg — data-seg wires the active state
.account__nav — active state via .is-active
04
data-component ids are stable
Forms
.field · .input · .select · .textarea · .input-wrap · .pw-meter (live password strength)
.check · .switch · .pay-option — all keyboard focusable
05
data-component ids are stable
Commerce
1
2
Family
Flacon
.qty · .qty-lg · .size-option · .size · .swatch
Signature
.product-card with image swap, wishlist toggle and quick add
Adore
1
$66.12
.cart-line with quantity stepper and remove
$66.12
40,000 FCFA
Free shipping
Prices display in USD by default and convert across 12 currencies.
.price-block__now / __was / __save
4Orders
2Saved
1In bag
.stat-tile — animated counters via data-count
06
data-component ids are stable
Disclosure & feedback
Bergamot, citron and bitter orange open against Tunisian neroli and cinnamon.
18% oil concentration — an eau de parfum built to last eight to ten hours.
Dispatched from Dubai within 24 hours, tracked to 81 countries.
.tabs + .tab-panel, wired with data-tabs
We ship to 81 countries worldwide from our Dubai atelier.
Fourteen days from delivery, on unused bottles in their original packaging.
Away from direct sunlight and heat, with the cap on. A bedroom drawer is ideal.
.accordion--single opens one at a time
Filled from the same batch
18% – 22% oil
Hover or focus
.tooltip-wrap + [role=tooltip] on hover and focus
Hand-finishedEvery bottle is numbered by hand in the Dubai atelier.
Order confirmedA confirmation email is on its way to you.
Please check the formTwo fields still need your attention.
.alert · .alert--ok · .alert--err
Free shipping$98 / $120
Stock claimed72%
.meter with data-meter, or .progress-bar for a static value
.stars · .rating-line · .bar-row histogram
Demo
A modal, wired
Focus moves inside on open, Tab is trapped, Escape closes it and focus returns to the trigger.
data-toast fires a toast · data-modal-open opens a focus-trapped modal
07
data-component ids are stable
Scaffolding
The collection
Shop all
Four bottles, four temperaments
Each composition was designed for a particular hour of the day and a particular kind of person.
.section-head / .section-head__text
.search-hit — keyboard highlight uses .is-active
- Reference
- #CDC-24817
- Placed
- 4 November 2026
- Items
- 2
- Total paid
- $174.00
.dl — label/value rows with tabular figures
Nothing saved yet
Tap the heart on any fragrance to keep it here while you decide.
Browse the collection.empty-state — icon, heading, sentence and a single action
Back to
Open banners