---
version: alpha
name: fourth-steep-design
description: "A pale celadon canvas (#eef0e6) with near-black ink (#2a2b22), jade green (#546b40) as the working accent, tea-amber (#a3541f) marking timing and status. Frank Ruhl Libre carries every headline in a calm literary serif, Karla carries prose and controls. The homepage steeps one tea through four real infusions, each cup's liquid color genuinely different, tracking real steep depth rather than decoration."
---

## Brand Positioning

The Fourth Steep serves gongfu-style tea, and it exists because most tea-house sites sell a single mood, a steaming cup on a windowsill, "find your zen" copy, and skip the actual mechanic that makes loose-leaf tea worth the time: the same leaf poured four times gives four genuinely different cups. The bet here is to show the real infusion sequence, timed honestly, rather than a single generic "cup of tea" image. If a component doesn't correspond to a real steep, a real timing, or the cup itself, it doesn't belong here.

colors:
  accent: "#546b40"
  accent-alt: "#a3541f"
  ink: "#2a2b22"
  ink-muted: "#666b58"
  canvas: "#eef0e6"

## Logo / Wordmark System

The mark is a teacup in profile with a single horizontal line marking a fill level, mid-pour. It is not a teapot, a leaf, or a steam wisp.

```svg
<svg width="22" height="18" viewBox="0 0 22 18" aria-hidden="true">
  <path d="M2 4 L20 4 L18 15 Q11 18 4 15 Z" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.4"/>
  <path d="M2 8 L20 8" stroke="var(--accent)" stroke-width="1.6"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "The Fourth Steep" in Frank Ruhl Libre 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` wide, below that the fill line and the cup's taper merge.
- **Clearspace**: empty margin equal to the mark's own height on all four sides.
- **Don't**: don't recolor the fill line to anything but `--accent`. Don't add steam wisps or a leaf above the cup. Don't fill the whole cup solid, the mark shows a cup mid-fill, not a finished pour.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#eef0e6` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, infusion cards, table, form card, cup outlines |
| Surface raised | `--raised` | `#f5f6ef` | Row hover, cta band |
| Border | `--border` | `#e0e3d5` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#cbd0ba` | Decorative-only edges, tray plank |
| Border UI | `--border-ui` | `#83886f` | Every interactive boundary: secondary button, input, select, cup outline |
| Ink | `--ink` | `#2a2b22` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#666b58` | Labels, meta lines, helper text |
| Jade | `--accent` | `#546b40` | Primary button, mark's fill line, links |
| Tea-amber | `--accent-alt` | `#a3541f` | Timing labels, second-page status |

Jade is the working color, the primary button and the mark's fill line, chosen as a real tea-leaf green rather than a decorative pair. Tea-amber is held to one job, marking a real steep time, so a reader learns fast that amber text always means "this is how long." The four cup-liquid colors themselves, from nearly clear through deep brown, are real illustrative tea colors, not system tokens, the same exception every material-specific fill in this gallery already establishes, and here the progression itself is the point: the color deepens because the tea actually does.

