---
version: alpha
name: tacked-and-true-design
description: "A warm linen canvas (#ede6da) with near-black ink (#2b2620), teal (#1f6b6b) as the working accent and the color of the finished upholstery fabric, wood-brown (#8a5a2e) marking webbing and tack points. Alegreya carries every headline in a warm book serif, Figtree carries prose and controls. The homepage rebuilds one chair seat through four real structural stages, each cross-section genuinely more complete than the last."
---

## Brand Positioning

Tacked & True reupholsters furniture, and it exists because most upholstery sites sell a fabric swatch fan and skip the actual reason a rebuild costs more than a quick recover: what's underneath the fabric matters more than the fabric itself. The bet here is to show the real four-stage structural rebuild, frame to fabric, and name the specific reason stapling new fabric over old padding is a temporary fix. If a component doesn't correspond to a real stage, a real structural layer, or the seat itself, it doesn't belong here.

colors:
  accent: "#1f6b6b"
  accent-alt: "#8a5a2e"
  ink: "#2b2620"
  ink-muted: "#6b6255"
  canvas: "#ede6da"

## Logo / Wordmark System

The mark is a seat frame in profile, an open rectangle with a curved webbing line arcing across its top, mid-rebuild. It is not a full armchair, a sewing needle, or a fabric swatch.

```svg
<svg width="22" height="18" viewBox="0 0 22 18" aria-hidden="true">
  <rect x="1" y="6" width="20" height="10" rx="1" fill="none" stroke="var(--border-ui)" stroke-width="1.4"/>
  <path d="M1 6 Q11 1 21 6" fill="none" stroke="var(--accent)" stroke-width="1.6"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "Tacked & True" in Alegreya 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` wide, below that the webbing arc and the frame merge.
- **Clearspace**: empty margin equal to the mark's own height on all four sides.
- **Don't**: don't recolor the webbing arc to anything but `--accent`. Don't fill the frame rectangle solid, it stays an open outline, a frame mid-rebuild, not a finished cushion. Don't add legs or arms to the mark, it's a seat cross-section, not a whole chair.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#ede6da` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, stage cards, table, form card |
| Surface raised | `--raised` | `#f4efe4` | Row hover, cta band, unfinished padding fill |
| Border | `--border` | `#e0d8c8` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#ccc0a8` | Decorative-only edges |
| Border UI | `--border-ui` | `#7c7364` | Every interactive boundary: secondary button, input, select, frame outline |
| Ink | `--ink` | `#2b2620` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#6b6255` | Labels, meta lines, helper text |
| Teal | `--accent` | `#1f6b6b` | Primary button, mark's webbing arc, the finished tacked-fabric fill |
| Wood-brown | `--accent-alt` | `#8a5a2e` | Webbing strips, tack points, second-page status |

Teal only fills the seat once it's actually the finished, tacked fabric, stages one through three keep the seat neutral or in a raised-panel tone, so the color change on the bench marks a genuine milestone rather than decorating four identical shapes. Wood-brown appears exactly where real jute webbing or a real tack point sits, stages two and four, and nowhere else.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 12.09:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 14.99:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 4.83:1 | AA |
| `--dim` on `--panel` | 5.98:1 | AA |
| `--dim` on `--raised` | 5.23:1 | AA |
| `--accent` on `--bg` (links, mark's arc) | 5.02:1 | AA |
| `--accent` on `--panel` | 6.22:1 | AA |
| `--accent` on `--raised` | 5.43:1 | AA |
| `--accent-alt` on `--bg` (webbing, tack points, status) | 4.73:1 | AA |
| `--accent-alt` on `--panel` | 5.86:1 | AA |
| `--accent-alt` on `--raised` | 5.11:1 | AA |
| light label (`#f0f8f7`) on `--accent` fill (primary button) | 5.77:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.77:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 4.67: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.

typography:
  display:
    fontFamily: Alegreya
    fontWeight: 600
  body:
    fontFamily: Figtree
    fontWeight: 400

## Type Scale

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

Alegreya's warm book serif reads as considered and structural, reserved for headlines only. Figtree 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: 5px` on cards and panels, `--radius-sm: 3px` on buttons and inputs. Small and structural, reading as a wood frame's edge, 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-seats illustration (hand-built SVG). A stage's real structural layer is always stated in text, never implied by the seat shape alone.

## Motion Principles

Scroll rebuilds one chair seat through four real stages, laid out left to right on a bench. Each stage is a fixed-geometry seat cross-section, positioned at a fixed bench location, 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: stage one is an empty open frame, stage two adds a woven webbing grid, stage three adds a padding mound in a neutral tone, stage four fills the whole seat teal with visible tack points along the edge, so each shape is genuinely more complete, not the same rectangle recolored four times. Each stage's static bench 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 rebuilt and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Plain, structural, explains why rebuilding beats recovering. Tacked & True talks like an upholsterer who's actually rebuilt a thousand seats, not a home-decor brand selling a mood. In practice:

- **Primary button**: "Get an estimate", not "Transform your space"
- **Webbing copy**: "The actual support layer, not the springs alone.", a direct structural claim
- **Padding copy**: "Shaped by hand, not just stuffed in flat.", stated as a technique fact
- **Tacking copy**: "Working from the center out so the pattern stays straight.", a real technical reason
- **Status**: "Bench open today, most chairs take about a week."

The tell that a sentence is off-brand: it reaches for home-decor aspiration instead of naming the actual structural layer and why it matters.

## 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 seat-rebuilding 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-seats graphic is `aria-hidden`.** It's a continuously changing illustration tied to scroll position. Nothing is communicated by it alone: every stage's name and technique 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: an "Orders" 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 teal-white `#f0f8f7` label, brightness lift on hover. Once per view, for the real action ("Get an estimate").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and seats (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four seat groups, each an outer static-position group wrapping an inner scale-animated cross-section that's genuinely different geometry per stage.

### Stage card
A flat panel: `--panel` background, `1px solid --border`, `5px` radius. Leads with a stage number, then the technique name, then a real one-sentence structural description. Present in the DOM at all times, decorated by the reveal, never gated by it.

### Order 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 the recover-vs-rebuild distinction. 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 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 the seat teal only at the finished, tacked stage.
- Draw a genuinely different seat cross-section per stage, not the same rectangle recolored.
- State the real structural reason a technique matters, not home-decor aspiration.
- 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 fabric swatches fanned out or a "transform your space" cliche.
- Don't write vague home-decor copy, name the actual structural layer and technique.
- Don't use a cartoon armchair mascot or sparkle decoration.
- Don't replay the rebuild sequence on every scroll pass, it rebuilds once, like a real job.
- Don't round anything into a pill, a rebuilt seat reads structural.

### Deliberate exception

The orders 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, orders). There is no live order queue and no authenticated state. "Get an estimate" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a full structural rebuild follows. A simple recover, fabric over existing padding, skips stages one through three, named as an exception on the orders page rather than folded into 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 seat-rebuilding 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.