Typography
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Paragraph text with strong emphasis, italic emphasis, an inline link, and inline code.
“This page should make design regressions obvious without guesswork.”
Section Library
Shared production sections, grouped the way real pages would use them
This page should showcase the production-ready section family first. The older demo and specimen blocks still matter for compatibility and regression checks, but they should live in a clearly separated appendix instead of setting the tone for the whole review page.
Group One
Hero systems and page openings
These are the top-of-page systems. They should feel spacious, branded, and capable of leading a page without collapsing into generic hero patterns.
Lead capture surface
The form side should feel practical and compact while the right side keeps the surrounding campaign energy.
New Section
Form hero with capture on the left and CTA framing on the right
This pattern covers campaign capture, retailer inquiry, wholesale outreach, or gated download moments without forcing a completely separate page template.
New Section
Variant-readyMerchandising
A real production media split instead of a placeholder layout
Media split section
The upgraded media split now supports richer CTAs, badges, highlight bullets, and visual theming so it can handle real product and campaign storytelling instead of just demo copy.
Supports image or video media
Can carry bullets, badges, and dual CTAs
Good for product, education, or campaign use
Theme treatment can shift without forking the component
New Section
Video background hero for motion-first page openings
This is the motion-led hero option for launch pages, campaign openings, or editorial landing moments where a static image feels too flat. It should feel immersive without abandoning the shared section system.
Group Two
Storytelling and merchandising systems
This group should carry the bulk of modern storytelling pages: product narratives, category merchandising, educational detail, and collection pathways.
New Section
Feature grid for alternating story beats
This should become a reliable merchandising and storytelling block for category pages, product lineups, and campaign detail pages.
Alternating rows create momentum
Alternate media and text rows create a steady reading rhythm without forcing every story into the same hero shape.
Explore rows
Good for category stories and product families
This is useful when the page needs multiple moments of explanation, product framing, or campaign detail without becoming visually repetitive.
Next groupNew Section
Video split for explainers, walkthroughs, and launch recaps
Video split covers product walkthroughs, founder explainers, educational content, and launch recaps without creating a separate template family. It should feel as easy to reuse as media split, just with motion at the center.
New Section
Feature columns for supporting detail
This gives the system a straightforward way to explain differentiators, process, benefits, or educational steps in a clean multi-column layout.
Clear structure
Use for concise proof points, capability summaries, or process callouts.
Balanced content
Works well when every item has roughly equal importance and similar copy length.
Platform-friendly
Keeps the page systematic without falling back to generic Tailwind filler cards.
New Section
Icon strip for compact value props
No Distillate
Short proof point
Flavor Forward
Compact claim row
Triple Lab
Quick trust surface
Editorial Friendly
Simple repeated content
New Section
Card grid for collections and pathways
This is one of the most reusable patterns in the system for category navigation, product families, campaign pathways, or secondary content promotion.
Category
Product family one
Use this card style for pathway navigation with enough room for useful supporting copy.
Open cardCollection
Product family two
Cards should be useful and editorially flexible, not just decorative tiles.
Next groupPathway
Product family three
This section should handle collections, categories, and featured paths without needing separate components.
Explore pathNew Section
Carousel for sequential stories and collections
Carousel gives the system a curated horizontal storytelling pattern for launches, product families, or editorial roundups. It should be used when sequential browsing adds value, not as a substitute for clear page hierarchy.
Launch
Product launch sequence
Use carousel for compact campaign moments, new drops, or a tightly related set of stories that benefit from side-by-side comparison.
Open launchEditorial
Story set with supporting detail
The cards should still communicate clearly when swiped one at a time on mobile. Strong titles and summaries matter more than novelty.
Next groupMerchandising
Horizontal collection preview
This is useful when the system needs horizontal browsing without introducing a heavy custom slider dependency or one-off app code.
Open updatesGroup Three
Conversion, capture, and utility
This group covers decisive actions and low-friction conversion patterns. These should stay clear and practical rather than turning into decorative clutter.
New Section
CTA band for decisive conversion moments
This is the controlled, conversion-focused section for pages that need a strong action moment without escalating all the way to another hero.
New Section
Newsletter signup for low-friction capture
This is the lightweight reusable email capture pattern. Integration can vary later, but the section structure should stay consistent.
Demo-only capture surface. Real integration, consent language, and submission behavior should be wired per project needs.
New Section
FAQ for education and objection handling
FAQ is worth having early because it handles education, objections, and compliance-adjacent clarification without inventing special-purpose layouts.
Why include FAQ in the first section wave?
+
Because this is a common real-world content need and it gives editors a clean way to manage expandable educational content in the CMS.
Can this work beyond support content?
+
Yes. The accordion pattern already supports flexible copy lengths and should work across campaign, product, and support-style pages.
Group Four
Trust, proof, and human context
This group should handle credibility, human context, and supporting proof without falling into generic filler. Use it when the content is real enough to earn the space.
New Section
Testimonial section for social proof
This should only be used when the content is real, but it belongs in the system because social proof is a common pattern and should not become a one-off every time.
"
The new section system finally gives us reusable campaign building blocks without flattening every page into the same generic template.
Jordan Lee
Creative Lead, Platform Review
"
It feels much easier to imagine real content living in these sections than in the older placeholder patterns.
Morgan Patel
Content Strategist, Editorial Team
New Section
Logo cloud for credibility signals
The logo cloud stays useful when there are real retailer, partner, product-line, or press marks to show. Until then it should remain intentionally simple.
New Section
Team section for founder or leadership stories
Team should stay available for trust-building pages, founder stories, and expert-led brands, but it should not become mandatory filler on every site.
Alex Rivera
Design Systems Lead
Focused on turning reusable section patterns into polished, brand-ready page systems.
View profileTaylor Nguyen
Content Platform Lead
Owns editorial structure, section naming, and content modeling so editors can work cleanly inside the CMS.
View profileSam Carter
System Architect
Helps keep the shared platform expressive without letting it drift into one-off implementations.
Appendix
Legacy and utility QA surfaces
These older or denser QA surfaces still have value, but they should read as appendix material instead of setting the tone for the whole style guide. Keep them available for regression checks without letting them crowd the production-ready section library.
Legacy Surface
Background hero remains renderable for older content
This older section stays visible here for compatibility review, but it is no longer the lead voice of the style guide.
Default hero section
This simpler baseline hero is still renderable, but the new immersive and form-led hero systems are now the primary reference.
Theme Showcase
Headings, buttons, and surfaces
This section intentionally concentrates typography, buttons, and surface styles so theme changes become obvious without clicking through multiple pages.
Typography
Display
Theme changes show up fast here
Heading
Section headlines, scales, and spacing
Body
Use this page as a quick QA surface when tokens, colors, radii, shadows, or typography change across the platform.
Buttons
Badges
NeutralPrimarySecondaryOutlineDestructive
Forms
Alerts
Default alert
Use this for general notices and low-friction guidance inside shared marketing UI.
Primary alert
Use this when the message should feel affirmative but still stay within the shared palette.
Secondary alert
Use this when the message needs stronger editorial emphasis without inventing a new pattern.
Destructive alert
Use this sparingly for destructive or high-risk messaging that needs immediate contrast.
Containers
Copy width
copyContent width
contentSection width
sectionPage width
pageCards And Surfaces
Canvas surface
Primary surface
Secondary surface
This section is now the canonical shared UI preview surface. New shared component patterns should be added here as they become real platform needs.
HTML Specimen
Common HTML elements and content specimens
This specimen block covers common HTML content patterns so you can quickly spot holes in typography, list styling, figure treatment, blockquotes, and code presentation.
Lists And Figure
Unordered list
- Spacing and indentation
- Marker color and vertical rhythm
- Nested emphasis in content samples
Ordered list
- Update tokens or component styles
- Visit the style guide page
- Scan for regressions or mismatched themes
Figure with caption
Preformatted code
<section>
<h2>Shared content specimen</h2>
<p>Theme changes become obvious here.</p>
</section>