# Radius & Shadow

> The four corner radii and six shadows used on renovare.org, and what each is for.

*Soft corners, quiet depth.*

## Corner radius

Four radii, plus one exception: letters use a 3px paper corner (`rounded-[3px]`). Values are at the site's 18px root.

| Radius | Value | Class | Use |
|---|---|---|---|
| Default | 4.5px | `rounded` | Buttons, cards, inputs |
| md | 6.75px | `rounded-md` | Badges, images and media tiles, podcast covers |
| xl | 13.5px | `rounded-xl` | CTA panels and large feature boxes |
| full | 9999px | `rounded-full` | Avatars and round icon buttons only |
| Letter (exception) | 3px | `rounded-[3px]` | The paper sheets of a Letter |

`rounded-sm` and `rounded-lg` are retired: use Default or md for small surfaces, xl for panels. Pill shapes (`rounded-full`) are only for avatars and round icon buttons — not for badges, tags or buttons.

## Shadows

Shadows are for things that float or images that need to lift off the page. Cards and panels don't get them. Letters have their own soft paper shadow (see [Boxes & Cards](https://styleguide.renovare.org/boxes/)).

| Class | Use |
|---|---|
| `shadow-sm` | Inputs and small raised controls |
| `shadow-md` | Dropdowns and tooltips |
| `shadow-lg` | Floating UI (sticky CTA, page nav) and letters |
| `shadow-3xl` | Photos, video and podcast art |
| `shadow-4xl` | Media on hover |
| `shadow-5xl` | Large hero media |

Values are in the tokens file (`shadow.*`).

`shadow-sm` through `shadow-xl` are tinted warm to match the neutrals. `shadow-3xl` through `shadow-5xl` fall down and to the left, as if lit from the upper right, so photos look like prints on a table. The old `float1`–`float4` shadows are retired.