Skip to main content

Search

Articles in this section

Setup your Brand

Avatar
kaitlyn.fahey
  • Updated

 

This article applies to the following permission levels: 

❌ Contributor ❌ Author ✅ Admin ❌ Designer

 

Article contents Related articles
 

 

Overview

This article will show you how to setup your brand in Outfit's Brand System. 

 

Key terms

Brand System - a design system management tool. 

 

What is Brand System?

Brand System is a design management tool within Outfit. It's where you can define your logos, colours, typography and anything else that is important to your brand and brand system will codify those brand values for developers to use in design systems, applications, websites and templates.

 

How to setup your Brand System?

Brand System can only be accessed by Admin users. If you're unable to access brand system on your account, please speak with your Outfit Customer Success Manager to ensure this feature is enabled on your account and you have the permissions to manage your brand in Outfit. 
 
To setup your brand in Outfit:
  1. Head to Settings > Brand System.
  2. Switch to Colours, Logos, Typography, or Tokens in the sub-menu, depending on the brand element you would like to setup first.

Brand_system.png

Colours

To add colours to your brand system:

  1. Click New Colour. If you previously had colours setup in the Your Brand area of Outfit, which Brand System is replacing, you may want to choose Import from Account Settings.
  2. Given the colour a name.
  3. Enter the HEX, RBG or CMYK value for your colour. This will automatically populate the other fields. HEX and RGB always reference the same colour. But you can choose to unlink CMYK and add in your own values if you desire.
  4. Enter the SPOT value if known.
  5. Repeat steps 1-4 for all colours. 
  6. Click Finish editing when complete.

Colours.png

 

To organise brand colours into colour palettes:

  1. Click New palette.
  2. Give the palette a name.
  3. Select New colour.
  4. Choose the existing colour you'd like to add to your palette. If you select the wrong colour, you can remove it from the palette by clicking the three horizontal dots (⋯) next to the colour, followed by Delete. 
  5. Repeat steps 1-4 for all colours. If you'd like to re-order colours, you can do this by clicking and dragging the 6 dot icon next to the colour name. 
  6. Click Finish editing when complete.

Colour_palettes.png

Logos

To add logos to your brand system:

  1. Ensure you logos have been uploaded to the account Asset Library. Then head back to Account Settings > Brand System > Logos.
  2. Click New logo set. 
  3. Give the logo set a name.
  4. Click New logo. 
  5. Give the logo a name.
  6. Select Change.
  7. Search for the logo you previously uploaded / checked was in the Asset Library in step 1.
  8. Choose which background the logo should be displayed on from white, grey, or black. For example, you may choose a black background to contrast with a white logo.
  9. Repeat creating logo sets or adding logos until all desire logos are uploaded.
  10. Confirm Finish editing. 

Logos.png

 

Typography

To add a typeface to your brand system:

  1. Click Typeface. 
  2. Give the typeface a name.
  3. Select Add source. 
  4. Enter the Font CDN link or specify the name of your digitally accessible and web-ready fonts. A detail guide on how to do this is available here if you need further guidance. 
  5. Set a fallback font if applicable to this font. 
  6. Specify if a different font needs to be used for this font when the document is a web export or an email export.
  7. Repeat for all fonts.
  8. Confirm Finish editing when all fonts have been added. 

Typefaces.png

To add your type scale:

  1. Click New type scale. 
  2. Given the type scale a name.
  3. Specify type scale details including size (rem), font weight, line height, letter spacing, and any rich treatments like underline or italics. 
  4. Repeat steps 1-3 for all required type scales.
  5. Confirm Finish editing when all type scales have been added.

Type_scales.png

Tokens

To add tokens to your brand system:

  1. Click New token type.
  2. Give the token type a name. Token types are a way to group similar tokens together. For example, you may create a token type called 'Icons'. 
  3. Select Add set. 
  4. Give the set a name. Token sets are a way to group tokens within a type. Using the 'Icons' token type example from above, you may create a set called 'Blue Icons'. 
  5. Then select Add token. 
  6. Enter token details - name, key, and value. The name can be used as a way to easily identify a token. The key is the shorthand developers can use to reference the token. And the value is the token information. For example, you may enter the URL for where the icon image is publicly hosted.
  7. Confirm Finish editing when all tokens have been added. 

Tokens.png

Frequently Asked Questions

If you have a question on setting up brand system, please email support@outfit.io. Commonly asked questions will be added here.

 

 

Related articles

Comments

0 comments

Please sign in to leave a comment.