Design system
Component showcase
A working system page for checking primitives, blocks, template patterns, states, and shared styling in the running app.
Jump to
Primitives
Core UI elements. Variants are typed in one shared primitive source and rendered from fixture arrays.
Buttons
Default card
Neutral surface for regular grouped content.
Informational card
Contextual note treatment for supporting guidance.
Featured card
Higher emphasis treatment for recommended content.
Success card
Positive state for confirmed or completed items.
Warning card
Attention state for caveats and important limits.
Labels, controls, and feedback
Input state is bound on the page.
Select options come from the fixture file.
System coverage
This panel demonstrates the expandable primitive using bound open state.
Loading state block with skeleton primitives
Blocks
Reusable page sections. Card-list families are rendered dynamically from the same fixture to keep examples consistent.
Navigation and search
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Shared card-list block
This block uses the same item fixture as the other card-based block examples.
System
Plan the component library
Audit usage, align props, and document expected states.
Tokens
Define variants once
Keep prop unions and visible examples aligned from one source.
QA
Verify real pages
Run components in production-like layout instead of isolated screenshots.
Structured blocks
Block
Content card
The base card used by many list blocks.
Myth vs reality
MythA showcase can be static screenshots.
RealityIt should render the real components in the app shell.
Decision trees
Knowledge maps
System dependencies
- Tokens — Color, spacing, shadow, and radius values
- Types — Shared variant unions
- Fixtures — One demo data source
- Showcase — Rendered examples
- tokens → page (style)
- types → fixtures (validate)
- fixtures → page (render)
Tables, media, and states
Comparison tables
Layer comparison Primitive Block Template Scope Small UI element Reusable page section Article pattern Source components/primitives components/blocks features/templates/components
| Component | Layer |
|---|---|
| Button | Primitive |
| Checklist | Template |
Visual galleries
Primary surface
Muted surface
Empty state
Nothing has been selected yet.
500
Error state
The fallback component keeps actions visible.
Article templates
Content templates are rendered with the same sample article data so their behavior can be compared in one place.
Article shell and metadata
Definition
This template renders real slot content inside production styling.
How it works
The wrapper owns spacing and heading treatment.
Causes
Template shells support structured editorial sections.
Signs
Each section uses its component CSS class.
Benefits
Content stays portable while styling stays local to the component.
Risks
Risk sections use the same slot pattern as other templates.
Side effects
Article sections render in the same grid as the system page.
Suitable for
Reusable shell for suitability guidance.
Avoid if
Warning-oriented template content can be previewed here.
Compatible ingredients
Compatibility sections share the same prose primitives.
Avoid combining
Combining guidance uses a dedicated template wrapper.
Routine steps
Step-based content stays in a reusable shell.
Ingredient spotlight
Spotlight content renders as a template component.
Product checklist
Product guidance can reuse the article section style.
Red flags
Red-flag sections stay visually consistent across articles.
Green flags
Positive guidance uses the paired template wrapper.
Myths reality
This template is separate from the block-level myth vs reality list.
Common mistakes
Mistake lists can be authored with shared prose.
Practical tips
Tips use the same heading and content shell pattern.
Key takeaways
Takeaways render as a dedicated template section.
Before after concept
Conceptual comparison content renders with its disclaimer.
Illustrative comparison only - individual results vary and this is not medical or professional advice.
Interactive article templates
Checklist
FAQs
Scientific evidence
Evidence components can render summary, strength, limitations, uncertainty, and references from structured props.
Limitations
Examples are illustrative and use local fixture content.
Uncertainty
Production content should cite actual sources.
References
- Local design tokens
- Component source files
Timeline
Step 1
Audit
Find every component and its required props.
Step 2
Centralize
Move shared variant options into typed source modules.
Step 3
Preview
Render the components together in one page.
Comparison
| Primitive | Block | Template | |
|---|---|---|---|
| Scope | Small UI element | Reusable page section | Article pattern |
| Source | components/primitives | components/blocks | features/templates/components |
Knowledge graph
- Tokens — Color, spacing, shadow, and radius values
- Types — Shared variant unions
- Fixtures — One demo data source
- Showcase — Rendered examples
- tokens → page (style)
- types → fixtures (validate)
- fixtures → page (render)
Article support components
Visual explanation
Sources
App chrome
Layout-level components are active on this page through the default layout.
The page is wrapped by SkipLink, SiteHeader, and SiteFooter. The header and footer both consume the same navigation array from the layout, so the Components link is defined once there.