33 Great UI Style Guides for Sketch, Photoshop, XD and Illustrator

Last Modified: Feb 3rd, 2023 - Category: Freebies, UI Design
UX Style Guides

UI style guides are something that always comes in handy and that will simplify our work enormously.

According to Wikipedia, we can define a style guide as:

A style guide establishes standard style requirements to improve communication by ensuring consistency both within a document, and across multiple documents. Because practices vary, a style guide may set out standards to be used in areas such as punctuation, capitalization, citing sources, formatting of numbers and dates, table appearance and other areas. The style guide may require certain best practices in usage, language composition, visual composition, orthography and typography. For academic and technical documents, a guide may also enforce the best practice in ethics (such as authorship, research ethics, and disclosure), pedagogy (such as exposition and clarity), and compliance (technical and regulatory).

Source: Wikipedia

Although many times we will see projects that do not have an adequate style guide, having it will greatly reduce work time and team discussions.

One thing to note: it’s a common misconception to confuse UI style guides with UI kits. However, while similar, they’re not the same.

To make it better understood: A UI kit is a collection of elements that make up a user interface. For example, typography, colors, buttons, forms, layout, and so on. A UI kit can be found in both user interfaces and web design, and it always has an added technological aspect.

In contrast, a UI style guide is not as punctual when it comes to building interfaces or web designs. The style guides are broader, and have more to do with the brand image. It is for this reason that the style guides affect all the products and by-products of a brand: web, mobile apps, impressions, advertising, communication with users and many other dimensions that make brand design.

Of course, even if they are different things, there is a significant degree of overlap.

For comparison, imagine that you are going to build a building to sell your apartments.

The doors, windows, bulding height, architectural style, electrical installations and other construction elements are equivalent to the UI Kit.

And on the other hand, the decoration, the color of the paint, the style, the laws of coexistence between neighbors, the methods of sale, the tone of the advertising, the color of the posters or the neighborhood where the building is located are equivalent to the style guides.

As you can see there is an overlay, but the UI Kit is more related to the specific elements, while the UI style guides cover elements that go far beyond the interface, so they are more related to the user experience ( UX).

Having clarified the point, it is important to note that in this case they are UI style guides: that is, they are style guides that apply to user interfaces. Therefore, they are not as broad as the brand guidelines, but they are a little broader than a UI kit since they take into account these guidelines.

We use style guides on all projects, you can see some of them in our UX work portfolio.

Update 2023: New Style Guides in Sketch, Adobe XD, Figma and Illustrator.

UI Style Guides in Sketch Format 2023

​Sketch may be losing the dominant position it had at a time, considering that its market share dropped from 60% to 20%, but it’s still a great tool for prototyping. It’s also one of our pet peeves, as we’ve used Sketch prototyping at Dorve since its launch. So we have a soft spot for Sketch and will always love it!

free styleguides for Sketch App

Web Style Guide Sketch

This is a beautiful and complete style guide for small projects designed by Nicolaj Reck . It contains an assorted series of elements such as Color Palette, Typography, Icons, Buttons, Fields and Grids.

Also, the style guide is well organized and scalable, so you can add more elements as needed.

Download Web Style Guide Sketch

UI Style Guide Template

This is a style guide that not only includes the basic elements such as Color Palette, Typography or Buttons. But it goes one step further by including other useful elements like tooltips, Progress Bars or Tags.

It also contains color palettes ‘a la’ Material Design (i.e. main colors plus their shades and variations).

The style guide was created by Czech designer Marek Leschinger

Download UI Style Guide Template

Simple UI Style Guide

As the name suggests, this simple style guide by Faizur Rehman is… simple. So you should probably add many of your own elements. Useful for those who don’t have much experience with UI design or just need some boilerplate start point.

Download Simple UI Style Guide

UI Style Guides in Adobe XD Format 2023

free style guides for Adobe XD

Work with document assets in Adobe XD

This is not a resource to get free style guides, but a set of guidelines from Adobe to show you how to create your style guides in Adobe XD.

The tutorial is very comprehensive and includes tips and advice on how to get the most out of creating your style guides, as well as other tips that will help you increase your productivity.

