---
name: Emulsion
version: "1.0"
slug: emulsion
tier: premium
price: 29
type: Luxury Fragrance
axis: "4 — Ultra-minimal revelation (scroll-develop)"
theme: dark-luxury-cyanotype
gesture: "Scroll-develop — elements begin as ghosts (blur 14px, opacity 0.1) and reveal on viewport entry, like photographic paper in a developing bath"
colors:
  blue:      "#40587C"
  blue-deep: "#2C3F5A"
  blue-pale: "#6B84A3"
  white:     "#F0EEE8"
  gold:      "#C9A96E"
  gold-deep: "#A8874E"
fonts:
  display: "Offside"
  body:    "Outfit"
spacing:
  s1: "0.5rem"
  s2: "1rem"
  s3: "1.5rem"
  s4: "2rem"
  s5: "3rem"
  s6: "5rem"
  s7: "8rem"
radius: "1px"
type-scale:
  hero:    "clamp(5rem, 14vw, 13rem)"
  section: "clamp(2rem, 4vw, 4.2rem)"
  body:    "0.88rem / 1.85"
  eyebrow: "0.62rem / ls .22em"
full-kit: "https://www.stacklift.design/kit/emulsion"
---

# Emulsion — Design System

## §1 Identity

Emulsion is a luxury fragrance kit built around a single dominant gesture: the scroll-develop. Elements enter the viewport as ghosts — blurred, barely visible — and crystallise into full sharpness as the user scrolls, imitating the moment a latent image resolves in a photographic developing bath.

The palette is a cyanotype monochrome: the entire interface lives in `--blue` (#40587C), the exact tone of an unexposed cyanotype print. The sole departure is `--gold` (#C9A96E) — a warm, patinated brass that appears only on the flacons and accent details. The contrast between cold blue and warm gold is the visual soul of the kit.

Typography is deliberately unconventional for the luxury sector: Offside (condensed, modern) in place of the expected serifs. The tension between the contemporary display font and the classical-luxury subject is intentional.

## §2 The Signature Gesture — Scroll-Develop

Every `.reveal` element begins at:

```css
filter: blur(14px);
opacity: 0.1;
transition: filter 1.6s cubic-bezier(.22,.61,.36,1),
            opacity 1.6s cubic-bezier(.22,.61,.36,1);
```

An `IntersectionObserver` (threshold 0.12) adds `.is-revealed` on viewport entry:

```css
.reveal.is-revealed {
  filter: blur(0);
  opacity: 1;
}
```

Use `data-delay="ms"` on siblings for stagger. Text uses `.reveal-text` (opacity + translateY, no blur).

**The Hero Ghost** is the permanent exception: the hero image is held at `blur(10px) opacity(0.13)` and never develops. It is the tease that drives the scroll.

## §3 Colour Grammar

- `--blue` is the universal background. Never use white or black as background.
- `--blue-deep` marks rest zones (success story section) for depth separation.
- `--blue-pale` is for secondary text and ghost states.
- `--white` (#F0EEE8) is text — always warm, never pure white.
- `--gold` is the sole accent. Reserve it for: eyebrows, links, CTA buttons, hover states, and the DS trigger button.
- Photography: shoot gold/brass flacons against --blue backgrounds with hard single-source studio lighting.

## §4 Typography Rules

1. Offside is uppercase-only. Always apply `text-transform: uppercase`.
2. Hero title tracking: `letter-spacing: -0.04em` — tight, compressed.
3. Eyebrows: Outfit 500, uppercase, `letter-spacing: 0.22em`, always in `--gold`.
4. Body: Outfit 300, `line-height: 1.85`, `color: rgba(240,238,232,0.5)`.
5. Never use Inter. Never use #000000.

## §5 Components

- **Hero Ghost** — `.hero-ghost`: absolute-positioned image, `opacity: 0.13`, `filter: blur(10px)`. Never reveals. Covers 52% of viewport width from the right.
- **Reveal Image** — `.reveal`: starts ghosted, develops on scroll. Stagger with `data-delay`.
- **Reveal Text** — `.reveal-text`: opacity + translateY(10px) → 0. Faster than images (1.2s).
- **Collection Grid** — 3-col responsive grid, staggered reveals. Inert links use `.is-soon` (opacity 0.3, pointer-events none).
- **Success Story** — dark zone on `--blue-deep`. Quote (Outfit 300 italic) + portrait.
- **Contact Form** — underline-only inputs (`border-bottom` only), gold focus state, `.btn-gold` CTA.
- **Gold Button (.btn-gold)** — background `--gold`, color `--blue-deep`. Hover → `--gold-deep`.
- **Design System Overlay** — `.ds-overlay`, slide-up full screen. Toggle via `.btn-ds` in nav, Escape closes.

## §6 Agent Instructions

1. Never place elements on a white or neutral background — everything lives on the blue.
2. Gold (`--gold`) is the sole accent. Do not introduce any other hue.
3. Every image or content block entering the viewport must use `.reveal` or `.reveal-text`. Nothing appears instantly.
4. The hero ghost image is the only element that never develops — it is always the tease.
5. Inert links use `.is-soon`. Never use a dead `href="#"` on a visible CTA.
6. Offside is always uppercase. Outfit body copy is always weight 300.
7. Respect `prefers-reduced-motion`: if set, remove `filter` and `transform` transitions, keep only `opacity`.

> 💡 Full implementation available — this `design.md` ships with a complete HTML/CSS kit: all components, CSS tokens, and the scroll-develop system ready to use.
> → [www.stacklift.design/kit/emulsion](https://www.stacklift.design/kit/emulsion)