Shape
The CADS shape system is broken into four categories: border radius, elevation, spacing, and stacking. Radius handles corners, elevation handles depth, spacing is the shared ramp for layout gaps, and stacking is the overlay z-index ladder.
Border radius
Border radius is broken into five steps from sm to round. Use the smaller values on compact controls, the larger ones on cards and panels, and round for pills. When nesting rounded elements, step down the scale so the corners stay concentric.
Elevation
Elevation is broken into three shadow levels: sm, md, and lg. Use sm for light lift on surfaces, md for menus and popovers, and lg when something needs to sit clearly above the page.
Spacing
Spacing is an 8px-based ramp for gaps between sections and components. Prefer these over one-off values; component internals already handle their own spacing.
Stacking
Stacking is a code-owned z-index ladder for portaled overlays — separate from elevation shadows. Menus and popovers share the modal layer so a Dropdown inside a Dialog or Popover paints above its host by mount order. Local in-component stacking (tabs, segmented controls) does not use these tokens.
| Variable | Value | Use |
|---|---|---|
| 1200 | Drawer (below centered dialogs) | |
| 1300 | Dialog and Modal | |
| 1300 | Dropdown menus and Breadcrumbs overflow (same layer as modal) | |
| 1300 | Popover (same layer as modal / dropdown) | |
| 1400 | Toast snackbar host | |
| 1500 | Tooltip and IconTooltip |