Foundations

Spacing

Component spacing defines padding, label insets, icon size, and radius so controls stay aligned across pages.

Anatomy

Button and textfield spacing

Use the same inset rules for button labels and textfield titles so both components share a predictable rhythm.

ANATOMY

Icon (Optional)

Label

Icon (Optional)

Padding

Corner Radius

Buttons

x: 16px / y: 12px

Button content uses 16px horizontal padding and 12px vertical padding. Keep the visible title inset 12px from the left and right spacing guides.

Textfields

x: 16px / y: 12px

Textfield content follows the same 16px horizontal and 12px vertical padding. Field titles use 12px left and right indentation.

Icons

14px x 14px

Optional leading and trailing icons use a fixed 14px width and 14px height so labels remain visually centered.

QuickGuide

Use the anatomy values for buttons and textfields, then keep icon dimensions fixed inside the control.

Measurements

Usage

CSS

.c1-control {
  padding: 12px 16px;
}

.c1-control__title {
  padding-inline: 12px;
}

.c1-control__icon {
  width: 14px;
  height: 14px;
}