domains / families / design / corner-diagonals

corner-diagonals

separate

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.

When to use

• Apply only to buttons, cards, panels, and container shells.
• Use when surfaces need diagonal-cut corners or chamfered edges.
• Keep the hit area readable and usable even when the visual shape is clipped.
• Reuse the same corner logic across surfaces so it feels like a system.

When not to use

• rounded pills
• plain rectangles

Skill page

Source