Buttons¶
Buttons are machined controls, not rounded pills.
Primary¶
| Property | Value |
|---|---|
| Shape | Top-left and bottom-right chamfer |
| Fill | Brand current gradient |
| Text | #FFFFFF, 500 |
| Height | 44px standard, 52px large |
| Horizontal padding | 20 to 24px |
| Hover | Increased luminance and restrained glow |
| Active | Translate 1px down, reduce glow |
| Focus | 2px cyan ring with 2px offset |
| Disabled | 40% opacity, no glow |
Secondary¶
Transparent or surface fill, one-pixel violet-gray border, cyan focus state.
Tertiary¶
Text action with an animated underline that travels along the master angle.
Destructive¶
Use Revocation Red. Never use the brand gradient for destructive actions.