Skip to content
Smart Data Hub

Layout

Consistent spacing, calm rhythm, a 12-column grid.

Draft: not yet approved by the client

Layouts use the SDS spacing scale (4→128px), a 12-column grid, and container maxes of 1280 / 1180px (design-system.css). Section rhythm uses the section/section-sm spacing tokens; the brand data-pattern appears sparingly as a background accent, never a focal point (Brand Guidelines p.21).

Spacing

4px base scale

Space steps run 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 112, 128px. Gutter is 24px; section spacing is 112px (48px component xl). Keep generous whitespace around the logo and headlines.

Shape

Soft, functional corners

Buttons use 6px, inputs 8px, cards 12px; pill radius 999px for chips and CTAs. Never mix arbitrary radii outside the token scale.