---
version: alpha
name: punty-design
description: "A near-black warm canvas (#171310) with warm cream ink (#f0ebe4), furnace orange-red (#e0562a) as the working accent and the literal color of glass at working temperature, cool glass-aqua (#4fa8a8) marking the finished, cooled material and nothing else. Yeseva One carries every headline in a bold display serif, Manrope carries prose and controls. The homepage shapes one piece through four real hot-shop stages, each glass form on the pipe genuinely different geometry, cooling in color from furnace-hot toward its finished tone."
---

## Brand Positioning

Punty runs a glassblowing studio, and it exists because most hot-shop sites reach for either a mystical "fire and breath" framing or a single glowing-furnace photo, neither of which explains what a glassblower actually does with their hands. The bet here is to show the real four-stage sequence, gather, marver, blow, shape, and name the actual physical reason each one exists. If a component doesn't correspond to a real stage, a real technique, or the pipe itself, it doesn't belong here.

colors:
  accent: "#e0562a"
  accent-alt: "#4fa8a8"
  ink: "#f0ebe4"
  ink-muted: "#b0a89d"
  canvas: "#171310"

## Logo / Wordmark System

The mark is a blowpipe in profile with a small gather glowing at its tip. It is not a furnace, a finished vase, or a glassblower silhouette.

```svg
<svg width="20" height="24" viewBox="0 0 20 24" aria-hidden="true">
  <line x1="1" y1="20" x2="14" y2="7" stroke="var(--border-ui)" stroke-width="1.6" stroke-linecap="round"/>
  <circle cx="16" cy="5" r="4" fill="var(--accent)"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Punty" in Yeseva One, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` tall, below that the pipe and the gather merge.
- **Clearspace**: empty margin equal to the mark's own height on all four sides.
- **Don't**: don't recolor the gather to anything but `--accent`, it's always furnace-hot orange, never the cooled aqua. Don't draw the pipe at a steeper angle than the mark's own, a punty is worked nearly horizontal, not vertical. Don't add flame or spark marks around the gather.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#171310` | Page background |
| Surface | `--panel` | `#201a16` | Nav, stage cards, table, form card |
| Surface raised | `--raised` | `#271f1a` | Row hover, cta band (large text only, see contrast note) |
| Border | `--border` | `#2c241e` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#3d322a` | Decorative-only edges, bench plank |
| Border UI | `--border-ui` | `#8a7d6f` | Every interactive boundary: secondary button, input, select, pipe stroke |
| Ink | `--ink` | `#f0ebe4` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#b0a89d` | Labels, meta lines, helper text |
| Furnace | `--accent` | `#e0562a` | Primary button, mark's gather, stage-one glass fill |
| Glass-cool | `--accent-alt` | `#4fa8a8` | Stage-four glass fill, timing labels, status |

The gather's own fill color tracks real temperature across the four stages, from furnace orange-red at stage one through progressively cooler oranges at stages two and three, landing on the cool aqua only at stage four, once the piece is actually shaped and no longer glowing hot. The two system accents are the two temperature extremes of the same material, not a decorative pair.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 15.57:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 14.51:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 7.86:1 | AAA |
| `--dim` on `--panel` | 7.86:1 | AAA |
| `--dim` on `--raised` | 6.89:1 | AAA |
| `--accent` on `--bg` (links, stage-one label) | 4.87:1 | AA |
| `--accent` on `--panel` | 4.53:1 | AA |
| `--accent` on `--raised` (large text and UI only, see below) | 4.27:1 | AA (large/UI only) |
| `--accent-alt` on `--bg` (timing labels, status) | 6.60:1 | AA |
| `--accent-alt` on `--panel` | 6.14:1 | AA |
| `--accent-alt` on `--raised` | 5.78:1 | AA |
| dark label (`#1c0a03`) on `--accent` fill (primary button) | 5.06:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 4.61:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 4.30:1 | AA (1.4.11) |

