Site Styles
Choose how your site looks and feels
Each style uses the same components. Layout, spacing, and shape are what change the overall visual tone.
Light & Elegant
Soft corners and lightly offset images
Bold & Compelling
Borders and straight corners
Friendly & Approachable
Pill buttons and rounded corners
What’s different between styles
A quick comparison of the most noticeable changes.
| What you will notice | Light & Elegant | Bold & Compelling | Friendly & Approachable |
|---|---|---|---|
Overall look of sections | Open and simple (content sits in the page) | Boxed and clearly separated | Soft, card-like grouping |
Shape of buttons and cards | Slightly rounded | Straight corners | Very rounded |
Outlines around content blocks | Usually none | Often outlined (borders) | Usually none |
Divider lines used to organize content | Rare | Common | Rare |
50/50 with image: does the image “lift” upward a bit? | Yes (slight lift) | No | No |
Eyebrow text in Hero | Yes | Yes | Yes |
Eyebrow text in other components | No | Yes | No |
Best fit when you want… | A clean, minimal presentation | Strong structure and clear separation | A softer, more rounded “card” look |
How to choose a style
| If you want your site to… | Choose Light & Elegant | Choose Bold | Choose Friendly |
|---|---|---|---|
Feel open and minimal | ✓ | ||
Clearly separate sections and content | ✓ | ||
Use framed or boxed layouts | ✓ | ||
Feel softer and more approachable | ✓ | ||
Emphasize structure with lines and edges | ✓ | ||
Use rounded, card-like content areas | ✓ | ||
Let content flow without visual framing | ✓ | ||
Support eyebrows beyond the Hero | ✓ |
How this fits with other visual systems
Site styles control layout, framing, and shape.
They do not change typography or how colors are applied.
Typography options and color roles are chosen separately and work consistently across all site styles. This separation allows you to adjust the visual structure of your site without affecting text styling or color behavior.
Accessibility
All site styles are designed to meet accessibility requirements.
Differences between styles are visual, not functional. Each style uses the same accessible components, interaction patterns, and content structure.
Choosing a site style does not change keyboard behavior, focus order, or semantic markup. Accessibility is handled at the component and platform level, not by individual styles.