Layout (Grid & Spacing)

Grid Foundation:

• Base Unit: 8px. All spacing, sizing, and line heights are multiples of 8.

• Micro-Unit: 4px. Used only for tight grouping (e.g., Icon + Text inside a button).

Spacing Tokens:

Used for margins, padding, and gap values.

• Space-XS (4px): Tight grouping (e.g., Tag label + close icon).

• Space-S (8px): Related elements (e.g., Label + Input field).

• Space-M (16px): Component padding (e.g., Inside a Card or Button).

• Space-L (24px): Section separation (e.g., Between Form Groups).

• Space-XL (32px): Container padding (e.g., Modal body padding).

• Space-2XL (48px): Page-level separation.

Responsive Grid:

Our grid system adapts to the viewport width to maintain optimal line lengths and component density.

• XL (Desktop - 1440px):

  • Columns: 12

  • Gutter: 24px

  • Margin: 48px

  • Behavior: Fixed-width container centered on screen. Ideal for dashboard density.

• L (Laptop - 1024px):

  • Columns: 12

  • Gutter: 20px

  • Margin: 32px

  • Behavior: Fluid width. Sidebars may become collapsible.

• M (Tablet - 768px):

  • Columns: 8

  • Gutter: 16px

  • Margin: 24px

  • Behavior: Stacked layouts. Data tables switch to card views.

Containers & Elevation:

• Surface Layer: The base background (Neutral-Primary).

• Card Layer: The primary container for grouped content. Uses Radius-L (12px) and Border-Neutral-Subtle.

• Modal Layer: High-priority tasks. Uses Overlay-Background (50% opacity) to focus attention. Centered vertically and horizontally.