Styles
The example · Northwind's site uses 24 colours, 9 type styles and 27 icons. Analysis found 7 greys that match no token.
Capture reads the values your site uses and files them as tokens, one page per group. Values on the site that match no token show in Analysis.
Groups
| Group | Holds | Token example |
|---|---|---|
| Colors | Ramps by shade, and roles | brand/500 ink/2 |
| Typography | Font, size, weight, line height | text/body |
| Spacing | The steps your layout uses | space/4 = 16px |
| Radius | Corner sizes | radius/md = 8px |
| Shadows | Elevation | shadow/lg |
| Icons | Every icon and logo, as SVG | cart logo |
Names
Names use group/name. Renaming a token is a major change, because code uses the name.
Import a system
Start Styles from Tailwind, shadcn/ui, Material 3, Bootstrap or a tokens file. Imported tokens go to your draft.
Export
| Format | File |
|---|---|
css | CSS custom properties |
tailwind | a Tailwind theme |
scss | SCSS variables |
w3c | W3C design tokens JSON |
style-dictionary | Style Dictionary JSON |
figma | Figma variables JSON |
From the CLI: babul tokens --format tailwind.
Was this page helpful?
Yes
No
Updated Oct 22, 2026