Skip to content
SproutAceve · v3.33.1
Overview What is your role? Connect to Sprout MCP reference Adopting Sprout
Brand & logos Color Typography Spacing & layout Elevation Iconography Accessibility
Overview Alert Avatar Badge Breadcrumb Buttons Cards Checkbox Data grid Dialog Dropdown button Fab button Floating tabs Inputs Menu Navigation Numeric input Progress bar Progress ring Radio button Ribbon toolbar Switch Tabs Tag Tooltip
Interaction & motion Voice & content Product patterns
AI patterns AI transparency & disclosure AI disclosure label AI labels in marketing
Design principles Personas Trust and ethics Meet the makers
Build the systemplay Tower of tokensplay Site runnerplay
How it works Changelogv3.33 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
← PreviousRadio buttonNext →Switch
Sprout · Aceve Design System · v3.33.1
Figma library GitLabReleases