---
version: alpha
name: pleatwork-design
description: "A warm rice-paper cream canvas (#f7f1e6) with near-black brown ink (#2b211a), deliberately not the red-and-gold palette this category defaults to. Muted vermillion (#a83f22) is the working accent, bamboo green (#4f7541) marks the one vegetarian filling and nothing else. Newsreader carries every headline in an elegant literary serif, Mulish carries prose and controls. The homepage settles four dumplings into a bamboo steamer, one at a time, each with its own hand-pleated seal drawn as a scalloped edge, not a smooth machine-pressed crescent."
---

## Brand Positioning

Pleatwork sells hand-pleated dumplings, and it exists because the entire category defaults to the same look, red and gold, a dragon or a lantern somewhere on the page, "authentic" in the hero copy doing the work an actual description should do. Pleatwork's bet is that the pleats themselves are the only decoration this business needs: they're a real technique, they're what keeps the filling sealed while it steams, and a page that draws them accurately says more than a stock photo of chopsticks ever could. If a component doesn't correspond to a real filling, a real technique, or the steamer itself, it doesn't belong here.

colors:
  accent: "#a83f22"
  accent-alt: "#4f7541"
  ink: "#2b211a"
  ink-muted: "#6f5f4d"
  canvas: "#f7f1e6"

## Logo / Wordmark System

The mark is a single dumpling in outline, drawn with the same scalloped pleated top edge as the hero's dumplings, never a smooth crescent. It is not a steam cloud, chopsticks, or a takeout box.

```svg
<svg width="22" height="20" viewBox="0 0 22 20" aria-hidden="true">
  <path d="M1 9 Q3 3 6 8 Q8 2 11 8 Q13 2 16 8 Q19 3 21 9 Q21 14 17 17 Q11 20 5 17 Q1 14 1 9 Z" fill="var(--panel)" stroke="var(--border-ui)" stroke-width="1.3"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Pleatwork" in Newsreader 600, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` wide, below that the scalloped edge blurs into a smooth curve.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't smooth the top edge into a plain crescent, the scallops are the pleats, the entire reason the mark reads as a dumpling and not a coin. Don't fill the mark solid, it stays an outline. Don't recolor the stroke to anything but `--border-ui`.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#f7f1e6` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, filling cards, table, form card, unfilled dumpling |
| Surface raised | `--raised` | `#faf6ee` | Row hover, cta band, dumpling fill |
| Border | `--border` | `#ece3d2` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#d8c9ac` | Decorative-only edges |
| Border UI | `--border-ui` | `#907c5f` | Every interactive boundary: secondary button, input, select, the dumpling and steamer outline |
| Ink | `--ink` | `#2b211a` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#6f5f4d` | Labels, meta lines, helper text |
| Vermillion | `--accent` | `#a83f22` | Primary button, links, "steaming now" not used, see below |
| Bamboo | `--accent-alt` | `#4f7541` | The vegetarian filling's swatch and nothing else |

Vermillion is the one working accent, the primary button and links, chosen muted rather than the bright lacquer-red this category defaults to. Bamboo green appears exactly once as a system color, the mushroom and tofu filling's swatch, because it's this menu's only vegetarian option and a customer scanning for it deserves one consistent color to look for, not a hunt through descriptions. The "steaming now" status uses bamboo as well, since it shares the same "this is good to know at a glance" job. Every other filling swatch (the pork tan, the shrimp coral, the lamb rust) is a real illustrative food color, not a system token, 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) | 13.99:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 15.73:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 5.46:1 | AA |
| `--dim` on `--panel` | 6.14:1 | AA |
| `--dim` on `--raised` | 5.70:1 | AA |
| `--accent` on `--bg` (links, price text) | 5.50:1 | AA |
| `--accent` on `--panel` | 6.18:1 | AA |
| `--accent` on `--raised` | 5.73:1 | AA |
| `--accent-alt` on `--bg` (vegetarian badge) | 4.73:1 | AA |
| `--accent-alt` on `--panel` | 5.31:1 | AA |
| `--accent-alt` on `--raised` | 4.93:1 | AA |
| light label (`#fff8f2`) on `--accent` fill (primary button) | 5.87:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.97:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 4.01:1 | AA (1.4.11) |

`--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. `--dim` was darkened from an initial `#8a7a68`, which measured only 3.69:1 on canvas, short of the small-text 4.5:1 minimum, before this system shipped, not after.

