Design systemRadius and elevation
Corner radius, border widths and shadows. Flat by default; shadows only for things that float.
All three come from src/ui/colorography/tokens.css.
Radius
| Token | Use for |
|---|---|
--radius-sm | Chips, inline code, small tags |
--radius-md | Buttons, inputs, cards, menus, table containers |
--radius-lg | Dialogs and large panels |
--radius-pill | Pills, avatars and round icon buttons |
Borders
Use --border-default with --color-grey-200 for card and input outlines, and --color-grey-100 for dividers inside a card.
Shadows
Petavue is flat. A surface that sits on the page uses a border, not a shadow. Shadows are for things that float above the page: menus, popovers, tooltips and dialogs.
| Token | Use for |
|---|---|
--shadow-sm, --shadow-md | A card that lifts on hover |
--shadow-lg | Menus and popovers |
--shadow-focus | The focus ring on inputs and buttons |
--shadow-error-focus | The focus ring on an input in an error state |
.campaign-card:hover {
border-color: var(--color-grey-300);
box-shadow: var(--shadow-md);
}Shadow and overlay in Figma
The Figma design system ("Shadows" frame) specifies one shadow for floating cards and one overlay colour behind dialogs.
/* Figma: drop shadow, x 0, y 12, blur 12, spread 8, #7A7A7A at 8% */
box-shadow: 0 12px 12px 8px rgba(122, 122, 122, 0.08);/* Figma: overlay #444444 at 40% */
background: rgba(68, 68, 68, 0.4);Neither value exists as a token in the code yet. The closest, --shadow-lg, is 0 4px 12px rgba(31, 33, 46, 0.1), and dialogs in the app each pick their own scrim colour. Until tokens are added, use the values above for anything new that floats or dims the page.