Colours and type
How Figma colour and text styles become your site's global colours and type settings.
Linked, not copied
A colour in the frame that matches a site colour is linked, by Figma style name first, then by value. Add the frame's colour styles to the site in one click and update them by name later, so a rebrand is one change instead of hundreds.
Figma plans
A personal access token works on every Figma plan. Pulling published colour, text and effect styles works on any paid plan. Figma Variables need Figma's Enterprise plan; without them, FrameKit reads your styles or your Foundations page instead.
Per builder
| Builder | Stored as | In the page | Type & space |
|---|---|---|---|
| Bricks | a "FrameKit" colour palette + global variables | var(--bricks-color-<id>) | text styles → a "FrameKit" theme style |
| Elementor | Kit global colours + custom colours | __globals__: { color: "globals/colors?id=…" } | Kit typography and spacing |
| Divi 5 | Divi global colours | $variable(…)$ | global variables for sizes and fonts |
| Oxygen 6 | Oxygen variables in a "FrameKit" collection | var(--<variable>) in a FrameKit class selector | text styles → selectors for body, h1–h6 and links |
| Gutenberg | theme.json palette | textColor / backgroundColor / borderColor | theme.json font sizes and spacing |