Radius & borders
One clean outline defines each piece.
2px structural border and 1px separators, always whole pixels. Radii of 4, 8, 8 and 20px; pills and avatars use 999px. No overlapping duplicate outlines.
Current state
Decisions that already exist and can be observed in the product.
Controls, cards and overlays 8px; hero compositions 20px.
Internal separators may use 1px. The 3px focus ring is an external outline, not a second inner border.
Geometry tokens are included in brutallab-theme.
Strong border · 2pxCurrent tokens
Values present today; documenting them does not make every value final.
| Token | Value | Current use |
|---|---|---|
| --bl-radius-sm | 4px | Shared geometry |
| --bl-radius-md | 8px | Shared geometry |
| --bl-radius-lg | 8px | Shared geometry |
| --bl-radius-xl | 20px | Shared geometry |
| --border-strong | 2px solid var(--ink) | Shared geometry |
What is missing
Gaps that prevent this foundation from being a stable rule.
There are no open gaps in the current scope of this foundation.
Next decisions
Recommended order for turning findings into a stable foundation.
- 01
Keep the 2px border across states to prevent layout jumps.