Foundations

Spacing & layout.

Everything snaps to a 4px grid. Twelve scale steps, four radii, six layout constants. The constants are sacred — break them and the ribbon misaligns.

Scale

Use scale tokens for component padding, rows, gutters.

--sprout-spacing-3xs2px

--sprout-spacing-2xs4px

--sprout-spacing-xs8px

--sprout-spacing-sm12px

--sprout-spacing-md16px

--sprout-spacing-lg24px

--sprout-spacing-xl32px

--sprout-spacing-2xl48px

--sprout-spacing-3xl64px

--sprout-spacing-4xl96px

Aceve uses very small radii. There are no soft consumer-style cards here.

0pxReset, full-bleed surfaces.--sprout-radius-none

2pxInputs, dense controls.--sprout-radius-xs

4pxDefault — buttons, grid cells.--sprout-radius-sm

8pxCards, drawers, dialogs.--sprout-radius-md

16pxMarketing surfaces, hero.--sprout-radius-lg

9999pxTags, badges, status pills.--sprout-radius-pill

50%Avatars, status dots, FAB.--sprout-radius-circle

Hard pixel commitments shared across every screen.

Suite HeaderAlways full-width across the top.48px

Sidenav railTiles are 64×64, icon 20px, label Manrope 10/13.64px

RibbonTab row + content + hairline.129px (32 + 96 + 1 shadow)

Right drawerVersion history, Activities, Columns, Styles.340px

Row heightDefault grid row.45px

Cell heightDense cell row.24px