![T[h]ree +EC wordmark](wordmark-full.svg)
01
Maintained reference
Reference elements use semantics sparingly: links, labels, and points of maintained orientation rather than decorative fills.
Demonstrator page
A reference page that stays open to correction.
This single-page demonstrator translates the T(h)reehouse +EC blueprint into a live web surface: restrained, legible, tactile on mobile, and explicit about what is maintained versus what remains provisional.
It keeps the palette semantics intact, uses the prescribed type roles, and demonstrates the section rule, layer stack, research callout, accessible navigation, and small-screen table handling.
Section rule
The demonstrator is built from a small number of composable parts.
Each section uses the same structural logic: a thin rule, a mono label, a serif heading, and body copy kept inside the specified measure. That keeps the register coherent while letting the page feel intentional.
02
Readable structure
Body copy stays in Crimson Pro, never drops below the minimum text size, and keeps a comfortable line length through the `--measure` token.
EC
Correction gate
Signal red appears only where the system marks a correction lens or open repair channel. It is present, but never allowed to become the page’s dominant accent.
Component patterns
The page demonstrates how evidence can be framed without ornamental noise.
The research callout anchors a key note, while adjacent cards show how quieter supporting material can sit in the same register without slipping into dashboard aesthetics.
Research callout
A demonstrator should not merely quote the rules. It should make them inspectable in use: how headings sit, how borders breathe, how motion softens under reduced-preference settings, and how the page remains usable at 320px width without horizontal drift.
Register
The page feels calm because backgrounds stay within parchment and warm-white, and contrast does the heavy lifting instead of colour blocks.
Navigation
The mobile menu uses a real button with `aria-expanded`, and hidden links are removed from the tab order when collapsed.
Motion
Small reveal transitions add arrival without theatrics, then disappear entirely for users who prefer reduced motion.
Responsive table
Tabular data remains tabular, then stacks cleanly on small screens.
This sample uses the blueprint’s table rules directly: open edges, mono headers, serif cells, horizontal separators only, and a stacked mobile fallback that preserves header context with `data-label`.
Rule coverage sample
| Rule area | Implementation | Status |
|---|---|---|
| Accessibility | Skip link, visible focus rings, semantic landmarks, and keyboard-safe nav toggle. | Pass |
| Typography | Crimson Pro for body copy, IBM Plex Mono for labels and navigation, three weights total. | Pass |
| Responsive layout | Measured desktop columns collapse to a single stack below 880px and maintain mobile gutters. | Pass |
| Component patterns | Section rules, layer stack, research callout, and table styling follow the blueprint values. | Pass |