Skip to content
Feature_07

Your design system, applied to every
page and QR code

Import the tokens your design team already maintains and turn them into themes. Change a theme and every page and QR code that uses it changes too.

Layout, widget and QR themes plus share-preview templates, built by hand or from an imported design system. Whatever your team, your agency or Claude publishes comes out looking the same.

The problem

The brand guide lives in a PDF and every piece reads it differently

Design keeps the colors and type in Figma, but campaign pages are built by someone else, sometimes an agency and now an AI too. Each one copies the values by hand. You end up with colors that don't match, generic black-and-white QR codes, and links that show a broken preview when someone shares them in a chat. When the brand changes, somebody has to check every piece one by one.

3
Import formats
4
Themes built from a system
5
Colors to repaint a theme
0
Assets deleted on re-import
How it works

From the design system to every published piece

Design system import

Upload W3C tokens (DTCG format) exported from Figma or Tokens Studio, a CSS variables stylesheet, or a Claude Design export. Colors, tokens, fonts, logos and code snippets become Brand Vault assets, and a report shows what happened to every item.

MODULE_ID: DS_IMPORT

Re-imports that never delete

Import a new version and values update in place, so every page that uses them follows. Anything your team edited by hand is kept, and anything the system no longer defines stays in the vault, flagged for review. An import never deletes anything.

MODULE_ID: DS_REIMPORT

A published style guide

A wizard publishes the system as a style-guide page or site, private by default, built from widgets linked to the assets. If you want, it also creates four themes: layout, widgets, QR and share preview. On the widget theme it fixes any color pair that falls below WCAG AA contrast.

MODULE_ID: DS_HUB

Layout and widget themes

The layout theme sets the logo, background, fonts, header, menu and navigation. The widget theme sets cards, icons, borders and per-widget styles. Each theme lists the pages and sites that use it before you change it.

MODULE_ID: LAYOUT_THEME

QR themes

Colors, dot and corner shapes, error-correction level and a center logo. Changing the theme restyles every code that uses it, and codes already in print keep working.

MODULE_ID: QR_THEME

Share-preview templates

The title, description and 1200 × 630 and 1080 × 1080 images people see when a link, page or site is shared on social media or in chat apps.

MODULE_ID: SHARE_TEMPLATE

What marketing teams use it for

01

A rebrand without rebuilding pages

Import the new version of the system and click "Re-apply themes": all four themes catch up with the current colors, fonts and logo. Anything someone adjusted by hand is reported and left alone unless you choose to overwrite it.

02

Repaint a theme with the brand palette

Pick five Brand Vault colors (accent, backgrounds, nested surfaces, text and secondary text) and the whole theme changes in one step. Values are copied when you apply them, so a later vault edit never restyles published pages without someone deciding to.

03

The same theme for another brand in the group

Export a theme as a file and import it into another workspace, or start from a preset. Every value is validated on import, and anything invalid is skipped and reported.

04

Claude builds with your themes

When Claude builds a page, it builds it with your workspace's own themes and assets. A theme change goes live immediately everywhere the theme is used, including changes Claude makes. For strict control, give people who use Claude a role that can't edit themes.

Direct_Answers

Frequently asked questions

linkable.id imports W3C tokens (DTCG format) from Figma, Tokens Studio or any compatible tool, CSS variables stylesheets, and Claude Design exports. Colors become color assets and every other value becomes a design token. Fonts that exist on Google Fonts are downloaded into your Brand Vault. Design system import is available on plans that include it.

In linkable.id, values that changed update in place and every widget using them shows the new value. Assets your team edited by hand are kept and listed as conflicts, and anything the new version no longer defines stays in the vault as an orphan. An import never deletes anything.

Yes. In linkable.id, every page, site and QR code that uses a theme changes immediately, and that includes changes made through Claude. Before you edit, each theme lists the pages and sites that use it. If your institution wants strict control, limit the permission to edit themes to a few roles.

When linkable.id builds the widget theme from a design system, it checks every text and background pair against WCAG AA. If a pair falls short, it uses another color from the system or a lighter or darker shade of the same one, and tells you how many colors it adjusted. The QR theme always comes out with a light field and dark dots so it stays scannable.

Yes. A linkable.id QR theme sets colors, shapes, error-correction level and a center logo. Changing the theme restyles every code that uses it, and codes already in print keep working because their destination is managed separately.

Want to see your design system turned into themes?

We will show you, in a test workspace, how a design system is imported, what the import report tells you, and how the themes apply to a page.

Request a demo