`--accent` on `--raised` clears large-text and non-text UI use (4.27:1) but falls short of the small-text 4.5:1 minimum, so the cta band, which sits on `--raised`, keeps its heading and body copy in `--ink` and `--dim`, never setting small orange text there, the same constraint this gallery has hit and documented on other systems this batch. `--border-strong` is kept for decorative-only uses, the bench plank, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Yeseva One
    fontWeight: 400
  body:
    fontFamily: Manrope
    fontWeight: 400

## Type Scale

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

Yeseva One is a single-weight bold display serif with real presence, matching a material worked at 2000°F, reserved for headlines only. Manrope 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 workshop-plain, reading as a bench and a steel marver table, not a decorative rounding choice.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own bench-and-pipes illustration (hand-built SVG). A stage's real temperature or technique is always stated in text, never implied by color alone.

## Motion Principles

Scroll shapes one piece through four real hot-shop stages, laid out left to right on a bench of pipes. Each stage is a fixed-geometry glass form, positioned at the tip of its own pipe, 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 and color together: stage one is a small round gather in furnace orange, stage two an oval marvered shape in a slightly cooler orange, stage three a larger hollow-read circle, and stage four a genuinely different, worked final silhouette in the cool glass-aqua, so both shape and color track the real physical process rather than decorating four identical circles. Each stage's static pipe position and its animated scale live on separate nested groups from the first draft, per the lesson carried forward from earlier systems 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 `520px`). A viewport tall enough to leave under `20px` of room, or a `prefers-reduced-motion` visitor, gets all four stages already shaped and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Direct, physically specific, no mystical fire-and-glass poetry. Punty talks like someone who actually works the bench, not a brand selling wonder. In practice:

- **Primary button**: "Book the hot shop", not "Discover the ancient art of glass"
- **Marvering copy**: "This is what actually makes it round, not the blowing.", a direct correction of the common assumption
- **Blowing copy**: "One steady breath, not a big puff.", stated as a technique note, not a dramatic moment
- **Shaping copy**: "While the glass is still soft enough to move.", a real time constraint, not poetry
- **Status**: "Furnace is hot today, walk-in demos run hourly."

The tell that a sentence is off-brand: it reaches for fire-and-breath poetry instead of naming the actual tool, temperature, or physical reason behind a technique.

## 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 glass-shaping 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 bench-and-pipes graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every stage's name, temperature, 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 "Studio" 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 near-black `#1c0a03` label, brightness lift on hover. Once per view, for the real action ("Book the hot shop").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and pipes (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four pipe-and-glass groups, each an outer static-position group wrapping an inner scale-animated glass form whose shape and color are genuinely different per stage.

### Stage card
A flat panel: `--panel` background, `1px solid --border`, `4px` radius. Leads with a stage number and real temperature or timing note in glass-cool, then the technique name, then a real one-sentence physical description. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Studio 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 an annealing or 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`, `3px` radius, `44px` height, `--raised` fill plus an accent border on focus.

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

## Do's and Don'ts

### Do
- Track real temperature through color, furnace orange at the gather, cool aqua only once the piece is shaped.
- Draw a genuinely different glass silhouette per stage, not the same circle recolored.
- State the real physical reason a technique matters, not fire-and-glass poetry.
- Keep each stage's static position and animated scale on separate nested groups, never the same element.
- Measure real scroll room, minus a safety margin, before choosing a scroll-trigger distance.

### Don't
- Don't use a stock photo of a glowing furnace or a mystical "fire and breath" cliche.
- Don't write poetic fire-and-glass copy, name the actual technique and temperature.
- Don't use a cartoon glassblower mascot or spark decoration.
- Don't replay the shaping sequence on every scroll pass, it forms once, like a real gather.
- Don't round anything into a pill, hot glass reads as a worked material.
- Don't set small `--accent` text on `--raised`, the pairing falls just under the small-text minimum.

### Deliberate exception

The studio 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, studio). There is no live class calendar and no authenticated state. "Book the hot shop" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a basic blown form follows. More advanced techniques (color application, cane work) add stages out of scope for this hero.
- 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 bench and the four shaping 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.