Design System

Spatial system

A 4px base unit and nothing softer than 4px corners.

Every spacing value in the system is a multiple of 4px. Nothing is freehand. This keeps panels, buttons, inputs, and hero elements sharing a rhythm that an operator’s eye can trust.

The scale

SPACING SCALE · multiples of 4px space-1 4 px · inline-icon gap, micro chip padding space-2 8 px · intra-label gap, stack separator space-3 12 px · tag gap, row padding space-4 16 px · compact panel padding space-5 24 px · standard panel padding, grid gutter space-6 32 px · hero panel padding, section interior space-7 48 px · section gap space-8 64 px · hero surface gap

The 12-column content grid

CONTENT GRID · 12 columns · 24px gutter · 80px margin 80 80 24 24 24 12 columns · 24px gutter between each

Panel padding

Panels come in three density modes. Use them consistently - don’t invent new ones.

Mode Padding Where
Compact space-4 (16px) dense operator panels, inline components, mobile surfaces
Standard space-5 (24px) cards, dialogs, forms, default marketing surfaces
Hero space-6 (32px) hero sections, splash surfaces, in-product hero panels

Corners and borders

  • Borders. 1px, navy-600 at rest, electric-500 when active. Active borders in focus or selected states carry a --fdt-glow-xs halo.
  • Corner radii. Nothing softer than 4px in UI. Marketing surfaces may go to 8px sparingly. Hero display elements are square.