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