---
version: alpha
name: true-corner-design
description: "A cool gallery-white canvas (#f0f0ee) with near-black ink (#26282a), the gallery's first true neutral-grey light palette, distinct from every warm cream built earlier this batch. Museum green (#2f6b4f) is the working accent, brass (#836626) marks hinge points and status. Cardo carries every headline in a classical serif, Archivo carries prose and controls. The homepage builds one framed corner sample through four real conservation-framing stages, each cross-section genuinely more complete than the last."
---

## Brand Positioning

True Corner does custom picture framing, and it exists because most framing sites sell a finished gallery wall and skip the actual reason conservation framing costs what it does: archival hinges instead of tape, UV glass instead of plain glass, and a corner joint checked with a square instead of eyeballed. The bet here is to show the real four-stage build, using the corner sample framers themselves use to demonstrate quality. If a component doesn't correspond to a real stage, a real material, or the corner itself, it doesn't belong here.

colors:
  accent: "#2f6b4f"
  accent-alt: "#836626"
  ink: "#26282a"
  ink-muted: "#6b6e70"
  canvas: "#f0f0ee"

## Logo / Wordmark System

The mark is an L-shaped corner bracket, the same corner-sample shape the hero builds, drawn as a simple right-angle outline with a green top-left edge. It is not a picture frame, a photo icon, or a paint palette.

```svg
<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
  <path d="M1 1 L14 1 L14 5 L5 5 L5 14 L1 14 Z" fill="none" stroke="var(--border-ui)" stroke-width="1.4"/>
  <path d="M1 1 L14 1 M1 1 L1 14" stroke="var(--accent)" stroke-width="1.6"/>
</svg>
```

- **Lockup**: mark, then a `0.55rem` gap, then "True Corner" in Cardo 700, sentence case. Mark always left of the wordmark.
- **Minimum size**: mark not smaller than `16px`, below that the L-arms merge into a solid block.
- **Clearspace**: empty margin equal to the mark's own width on all four sides.
- **Don't**: don't recolor the top-left edge to anything but `--accent`. Don't close the L into a full square, the open corner is the whole point. Don't add a diagonal miter line to the mark, that detail belongs to the hero's finished-stage corner, not the brand mark.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#f0f0ee` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, stage cards, table, form card, corner-sample fill |
| Surface raised | `--raised` | `#f7f7f5` | Row hover, cta band |
| Border | `--border` | `#e2e1dd` | Card edges, table rules, dividers |
| Border strong | `--border-strong` | `#cfcdc7` | Decorative-only edges, bevel line, unfinished miter marks |
| Border UI | `--border-ui` | `#7c8082` | Every interactive boundary: secondary button, input, select, corner outline |
| Ink | `--ink` | `#26282a` | Headlines, body copy, table cells |
| Ink muted | `--dim` | `#6b6e70` | Labels, meta lines, helper text |
| Museum green | `--accent` | `#2f6b4f` | Primary button, mark's edge, the finished glazed corner fill |
| Brass | `--accent-alt` | `#836626` | Hinge points, the miter seam line, second-page status |

Museum green only fills the corner sample once it's actually finished and glazed, stages one through three keep the sample neutral, so the color change marks a genuine milestone rather than decorating four identical shapes. Brass appears exactly where real hardware or a real seam sits, the hinge dots in stage two and the miter line in stage three, and nowhere else.

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

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` (headlines, body copy) | 12.97:1 | AAA |
| `--ink` on `--panel` (card copy, table cells) | 14.80:1 | AAA |
| `--dim` on `--bg` (labels, helper text) | 4.50:1 | AA |
| `--dim` on `--panel` | 5.44:1 | AA |
| `--dim` on `--raised` | 4.79:1 | AA |
| `--accent` on `--bg` (links, mark's edge) | 5.52:1 | AA |
| `--accent` on `--panel` | 6.29:1 | AA |
| `--accent` on `--raised` | 5.87:1 | AA |
| `--accent-alt` on `--bg` (hinge dots, status) | 4.73:1 | AA |
| `--accent-alt` on `--panel` | 5.39:1 | AA |
| `--accent-alt` on `--raised` | 5.03:1 | AA |
| light label (`#f2f8f4`) on `--accent` fill (primary button) | 5.85:1 | AA |
| `--border-ui` control edge on `--bg` (non-text, inputs) | 3.49:1 | AA (1.4.11) |
| `--border-ui` control edge on `--panel` (non-text, secondary button) | 3.99:1 | AA (1.4.11) |

