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