Of course, since Adobe acquired Figma, XD ‘s days are probably numbered and it may no longer be worth bothering with Adobe XD. But for those who need something quickly (e.g., those who are currently working on an Adobe XD project and need to create style guides), it can be a help. Either way, knowledge never hurts!

Visit the Adobe website to learn about XD Guide Styles

UI Kits Adobe XD

This free Adobe Xd style guide by US designer Tyler Wain is a treat for anyone looking to break away from bright design schemes. This starter template for a dark-themed style guide is well done and looks like the work of a professional designer (which it obviously is). The designer promises to update the ‘Iconography’ section to include the open source Ionicons library. The font used in this design styleguide is Source Sans Pro.

Download Adobe XD Dark Theme Styleguide

UI Shopping Kit Adobe XD

This is a high quality UI Kit with all the features of Ecommerce, Online Shopping, & Marketplace Store App. It is beautiful and unique, with vibrant colors in the red tones. You can easily edit and customize all elements with design components, which can speed up the design process for your projects.

The design uses San Francisco font, so it has a very Apple-like look, which is not bad at all!

Download UI Shopping Kit Adobe XD

Zenmotors Design System Adobe XD

Amazing style guide designed by Sri Lankian designer Pasindu Madushan, very complete, simple and clear.

It includes all kinds of elements for both desktop and mobile devices, including fonts, labels, input forms, buttons, color palettes and more. The color styles are quite diverse, including solid colors and gradients. So, if you decide to use this design system, be aware of it, as mixing the two can lead to poor results.

Download Zenmotors Design System Adobe XD

UI Style Guides in Figma Format 2023

free style guides for Figma

Dark UI Style Guide Figma

This free and dark-themed style guide is very complete and stylish. However, it has some accessibility issues.
If you are considering using this style guide, we recommend that you check the accessibility of some of its components because most of them won’t pass an accessibility test.

Download Dark UI StyleGuide Figma

Style Guide Figma

Another amazing free style guide by Tyler Wain (mentioned above). This time with a complete style guide for almost every element you can think of, for every design token you can conceive and an additional page devoted exclusively to charts and diagrams. Probably one of the most complete design styleguides you’ll ever see, at least for free.

Download Style Guide Figma

Generic styleguide + UI kit

A very comprehensive style guide that also includes a UI kit, both absolutely free.

It contains all kinds of elements, as well as their variants and even microanimations and design behaviors. The design style and colors look a bit outdated, but otherwise it’s an impressive work. And you can change the colors and some elements on the fly, so it doesn’t matter much.

Download Generic styleguide + UI kit

UI Components Figma (Light and Dark mode)

On the linked page, Olena Kychun, the user experience designer who developed these components, says:

I do believe that great design begins from base components like color palette, typography, inputs, buttons, etc.

And we couldn’t agree more! This is a great UI kit plus design styles for a task management app. For those interested, the project is based on Atomic Design principles.

Download UI Components Figma (Light and Dark mode)

UI Style Guides in AI Format 2023

Free style guides in AI format for Adobe Illustrator

Brand Style Guide Illustrator

This is a very complete and nice style guide that you can use in your projects. However, there is only a free trial version with 6 pages and two sections (hence a freemium version). If you want the complete set, you have to pay for it.

The style guide is available for InDesign, Adobe XD and Adobe Illustrator

Download Brand Style Guide Illustrator

Brand Style Guide Template

The author has recreated the American Red Cross Brand Guidelines style guide in a highly customizable AI file that you can edit for your own brand design.
The style guide comes as a printable poster that includes several key elements and brand variables such as logo colors, typography, sizes, placements, and more.

The style guide is suitable for Adobe Illustrator and comes in AI, EPS and PDF formats in A3 size.

Download Brand Style Guide Template

Original content for this article starts below

This article has been improved and cleaned up to keep these resources fresh and updated. The following sources are those originally cited in this article (minus some resources that no longer exist)

UI Style Guides in Sketch Format

free ui style guides: Sketch styleguides

Bohemian Sketch is one of the most popular tools between UI and web designers. Although only available for Mac users, it became quickly popular. At the time of launch, it replaced the program of choice for many designers (Photoshop). Now it’s facing a lot of competition, including Adobe’s answer to Sketch: Adobe XD. Another app that is quickly getting a lot of traction is Figma, a firm contender in the UI design app battlefield

