Shadows & Radius

Elevation shadows and border-radius tokens for surfaces and controls.

Shadows & Radius

The CESS FRSah design system uses standard Tailwind shadow and border-radius utilities. Cards typically use rounded-lg with shadow or shadow-sm.

Shadows

Elevation levels used for cards, buttons, and overlays.

Aa

Small

shadow-sm
Aa

Default

shadow
Aa

Medium

shadow-md
Aa

Extra large

shadow-xl
Aa

Drop shadow

drop-shadow-sm

Radius

Border radius tokens used across components.

Aa

Default

rounded

4px

Aa

Medium

rounded-md

6px

Aa

Large

rounded-lg

8px

Aa

Extra large

rounded-xl

12px

Aa

Full

rounded-full

9999px

Patterns

Common shadow and radius combinations from CESS FRSah.

Preview

Card

rounded-lg border shadow
Preview

Stat card

rounded-lg border shadow-sm
Preview

Primary button

rounded-md shadow-sm
Preview

Secondary button

rounded-md border
Preview

Public preview

rounded-xl border shadow-sm
Preview

Logo container

rounded-xl border shadow-md
Preview

Pill

rounded-full
Preview

Avatar

rounded-full shadow-sm
Preview

Dropdown

rounded-lg border shadow-xl
Preview

Sidebar menu

shadow-xl