Shape and density
Square enough to mean business — with one signature slant.
Radius
Most surfaces use an 8px radius: inputs, cards, dialogs and menus. Small controls use 4px. Avatars, switches and dots use full round.
Slanted controls — primary / outline / ghost buttons, tabs, the active sidebar item, and the floating marketing nav bar — use a 6px radius on the parallelogram.
4px
Checkboxes and small controls
6px · slant
Slanted buttons, tabs, active nav
8px
Inputs, cards, dialogs, menus
Full
Avatars, switches, dots
Slant
The Uktupus signature shape is a parallelogram:
- Outer control:
transform: skewX(-8deg)andborder-radius: 6px - Inner content (label + icons):
transform: skewX(8deg)so text stays upright - Focus ring follows the slanted shape
Build it once in the shared helpers (frontend/lib/ui/slant.tsx) and the shared Button component — never hand-roll skew per screen.
Where it applies
| Surface | Slanted? |
|---|---|
| Primary, outline, ghost buttons | Yes |
| Tabs | Yes |
| Active sidebar / menu item | Yes (only when active) |
| Module sidebar shell | No — standard sidebar |
| Marketing floating nav bar | Yes (bar shell; mega panel stays square) |
| Secondary, destructive, link buttons | No |
| Inputs, cards, tables, badges | No |
| Checkboxes, switches | No |
Why not cards and tables
The slant is an accent for actions and chrome. Skewing cards or tables would tilt the whole UI and make dense lists harder to scan. Keep reading surfaces square.
Density
Table rows are 36px by default. People who prefer more room can switch to comfortable 44px rows from their user menu.
Compact · 36px rows
Comfortable · 44px rows
Spacing
Spacing follows a 4px grid:
| Space | Used for |
|---|---|
| 8px | Between an icon and its label, and between buttons in a group |
| 16px | Between form fields, inside cards, between cards in a grid |
| 24px | Between sections of a page |
Elevation
Cards sit as soft #FCFCFB surfaces on the white canvas — no border, no shadow. Only things that float above the page cast a shadow: menus, popovers, dialogs and toasts.