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
Foundations

Color.

One brand colour, a deep neutral ramp, four semantic accents — and a notorious lime-green grid highlight. Every value here is reachable as a CSS variable so components stay theme-agnostic.

Brand — Aceve green

Sparingly applied — primary actions, active state, links.

Secondary — Entre orange

Pulled from the Entre acquisition. Destructive actions, alerts, and marketing accents only — never primary UI.

Tertiary — Entre blue

Informational links, badges, and selection rings. The 600 step is our focus-info accent.

Neutrals

Twelve steps from #000 to #FFF. The data grid relies on hairlines at --ink-100.

Semantic

Use sparingly. Info for selection rings, danger for destructive actions, grid-active for the cell highlight.

Pairings & contrast

Tested against WCAG AA at 4.5:1.

On Aceve green
#FFFFFF5.4:1 AA
Body text
#00000021:1 AAA
Secondary text
#6261616.3:1 AA
Brand on tint
#4479524.6:1 AA
Destructive
#D134385.0:1 AA
Active grid cell
#00000017.5:1 AAA
← PreviousBrand & logosNext →Typography
Sprout · Aceve Design System · v3.7.0
Figma library GitLabReleases