Brand kitsYour brand, set once across the whole site.
A brand kit gathers a site's colours, fonts, text sizes, corners, shadows and motion, in light and dark. Every block reads its values: switch brand kits and the whole site follows.
Updated on
On this page4 sections
One section, under every brand kit.
The same library block, with the same words, repainted by each of the 19 brand kits. Pick one to see it on a whole page.
A whole page, under the brand kit you pick.
A library page, rendered the way a published site shows it. Below it, the brand kit's sheet: every value its blocks read, in the chosen theme.
The brand kit editor, tab by tab.
Colours, fonts, shapes, grid: every setting repaints the project's home page, right next to it. Light and dark are tuned separately, in the same brand kit.
The "Change brand kit" picker.
The tabs: General, Colours, Typography, Shapes and motion, Grid and layers.
The theme you are editing: light or dark.
The three main colours: primary, background, text.
The project's home page, repainted on every setting.
The five tabs
The brand kit's name and its images: logos, tab icon, share image.
Primary, background and text first. Then the accents, the notification colours, the page surfaces and the text shades.
Any Google Fonts family, by name or link, with its size scale and weights.
The corner radius, the shadows, the spacing scale, the stroke widths and the easing curves.
The page width at each screen size, the columns, the gutter, the stacking order and the material of surfaces.
From the library to your site.
A brand kit lives in your workspace library. Each project keeps its own copy, which dresses the whole site.
Picked at creation
At the Studio's "The look" step: a brand kit from the library, "Let Kubbler choose", or "Create your own".
One copy per project
The project keeps its own copy: tuning it changes neither the library nor your other projects. In the Preview, the Brand kit button opens the picker.
The whole site follows
Saving rewrites the project's brand kit: every page, every section and every form take your colours and fonts. At build, only the classes your pages use are kept.
