​
Colors

While you can add as many colors as you want in your Makeswift site, we recommend you keep your palette as small as possible. If your team only has a handful of colors to pick from when creating an element, it will make individual work look much more cohesive. In addition, if you were looking to do a minor rebrand using different colors, it’s much easier to locate and replace colors on a smaller palette.
Try limiting your color palette to no more than 10 colors to keep it more manageable.

​
Text styles

Text styles ensure consistent typography across your website by defining fonts, sizes, colors, and other formatting attributes. This helps maintain a cohesive look and feel.
Block tags such as <p> and <h1> are set separately from text style.
With text styles, you can easily manage and update typography throughout your site. This simplifies maintenance and reduces the risk of inconsistencies.

​
Global components

Global components are primarly used to create reusable components that can be synced and updated easily. You can also use global components as starting points for sections by utilizing the “Detach instance” action after adding a global component to a page:
1

Build your global component

Build out a section that you would like to reuse as a template and save it as a global component.
2

Add the global component section to a page

Open your global component tray from the toolbar and add the saved section to a page.
3

Detatch the global component

This is the most important step. Detatching this instance allows you to make edits without affecting the base global component across your site.
Detaching a global component will break the link between the global component and the instance on the page. This means that any changes made to the global component will not be reflected in the instance on the page.

​
Organization

As your number of colors and text styles grows, how you organize these resources will be important to your building workflow.

​
Naming

Adding names to your colors and text styles is essential to staying on brand. Names are more recognizable than hex codes, and adding a name to your resources means you can search for them with ease.

​
Sorting and grouping

In addition to naming your colors and text styles, you can also sort them into a memorable order with drag and drop. Grouping colors by similarity and sorting text styles by descending font size order makes them easy to find.
The order you choose will also be the order your colors and text styles will be displayed during selection. Place your most common resources first so you can find them quickly.

​
Creating folders

If you have a lot of colors and text styles it can be helpful to group them into folders. You can create a folder by adding a forward slash (/) to the name of the resource. Once you have a folder, you can then drag and drop other resources into it. Folders are especially useful for grouping similar resources together. For example you might group variants of your primary color with a folder.
  • Primary/100 - Lightest primary color
  • Primary/300 - Light primary color
  • Primary/500 - Base primary color
  • Primary/700 - Dark primary color
  • Primary/900 - Darkest primary color
Folders add visual hierarchy to color and text style selection, and are also searchable just like other parts of the name.