Supernova’s approach to design tokens
At Supernova, we don’t just treat tokens as a list of colors and values. To us, tokens are the translation layer between design and development — the connective tissue that keeps your system aligned across every file, platform, and product.
If you’ve defined your tokens once, they should scale everywhere. Across brands. Across design and code. Across teams. Across platforms.
That’s what Supernova is built for.
🪄 What is a design token (in Supernova terms)?
At the most basic level, a token is a name + value pair. But in Supernova, it becomes much more than that.
Every token becomes a rich, structured object that carries context — not just a hex value or spacing number. It’s fully aware of how it’s used, where it lives, and what it means to your system.
💡 Custom properties let you go even further. You can define your own fields (like Component usage, Brand relevance, Token lifecycle stage, or iOS-only?) and use them:
- In documentation to give tokens more context
- In code exports to generate platform-specific logic
- In filtering, grouping, and governance workflows
More info here → Token Properties
Supernova gives you structure out of the box — and flexibility when you need it.
💡 Figma variables + styles = tokens in Supernova
In Figma, variables and styles are separate concepts.
In Supernova, we unify them — because that’s how design systems should work.
You can:
- Reference variables inside styles (like a color token inside a text style)
- Sync both into Supernova
- See both represented as design tokens, complete with relationships and context
- Export both into code, automatically
This means your design decisions don’t just live on the canvas — they’re systematized, documented, and ready for production.
Why Supernova ❤️ tokens (and you should too)
Supernova treats tokens as a source of truth that scales. Once your tokens are in, we help you:
✅ Document them beautifully and clearly
✅ Distribute them to devs in the formats they need
✅ Automate code delivery across platforms
✅ Organize them by theme, mode, or brand
✅ Track changes with versioning and status fields
✅ Visualize how they’re actually used in components and docs
Whether you’re maintaining one product or fifteen, tokens let you make consistent decisions, and Supernova helps you deliver them without reinventing the wheel.
🛠 What tokens can power (with Supernova)
Take one token — say, color/primary/500. Here’s what Supernova can do with it:
- Sync it from Figma (via variable or style)
- Store it with full context (name, value, modes, type, description)
- Show it in a token table, grouped by collection or theme
- Use it in documentation blocks like Token Swatches
- Export it to multiple code formats: CSS custom properties, JSON, iOS (Swift), Android (AAR), Sass…
- Bundle it into packages for developers (npm, platform-specific packages)
- Deliver it straight into apps and products
🔁 One token → design, docs, code, production. No rework required.
TL;DR: Tokens = system scale
- Tokens in Supernova aren’t just values — they’re structured, scalable system objects
- We unify Figma variables and styles into tokens you can sync, document, and ship
- Once synced, tokens power your documentation, themes, and code automation — all from a single source of truth
Tokens let your design system breathe — across platforms, across teams, and across time.
