Behind the system

From Figma to every Aceve screen.

Sprout is one source of truth for design decisions. Here's the journey a token takes from a designer's Figma file to running code on aceve.design — and what your role is along the way.

The flow

Every token lives in five places. Hover any stage for who edits it.

Figma

MiniSprout file

Designer

tokens-repo

GitLab CI

Engineer review

@aceve/sprout-tokens

npm package

Auto-versioning

docs-repo

Renovate auto-bump

Engineer review

aceve.design

Vercel deploy

Auto-deploy

FigmaVariables: colors, spacing, radii.
tokens-repoPulls Variables, builds Style Dictionary, opens an MR.
@aceve/sprout-tokensPublished on tag-push to the GitLab Package Registry.
docs-repoImports tokens. Code Connect publishes to Figma Dev Mode.
aceve.designLive in ~2 min after merge to main.

Follow a token

Pick one. See the same value through five passport-stamps — Figma, JSON, CSS, JS, and a live render below.

01
Figma Variable
Source of truth — designer edits here
MiniSprout / VariablesLight
color/primary/700#447952

DTCG JSON

tokens-repo · auto-synced from Figma

"primary": {
  "700": {
    "$value": "#447952",
    "$type": "color",
    "$description": "Primary brand. Buttons, links, active state."
  }
}

Generated CSS

Style Dictionary build · :root + dark

:root {
  --sprout-color-primary-700: #447952;
}

[data-theme="dark"] {
  /* flips to lime for AA contrast on dark */
  --sprout-color-primary-700: #447952;
  --sprout-accent-default: #BDD78F;
}

JS API

@aceve/sprout-tokens · for swatch grids, charts

import { COLORS } from '@aceve/sprout-tokens';

const aceveGreen = COLORS.brand.find(
  (c) => c.token === '--sprout-color-primary-700'
);
// → { name: "Aceve green / 700", value: "#447952",
//     token: "--sprout-color-primary-700",
//     role: "Primary brand. Buttons, links, active state." }

05
Live on aceve.design
You're looking at it
Reads --sprout-color-primary-700 at runtime — switching theme or bumping the tokens package updates it automatically.

Your role

The same pipeline, four different vantage points.

Why this matters

Three commitments the pipeline keeps.

Single source of truth.

Change one color in Figma → all 30+ Aceve products get the update the same week. No coordination meeting required.

No drift.

Every token is defined in one place. If you see #447952 hardcoded in a PR — that's a bug, and the linter catches it.

Reviewable change.

Every update ships through a PR with a diff. No surprise deploys. Every trigger is traceable in the changelog.

Where to next

Three places to dig deeper.

Read the changelogWhat landed, when, and why Browse tokensAll colors, click-to-copy Install the packagenpm, CDN, or Figma library

← PreviousTower of tokens