---
version: alpha
name: accord-design
description: "A pale lavender-glass canvas (#efe9f2) with near-black plum ink (#2e2433), the gallery's first true lavender-family palette outside the loud-departure batch. Deep plum (#6e3b6e) is the working accent, warm gold (#82631a) marks timing and nothing else. Italiana carries every headline in a thin, elegant display serif, Jost carries prose and controls. The homepage builds one fragrance on a vertical blotter through four real timing stages, each note cluster drawn larger the longer that stage actually lasts on skin."
---

## Brand Positioning

Accord sells fragrance, and the entire category defaults to the same page, a backlit bottle on silk, "luxury" and "opulent" doing all the work an actual description should do. The bet here is that a fragrance is a real timed structure, four stages arriving on a schedule, and showing that schedule honestly says more than another moody bottle photo. If a component doesn't correspond to a real stage, a real material, or the blotter itself, it doesn't belong here.

colors:
  accent: "#6e3b6e"
  accent-alt: "#82631a"
  ink: "#2e2433"
  ink-muted: "#6b5f75"
  canvas: "#efe9f2"

## Logo / Wordmark System

The mark is a perfume bottle in profile, drawn plainly: a rectangular body, a thin neck, a small round cap. It is not a flower, a spray mist, or a ribbon.

```svg
<svg width="18" height="24" viewBox="0 0 18 24" aria-hidden="true">
  <rect x="6" y="9" width="6" height="14" rx="1.5" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.3"/>
  <rect x="7.5" y="3" width="3" height="7" fill="none" stroke="var(--border-ui)" stroke-width="1.3"/>
  <circle cx="9" cy="1.5" r="1.5" fill="var(--accent)"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Accord" in Italiana, sentence case, `.02em` tracking. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `16px` tall, below that the neck and cap merge into the body.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the cap to anything but `--accent`. Don't add a spray mist or droplets to the mark, it's a still bottle, not an action shot. Don't fill the neck solid, it stays an open outline.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#efe9f2` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, note cards, table, form card, blotter strip |
| Surface raised | `--raised` | `#f6f2fa` | Row hover, cta band |
| Border | `--border` | `#e0d7ea` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#cebcda` | Decorative-only edges |
| Border UI | `--border-ui` | `#857791` | Every interactive boundary: secondary button, input, select, blotter and leader-line stroke |
| Ink | `--ink` | `#2e2433` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#6b5f75` | Labels, meta lines, helper text |
| Plum | `--accent` | `#6e3b6e` | Primary button, links, every note cluster's dots, mark's cap |
| Gold | `--accent-alt` | `#82631a` | Timing labels ("0 minutes", "6 hours") and nothing else |

Plum draws every note cluster on the blotter, so the fragrance's own materials and this brand's one accent are the same color, deliberately. Gold is held to a single, specific job, marking a timestamp, so it never competes with plum for attention and a reader learns fast that gold text always means "this is when."

### Contrast (computed from the hex values above via WCAG relative luminance)

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 12.43:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 14.83:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 5.00:1 | AA |
| `--dim` on `--panel` | 5.97:1 | AA |
| `--dim` on `--raised` | 5.40:1 | AA |
| `--accent` on `--bg` (links) | 7.00:1 | AAA |
| `--accent` on `--panel` | 8.35:1 | AAA |
| `--accent` on `--raised` | 7.56:1 | AAA |
| `--accent-alt` on `--bg` (timing labels) | 4.70:1 | AA |
| `--accent-alt` on `--panel` | 5.60:1 | AA |
| `--accent-alt` on `--raised` | 5.07:1 | AA |
| light label (`#faf3fa`) on `--accent` fill (primary button) | 7.66:1 | AAA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.49:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 4.16:1 | AA (1.4.11) |

