Design System Manager

#tokens & #components driven
Design, Prototype, Document and Development Platform
Goto DSM
Layout
Motion System
Augmented Fourth
Spacing
Augmented Fourth
Augmented Fourth 1.414
Typography
Display 1
Heading 1
Heading 2
Body
Small
Themes

Single Source of Design Tokens

Visual Token Editors
All token types in one single panel, right under your hands.
Immediately see the changes cascading through the whole design system.
DSM Panel on the left is interactive!
If you change the primary color or switch theme state, you will see the change below:
Themeable with System States
States are not limited to only color themes but might be for fast/slow transitions, multilingual copy text, or even for different versions of your design.
States let us manage multiple variations of design tokens and scale our design system.
Dividing variations into distinct sets results n-ary Cartesian product and all possible permutations.
Shape
Color
Filled
Yes/No
Theme Example
Switch Dark Mode
Harmonic Consistency with Modular Scales
Typescales, spacings, and motion duration tokens are auto-generated in harmony with the selected modular scale.
a
a
a
a
a
a
a
a
a
a
13
16
19
23
28
33
40
48
57
69
xx-small
2px
x-small
4px
small
8px
regular
16px
large
32px
x-large
64px
xx-large
128px
Motion System
With modular timing, ease, and transition tokens, motion is included in your design system from day one!
Ease-In
cubic-bezier(0.42, 0, 1, 1)
Ease-Out
cubic-bezier(0, 0, 0.58, 1)
Ease-In-Out
cubic-bezier(0.42, 0, 0.58, 1)
More Design Token Types
Design tokens are not limited to colors, typography, motion or spacing, but include
  • Borders and Radii
  • Transforms
  • Visual Effect Filters
  • Sounds
  • Microcopy, which is adaptable to voice and tone or is multilingual with help of system states.
Finally, Semantic Token Aliases let you build a level of abstraction upon design tokens.
Real-time Collaboration
With team subscriptions coming soon, everyone in the team can work simultaneously on the same design system project and see everyone's changes instantly.
The design system being the single-source-of truth in your workflow, each member of the team can work either from the plugins or from Toolabs web application at the same time.
Design-to-Code
Programmatically access to design tokens from GraphQL API, or
Use Export Widgets in documentation to export design tokens in various formats, e.g. CSS, Less, Sass, JSON, YAML, Js, Swift, or Android.
You can also define your custom format using handlebars template language.

First Design Tool with Responsive Pan & Zoom Canvas

Toolabs has an infinite pan & zoom canvas like Figma, Adobe Xd, and Sketch.
But it is also responsive like your browser! (Coming soon...)

Built-in Document Designer

Build your design system documents with an easy to use editor like Medium.com.
Enhanced with design systems related customizable widgets!

Notes & Roadmap

Learning Materials
We are working on building the Learn Center which will include documentation and tutorials.
If it does not help, please ask us anything from the support chat.
Team Projects
With the release of team mode, you will be able to share your design systems with team members. All the editors, plugins, and DSM Web, will access the same design system synchronously.
Pricing
It will be announced soon. We plan to provide both free and paid subscription plans.
Goto DSM

Plugins for