Web Style Guide Sketch Resource

This is very nice web style guide with the following categories: Typography, Colors, Bases, Icons, Buttons, Inputs, Selectors & Dropdowns.

The styles are simple, yet very complete, so you’ll be able cover most UI design elements (or maybe just add a few ones).

Download Web Style Guide Sketch

UI Style Guide Template

This is a beautiful style guide , very elegant and clean. It’s quite UX oriented, and features the following UI elements:

  • Intro
  • Intent
  • Attitude
  • Typography
  • Colors
  • Iconography.

Download UI Style Guide Template

Simple UI Style Guide

As its name suggests, a simple template, but suitable for most projects. If you’re a web designer rather than a UX or UI designer, this will probably be very helpful

Download Simple Style Guide


Responsive Style Guide

Responsive web design came to stay. Nowadays, it’s almost impossible to think about web design in fixed sizes, so having something that is useful for all device sizes.

In this case, we have a style guide focused on responsive formats, with representation of different formats (web, tablet, mobile).

It also contains a good explanation about the reasoning behind the construction of this guide.

Download Responsive Style Guide

How to create a UI style guide in Sketch in 3 seconds

In this case, we don’t have a template, but rather an article on how to create a style guide using Sketch and Craft from InVision.

The article is very short and simple, so even those starting with InVision and Sketch will probably understand it immediately.

See Tutorial on how to create a style guide in sketch in 3 seconds

UIDE Kit – Style Guide Template

Probably the most complete of the list, it includes all kinds of elements, even some you wouldn’t find on most style guides. Some of the included elements are:

  • colours
  • typeface & typography (before you open this file make sure you have Lato font on your mac 😉 )
  • buttons (small & large option)
  • text inputs (regular, hover, active + validation)
  • dropdowns (normal, hover and active)
  • switch (on/off)
  • checkbox (off, hover, on)
  • radio (off, hover, on)
  • slider
  • tooltips
  • calendar & date picker
  • 4 different graphs
  • tables
  • nav bars & menus (lot of them 😉 )
  • alerts

Download UIDE Kit – Style Guide Template

Tutorial: Create UI style guides in Sketch

Another tutorial, but this time much more complete (and complex). For those who need to understand how to build guides from scratch, especially for large projects.

Nevertheless, if your project is small, or even if you don’t have a design project, it’s a great resource to learn by example

See Tutorial on How to create UI style guides in Sketch

Style Guides in PSD Format

free ui style guides: Photoshop styleguides

PSD is the extension for Photoshop. While nowadays Photoshop has lost a good chunk of its users base, it’s still teh tool of choice for many designers, specially those oriented to web design. UI designers will probably feel more comfortable with Sketch, Figma or XD, but Photoshop still has a lot of fans!

UI Style Guide Template

Quite complete, with a good selection of design elements. It looks very good and it’s free, so, what else can you ask for?.

Download UI Style Guide Template

Template and Style Guide Tutorial

In this case, we have the PSD design template, but also the author Rafal Tomal teaches us the theory to build the guide, which we can adapt for our purposes. Attention: Requires free registration.

Watch and Download Template and UI Style Guide Tutorial

Style Tiles

A very interesting concept: Rather than a UI style guide, UI designer Samantha Warren builds something like a style pre-guide to avoid generating additional design work.

It includes both the tutorial on how to work with this concept, and a PSD template to get started. Personally, I see it as a very simplified style guide, but see for yourselves.

Watch Tutorial / Download

Style and Workflow Guide

This template made by French web designer Stephanie Walter is very complete and includes something that no one else considered: Accessibility.

The PSD file uses artboards, so at least the 2015 version of Photoshop is required. You can download this project from GitHub, which means you can fork the project.

Watch Tutorial / Download

How to Make the Perfect Web Design Style Guide

An article that includes an example PSD on how to create a “perfect style guide” (sic). The concepts are very good, and can be useful, especially for beginners at UI and web design.

However, I gotta admit I’m including this as a curiosity, since in my modest opinion this is not a style guide. Instead, it’s a nice example of how could a UI style guide look. Or, in other words: more a suggestion for an approach to web design guidelines than a style guide by itself.

