Refined Professional

Shared theme wrapper

This site-level block renders before the page-local examples.

Use the shared layout wrapper to verify how global sections look in the refined-professional theme.

Refined Professional theme preview

Quiet contrast, serif-led hierarchy, and premium dark surfaces on one review page.

Jump to examplesSee all previews

Theme navigation sample

This compact control confirms route pickers stay readable in the active theme.

What this preview is for

  1. Fast visual QA

    Use this page to inspect how spacing, type, and CTA treatments land in the refined-professional theme.

  2. Component coverage

    Each supported component appears once so theme regressions are easier to spot.

  3. Stable content

    The copy stays intentionally synthetic so visual differences are easier to attribute.

What to compare between themes

  • Heading tone

    Compare how the same hierarchy feels when typography shifts.

  • Surface treatment

    Cards, dividers, and section framing should reflect the active theme tokens.

  • CTA contrast

    Primary and secondary buttons should stay readable without per-page CSS.

  • Long-form rhythm

    Prose, FAQs, and captions should stay balanced on the same page.

Theme example FAQ

Why does each theme only get one page?

The goal is quick comparison, so one page with full component coverage is enough.

Can these examples use placeholder content?

Yes. They are intended for layout and theme review, not for publishing.

Should the examples be built together?

Yes. The bulk examples build generates every theme preview in one deterministic run.

Build every theme example at once

Run the bulk examples build to regenerate the full preview set into dist/examples.

Browse all previewsSee pricing
The map component stays in the preview so iframe framing and spacing are visible in every theme.
Sample workspace image used for the refined-professional theme preview
Media is included with a caption so image framing and supporting text can be checked together.

Sample contact form

Theme previews also include a form so field spacing and button treatment stay covered.

This is a preview-only form block used for theme validation.

How to use this page

Scroll once and check every section against the same baseline content.

The preview fixtures are intentionally synthetic. They exist to make theme and component comparisons obvious without depending on customer content.

Because each theme file follows the same structure, visual changes are easier to attribute to theme tokens rather than content differences.

Shared theme footer

This repeated site-level footer confirms the theme can frame page content without duplicating JSON on every page.