Live theme laboratory

Same meaning, different visual voice

Use the selector in the navigation to switch this entire site among minimal, professional, and bold. The content and component contracts stay fixed while typography, color, surfaces, and emphasis change.

Try minimal Try professional 
style: bold
theme_selector:
  enabled: true
  options: [minimal, professional, bold]

style remains the default and no-JavaScript theme. The selector accepts only built-in themes, persists a visitor's choice, and makes shareable preview URLs such as ?theme=minimal.

What changes and what stays stable

  • Typography changes

    Each theme supplies its own heading and body families.

  • Surfaces change

    Borders, shadows, radii, and contrast express a different voice.

  • Meaning stays

    Semantic markup and content order remain unchanged.

- type: feature-grid
  heading: What changes and what stays stable
  items:
    - { title: Typography changes, text: Each theme supplies its own font families. }
    - { title: Surfaces change, text: Borders and shadows express a different voice. }
    - { title: Meaning stays, text: Semantic markup and content order remain unchanged. }

Forms in the catalog

Clodsite also includes mailto-form and resend-form. They are documented here rather than activated: a live form should represent a real contact workflow, sender identity, destination, and bot protection configuration, not a decorative specimen.