Watch Tutorial / Download

Style Guides in AI Format (Illustrator)

free ui style guides: Adobe Illustrator styleguides in AI format

Adobe Illustrator style guides are mostly oriented to the presentation of such styleguides and guidelines in print format. This may include PDF as well, but it’s very common for large companies to have their style guides presented as books.

Brand Style Guide

Template for guides intended to be printed, kind of “old school”. It serves both for work projects and to present in a university task. Very useful indeed!

Download Brand Style Guide

Brand Style Guide Template

Another template designed to show web design and UI style guides in printing. It includes a PDF with instructions on how to use it. Simple and somewhat limited for professional projects, but it can work well as a complement to mood boards or for small design tasks.

Download Brand Style Guide Template

Cool Blue – Brand Guidelines Template

Excellent option for printed style guide manuals. It includes 8 pages in the free version, or 26 in the paid version. The price is small and it really deserves a look.

Classy, elegant and well designed, just the kind of design you’ll want to use to impress clients from big companies

Attention: requires registration to access the design template

Download Cool Blue Brand Guidelines Template

The Harmony – Brand Guidelines Book

Same as the one above, and made by the same designer.

This one is a beautifully designed, sophisticated 8-page brand image book, ready to print. Includes files in AI, INDD, IDML and PDF formats.

Attention: requires registration to access the design templates

Download The Harmony Brand Guidelines Book

Style Guides in Adobe XD format

free ui style guides: Adobe XD UI styleguides

As mentioned above, Adobe XD emerged as the answer from Adobe to Sketch. In order to gain momentum and steal some of Sketch’s market share, Adobe offers the app for FREE, which is very good news for most UI designers. Still, XD faces some fierce competition from Figma, which is free as well and has some very interesting features.

Free Adobe XD Styleguide

A simple, clean and yet complete style guide with well documented layers and all the basic elements you may need for most UI design projects.

While it lacks some complex elements, it has a very nice presentation and lots of color, which is always a good thing.

Ideal for basic web design projects that don’t have a lot of UI elements, or as a starting point for more complex style guides

Download Free Adobe XD Styleguide

Adobe XD Freebie-UI Style Guide

This is a free design resource created by UI designer Muharrem Yağan. And here, free design doesn’t mean demo-like, freemium or restricted. Quite the opposite, it’s an amazing resource like you have never seen before.

This MASSIVE UI Style Guide template includes everything: more than 500 UI elements, Bootstrap grids, Google fonts, color swatches, dark and light modes… it’s like a web design agency dream came true.

Probably one of the more complete UI kits I’ve ever seen, at least for free. A huge time saver, so be sure not to miss it!

Download Freebie UI style guide (sorry, the link is now dead, will replace it soon)

XD Web Design Style Guides

Another nice, clean and massive free resource, this time by Vivek Popat. You may argue on some of UX principles like usability and accessibility, but a great web design styleguide for most designers.

Also, while the author titled it as UI, this is mostly oriented to web design so I include it as such. With 300+ web design elements and free to download, there’s no much room to complain!

Download XD UI Style Guides

Free Dark Style Guide for Adobe XD

As the title says, this is free, and it’s dark. And I mean DARK. It’s nice, well presented and elegant. It will never pass any accessibility test, though.

Interesting as a concept or to evolve from this. Not recommended for use “as is”, unless you hate accessibility and UX guidelines with a passion!

Jokes aside, I really mean it: be really careful if you want to use this design resource.

Download Free Dark Style Guide for Adobe XD

Conclusion

UI style guides are of great importance for our projects. They will ease our work and provide a clear foundation for our projects. This is specially useful when working with other stakeholders such as other designers, programmers, marketing departments or the clients themselves.

We hope that the ones mentioned in this article will be useful to you!

Shameless plug: Here at Dorve we specialize in creating high end UX work which includes clearly documented style guides, user flows, research, etc. Contact Us if you need us to create a succesful, effective and well documented project

We can improve your business!

Let us help you with the best solutions for your business.

It only takes one step, you're one click away from getting guaranteed results!

I want to improve my business NOW!