README.md

Spacing & Layout Design System

This directory contains the spacing, radius, and sizing definitions for the application.

Usage

Import the CSS file in your HTML or CSS:

<link rel="stylesheet" href="/design-system/spacing/spacing.css">

or

@import url('/design-system/spacing/spacing.css');

Spacing Scale

Use these variables for padding, margin, gap, and positioning.

Pattern: --UI-Spacing-spacing-[Size]

• none: 0
• min: 2px
• xxs: 4px
• xs: 6px
• s: 8px
• mxs: 12px
• ms: 16px
• m: 18px
• ml: 20px
• mxl: 24px
• l: 28px
• xl: 32px
• xxl: 36px
• xxxl: 48px
• 4xl: 60px
• max: 90px

Border Radius

Use these variables for border-radius properties.

Pattern: --UI-Radius-radius-[Size]

• none: 0
• min: 2px
• xxs: 4px
• xs: 6px
• s: 8px
• m: 12px
• ml: 16px
• mxl: 20px
• l: 24px
• xl: 32px

Input Sizing

Standard heights for inputs, buttons, and interactive elements.

Pattern: --UI-Input-[Size]

• min: 26px
• xs: 32px
• sm: 40px
• md: 48px
• lg: 60px