### 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.31:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 4.79:1 | AA |
| `--dim` on `--panel` | 5.83:1 | AA |
| `--dim` on `--raised` | 5.07:1 | AA |
| `--accent` on `--bg` (links, mark's fill line) | 4.81:1 | AA |
| `--accent` on `--panel` | 5.91:1 | AA |
| `--accent` on `--raised` | 5.43:1 | AA |
| `--accent-alt` on `--bg` (timing labels, status) | 4.74:1 | AA |
| `--accent-alt` on `--panel` | 5.46:1 | AA |
| `--accent-alt` on `--raised` | 5.02:1 | AA |
| light label (`#f4f7f0`) on `--accent` fill (primary button) | 5.46:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.19:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.67:1 | AA (1.4.11) |

`--accent` was darkened from an initial `#5f7a4a`, which measured only 4.18: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, the tray plank, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Frank Ruhl Libre
    fontWeight: 600
  body:
    fontFamily: Karla
    fontWeight: 400

## Type Scale

| Token | Size | Weight | Family | Line-height | Letter-spacing | Used for |
|---|---|---|---|---|---|---|
| `--text-display` | `clamp(2.1rem, 5vw, 3.4rem)` | 600 | Frank Ruhl Libre | 1.15 | 0 | Homepage H1 |
| `--text-page-h1` | `clamp(1.9rem, 4vw, 2.6rem)` | 600 | Frank Ruhl Libre | 1.15 | 0 | Second-page H1 |
| `--text-h2` | `1.5rem` | 600 | Frank Ruhl Libre | 1.2 | 0 | Section headings |
| `--text-h3` | `1.1rem` | 600 | Frank Ruhl Libre | 1.2 | 0 | Infusion names |
| `--text-body` | `1rem` | 400 | Karla | 1.6 | 0 | Paragraph copy |
| `--text-small` | `0.88rem` | 400 | Karla | 1.55 | 0 | Table cells, footer, meta lines |
| `--text-label` | `0.78rem` | 700 | Karla | 1 | 0.05em, uppercase | Form labels, table headers, timing labels |

Frank Ruhl Libre's calm literary serif reads as unhurried, matching a process measured in seconds, not minutes, reserved for headlines only. Karla 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, `--radius-sm: 3px` on buttons and inputs. Small and quiet, reading as a tea tray's own edges, not a decorative rounding choice.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own tray-and-cups illustration (hand-built SVG). A steep's real timing is always stated in text, never implied by color alone.

## Motion Principles

Scroll steeps one tea through four real infusions, laid out left to right on a tray. Each infusion is a liquid fill inside a fixed cup outline, scaling vertically from `0` to `1` with a bottom-anchored transform origin, so each cup visibly fills as its own scroll segment completes, the same one-shot settle this gallery's other "N items arrive in sequence" systems use, applied here to a genuinely temporal rather than physical process. The domain-specific detail is entirely in the fill color: rinse is nearly clear, first steep is pale gold, second steep is amber, third steep is deep brown, a real progression a gongfu session actually produces, not four arbitrary hues. The moment a cup finishes filling, the card for that infusion reveals below. One-shot sequence: nothing loops, and every infusion 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 `520px`). A viewport tall enough to leave under `20px` of room, or a `prefers-reduced-motion` visitor, gets all four cups already filled and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Unhurried, precise about timing, no mystical tea-ceremony posturing. The Fourth Steep talks like someone who's actually timed a thousand infusions, not a brand selling zen. In practice:

- **Primary button**: "Book a tasting", not "Find your inner calm"
- **Rinse copy**: "This cup never gets tasted.", a plain, slightly wry fact
- **Second-steep copy**: "Most people's favorite pour.", a real observation, not a mystical claim
- **Third-steep copy**: "Worth the extra time to draw it out.", practical, not poetic
- **Status**: "Tasting room open today, sessions run hourly."

The tell that a sentence is off-brand: it reaches for tranquility or ceremony as an abstraction instead of naming the actual steep time or the actual flavor change.

## 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 cup-filling sequence, 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 tray-and-cups graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every infusion's timing, name, and description is in the card grid below in plain markup at all times, alongside a color swatch that repeats the same color reading.
- **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 "Teas" link and exactly one primary button. Below 480px the first nav link drops, the primary button stays.

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

### The tray and cups (signature)
Documented in full under Motion Principles. Structurally: a static tray plank and four cup groups, each a fixed outline with an inner liquid-fill path that scales vertically, colored to the real steep progression.

### Infusion card
A flat panel: `--panel` background, `1px solid --border`, `4px` radius. Leads with a round color swatch, then the real timing label, then the infusion's name and a one-sentence sensory description. Present in the DOM at all times, decorated by the reveal, never gated by it.

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

### Notice
A `--panel` block with a `3px` `--accent-alt` top rule, carrying a caffeine or water-temperature 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 tea 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
- Fill each cup to a color that reflects the real steep progression, not an arbitrary palette.
- State a steep's real timing before its sensory description, every time.
- Keep the tray `aria-hidden` and write every fact it shows in plain text nearby, including a repeating color swatch.
- Measure real scroll room, minus a safety margin, before choosing a scroll-trigger distance.

### Don't
- Don't use a stock photo of a steaming cup on a windowsill or a "find your zen" cliche.
- Don't write mystical tea-ceremony copy, name the actual steep time and flavor change.
- Don't use a cartoon teapot mascot or a steam-wisp decoration.
- Don't replay the steeping sequence on every scroll pass, it steeps once, like a real session.
- Don't invent a fifth infusion, gongfu sessions here are exactly four pours: rinse plus three steeps.

### Deliberate exception

The teas 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, teas). There is no live session calendar and no authenticated state. "Book a tasting" produces a client-side confirmation only, this is a concept demo.
- The tray shows exactly four infusions because that's the real session structure for the teas served here. Some teas can be steeped many more times, out of scope for this hero, which demonstrates the first four pours only.
- 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 tray and the four real infusions) 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.