Skip to content
SproutAceve · v3.22.0
Get started
Overview What is your role? Connect to Sprout 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 Alert Avatar Badge Dialog Tabs Floating tabs Menu
Practice
Interaction & motion Voice & content Product patterns
Artificial Intelligence
AI patterns AI transparency & disclosure AI disclosure label
People & ethics
Design principles Personas Trust and ethics Meet the makers
Playground
Build the systemplay Tower of tokensplay
Behind the system
How it works Changelogv3.22 Roadmap Contribute
Draft
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.22.0
Figma library GitLabReleases