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

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.12.1
Figma library GitLabReleases