Bitácora Help
Start free Go to the platform

Guide

Change colors, typography, and corners on every screen

In the Design System tab you change a color, a font family, or the corner radius on every screen at once, instantly and without using AI.

Who can do this

For
Designers, Your team
Role
“Can run with AI” and up
Plan
All plans, including Free
Where
On a computer
In Design System, the brand green is changed for another one in the six screens that use it, and the screens show it.

When the client changes their brand color or you want another typeface, you don't need to dictate it screen by screen. In Design System you change it once and it reaches every screen that uses it, the tokens, and the shared pieces, without going through the AI.

Open it

In the project, click the Design System tab. In narrow windows it's inside More views (⋯).

At the top you have three blocks: Colors, Typography, and Rounded corners. Each one shows the first item; See all expands the rest.

Change a color

  1. In Colors, find the color. Each card says how many screens it appears in (hover over it to see which ones) and, if it's also in the tokens or in a piece, Also in the token or the piece.
  2. Click Change.
  3. Choose the new color: with the picker, with its code, or from Other project colors. Below you see the Before and the After.
  4. Click Change in and the number of screens.

Where that color is used with transparency, it keeps it. The notice also says how many tokens and pieces changed. Clicking the swatch copies its code.

Unify nearly identical colors

If the screens use shades that are hard to tell apart, they appear together on one card marked nearly identical. Click Unify, choose The color that stays, and confirm: they all become that one.

Change a typeface

  1. In Typography, each family says where it comes from (Google Fonts or a file) and how many screens use it. The one marked Project font is the main one.
  2. Click Replace and choose another family from the project, One from Google Fonts…, or Upload a font… (TTF, OTF, WOFF, or WOFF2, up to 8 MB).
  3. Confirm with Replace.

You can also drop a font file onto the family you want to change.

Change the corner radius

  1. In Rounded corners, click Change on the radius you want.
  2. Move the slider or type the pixels. The sample card shows you how it looks.
  3. Click Change in and the number of screens.

Pills and circles aren't changed here.

Go back

Each screen saves the change in its history: open it and, in Latest changes, click Restore this version. It's undone screen by screen. A screen's history explains it.

What you ask for with a note

Here you change an exact value. Anything derived from it, like a darker shade for hover, or creating the project's tokens, you ask for in a note. The AI changes the tokens first, then the style guide, and then the screens.

Changing is for the Owner and anyone who Can run with AI; the other roles can see it.

Was this helpful?

Related