# Show brand colors and fonts

> Lay out a palette and typography on your MockFlow board with the Color code and Font preview components: color names with hex and RGB codes, and font specimens, weights and type scales.

Source: https://mockflow.com/docs/show-brand-colors-and-fonts

A palette and a pair of fonts are the start of most visual work: a brand, a website, a poster series or a school club's logo. Two MockFlow components put them on the board where everyone can see and copy them: **Color code** for colors, and **Font preview** for typefaces.

![A surf school's brand colors as color codes, three full swatches with hex and RGB values and four circles, beside a font specimen and a type scale](https://assets.mockflow.com/docs/media/da7dcaad0988488e9bb13a4d95287c5d.webp)

## Add a color code

1. Click **Add anything** (the plus button) in the toolbar at the bottom of the board and choose **Color code**.
2. Click **Select color** in its toolbar and pick the color, or type its code.
3. Click **Change name** to give it a name, such as "Lagoon" or "Primary blue".

Anyone on the board clicks the swatch to copy its color code. The toolbar also has:

- **Toggle Hex code** and **Toggle RGB code:** show the color as a hex code, RGB values or both.
- **Shape style:** a **Full** card, a **Square** or a **Circle**.
- **Toggle Background**, **Padding** and **Corner Radius:** the card around the color.

## Add a font preview

1. Choose **Font preview** from **Add anything**.
2. Click **Change font** in its toolbar and pick from **Google fonts**, or use **Font file from uploads** for your own TTF, OTF or WOFF file.
3. Choose a **Preview type**: **Specimen**, **Alphabet**, **Pangram**, **Weights** or **Type scale**.

**Change the preview text** shows your own words in the font, such as a headline or the brand name. **Weight** sets how bold it is, and **Toggle font name** and **Toggle font details** show or hide the labels.

> **Plan** The Color code and Font preview components are available on every plan. See [MockFlow pricing](https://mockflow.com/pricing/).

## Next steps

- [Build a moodboard](/docs/build-a-moodboard)
- [Create a social post or poster with a Design frame](/docs/create-a-social-post-or-poster-with-a-design-frame)