Spacing

Consistent spacing makes an interface calm and easy to scan. Home Assistant uses a spacing scale in steps of 4 pixels.

Use these tokens for padding, margins, and gaps. The small steps are for space inside components, the larger ones for space between them.

• --ha-space-14px
• --ha-space-28px
• --ha-space-312px
• --ha-space-416px
• --ha-space-520px
• --ha-space-624px
• --ha-space-728px
• --ha-space-832px
• --ha-space-936px
• --ha-space-1040px
• --ha-space-1144px
• --ha-space-1248px
• --ha-space-1352px
• --ha-space-1456px
• --ha-space-1560px
• --ha-space-1664px
• --ha-space-1768px
• --ha-space-1872px
• --ha-space-1976px
• --ha-space-2080px

Rounded corners are part of the character of Home Assistant. Cards and dialogs are generously rounded, small elements less so. Buttons and chips use the pill shape.

• --ha-border-radius-sm4px
• --ha-border-radius-md8px
• --ha-border-radius-lg12px
• --ha-border-radius-xl16px
• --ha-border-radius-2xl20px
• --ha-border-radius-3xl24px
• --ha-border-radius-4xl28px
• --ha-border-radius-5xl32px
• --ha-border-radius-6xl36px
• --ha-border-radius-pill9999px
• --ha-border-radius-circle50%
• --ha-border-radius-square0