Brand Guidelines Design Kit – DEMO

Figma Resource

Component-based framework to automate brand design work.


UPDATE New Version 3 Released


Brand Design Kit v3 Full Version

(Includes Color Modes and Variables)



Demo Video



Full Version


How to use

  1. Define visual direction
  2. Create a brand style guide
  3. Expand framework by developing reusable components


Brand Style Guide Pages

  • Cover Page
  • Mission Statement
  • Logomark Construction
  • Logo Construction
  • Mono Color Logo
  • Alternative Backgrounds
  • Clearspace
  • Minimum Size
  • How Not To Use Logo
  • Primary Colors
  • Secondary Colors
  • Neutral Colors
  • Examples of use
  • Color Usage
  • Thumbnail Mark
  • Typography – Fonts
  • Typography – Headers
  • Typography – Body
  • Watermark
  • Photography
  • T-Shirt
  • Hanging tote bag
  • Business Card


Supportive Tools

  • Moodboard to ideate, collaborate and share visual direction.
  • Font Pairing
  • Ready to Print Business Card Template
  • Web Page Preview


Automated Ad Templates for Social Media

  • Facebook
  • Instagram
  • Twitter
  • LinkedIn
  • Youtube
  • Pinterest
  • Twitch
  • TikTok