Design kits

A design kit is a reusable set of named colors, text styles and number tokens that you apply to layers in the Studio. Kit colors stay linked to the layers that use them, so changing one swatch recolors every bound layer in your project at once.

If you make more than one piece for the same band, client or zine series, a kit saves you from retyping the same hex codes and font sizes over and over. It also keeps a multi-page project consistent: the headline on page one and the headline on page twelve come from the same style.

Opening the kit panel

Click Kit (the palette icon) in the top bar of the Studio. A panel drops down with three parts:

A dropdown listing your kits, with the active kit selected.
A + button (New kit) and a ... button (Kit options) next to it.
The active kit's Colors, Text styles and Numbers sections.

The panel closes when you click anywhere outside it. Color pickers you open from inside the panel do not close it, so you can edit swatches without losing your place.

Tip: When nothing is selected on the canvas, the right panel also shows a Design kits group. It lists every kit with a preview of its first six colors. Click one to make it the active kit.

The starter kit

Every account starts with a kit called BitGrain Starter Kit. It gives you something to work with straight away:

Section	Tokens
Colors	Ink `#0a0a0a`, Paper `#f5f0e6`, Accent `#820000`, Muted `#6b7280`
Text styles	Heading (Space Grotesk 700, 64px), Subheading (Space Grotesk 600, 32px), Body (Inter 400, 18px), Caption (DM Mono 500, 12px)
Numbers	Radius sm `8` (radius), Radius lg `24` (radius), Spacing `24` (spacing), Stroke `2` (stroke)

You can edit the starter kit like any other kit. If you delete every kit you own, Bitgrain puts a fresh copy of the starter kit back so the panel is never empty.

Creating, renaming and deleting kits

New kit: click +, type a name in the Kit name field and press Create. The new kit starts empty and becomes the active kit.
Rename kit: open ... and choose Rename kit.
Delete kit: open ... and choose Delete kit. You are asked to confirm, because deleting a kit can't be undone.

Only one kit is active at a time. The active kit is the one the panel edits, the one whose swatches appear in every color picker, and the one saved into your .btg file.

Colors

Color tokens are the heart of a kit. Each one has a name and a value.

Adding and editing colors

In the Colors section, click + (Add color). If a text, shape or vector layer is selected, the new color starts from that layer's current color. Otherwise it starts as #820000.
Click the name to rename it. The new name is saved when you click away.
Click the swatch (Edit variable color) to open the color picker and change the value.
Click the bin icon (Remove) to delete the color.

Binding a color to layers

Binding links a layer's color to a kit color, instead of just copying the hex value.

Select one or more layers on the canvas.
In the kit panel, click the check button next to a color (Bind to selection). The button is highlighted whenever something is selected.

What gets bound depends on the layer type:

Layer	Property bound from the kit panel
Text	Text color
Shape	Fill (for lines and arrows, their color)
Vector	Fill
Ink brush	Brush color

You can also bind from any color field that supports it. Open the color picker on a layer property and click one of the kit swatches in the row under the hue and alpha sliders. This works for:

text color (for text with a single color)
shape fill and stroke
vector fill and stroke color
ink brush color
frame and page backgrounds

When a property is bound, its color field shows the kit color's name with a small dot in front of it, instead of a hex code. That is how you can tell at a glance which layers follow the kit.

Changing a bound color everywhere

Edit a color's value in the kit panel and every property bound to it updates across all pages of the project, including layers nested inside groups and frames. This is the fastest way to try a different accent on a finished poster, or to produce a second colorway of the same design.

Unbinding

Pick any color that is not a kit swatch (drag in the color field, type a hex code, use a preset swatch or the eyedropper) and the link is removed. The layer keeps the new color and stops following the kit.

Note: Binding is stored on each layer. If you delete a color from the kit, bound layers keep their last color, they just stop updating.

Text styles

A text style stores a font family, weight, size, line height, letter spacing, text transform and font style. Each row shows an Ag preview in the style's font, plus the family, size and weight.

Add a style: click + in Text styles. If a text layer is selected, the new style is captured from it (Add style from selected text). If not, it starts as Inter 400 at 18px with a line height of 1.5.
Update a style: select a text layer you have tweaked and click the copy icon (Update from selected text) on a style row. The style now matches that layer.
Apply a style: select one or more text layers and click the check button (Apply to selected text). Other layer types in the selection are left alone.
Remove a style: click the bin icon.

Text styles are applied once, when you click. They are not live links like colors. If you later update the style, apply it again to the layers you want to change.

Numbers

Number tokens hold a single value in pixels plus a kind that decides where it can be applied. Add one with + in Numbers (it starts as 16 with the kind Value), then set the value with the px field and choose the kind from the dropdown.

Kind	Applies to	Sets
Radius	Shapes and uploaded images	Corner radius
Stroke	Shapes and vectors	Stroke width
Font size	Text	Font size
Spacing	Groups	Gap between children (see auto layout)
Value	Nothing	A note to yourself. Set a kind to apply it.

Select layers and click the check button (Apply to selection). Layers that don't match the token's kind are skipped, so you can select a whole page and apply a radius token without breaking your text.

Like text styles, number tokens are applied on click and are not live-linked.

Storage and sync

Kits are saved in your browser as you edit, so they survive a refresh even when you are signed out.

When you are signed in, each change is also sent to your Bitgrain account a moment after you stop editing. When you open the Studio on another browser or device, your account's kits are loaded and replace the local list. If Bitgrain can't reach the server, your local kits stay as they are.

The active kit is also written into the .btg project file when you save one. Opening that .btg later adds the kit back to your list (or updates it, if you already have it) and makes it active. When you are signed in, a kit opened this way is also saved to your account. That is how you hand a kit to a collaborator: send them the project file. See accounts and saving for more on .btg files.

A practical setup

Create a kit named after the client or project.
Add four to six colors: a background, a text color, one or two accents and a muted tone.
Style one heading and one body text layer by hand, then capture both with Add style from selected text.
Add a radius token and a spacing token.
Build the design, binding colors as you go.
When the client asks for "the same, but in green", change one swatch.