Whale interfaces are dense and calm. Structure comes from a consistent radius ladder, compact control heights, and restrained elevation — not from decorative padding or heavy shadows.
The base radius is 0.5rem (8px). Use the ladder by role.
| Radius | Role |
|---|---|
| 4 | Compact status badge, category tag |
| 6 | Filter chip, pagination item, compact icon control |
| 8 | Button, input, select, inner attachment card (base) |
| 10 | Alert, toast, upload dropzone, summary block |
| 12 | Card, popover, menu, working surface, panel, drawer, dialog |
| full | Avatar, status dot, switch, pill search field |
- Outer radius ≥ inner radius. When nesting, step the inner radius down one level.
- Table cells and dividers stay square — do not round them.
Whale is compact by default. Control heights and the base text size are fixed; do not shrink them further.
| Token | Value | Role |
|---|---|---|
| Standard control | 28px | Buttons and most toolbar controls |
| Input / top-bar control | 32px | Inputs, top-bar search and chrome, avatar |
| Touch control | 40px | Deliberately prominent or touch-heavy entry |
| Table row | 44px | Default data row |
| Base text | 13px | Body and control text |
| Shell gap | ~8px | Gap between shell and working surface |
- Every functional container uses balanced internal spacing; prefer equal padding on all four sides.
- When horizontal and vertical spacing differ, left must match right and top must match bottom.
- The same component role uses the same spacing across surfaces. Do not manufacture rhythm with unrelated one-sided padding utilities.
- On both sides of a divider, give each side equivalent breathing room.
Prefer a border to a shadow. Reserve elevation for genuinely floating layers.
| Token | Value | Role |
|---|---|---|
| Card | 0 1px 2px rgba(0,0,0,.04) |
Maximum lift for a resting surface — a border is preferred |
| Scrim | rgba(24,24,27,.32) |
Blocking overlay behind dialogs, alerts, and drawers |
- Do not stack shadows or use elevation to manufacture hierarchy that the neutral scale and spacing can express.
- Floating layers (popover, menu, dialog, drawer) use radius 12 and the scrim where they block interaction.