The problem
A design system lives in your tool.
A design language lives in your team.
Most teams have a well-crafted library. Carefully named components, organized variables, thoughtful styles. But the moment a developer needs to reference it, a PM wants to understand it, or a new designer joins — it becomes a private archive that only a few people can actually read.
The system exists. The shared language doesn't.
Without Grails
- ✕Components updated, nobody notified
- ✕Tokens documented in a Notion nobody opens
- ✕Developers ask designers about every component
- ✕New teammates spend weeks learning the system
- ✕No record of what changed or why
With Grails
- ✓Every change logged with author and context
- ✓Docs live inside the component they describe
- ✓Developers inspect any component independently
- ✓The whole system is one search away
- ✓Your design system has a history
How Grails works
Every layer of your product.
Connected for the first time.
Grails maps the full hierarchy of your design system — from the atomic token to the user flow — and makes every relationship visible, navigable, and documented.
Tokens
Colors · Spacing · Typography
Components
Properties · Variants · States
Screens
Layouts · Dependencies · Flows
Flows
User journeys · Logic · Maps
Bidirectional relationships across every layer
Tokens
See what every component is made of.
Every component shows exactly which tokens it uses — color aliases resolved to their final values, spacing scales, typography bindings. Not as static annotations. As live, queryable data.
Screenshot → Component drawer, Tokens tab. Token list with color swatches and resolved alias paths.
Components
Know where every component lives.
See which screens use a component. From any screen, drill into the components that compose it. When something changes, you know exactly what it touches.
Screenshot → Screen node in Flow editor with Inspect drawer open showing component dependencies (Instances + Detached tabs).
Flows
The logic behind the design, finally visible.
Build visual maps of user journeys and screen sequences — connected to the actual components that make them up. Not a wireframe tool. A shared map that designers, developers, and product managers all read from.
Screenshot → Flow canvas with 4-5 connected screen nodes, aerial view.
Docs
Docs that live inside what they document.
Write usage guidelines, accessibility notes, and dev specs directly on any component, token collection, or flow — not in a separate doc that's always two versions behind. Open a component. See its documentation.
Screenshot → Documentation drawer stacked on top of Component drawer — showing the panel stack.
Beyond the plugin window
Your design tool is great at design.Grails handles everything else.
Plugin windows are small by necessity. Grails gives you the full web experience — a persistent, searchable, always-on home for your design system. Browse hundreds of components in table or grid view. Inspect token collections across all modes. Map flows. All without constraints.
- →Table and grid views for your entire component library
- →Token collections with multi-mode support (Light/Dark, Desktop/Mobile)
- →Full-page flow editor — not a sidebar
- →Persistent search across components, tokens, and docs
Screenshot → Components in Grid view with real component thumbnails and variant count badges
Always in sync
Know the state of your system.At all times.
Always know what changed. And who changed it.
A real-time log of every sync, documentation update, and team event. Who pushed what. When. No more "did anyone update the tokens?" messages.
Screenshot → Activity feed with avatars, timestamps, and grouped sync actions
A changelog for every component.
ProWhen a component changes, you decide: silent update or new version. Every version captures exactly what was added, modified, or removed. Your design system finally has a history.
Screenshot → Version History drawer — timeline with v1, v2, v3 and diff summary per entry
Built for everyone
Great products speak a shared language.Start crafting your own.
Designers
Sync your library. Add context. Mark breaking changes. Your work becomes legible to the whole team — without scheduling a design review.
Developers
Inspect any component: properties, variants, and token bindings. The X-Ray view shows you exactly how each screen is built, layer by layer. The answer to "what's the latest version of X?" is one search away.
Product Managers
Browse user flows, screen maps, and component documentation without opening a design tool. Understand what exists, what changed, and what's ready — at any time.
No seat limits. Invite everyone who works with the design system.
Get started
Up and running in minutes.
01
Connect your workspace
Install the Grails plugin in your design tool. Paste your team token. Done.
02
Sync your library
Components, variables, typography, and styles land in the Vault automatically. One click, everything imported.
03
Invite your team
Add designers, developers, and PMs. No seat limits. Each gets the right access level.
04
Connect the layers
Document components, map screens to flows, explore every relationship. Watch your library become a language.