Brand kits
Brand kits live in the Forms area, on the Brand kits tab beside Forms and Saved sections. Each kit sets the colours, fonts, logo and shape a Form Studio form uses.
The Forms area shows when Form Studio is turned on for your workspace. On a plan without Form Studio, the screens show as a locked preview and nothing can be changed.
The library
The library has two lists.
| List | What it holds |
|---|---|
| Your brand kits | Kits in your workspace, as cards. The last card, New brand kit, opens the New brand kit dialog. |
| Templates | Read-only starter kits. Copy makes a kit in your workspace and opens it. |
Each card shows a sample drawn with the kit's own values: six colour swatches, "Aa" in the heading font and a button in the kit's button style. Under the name, the card shows how many forms use the kit and when it was last updated.
| Badge | Meaning |
|---|---|
| Default | The workspace's default kit. It is also marked on the New form page. |
| Contrast passes | Every colour pair passes the contrast check. |
| Contrast issues | Names the first failing pair and how many more fail. |
The actions menu on each card has these items:
| Action | What happens |
|---|---|
| Edit | Opens the kit in the editor. |
| Duplicate | Makes a copy of the kit in your workspace. |
| Set as default | Makes this kit the default. One kit is the default at a time. |
| Download tokens | Saves the kit's values as a JSON file. |
| Delete | Asks you to confirm. A kit used by a form cannot be deleted: move its forms to another kit first. |
New brand kit
The New brand kit dialog offers six starting points. Each one shows its own options below it.
| Option | What happens |
|---|---|
| Start from a template | Pick a starter from the grid. Create brand kit copies it and opens it in the editor. |
| Import from a website | Reads colours, fonts and spacing from a public web address. Import and review opens the review screen. |
| Upload a token file | Reads a W3C Design Tokens file or a DataLug theme file, then opens the review screen. |
| Upload CSS or DESIGN.md | Reads colours, fonts and spacing from the file, then opens the review screen. |
| Upload a logo and pick colours | Opens a new kit in the editor. |
| Ask Milo | Imports from a website, then Milo suggests colour roles and contrast fixes on the review screen. |
The editor
The editor shows the kit's settings on the left and a live preview on the right. The preview stays in view as you scroll and shows a filled field, a field with an error, a field with focus, radio options, and the primary and secondary buttons.
The top of the editor shows how many forms use the kit, and a badge with All colours pass or the number of contrast issues.
| Section | What you set |
|---|---|
| Logo and images | Upload, replace or remove the logo. PNG, JPEG, WebP and SVG are accepted. Scripts are removed from SVG files. Logo alt text describes the logo to screen readers; leave it blank when the form title names the brand. Share image alt text describes the logo in link previews. |
| Colours | Each brand colour as a hex value or from a colour picker. |
| Fonts | Headings and Body and fields fonts from the system fonts, the Google Fonts list or your uploaded fonts. |
| Shape | Corner radius from 0 to 20 px, Pill buttons, spacing (Compact, Regular or Roomy), buttons (Filled or Outline) and fields (Outlined, Filled or Underlined). |
Each colour shows what it is used for and a Pass or Fail badge with its contrast ratio. A failing colour names the colour it is checked against and the ratio it needs: 4.5 to 1 for text, 3 to 1 for borders and the focus outline. Use suggested offers a colour of the same hue that passes. Choosing it sets the colour and returns you to the hex value. Nothing changes until you choose it.
To upload a font, enter the font family name, pick a weight and choose Upload WOFF2. A kit can have up to two uploaded families. Removing an uploaded font sets any font that used it back to the system default.
Save changes saves the kit and Discard returns to the last saved values. A kit with a failing colour pair can be saved, but a form that uses it cannot be published until the pair passes. Changes to a kit reach a form's public page the next time that form is published. Leaving the editor with unsaved changes asks you to stay or leave without saving.
Importing a brand
An import reads the source and opens a review screen. Nothing is saved until you choose Create brand kit.
The review screen has these parts:
- Source: the website or file that was read, when it was read, and how many colours, fonts and sizes were found. Import again starts over.
- Warnings: colour pairs that fail the contrast check, each with a suggested colour, roles with no colour, and fonts that are not on Google Fonts. The list updates as you change the review.
- Colours, each with a checkbox to keep it, where it was found and a role picker, such as primary or text. Giving a colour a role another colour holds moves the other colour to Not used. Select all ticks or clears every colour.
- Fonts and sizes, each with a checkbox to keep it and a badge for Google Fonts or system fonts. A font that is not on Google Fonts has a replacement picker.
- Notes about values that were skipped.
Anything left unticked uses the default value. The Proposed brand kit panel lists each colour role with its kept colour or Starter value, a summary of what is kept, and the number of contrast issues. Create brand kit saves the kit and opens it in the editor. Cancel leaves without saving.
Ask Milo on the review screen suggests a role for each colour and a fix for each failing colour pair. Apply changes that row. See Milo in Form Studio.
Reloading the review screen clears it. Choose Import again to start over.