Maison Design System

Cream is the single token shared identically across all three surfaces — app, microsite, and case study — while nearly everything else only lives in one or two of them. It anchors interactive elements, brand marks, and active states throughout the app; --cream-soft is reserved for hover states and italic emphasis. --cream-dim isn't declared as a token in the app source at all — it exists only as a repeated inline rgba() value.

The four swatches below are the app's actual screen-level background layers, from the darkest (labeled --stage here, sitting behind the phone frame itself) up to --navy-2 (tabbar and gradient stops). Card surfaces --surface and --surface-2, documented in the next block, add a fifth and sixth step above these — together the stack creates depth entirely through tonal shift within one navy family, with no separate accent color doing the work.

Cards never use a flat fill — every card gradient runs top (--surface) to bottom (--surface-2), a linear-gradient(180deg, …) that reads as a subtle physical lift rather than a color change. This is the pattern behind appointment cards, rec cards, and every other elevated panel in the app.

Borders throughout the app use cream-alpha rather than white-alpha, keeping every rule and outline warm instead of cool-gray. --line is the default card and input border; --line-2 strengthens it for hover states and featured cards. --line-3 is referenced in the push banner's hover state but was never actually declared in :root — the swatch shown here is an approximation, flagged as a gap rather than papered over.

All three text tokens draw from the same warm white base (#F5F0E6) at different opacities rather than three independently chosen grays — --text for names and primary labels, --muted for metadata, --dim for inactive tab labels and section headings. On cream backgrounds (button labels, badges), text reverses to --navy-deep instead of white, since white would break the token family's warm cast.

Three semantic colors carry status meaning site-wide: --ok marks the live infra dot and authentication success, --warn covers general caution states, --alert drives the brand-defense alert strip and counterfeit signals. All three stay desaturated enough to sit inside the navy field rather than reading as a system dialog dropped on top of the UI — fills stay at 6% opacity and borders at 20%, never full saturation.

Three sepia browns run every avatar gradient and product-adjacent background in the app, but none of the three is declared as a CSS custom property in app/index.html — they appear only as repeated inline hex values. The same three values, slightly off, are independently redefined in work/lv.html's own --lv-sepia-* tokens, which is the reconciliation problem the block-note documents.

The cream-to-ivory gradient sits behind every product image in the app — piece hero, passport hero, wardrobe cards, and rec cards all use the identical two-stop gradient plus a radial highlight at 50% 30% to simulate ambient light falling on the piece. Like the sepia palette above, neither stop is a declared token; both are inline hex values repeated at each usage site.

The push banner's hover state references var(--line-3) in the app's CSS, but --line-3 is never declared anywhere in :root — the property silently falls through to its initial value, so the hover border currently renders as if no border-color were set at all. This panel documents the exact failure and proposes a value one step brighter than --line-2.

The app and the case study each solved “a slightly lighter cream for emphasis” independently and arrived at two different answers: the app's --cream-soft is a solid, opaque lighter cream (#E8D5B7), while the case study's --lv-cream-soft is a semi-transparent overlay (rgba(212,184,150,.55)). Both get used for emphasis text, but a solid fill and a transparent overlay behave differently depending on what sits behind them.

The microsite runs on a third-party marketing template with its own token-naming convention, so of the ten visual roles in this table only cream and the Radikal typeface are genuinely shared between app and microsite — everything else either diverges or exists on only one side. Rows marked “App only” (the ok semantic, the sepia palette) are real product tokens the template has no equivalent for; rows marked “Microsite only” (loader orange, case-study amber) are presentation choices native to the editorial surfaces.

Radikal alone carries every register in the system, from a 300-weight 36px welcome headline down to a 600-weight 9px badge label, with letter-spacing doing the work of distinguishing hierarchy rather than switching typefaces. All ten rows trace directly to real screen usage — the Welcome h1, ceremony h2, screen titles, card labels, and body copy sizes are the actual values pulled from app/index.html, not a generic type scale.

Sine in-out (cubic-bezier(0.37, 0, 0.63, 1)) is scoped to a single interaction — the bag-react glow — because it eliminates abrupt starts and stops so that pulse reads as weight rather than a UI snapping into place. The scan sweep and loader fill use plain ease-in-out/ease, not this curve; each curve documented here is scoped to one specific interaction rather than being an interchangeable alternate. Click any row to see the actual curve shape animate at equal duration and distance.

The app declares no duration tokens — every transition-duration value is written inline at its call site, so this scale is reconstructed from source rather than read off a token list. Durations span two full orders of magnitude, from 120ms hover fills up to 2800ms for the bee-mark ring's ambient pulse; click any row to preview the actual fill timing.

Like duration, spacing has no declared scale — every value below is a de-facto pattern pulled directly from the app's inline styles. Screen edge padding is the most consistent rule in the system: 22px on every standard screen, stepping up to 32px only on the four full-bleed ceremony screens where content needs more room to breathe; bottom padding is always 96px so content never sits under the tabbar.

Corner rounding follows a deliberate logic rather than one flat default: objects that hold or display the physical product — the viewfinder frame, piece hero, passport hero — stay square or use the standard 16px card radius, while interactive affordances (buttons, chips, badges, the segmented control) are always full pill at 999px. Rounding is reserved for things you tap, never used decoratively on things you're meant to look at.

The system's central design logic in three steps: the SA reads context around the piece before the client arrives (Presentation), the camera and scan pipeline confirm the object's identity in real time (Authentication), then an NFC tap transfers that verified story to the client's own phone as a persistent passport (Handoff). Every component in the Object and Passport sections exists to serve one of these three stages.

The same underlying object record renders completely differently depending on who's looking at it: the SA sees the full provenance graph, confidence scores, and client history; the client sees only the plain-language origin story, care instructions, and resale value, with every score and pipeline detail stripped out. The Handoff segmented control is the one UI element that bridges both modes.

Every non-ceremony screen carries the same topbar: the LV bee-mark, the current Maison wordmark, a notification bell, and the SA's avatar. The bell's notification dot only appears when a brand-defense alert is active, so an empty bell is a real signal — nothing to review — not a placeholder state.

The topbar isn't universal — it deliberately disappears on the onboarding and ceremony screens (Welcome, Face ID, Client Arrives, Tap to Pair) where a full-bleed, single-focus layout matters more than persistent navigation chrome. It returns on Floor mode, every child screen reached from a client or piece record, and both utility tabs.

Floor, History, and Settings are the only three root destinations in the app, and switching between them uses a fade-only transition rather than a slide — a deliberate signal that these are lateral, equal-weight destinations rather than a hierarchy the way pushing into a client card is. The bar sits on --stage, the single darkest value in the system, so it keeps visual mass even against the darkest screen content behind it.

The pill's job is to make an invisible backend connection feel present — the pulsing dot and the live latency readout (14ms in this demo) turn “IBM's provenance graph is connected” from a static claim into something the SA can visually verify at a glance. The latency figure uses tabular-nums specifically so the digits don't shift horizontally as the value updates.

The eyebrow (10px, uppercase, muted) exists for screens whose identity is ambiguous without it — “Client” above Mme. Laurent's name clarifies this is a client record, not a piece record. Section headings elsewhere reuse the identical type spec, but for grouping list items rather than establishing screen identity.

Cream fill is reserved for exactly one action per screen — the single most important next step, never a secondary or destructive one. Hover lightens to --cream-soft and the active state scales down to 97%, giving the button a slight physical compression on tap rather than a color-only feedback.

Ghost buttons pair with a primary action to offer a dismissal or deferral path — “Greet later” beside a presumed “Begin” primary, for instance — and are always positioned as the secondary button in a pair, never standing alone as the main call to action. The border-only treatment keeps it visible without competing against whatever primary fill sits next to it.

Full-width buttons appear only on ceremony screens — Welcome, Pair, Handoff — where there's exactly one action on screen and it needs the largest possible touch target for a moment meant to feel deliberate, not incidental. Pair is the one exception to true full-bleed: it subtracts 64px to leave breathing room from the screen edges during the NFC pairing moment.

Chips show every Maison a client has purchased from across the LVMH group, not just Louis Vuitton — Élise Laurent's real spread here is 22 LV pieces, 5 Dior, 3 Tiffany & Co., 2 Loro Piana. The client's primary Maison gets a stronger fill and border than the others; the piece count is styled as muted metadata rather than bolded, so it reads as a count, not part of the Maison's name.

Badges share the same pill shape as chips but are strictly non-interactive labels for card-level state — an arrival status, an alert count, an authentication result — and unlike chips they never carry a count suffix or click behavior. The visual similarity to chips is intentional; the behavioral distinction is what keeps a viewer from expecting a badge to filter something.

Toggles appear in exactly one place in the app: the Handoff screen's consent block, where the client controls which of their own data attributes the SA can continue to see mid-session. Purchase history and preference notes default to on; contact details defaults to off, reflecting that the SA needs the first two to do the job well but shouldn't assume access to direct contact info without it being explicitly granted.

This is the only two-panel segmented control in the entire system, and it exists for one purpose: letting the SA preview exactly what the client's phone will show once the NFC pair fires, before it actually transfers. The active segment renders as a cream badge sitting inside the pill container rather than as a separate button.

The featured variant — reserved for whichever client is arriving next — adds a radial cream halo and a stronger border, so the SA's eye lands on the most time-sensitive card without any color signaling it. Metadata differs by appointment type: an arriving client shows Maison tenure, a repair shows the service type, a first visit flags itself as referred.

The client hero opens every Client Card screen with a 64px avatar — the largest in the system, and the only one that gets a full 2px cream border rather than a thin ring — followed by the client's cross-Maison chip strip. Mme. Laurent's version shown here is the fully-populated case; the second instance below is the app's real first-visit client, Sara Hadid — her card omits the chip strip, since there's no cross-Maison history to show, but the "Across the group" heading stays and is followed by a real referral note instead, not left empty.

The wardrobe strip is the one place in the client card where multiple owned pieces show at once — five cards plus a “26 more” count that keeps Élise Laurent's real 32-piece total honest without cramming every item into the scroll. Two of the six cards (Diane and Iconic Bracelet) open a real Piece Detail using the same PIECES-driven mechanism as the Recommend cards; the other four still show a placeholder toast, a genuine scope boundary rather than a bug.

Four key metrics render as a 2×2 grid rather than a list, so an SA can read a client's lifetime spend, visit recency, piece count, and preferred SA in one glance. The two “key” figures — lifetime value and piece count — get cream emphasis, while the other two stay plain, so the eye lands on the numbers that matter most.

The same four-cell grid renders completely differently for a client with no history: an em dash instead of a zero or blank cell, deliberately, since a zero would misread as a measured value rather than “nothing recorded yet.” This is Sara Hadid's real cold-start card — referred by Place Vendôme, zero visits, no lifetime figure to show.

Data rows present a piece's core metadata as a stacked list of key-value cards rather than a table, each its own 10px-radius card. Reference and material stay in plain text; year and atelier — anything a client could use to trace the piece's provenance — get cream emphasis, the same treatment fact-grid gives its most important numbers.

The quote block is the strongest use of the cream accent as pure decoration in the system — a 2px left border carrying a captured SA observation without competing with the italic text it frames. It exists to surface institutional memory: what one SA learned about a client on a prior visit, available to whichever SA sees them next.

The exact same component does double duty for clients with nothing on record — rather than hiding the block or inventing a plausible-sounding note, it states the absence directly, in a non-italic register that reads as fact rather than overheard color. Having nothing to say gets the same visual care as having something to say.

History items are a compressed version of the appointment card — smaller avatar, tighter type, a right-aligned value label (Service, Auth) in place of a time. They appear both as a “Recently” strip on the Floor screen and as full list items in the History tab, so the same compact format has to work as both a glance and a browsable list.

Three real recommendations for Mme. Laurent — Alma BB, Side Trunk MM, LV Bloom Bracelet — each with a “why” line citing something specific from her actual purchase history (structured silhouettes since 2022, the Diane she retired, her 2024 Iconic bracelet) rather than a generic pitch. The product image area renders the ivory gradient in this demo; in production each card carries a real product photograph.

The governance tag is the disclosure that follows every AI-generated recommendation — a compact strip naming IBM watsonx and confirming the output passed consent and regional-compliance filtering. It shares the ok-green semantic and the pulsing dot language of the infra pill deliberately: this is a live check being run, not a static legal footer.

The same disclosure component reports an absence instead of a pass for Sara Hadid's cold-start recommendations — no purchase history exists, so none is claimed, rather than fabricating a “quiet preference.” It deliberately keeps neutral tag styling rather than switching to a warning color, since declining to fabricate familiarity is the system working correctly.

The pipeline is a live step list — material signature, stitching pattern, hardware serial, provenance graph match — that the SA watches complete in real time while holding the camera over the piece. Each step morphs from pending to an active cream ring to a done ok-green checkmark; the result card only renders once all four steps finish, confirmed here for a genuine Alma BB with no anomalies across four checkpoints.

Added 2026-07-12 behind a demo-only toggle: before this existed, the scanner in the interactive prototype could only ever resolve positive, so “brand defense” was a claim the prototype never actually demonstrated. The failing step swaps its timestamp for a literal “MISMATCH” label, and the result routes to brand-defense review without touching the client's own passport.

The piece hero is the full-width product showcase that opens both Piece Detail and Authenticate — a 4:5 ivory-gradient panel with a radial highlight and a barely-visible hatching texture meant to read as atelier paper. The confidence badge (98.4% match, shown here for a real Alma BB) sits in the same panel rather than as a separate element.

The viewfinder places the physical piece inside a reticle on the Authenticate screen — the scanline sweeps from 18% to 82% on a 2.4s sine-in-out bounce, with luminance peaking twice per cycle, both times at the center where the bag sits. The blend-mode overlays that create the warm glow crossing the surface are omitted from this static demo but drive the effect in the real prototype.

The provenance timeline documents a piece's full lifecycle on the Passport screen — crafted at Asnières in 2019, sold at Faubourg the same year, a handle replacement in 2022, transferred to Passport in 2024 — using a single gradient line that fades to transparent at the bottom to imply the story is still being written. This is the real chronology for the Alma BB shown throughout Piece Hero and Score Card.

The score card gives the pipeline's numeric output (98.4%) its own dedicated moment on the Passport screen, styled entirely in the ok-green semantic — label, number, and border all reinforcing “this is verified,” not presenting the figure as a neutral metric.

Care instructions render as four icon tiles rather than a text block, so a client can scan the most important actions — avoid rain, condition annually, store upright, where to get repairs done — without reading paragraphs. Each tile pairs a symbol with a one-line title and a slightly longer instruction.

The message thread is the Aftercare screen's post-purchase channel between SA and client, using two visual lanes — inbound bubbles in warm-tinted dark, outbound in solid cream with navy text — with a sticky composer pinned as the thread scrolls. Fixed 2026-07-12: the send button previously had no click handler at all; it now appends the typed reply as a new outbound bubble and, after a pause, a canned inbound response.

The resale summary opens the Resale Path screen with the same card gradient used for appointment cards — a deliberate signal that provenance-backed valuation data carries the same visual weight as client-facing information. The €1,840 figure is grounded explicitly in current secondary-market data for this exact model and condition, not a flat estimate.

Three large cream numerals open the Brand Defense screen — total takedowns, the SA's own region, and the resolution rate — rendered on transparent tiles with no card chrome at all, so the numbers carry the weight rather than a bordered container.

Each feed item leads with a 2-letter geo prefix so an SA scanning the list reads the geography before the detail — a marketplace counterfeit in France, a supply-chain diversion in Italy, a matched serial number in the US. System references (provenance graph, IBM supply intelligence) render inline in cream to credit which underlying platform surfaced each alert.

The alert strip is a tappable, inline notification on the Floor screen — clicking it navigates straight to Brand Defense — using a tinted background rather than a bold red to draw attention without alarming an SA about to greet a client. Hover strengthens both the background and border.

Toast confirms non-navigating taps — appointment info, a copied reference number, a locked appointment — using the same cream-on-navy pairing as the primary button, reinforcing that whatever the user initiated has completed. It sits above the tabbar so it's never clipped, and auto-dismisses after 2.4 seconds.

The push banner slides down from off-screen using the same weighted-finish curve as the Face ID progress ring, appearing whenever a client the SA is expecting arrives at the entrance. It's tappable — opening the Client Arrives ceremony screen directly — and its hover state references the undeclared --line-3 token documented in Color Gaps.

The handoff bridge is explanatory, not navigable — a single panel on the Handoff screen spelling out exactly what transfers during NFC pairing (the piece's Passport) and what stays private (the SA's own session notes). Its cream-tinted border visually distinguishes it from a standard data row, signaling “read this” rather than “tap this.”

Settings rows collapse their borders into a single grouped list — only the first and last rows keep their corner radii, and there's no gap between rows, so the group reads as one continuous list. Each row ends in either a chevron (navigable) or a toggle (boolean), and the value cell's cream text signals which kind of row it is before the user taps.

The microsite's loading screen uses an orange field (#ff9933) that appears nowhere else in the whole system — app, microsite, or case study — making it the loader's own dedicated identity color. The LV bee fills with solid navy-deep via an animated clip-path, driven by the actual page load progress rather than a fixed duration.

The microsite hero headline scales its font-size directly off viewport width — calc((100vw − gutters) / 6.2) — so “IBM×LVMH” always fills the usable width regardless of screen size, rather than jumping between fixed breakpoint sizes. The divisor 6.2 is tuned to the character count of “IBM×LV,” the longer of the headline's two lines, so both lines fill equally.

Five branded color schemes exist across the microsite's service pitch cards, of which three are shown here — orange/navy for AI, espresso/gold for Data, cobalt/white for Supply. None of the five appears in the app; they're presentation choices specific to the editorial pitch context, each pairing a background with a complementary foreground that swaps on hover.

This is one of three animated demo cards in work/lv.html, each pairing a live motion demo with a readout strip that plots the actual easing curve as an SVG path beneath it. The scan card runs the same 2.4s duration as the app's Viewfinder scan line, but on sine-in-out — the case study's own custom curve, replacing the app's generic ease-in-out as a deliberate design decision. The readout strip itself is unique to the case study page and doesn't exist in the app.

The specs catalog is a linked grid of all six named motion demos in the case study — Scan sweep, Bee water-fill, Tile entrance, Screen slide, Bag glow, Face ID ring — each cell linking to its corresponding demo further down the page. The grid uses intersecting hairline borders rather than a gap between cells, specific to this catalog.

Pull quotes carry the case study's largest editorial claims — “The object becomes the interface” — in a dimmed white rather than pure white, a deliberate restraint that keeps them from competing with body text in adjacent columns. The split variant pairs a short primary claim at full size with a longer elaboration at roughly 60% size directly beneath it.