---
version: alpha
name: steadywick-design
description: "A warm unbleached-wax canvas (#ece4d8) with near-black ink (#2b241c), close in family to the cream systems built earlier the gallery's history but warmer and more amber-leaning than either. Amber wax (#96530f) is the working accent and the literal color of a lit flame's glow, smoke slate (#4f605d) marks status and nothing else. Cormorant Garamond carries every headline in an elegant literary serif, Albert Sans carries prose and controls. The homepage pours one candle in four real scent layers, then lights the centered wick."
---

## Brand Positioning

Steadywick pours scented candles, and it exists because most candle sites sell a mood, a bathtub photo, "manifest your intentions" copy, instead of the one thing that actually matters when you're about to burn something in your house: what's in the wax. The bet here is to show a real four-layer pour, in the order it's actually poured, and name real scent notes instead of a vibe. If a component doesn't correspond to a real layer, a real scent, or the jar itself, it doesn't belong here.

colors:
  accent: "#96530f"
  accent-alt: "#4f605d"
  ink: "#2b241c"
  ink-muted: "#6b6560"
  canvas: "#ece4d8"

## Logo / Wordmark System

The mark is the jar in profile: a rounded rectangle body with a centered wick line and a small flame above it, unlit in most contexts, lit only where the mark specifically needs to say "burning now." It is not a candlestick, a sparkle, or a bathtub icon.

```svg
<svg width="16" height="24" viewBox="0 0 16 24" aria-hidden="true">
  <rect x="1" y="6" width="14" height="17" rx="2" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.4"/>
  <line x1="8" y1="6" x2="8" y2="1" stroke="var(--border-ui)" stroke-width="1.3"/>
  <path d="M8 0 Q10.5 3 8 5 Q5.5 3 8 0 Z" fill="var(--accent)"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Steadywick" in Cormorant Garamond 600, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `14px` tall, below that the flame and the wick merge.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the flame to anything but `--accent`. Don't draw the flame as a teardrop with a hole in it, keep it a single simple pointed shape. Don't add smoke wisps or sparkle, the mark is a still jar, not an animated one.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#ece4d8` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, scent cards, table, form card, jar glass |
| Surface raised | `--raised` | `#f4efe5` | Row hover, cta band |
| Border | `--border` | `#ded2bd` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#c9b89a` | Decorative-only edges |
| Border UI | `--border-ui` | `#8a7a5f` | Every interactive boundary: secondary button, input, select, jar and wick outline |
| Ink | `--ink` | `#2b241c` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#6b6560` | Labels, meta lines, helper text |
| Amber | `--accent` | `#96530f` | Primary button, mark's flame, links |
| Slate | `--accent-alt` | `#4f605d` | Second-page status |

Amber is the flame's own color, the primary button and the mark's flame share it because that's this brand's one working color. The four wax layer colors on the jar itself, near-black cedar through pale vanilla cream, are real illustrative material colors, not system tokens, the same exception every material-specific fill in this gallery already establishes.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 12.14:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 15.31:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 4.56:1 | AA |
| `--dim` on `--panel` | 5.74:1 | AA |
| `--dim` on `--raised` | 5.01:1 | AA |
| `--accent` on `--bg` (links, price text) | 4.70:1 | AA |
| `--accent` on `--panel` | 5.93:1 | AA |
| `--accent` on `--raised` | 5.17:1 | AA |
| `--accent-alt` on `--bg` | 5.26:1 | AA |
| `--accent-alt` on `--panel` | 6.64:1 | AA |
| `--accent-alt` on `--raised` | 5.79:1 | AA |
| light label (`#fff8f0`) on `--accent` fill (primary button) | 5.63:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.31:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.18:1 | AA (1.4.11) |

Both accents were darkened from an initial pass, `#a85f14` and `#5c6e6b`, which measured 3.86:1 and 4.27:1 on canvas, 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: Cormorant Garamond
    fontWeight: 600
  body:
    fontFamily: Albert Sans
    fontWeight: 400

## Type Scale

