Skip to content
SproutAceve · v3.7.0
Get started
OverviewWhat is your role?Adopting SproutGetting startedInstallChangelogv3.7
Foundations
Brand & logosColorTypographySpacing & layoutElevationIconography
Components
OverviewButtonsInputs & formsData gridRibbon toolbarNavigation
Practice
Interaction & motionVoice & contentProduct patternsAI patterns
People & ethics
Design principlesPersonasUX ethicsTrust & direction
Playground
Build the systemplayTower of tokensplay
Behind the system
How it works
Components

Data grid.

The centerpiece of every estimate screen. Built for keyboard-first editing — click any cell to focus, the active cell gets a 2px info-blue border and a lime fill.

CodeDescriptionQtyUnitTotal
101.01Reinforced concrete C30/3712.40m³€ 4,218.00
201.02Reinforcement bar Ø12 mm890kg€ 2,140.00
301.03Wall formwork45m²€ 1,050.00
402.01Sand-lime brickwork148m²€ 6,290.00
502.02Facade pointing148m²€ 1,480.00
Click any cell. The lime fill is #E1FFAD — token --grid-active.

Spec

Row height45px (default), 24px (dense cell mode)
HeaderF5F5F5 background, Manrope Bold 14
Cell border1px hairline #E0E0E0
Active cell2px solid #148CC7, fill #E1FFAD
Selected rowAceve green left rule, 2px
Number columnsright-aligned, Cascadia Code 13 tabular
← PreviousInputs & formsNext →Ribbon toolbar
Sprout · Aceve Design System · v3.7.0
Figma library GitLabReleases