Define semantics on top of palette tints
in progress
Aurélien Grimaud
Problem
Palettes only expose primitive tints, so teams must recreate semantic naming (surface, text, border…) by hand in every editor and keep it in sync manually.
Proposed Solution
Add a UI context to define and visualize semantics mapped to primitives.
New semantic editing context, with an embedded example taxonomy (no default taxonomy injected)
- Figma: dedicated Variables collection referencing primitives; modes handled on primitives only; "Primitives" and "Semantics" style folders per palette
- Penpot: new Token Sets referencing primitive sets; themes handled inside primitives; same folder logic
- Sketch: primitive and semantic folders, styles and variables only, no cross-reference
- Framer: styles with auto-generated inverted color, plus Primitives and Semantics folders
- Generated documentation: shared template with a taxonomy breakdown table and associated colors
Any semantic can be excluded from code, documentation and all exports
Acceptance Criteria
- [ ] Users can define and visualize semantics linked to primitives in a dedicated context
- [ ] Primitive and semantic folders/collections are created per palette, even when semantics are empty
- [ ] Documentation includes the taxonomy table, empty but structured when nothing is filled
Excluded semantics appear in no export, no code and no documentation
Use Case
As a design system owner, I want semantic tokens generated from my palette so that product teams consume intent, not raw tints.
Additional Context
Back-end is ready: taxonomy and primitive ↔ semantic binding are implemented; remaining work is front-end. Exclusion is handled engine-side and needs follow-up for multi-document zip exports.
Market Opportunity
Moves the product from palette generator to full design system tooling, targeting the teams with the highest willingness to pay.
Aurélien Grimaud
updated the status to
in progress
Aurélien Grimaud
updated the status to
planned