Internal diagnostic
Button System Reference
Three variants at five sizes. Visual check for hover, active, focus, disabled, and contrast on the four felt panel colors. All visuals are CSS plus one wood texture and the four panel PNGs. No text baked into any asset.
- Wood texture
/assets/images/textures/wood-grain-maple.png- Panel textures
/assets/images/textures/panels/panel-<color>.png- Primary class
.btn-wood- Secondary class
.btn-felt(plus--sage,--rust,--cream)- Tertiary class
.btn-link(renamed from spec's.btn-text, which exists in the old system)
Primary: .btn-wood
Use for the top call to action on a page. Meet the characters, Watch, Subscribe, the single most important action in a view.
Inside a cream felt panel:
Subscribe
Secondary: btn-felt
Reference actions. At a Glance CTAs, structured-content buttons, episode metadata actions.
Inside a cream felt panel:
Subscribe
Secondary: btn-felt btn-felt--sage
Warm narrative actions. Newsletter submit, story-section CTAs.
Inside a cream felt panel:
Subscribe
Secondary: btn-felt btn-felt--rust
Accent and highlight. Used sparingly for callouts and emphasis.
Inside a cream felt panel:
Subscribe
Secondary: btn-felt btn-felt--cream
Neutral light action. Dark ink text on cream felt, good for quiet CTAs.
Inside a cream felt panel:
SubscribeTertiary: .btn-link
Use for inline navigation: Open PDF, See all, View more. Low-hierarchy actions that sit next to or below primary content.
Inside a cream felt panel:
See all coloring pagesHierarchy check
Primary wood next to each felt color at identical label. Primary should feel clearly heavier. Felt variants should feel like peers of each other.