| Token | Size | Weight | Family | Line-height | Letter-spacing | Used for |
|---|---|---|---|---|---|---|
| `--text-display` | `clamp(2.2rem, 5vw, 3.6rem)` | 600 | Cormorant Garamond | 1.1 | 0 | Homepage H1 |
| `--text-page-h1` | `clamp(2rem, 4vw, 2.7rem)` | 600 | Cormorant Garamond | 1.1 | 0 | Second-page H1 |
| `--text-h2` | `1.5rem` | 600 | Cormorant Garamond | 1.15 | 0 | Section headings |
| `--text-h3` | `1.1rem` | 600 | Cormorant Garamond | 1.2 | 0 | Scent names |
| `--text-body` | `1rem` | 400 | Albert Sans | 1.6 | 0 | Paragraph copy |
| `--text-small` | `0.88rem` | 400 | Albert Sans | 1.55 | 0 | Table cells, footer, meta lines |
| `--text-label` | `0.78rem` | 700 | Albert Sans | 1 | 0.05em, uppercase | Form labels, table headers |

Cormorant Garamond's elegant literary serif reads as considered rather than mass-produced, reserved for headlines only, never body copy where its light weight would fight legibility at length. Albert Sans 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: 6px` on cards and panels, `--radius-sm: 4px` on buttons and inputs. Soft enough to read as a poured, cooled surface, not sharp glass.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own jar-and-pour illustration (hand-built SVG). A scent's pour order is stated in text ("poured first", "poured last"), never implied by position alone.

## Motion Principles

Scroll pours one candle in four real layers. Each layer is a fixed-geometry rect clipped to the jar's rounded interior, scaling from `0` to `1` on its vertical axis with a bottom-anchored transform origin, so each one visibly fills upward from where the layer below it ends, the same technique this gallery has used for jar-and-layer mechanisms before, applied here to a genuinely different material and a genuinely different final beat: instead of a dome sealing, a flame ignites. The wick line is present from the first frame, unlit, so the jar never looks incomplete before pouring starts. The moment a layer finishes filling, the card for its scent slides in below. Once all four layers have landed, the flame fades in at the wick's tip. One-shot pour: nothing loops, and every scent 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 the fully-poured, lit candle immediately with no scroll listener attached at all.

## Voice & Tone

Warm, specific about scent notes, no mystical self-care language. Steadywick talks like someone who actually poured the wax, not like a brand selling a mood. In practice:

- **Primary button**: "Pour a candle", not "Manifest your best self"
- **Scent description**: "Fruit up front, tannic tea underneath, not sweet the way most fig candles are.", not "An enchanting blend of fig and comfort"
- **Base layer note**: "The base layer, poured first, deepest and slowest to fade.", stated as a fact about pour order, not poetry
- **Cure time**: "Pouring today, cure time is about 48 hours.", not "Handcrafted with love"
- **Top layer note**: "What you smell first when you light it."

The tell that a sentence is off-brand: it reaches for a self-care or wellness abstraction instead of naming the actual scent note or the actual pour order.

## 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 pour and the flame ignition, 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 jar graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every layer's name, pour order, and scent 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 "Scents" 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 warm off-white `#fff8f0` label, brightness lift on hover. Once per view, for the real action ("Pour a candle").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The jar and pour (signature)
Documented in full under Motion Principles. Structurally: a static rounded-rect jar body with a `--border-ui` outline, a clip-path masking four layer rects to the jar's rounded interior, a wick line present from the first frame, and a flame group that fades in once all four layers finish.

### Scent card
A flat panel: `--panel` background, `1px solid --border`, `6px` radius. Holds a round scent-color swatch, the scent name, and a real one-sentence description naming actual notes and pour order. Present in the DOM at all times, decorated by the reveal, never gated by it.

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

### Notice
A `--panel` block with a `3px` `--accent-alt` top rule, carrying a burn-safety 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`, `4px` radius, `44px` height, `--raised` fill plus an accent border on focus.

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

## Do's and Don'ts

### Do
- Fill each layer from the bottom, anchored where the layer below it ends.
- State a scent's real pour order and actual notes, not a mood.
- Keep the wick visible and unlit until the pour actually completes.
- Keep the jar `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 lit candle on a bathtub edge or a "self-care" cliche.
- Don't write mystical wellness copy, name the actual scent notes instead.
- Don't use a cartoon flame mascot or sparkle decoration.
- Don't replay the pour sequence on every scroll pass, it pours once, like a real batch.
- Don't round anything into a pill, a poured jar reads as a vessel.

### Deliberate exception

The scents 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, scents). There is no live inventory count and no authenticated state. "Pour a candle" produces a client-side confirmation only, this is a concept demo.
- The jar holds exactly four layers because that's the current scent lineup for this candle. A fifth scent would need a fifth layer, not a relabeled existing one.
- 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 jar, the pour, the wick) rather than a template, the scroll-trigger
distance computed from real measured scroll room with a safety margin from
the outset, and the mechanical detector run clean.