typography:
  display:
    fontFamily: Newsreader
    fontWeight: 600
  body:
    fontFamily: Mulish
    fontWeight: 400

## Type Scale

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

Newsreader's literary serif carries warmth without leaning on any single culture's decorative type tradition, reserved for headlines only. Mulish 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: 12px` on cards and panels, `--radius-sm: 7px` on buttons, inputs, and badges. Rounded enough to read as soft dough, not the zero-radius machined edge of the trade-shop systems built the same batch, and not a full pill either, a dumpling has a defined edge, not an endless curve.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own steamer-and-dumplings illustration (hand-built SVG). Filling status is a solid dot paired with the word "Steaming now."

## Motion Principles

Scroll settles four dumplings into a bamboo steamer, one at a time. Each dumpling is drawn at its final resting slot in the steamer with its pleated seal already shaped, and scales from `0` to `1` with a slight overshoot as it lands, the same one-shot settle this gallery's other "N items arrive in sequence" systems use, applied here to a domain-specific shape: a scalloped top edge standing in for real hand-pleating, never a smooth crescent. The moment a dumpling lands, the card for its filling reveals below. One-shot settle: nothing loops, and every filling 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 dumplings already settled and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Warm, precise about technique, no takeout-menu cliche. Pleatwork talks like someone who actually pleats the dumplings, not like a menu translated for maximum appeal. In practice:

- **Primary button**: "Order ahead", not "Experience authentic flavor"
- **Filling description**: "Whole shrimp, roughly chopped, not pureed, so you can still tell it's shrimp.", not "Succulent shrimp in every bite"
- **Technique note**: "The pleats aren't decoration, they're what keeps the broth inside while it steams.", not "Grandma's secret recipe"
- **Vegetarian filling**: "No egg, our only fully vegetarian filling.", stated plainly, not flagged with an apology
- **Status**: "Steaming now, ready in about 12 minutes."

The tell that a sentence is off-brand: it reaches for "authentic," a family legend, or a flavor adjective that could describe any dish, instead of naming the actual ingredient and what was done 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 dumpling settle, 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 steamer graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every filling's name, description, price, and status is in the card grid below in plain markup at all times, and again in the second page's table.
- **Tap targets**: `44px` minimum height on every button, nav link, and form control.
- **Color is never the only signal**: the vegetarian filling's status is named in its own description ("our only fully vegetarian filling"), not left to the green swatch alone.
- **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 "Menu" link and exactly one primary button. Below 480px the first nav link drops, the primary button stays.

### Buttons
Two variants, `7px` radius, `44px` minimum height:
- **Primary**: `--accent` fill, a warm off-white `#fff8f2` label, brightness lift on hover. Once per view, for the real action ("Order ahead").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The steamer (signature)
Documented in full under Motion Principles. Structurally: a static two-ring bamboo steamer ellipse and four dumpling groups, each scaling in from its own drawn resting slot with a pleated scalloped-edge shape.

### Filling card
A flat panel: `--panel` background, `1px solid --border`, `12px` radius. Holds a round filling-color swatch, the filling's name, a real technique-based description, the price, and a status badge. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Filling table (second page)
`--raised` header row in `--text-label`, `--panel` body rows, one `--border` rule between rows, a `<caption>` naming the order. Below 700px the table restacks into one bordered block per filling.

### Notice
A `--panel` block with a `3px` `--accent-alt` top rule, carrying an allergen or sourcing 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`, `7px` 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
- Draw every dumpling with a scalloped pleated edge, never a smooth crescent.
- Reserve bamboo green for the vegetarian filling and nothing else.
- Name the actual technique behind a filling, not a flavor adjective.
- Keep the steamer `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 red-and-gold takeout-menu palette, a dragon, a lantern, or chopstick clipart.
- Don't write "authentic" or invoke a family legend, name the ingredient and the technique instead.
- Don't use a cartoon dumpling mascot or a steam-cloud decoration.
- Don't replay the settle sequence on every scroll pass, it settles once, like a real batch going into the steamer.
- Don't round anything into a full pill, a dumpling has a defined edge.

### Deliberate exception

The menu 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, menu). There is no live order cart and no authenticated state. "Order ahead" produces a client-side confirmation only, this is a concept demo.
- The steamer holds exactly four dumplings because that's the current filling lineup. A fifth filling rotates one out, it doesn't add a fifth slot.
- 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 steamer and the pleated settle) 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.