Elevation & shape
Gazelle shapes are near-square — a 2px radius on containers and inputs, with full pills reserved for buttons. Elevation is deliberately soft and used sparingly.
Shape · corner radius
--radius-none · 0
--radius-sm · 2px
--radius-md · 8px
--radius-full · pill
Cards, inputs and containers use
sm; md suits larger panels; full is for buttons and badges.Elevation · shadow
--shadow-sm
--shadow-md
--shadow-lg
Token reference
Radii and shadows behave differently in Figma. Radii are real Figma
variables (a Radius collection you can bind to a corner), but Figma cannot
express a shadow as a variable — the three elevations exist as
effect styles instead.
| CSS variable | Value | Tailwind | Figma |
|---|---|---|---|
| Shape — radius | |||
--radius-none | 0px | rounded-none | radius/none · variable |
--radius-sm | 2px | rounded-sm | radius/sm · variable |
--radius-md | 8px | rounded-md | radius/md · variable |
--radius-full | 99999px | rounded-full | radius/full · variable |
| Elevation — shadow | |||
--shadow-sm | 0 1px 2px rgba(0,0,0,.06) | shadow-sm | shadow/sm · effect style |
--shadow-md | 0 4px 16px rgba(0,0,0,.10) | shadow-md | shadow/md · effect style |
--shadow-lg | 0 12px 40px rgba(0,0,0,.12) | shadow-lg | shadow/lg · effect style |