wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
2.8 KiB
2.8 KiB
Preview-block worked examples
Four sample Step 5 preview blocks for the model to imitate, varied across macrostructure types. Load this file only when picking an unusual macrostructure or custom theme and the bullet-list spec in SKILL.md § 5. Preview doesn't give enough scaffolding on its own. Most builds don't need to read this file.
Long Document (editorial, motion-cut):
Hallmark · v1.0.0
- Macrostructure · Long Document
- Theme · Linen (cool slate paper · steel-blue accent · geometric sans)
- Enrichment · Tier-B hand-built SVG (a 60-line coffee bean with
@property --rise6 s breathing-loop)- Sections · Masthead · Letter · Three Notes · Visit · Colophon
- Motion · breathing-loop on bean only (respects
prefers-reduced-motion)- Slop test · 69 / 69 ✓
- Diversification · first run for this project
Bento Grid (SaaS, motion-on):
Hallmark · v1.0.0
- Macrostructure · Bento Grid
- Theme · Linen (cool slate paper · steel-blue accent · geometric sans)
- Enrichment · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall
- Sections · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer
- Motion · counter · pricing-lift · CSS marquee on integrations strip
- Slop test · 69 / 69 ✓
- Diversification · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)
Manifesto (declarative, no enrichment):
Hallmark · v1.0.0
- Macrostructure · Manifesto
- Theme · Manifesto (dark · Inter Tight 900 · single red bleed)
- Enrichment · none (typography only — voice carries the brand)
- Sections · Masthead · Title · Five Declarations · Bleed Band · What We Refuse · Working Rules · Practice · Reading · Colophon
- Motion · none — typography only
- Slop test · 69 / 69 ✓
- Diversification · differs from Linen on paper band (dark vs light) + display style (display-heavy vs geometric-sans)
Custom (Coffeebox archival café):
Hallmark · v1.0.0
- Macrostructure · Long Document
- Theme · custom (vibe: "archival warmth, hand-set, no varnish" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic display + Source Serif 4 body)
- Enrichment · Tier-A pure-CSS coffee bean (60-line SVG, breathing-loop optional)
- Sections · Masthead · Letter · Three Notes · Visit · Colophon
- Motion · breathing-loop on bean (with reduced-motion fallback)
- Slop test · 69 / 69 ✓
- Diversification · custom axes: light / italic-serif / chromatic-terracotta — differs from previous catalog Linen on accent hue + display style