Both accents were darkened from an initial pass (`#9c7a2f` for brass measured only 3.51:1 to 4.01:1, short of the small-text 4.5:1 minimum) before this system shipped, not after. `--border-strong` is kept for decorative-only uses, the bevel line and unfinished miter marks, never a control boundary, `--border-ui` exists specifically so a real control never inherits that weaker value.

typography:
  display:
    fontFamily: Cardo
    fontWeight: 700
  body:
    fontFamily: Archivo
    fontWeight: 400

## Type Scale

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

Cardo's classical serif reads as a gallery label, considered and calm, reserved for headlines only. Archivo 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: 3px` on cards and buttons, `--radius-sm: 2px` on inputs. Small and precise, reading as a matted 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-corners illustration (hand-built SVG). A stage's real technique is always stated in text, never implied by the corner shape alone.

## Motion Principles

Scroll builds one framed corner sample through four real stages, laid out left to right on a bench. Each stage is a fixed-geometry L-shaped corner, 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 shows only the mat's beveled inner edge, stage two adds two hinge-point dots, stage three adds the diagonal miter seam, stage four fills the whole sample museum green with a glass-glare highlight, so each shape is genuinely more complete, not the same bracket 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 built and every card already visible, with no scroll listener attached at all.

## Voice & Tone

Precise, conservation-minded, explains why archival methods matter. True Corner talks like a framer who's actually checked a thousand corners with a square, not a brand selling gallery-wall aspiration. In practice:

- **Primary button**: "Start an order", not "We frame your memories"
- **Hinging copy**: "Never tape directly on the art. Reversible, because someday someone will want to undo it.", a direct conservation claim
- **Mitering copy**: "Checked with a square, not eyeballed.", stated as a mechanical fact
- **Glazing copy**: "Protected without ever touching the surface.", the real function of spacer or glazing, not a vague promise
- **Status**: "Bench open today, most orders take about a week."

The tell that a sentence is off-brand: it invokes sentiment about memories or art instead of naming the actual material and the conservation reason it's used.

## 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 corner-building 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-corners 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 green-white `#f2f8f4` label, brightness lift on hover. Once per view, for the real action ("Start an order").
- **Secondary**: transparent, `1px solid --border-ui`, `--ink` label, edge and label both going `--accent` on hover.

### The bench and corners (signature)
Documented in full under Motion Principles. Structurally: a static bench plank and four corner-sample 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`, `3px` radius. Leads with a stage number, then the technique name, then a real one-sentence conservation-focused 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 an archival-materials 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`, `2px` 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 corner museum green only at the finished, glazed stage.
- Draw a genuinely different corner cross-section per stage, not the same bracket recolored.
- State the real conservation reason a material or technique matters, not sentiment about memories.
- 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 gallery wall with generic art or a measuring-tape cliche.
- Don't write "we frame your memories" copy, name the actual material and technique.
- Don't use a cartoon frame mascot or sparkle-shine decoration.
- Don't replay the build sequence on every scroll pass, it builds once, like a real job.
- Don't round anything into a pill, a mitered corner reads precise.

### 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. "Start an order" produces a client-side confirmation only, this is a concept demo.
- The bench shows exactly four stages because that's the real sequence a conservation-framed piece follows. A ready-made frame skips stages one through three entirely, 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 corner-building 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.