Gold was darkened from an initial `#9c7a1f`, which measured only 3.37:1 to 4.03:1 across the surfaces it needed to work on, short of the small-text 4.5:1 minimum, before this system shipped, not after. `--border-strong` is kept for decorative-only uses, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Italiana
    fontWeight: 400
  body:
    fontFamily: Jost
    fontWeight: 400

## Type Scale

| Token | Size | Weight | Family | Line-height | Letter-spacing | Used for |
|---|---|---|---|---|---|---|
| `--text-display` | `clamp(2rem, 4.6vw, 3.3rem)` | 400 | Italiana | 1.15 | 0 | Homepage H1 |
| `--text-page-h1` | `clamp(1.9rem, 4vw, 2.5rem)` | 400 | Italiana | 1.15 | 0 | Second-page H1 |
| `--text-h2` | `1.5rem` | 400 | Italiana | 1.2 | 0 | Section headings |
| `--text-h3` | `1.15rem` | 400 | Italiana | 1.2 | 0 | Material names |
| `--text-body` | `1rem` | 400 | Jost | 1.6 | 0 | Paragraph copy |
| `--text-small` | `0.88rem` | 400 | Jost | 1.55 | 0 | Table cells, footer, meta lines |
| `--text-label` | `0.78rem` | 700 | Jost | 1 | 0.05em, uppercase | Form labels, table headers, timestamps |

Italiana is a single-weight, thin-stroked display serif with no bold and no italic variant of its own, reserved for headlines only, hierarchy inside a heading comes from size, never a fake weight. Jost carries every sentence and every control at 400 for prose and 700 for labels.

## Spacing Scale

Base unit `8px`. Tokens in use: `--space-2: .5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`.

## Shape

`--radius: 4px` on cards and buttons, `--radius-sm: 3px` on inputs. Small and precise, reading as a glass vial's own edge, not a decorative rounding choice.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own blotter-and-notes illustration (hand-built SVG). A stage's real timestamp is always stated in text, never implied by position alone.

## Motion Principles

Scroll builds one fragrance on a vertical blotter through four real timing stages. Each stage is a note cluster, two dots and a leader line connecting to the strip, positioned at a fixed point along the blotter and scaling from `0` to `1` with a slight overshoot as its own scroll segment completes, the same one-shot settle this gallery's other "N items arrive in sequence" systems use. The domain-specific detail is in the geometry: each stage's dots are drawn larger than the last, `3px` for top notes through `6px` for the dry-down, because longevity is the real fact being represented, a fleeting top note earns a small mark, a dry-down that lasts six hours earns a large one. Each stage's static blotter position and its animated scale live on separate nested groups from the first draft, per the lesson carried forward from earlier systems in this batch. One-shot sequence: nothing loops, and every stage is written out in the card grid regardless of scroll or script state.

The scroll trigger measures the page's real available scroll room below the stage at load, minus a `16px` safety margin, and caps the distance at that figure (never more than `500px`). A viewport tall enough to leave under `20px` of room, or a `prefers-reduced-motion` visitor, gets all four stages already resolved and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Precise about timing, no vague luxury adjectives. Accord talks like a perfumer explaining a formula, not a brand selling a mood. In practice:

- **Primary button**: "Request a sample", not "Discover your signature scent"
- **Top notes copy**: "Gone in the first twenty minutes. Not what the fragrance is actually about, just the introduction.", not "An exhilarating opening"
- **Dry-down copy**: "What's still on your skin the next morning, if anything is. The real test of a fragrance's longevity.", not "Lingers beautifully"
- **Sample note**: named plainly on the second page (vial size, blotter included), not implied
- **Status**: "Samples ship same day, blotters included."

The tell that a sentence is off-brand: it's an adjective ("exquisite," "opulent," "captivating") with no material or timestamp attached to it.

## Accessibility Baseline

