Shape, Effects & Button Styles
Beyond colors and fonts, a lot of your site's personality comes from small structural details: how rounded your buttons and images are, whether cards have soft shadows or sit flat, and what your buttons look like by default. These settings live on the Shape & Effects tab and the Buttons tab, and the beauty of them is that they apply site-wide: set your corner style once and every button, card, and image across your site matches. That's what makes a site feel designed rather than assembled.
You'll find these in Site Settings → Branding → Shape & Effects and Site Settings → Branding → Buttons. Branding and Site Settings are available to Site Admins; Site Editors won't see them. The live preview updates as you change things.
Shape: corner rounding
"Shape" controls how rounded the corners are on different kinds of elements. Sharp square corners feel crisp and formal; rounded corners feel soft and friendly. You set rounding separately for each element type so you have full control:
| Element | Choices | What it affects |
|---|---|---|
| Buttons | Square → Pill | Your buttons' corners, from crisp squares all the way to fully rounded pill shapes |
| Cards | Square → Rounded XL | The content boxes that hold things like features, testimonials, and pricing |
| Inputs | Square → Rounded Medium | Form fields (the boxes people type into) |
| Images | Square → 2XL | How rounded the corners of your photos and images are |
| Icon badges | Square / Rounded Medium / Rounded Large / Circle | The small shapes behind icons (for example, a colored square or circle around a feature icon) |
| Avatars | Rounded Medium / Rounded Large / Circle | Profile-style images, like team photos or testimonial headshots |
A common, safe approach is to keep everything in the same family (for example, all lightly rounded, or all fairly square) so your site feels coherent. Circle avatars are almost always a good choice regardless of the rest.
Effects
Effects add depth and polish. There are three. Shadow depth sits at the top level; Border weight and Focus ring live under an Advanced effects section that's collapsed by default, so click to expand it if you want to adjust them.
- Shadow depth: how much of a drop shadow sits under cards and raised elements. Options: None (flat, minimal), Soft (a gentle lift), Medium (clearly raised), and Sharp (crisp, pronounced depth). Softer shadows feel calm and modern; no shadow feels ultra-minimal; sharper shadows feel bold.
- Border weight: how thick the outlines are around bordered elements. Options: None, Thin, and Medium. Borders and shadows are two different ways to define edges: some looks use one, some the other, some neither.
- Focus ring: the highlight that appears around a button or field when someone navigates your site using the keyboard (by pressing Tab). Options: None, Primary, and Accent. This is an accessibility feature. It helps visitors who don't use a mouse see where they are on the page. We recommend leaving it on (Primary or Accent) so your site stays usable for everyone; those colors simply tie the highlight to your brand.
Buttons
The Buttons tab sets the default look for buttons across your site. Two settings:
- Default primary style, the base appearance of your main buttons:
- Solid: a filled button in your primary color. The strongest, most clickable look, best for driving action.
- Outline: a button with a colored border and no fill. Lighter and more understated.
- Ghost: a button with no border or fill until you hover over it. The most minimal look.
- Primary shadow: whether your primary buttons have a subtle lift. Options: None (flat) or Soft lift (a gentle shadow that makes the button feel raised and tappable).
Because this is the default, it sets the baseline for buttons everywhere, so your calls-to-action look consistent from your header to your footer to every page in between.
How to set these
- Go to Site Settings → Branding → Shape & Effects.
- Choose your corner rounding for buttons, cards, inputs, images, icon badges, and avatars.
- Set your shadow depth, border weight, and focus ring.
- Switch to the Buttons tab and pick your default primary style and shadow.
- Watch the live preview, then save.
Good to know
- Everything is site-wide. These settings deliberately affect your whole site at once. That's what keeps buttons, cards, and images consistent everywhere. You don't style individual elements one by one.
- Presets set these for you. Each theme preset chooses a coordinated combination of shape, effects, and button style (for example, Minimal uses no shadows and ghost buttons; Bold uses large corners and sharp shadows). Applying a preset is the fastest way to get a matched set, and you can fine-tune afterward.
- Keep the focus ring on. Turning it off can make your site harder to use for keyboard and assistive-technology users. Primary or Accent keeps it on-brand while staying accessible.
- Related reading: Choosing Your Colors and Fonts & Typography.