Design tokens are the smallest building blocks of our design system. They store visual design decisions like color, typography, spacing, and radii in reusable, machine-readable variables. Tokens bridge the gap between design and code—ensuring consistency, scalability, and easy updates across Rootflo’s products.
Think of them as “named values”: instead of writing a hex code #2563EB or 16px everywhere, you use tokens like color/primary or space/md. This allows design and engineering to speak the same language.
Rootflo builds AI agent platforms and dashboards for the BFSI ecosystem—products that must be scalable, secure, and adaptable across different contexts. Tokens give us a single source of truth for all design decisions, ensuring that colors, typography, spacing, and object styles look and behave consistently across:
Multiple products (Gold Loan Audit, Agent Assist, Supervisor dashboards, etc.)
Different devices (desktop, mobile, responsive environments)
Rootflo’s tokens are structured in two levels:
Base tokens (Brand collection in Figma)
These define the raw values like hex codes, pixel values, font families, and grid sizes.Example: color/blue-500 = #2563EB, space/16 = 16px.
Semantic tokens (Mapped collection in Figma)
These apply meaning and intent to the raw values.Example: color/text/primary = color/blue-500.Semantic tokens allow values to change with context (e.g., light vs. dark mode, or client-specific themes) without updating the entire system.
The anatomy of a design token explains how tokens are structured and named in Rootflo’s design system.
A base token name is broken into a hierarchy of parts separated by /, each part adding clarity about what the token represents.
The design tokens is accessible to designers and developers in Figma. Rootflo uses the variables feature in figma to showcase the tokens under the headings - Brand & Mapped
