Skip to content
SproutAceve · v3.13.0
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 Numeric input 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.13 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.

Clipboard
View
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 var(--ink-3) label, centered
Group divider1×64px var(--line) 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.13.0
Figma library GitLabReleases