Skip to content
SproutAceve · v3.12.1
Get started
Overview What is your role? Getting started Install Adopting Sprout
Foundations
Brand & logos Color Typography Spacing & layout Elevation Iconography Accessibility
Components
Overview Buttons Inputs & forms Data grid Ribbon toolbar Navigation Cards Dialog Tabs Context menu
Practice
Interaction & motion Voice & content Product patterns AI patterns
People & ethics
Design principles Personas UX ethics Trust & direction Meet the makers UX Strategi
Playground
Build the systemplay Tower of tokensplay
Behind the system
How it works Why it pays Changelogv3.12 Roadmap Contribute
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.12.1
Figma library GitLabReleases