Visual Style Guide – How does the business communicate visually?

Logo

A logo delivered in various different formats for print and digital. Typically, we’ll look for the following variations of the logo:

Icon - The visual representation portion of the logo. Typically, this is a square format logo with transparent background for versatility. This will be used in your favicon, your website logo, and all the various and sundry social media networks your are active on. Ideally this is built using vector graphics to ensure it scales well for larger and smaller formats. It also needs to be circular croppable to work effectively in cases when a circular crop is applied.
Wordmark - The text representation of the company.
Color Logo - A full color version of the logo with your standard background (typically white) and standard foreground color (typically black). Size of the logo is 250 pixels wide and 150 pixels tall. The logo contains a visual representation of the logo on the left side of the image and a wordmark - typically the company name - in text, on the right.
Black Logo - A black and white version of the color logo.
Inverse Color Logo - A full color version of the logo with your standard background color (typically white) now used as the foreground color and your standard foreground color (typically black) now used as the background color.
White Logo - A black and white version of the inverse color logo.

Generating Logo Options With AI

I like to use Midjourney to come up with a variety of different logo options and pick one that makes the most sense for the company. Typically I do that by first coming up with some abstract, text definitions for logos first. You can do that by attaching your Solution Overview to a Chat GPT query and enter a prompt like: "Review the attached document. Based on the attached document generate me text describing ten different potential ideas for logos. For each idea give me a name to the idea and a one paragraph description of the idea." That will give you a variety of text descriptions for potential logos. From those you can pick a few descriptions that resonate with you. At that point take those descriptions and drop them into Midjourney. Midjourney can quickly generate 100s of concepts and iterate on those you like. Find one you like that contains a icon AND wordmark per the above.

Color Palette

Primary brand colors. These are the basic foreground and background colors for the brand. These default to black in the foreground and white in the background. Don’t change these unless you feel strongly about it.
Secondary colors. Accent or “pop” colors that you use throughout your marketing assets to make things stand out or contrast with the base colors. We like to chose these in line with the brand personality. For example a vibrant brand personality can have some radically, “hot” choices. A restrained brand personality would have more mellow, cooler colors.

We like to provide all the colors in a table including all relevant corresponding color codes (HEX, RGB, CMYK, Pantone), usage guidelines and a render example of what the color looks like.

Typography

Defined fonts for headlines (H1 - H6), body copy, and any other commonly used elements such as bulled lists, definition lists, tables and the like. For each element define color (if different from base colors), sizing, weight, and hierarchy rules.

Imagery

Guidelines for the type, style, and tone of imagery to be used (e.g., realistic, illustrative, abstract, bright, muted), including examples of acceptable and unacceptable images. As with the icon this should be consistent with the voice you’ve defined in your written style guide. If you’ve got a wild, aggressive brand than you should have some wild image guidelines. You can know generate amazing images and videos in Midjourney and other image generation tools. Accordingly, we’re big fans of more aggressive and interesting imagery guidelines than every before.

Iconography

A description of your approach to icons including a consistent set of icons and guidelines for their design and usage. In my experience this is "nice to have" for marketing assets but it will quickly become a requirement for how you build your application. For 1 to 100 companies we use the the out of the box Baseplate visual identity for the application.

Generic Banner Image

Branded background with logo, tagline, and ties to corporate branding guide (above). This banner will be extended and modified for each different social network based on the requirements of each. Here we're building the banner we'll use as a basis for all the other banners.

Asset Library

Either as part of your guide or as a companion to it you should have a well organized set of files that includes the optimized images, videos, and other multimedia assets you'll need to use to develop content on a long term basis. More importantly this set of assets, plus your style guides, is what you can hand to third party to enable them to produce things that look and feel like your company.

Generating Other Fields With AI

I typically first generate a logo inclusive of a color icon and black and white wordmark. The color you use in your logo should, generally, map to the secondary colors that you define in your color palette. So what I like to do is land on a logo that has colors that I like. I then use that as a basis for building out the secondary colors. Here's an LLM prompt to do that:

Using what you know about this company and the attached logo create me a list of secondary brand colors suitable for us in a style guide. Secondary colors are accent or “pop” colors that will be used throughout our marketing assets to make things stand out or contrast with the base colors, black and white. Chose these colors in line with the brand personality. For example a vibrant brand personality can have some radically, “hot” choices. A restrained brand personality would have more mellow, cooler colors.

Provide all the colors in a table including all relevant corresponding color codes (HEX, RGB, CMYK, Pantone), usage guidelines and a render example of what the color looks like.

You can then generate the final items using a similar prompt:

Using what you know about this company generate me a Typography definition suitable for use in a visual style guide. Ensure that includes definitions for headlines (H1-H5), body copy, and specific elements, along with sizing, weight, and hierarchy rules.
Using what you know about this company generate me a Imagery definition suitable for use in a visual style guide. Ensure that includes definitions for the type, style, and tone of imagery to be used (e.g., realistic, illustrative, abstract, bright, muted), including examples of acceptable and unacceptable images.