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

Ribbon toolbar.

The Office DNA. 32px tab row, 96px ribbon, 1px shadow — locked at 129px total. Groups are dividers, not boxes; the 1×64px hairline is the visual rhythm.

Home
Insert
View
Data
Help
Paste
Copy
Cut
Clipboard
Estimate
Take-off
Tree
View
Description
Add row
Override
Delete row
Rows

Anatomy

Total height129px (32 + 96 + 1)
Tab row32px, Manrope Semibold 14, 16px horizontal padding
Active tab2px Aceve green underline, body black
GroupEqual-height items + 10/12 #6C6C6C label, centered
Group divider1×64px #E1E0E0 hairline
Big button48×48 icon tile, 12/120 label below
Mini buttonIcon + label, 24px row

Group naming

Two words, sentence case, predict-the-contents. Don't pluralise unless natural.

ClipboardViewRowsOverviewTake-offLibrary
← PreviousData gridNext →Navigation
Sprout · Aceve Design System · v3.7.0
Figma library GitLabReleases