Design context and tokens

Soffi works in your design system rather than around it. When it changes a screen, it reaches for the tokens and components your app already defines, so its pull requests read like your team wrote them. That depends on Soffi knowing your design system, and it learns it from your code when you set the Project up.

What Soffi learns

While it sets your app up, Soffi extracts your design tokens from the codebase: colors, spacing, typography and the rest, each with its name, category, value, and the file and line that define it. It also records where each token is used, down to the files and components.

From that it writes short guidance on your design system that goes into Soffi's context on every turn in every Workspace. The guidance names the token classes your app defines, so Soffi uses them instead of raw color values. It's kept small on purpose, to leave room for the code and conversation Soffi is working with.

Your Project's knowledge docs include a Design document covering the design system, CSS framework, component library and tokens, which Soffi also uses as context.

The Design system page

Open the Project from Projects in the left rail and choose Design system to see the tokens Soffi found. The page has three tabs:

• Tokens. Browse and search every token, filtered by category. This view is read-only. Token values are edited in a Workspace and ship as a pull request like any other edit. See Design System.
• History. Snapshots of the token set over time, with the current one marked Current, so you can see how the design system has moved.
• Deprecate. Mark tokens as deprecated so Soffi stops using and suggesting them. Use it for tokens you're phasing out, so new work doesn't spread them further.

Where drift shows up

Knowing your tokens is also how Soffi spots where the code has drifted from them. The project report scores your design system by finding hardcoded values where a token exists and components built by hand where your design system already has one, and its accessibility fixes name your own tokens rather than generic values.