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
Practice

Product patterns.

How Aceve products use the system in real surfaces. The same pieces re-arrange across Hantverksdata service planning, Ibis cost calculation, Pajadata ERP and KPD project control — one shell, many trades.

Anatomy of a screen

Six fixed regions

  1. Suite Header — 48px, full-width
  2. Sidenav — 64px rail, always visible
  3. Ribbon — 129px, tabs + groups
  4. Doc tabs — open estimates, browser-style
  5. Main canvas — data grid or list
  6. Right drawer — 340px, on demand
1 Suite2 Sidenav3 Ribbon4 Doc tabs5 Canvas6 Drawer

The drawer pattern

Version history, Activities, Columns, Styles — all share one layout.

Width340px — locked
PositionAnchored right, full height under Suite Header
Shadow--shadow-drawer (sharper than cards)
HeaderTitle 16/100 bold + close X — 48px tall
Animation240ms slide-in from right, no fade
DismissClick outside, Esc, or close X — all three work

Empty states

No estimates yet
Create a new estimate to get started.
Nothing recent
Estimates you open will appear here.
← PreviousVoice & contentNext →AI patterns
Sprout · Aceve Design System · v3.7.0
Figma library GitLabReleases