- **Focus ring**: `2px solid var(--accent)` at `2px` offset via `:focus-visible` on every link, button, input, and select, never removed.
- **Reduced motion**: honored on the note-cluster reveal, as described under Motion Principles. No scroll listener is attached at all when reduce is set, or when there's no real scroll room to attach one to meaningfully.
- **The blotter graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every stage's timestamp, material names, and description is in the card grid below in plain markup at all times.
- **Tap targets**: `44px` minimum height on every button, nav link, and form control.
- **Structure**: one `<h1>` per page, headings in order, `nav` / `main` / `footer` landmarks, `aria-current="page"` on the active nav link.

## Components

### Navigation
Single line, `64px`, `--panel` with a `--border` bottom hairline, sticky. Left: the mark plus wordmark lockup. Right: a "Notes" link and exactly one primary button. Below 480px the first nav link drops, the primary button stays.

### Buttons
Two variants, `4px` radius, `44px` minimum height:
- **Primary**: `--accent` fill, a pale lavender-white `#faf3fa` label, brightness lift on hover. Once per view, for the real action ("Request a sample").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The blotter (signature)
Documented in full under Motion Principles. Structurally: a static vertical strip and four note-cluster groups, each an outer static-position group wrapping an inner scale-animated pair of dots sized to that stage's real longevity.

### Note card
A flat panel: `--panel` background, `1px solid --border`, `4px` radius. Leads with the real timestamp in gold, then the material names, then a one-sentence description of what that stage actually does. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Note table (second page)
`--raised` header row in `--text-label`, `--panel` body rows, one `--border` rule between rows, a `<caption>` naming the timing order.

### Notice
A `--panel` block with a `3px` `--accent-alt` top rule, carrying a skin-testing or patch-test note. Square, matching the rest of this batch's own resolution for the same accent-bordered notice pattern.

### Form
Label above control in `--text-label`. Select and input share `--bg` fill, `1px solid --border-ui`, `3px` radius, `44px` height, `--raised` fill plus an accent border on focus.

### Footer
Two-part row: an honest note that the house is fictional, and a link list back to the other page and the gallery. No invented legal text.

## Do's and Don'ts

### Do
- Size a note cluster's dots to that stage's real longevity, not decoration.
- State a stage's real timestamp before its materials, every time.
- Keep the blotter `aria-hidden` and write every fact it shows in plain text nearby.
- Measure real scroll room, minus a safety margin, before choosing a scroll-trigger distance.

### Don't
- Don't use a stock photo of a perfume bottle backlit on silk.
- Don't write "luxury," "opulent," or any adjective without a material or timestamp behind it.
- Don't use a cartoon flower, spray mist, or sparkle decoration.
- Don't replay the blotter sequence on every scroll pass, it develops once, like a real test strip.
- Don't round anything into a pill, a blotter and its notes read precise.

### Deliberate exception

The notes page's `.notice` element carries a `3px` `--accent-alt` top rule on `border-radius: 0`, the same square-plate treatment every other system built this batch reached for its own accent-bordered notice. The static-HTML pass of the mechanical detector still reports `border-accent-on-rounded` on that `border-top` declaration, because its regex engine matches the property text alone and can't see the resolved `border-radius: 0`, the same documented false positive every one of this batch's notices produces. The element is square, confirmed by reading the resolved CSS rule directly.

## Known Constraints

- Two routes exist (home, notes). There is no live inventory count and no authenticated state. "Request a sample" produces a client-side confirmation only, this is a concept demo.
- The blotter shows exactly four stages because that's the real structure a fragrance follows. A fifth stage doesn't exist, top, heart, base, and dry-down are the whole pyramid.
- Responsive behavior is two breakpoints (900px, 700px, 480px) plus fluid type. There is no tablet-specific layout beyond the table's restack point.

## Process

Built through the impeccable-audited anti-slop workflow: never-list written
before any HTML, page structure derived from the signature interaction
(the blotter and its four real timing stages) rather than a template, the
scroll-trigger distance computed from real measured scroll room with a
safety margin from the outset, static-position-versus-animated-transform
composition handled correctly from the first draft, and the mechanical
detector run clean.