Style Guide
Stacks Basecamp
stacksbasecamp.com
A brand style guide is a document that contains the graphical elements that make up the unique visual identity of a company or product. The style guide includes such things as logo usage, color palette, typography, and other design elements. A company's style guide is like its fingerprint - it's what makes it recognizable and sets it apart from the competition.
When it comes to designing the user interface for a website or app, it's important to use brand UI elements that are consistent with the style guide. This will create a cohesive and polished look that reinforces the brand identity. Using disparate or generic UI elements can give the impression of an amateurish or unprofessional operation.
With a well-designed brand style guide, you can control how your logo and other visual elements are used, what colors and fonts represent your company, and even the tone of voice you use in written communications. All of these elements come together to create a cohesive brand identity that will make your business stand out from the competition.
Logos
Your brand’s logo is one of its most important assets. It is often the first thing that people will see when they encounter your brand, so it’s important that it makes a good impression. A well-designed logo can communicate your brand’s values and give people a positive association with your company.
A strong logo should be simple, memorable, and recognizable. It should be able to work in a variety of contexts, both on digital and print media. And it should be adaptable to different sizes and formats.
Your logo is an essential part of your brand identity, so make sure you put thought into its design. Work with a professional designer if you can, and make sure you have a style guide for using your logo consistently across all touchpoints.
[ primary ]
[ icon ]
[ wide ]
[ black ]
[ white ]
Colors
Most companies have a set of brand colors that are used across all marketing materials. These colors are carefully chosen to represent the company in a certain way.
Companies spend a lot of time and money choosing the perfect brand colors, so it’s important to use them correctly. Incorrect usage can cause confusion and make your company look unprofessional.
When using brand colors, be sure to use the correct color values. These can be found in the brand style guide.
[ brand colors ]
Primary
#0000ff
Secondary
#c3d117
Tertiary
#38571a
Alert
#be38f3
Success
#f5ec00
Warning
#e63b7a
[ font colors ]
Headers
#444444
Headers Alt
#e32400
Text
#004d65
Text Alt
#561029
Links
#7c2a00
Links Hover
#aaaaaa
UI Elements
Your brand is more than just your logo. It's the whole package including the colors you use, the fonts you choose, the photos you take, and even the button style on your website. All of these elements come together to create a cohesive look that represents your business.
When it comes to choosing button style for your website, there are a few things to keep in mind. First, you want to make sure the buttons are easily clickable and visible against the background of your site. Second, you'll want to choose a color that matches your brand palette. And finally, consider using different styles of buttons for different purposes on your site (e.g., call-to-action buttons vs. navigation buttons).
By taking all of these factors into account, you can create a button style that perfectly represents your brand and drives conversions on your website.
[primary button]
Background
#f89527
Background Hover
#000000
Font Color
#232323
Font Color Hover
#ffffff
Font Size
32px
Font Weight
400
Letter Spacing
5px
Line Height
5px
Border Color
#b51a00
Border Color Hover
#006d8f
Border Width
4px
Border Radius
20px
[secondary button]
Background
#ff40ff
Background Hover
#61177c
Font Color
#785700
Font Color Hover
#ffc4ab
Font Size
24px
Font Weight
400
Letter Spacing
0
Line Height
0
Border Color
#002e7a
Border Color Hover
#fff2d5
Border Width
5px
Border Radius
25%
Normal
Hovered
Typography
Typography is one of the most important aspects of a brand style guide. It helps to create a unified look and feel for a brand, and can be used to communicate a brand’s personality.
There are many different ways to use typography in a branding context. Branding experts often recommend using simple, clean, and modern fonts for branding purposes. Sans-serif fonts are usually seen as more approachable and friendly, while serif fonts can be seen as more traditional and formal.
It’s also important to consider how different font weights will be used in a brand style guide. For example, using a light weight font for body copy can make it easier to read, while using a bold weight font for headlines can help them stand out.
[font families]
Title
Dancing Script
Body
Dancing Script
[ body font ]
Font Size
18px
Font Weight
400
Letter Spacing
Line Height
1.4rem
[ paragraph example ]
This is body copy. Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe?
[ title fonts ]
Heading 1
Font Size | Large
70px
Font Size | Medium
65px
Font Size | Small
35px
Font Weight
400
Letter Spacing
0
Line Height
96px
Heading 2
Font Size | Large
60px
Font Size | Medium
55px
Font Size | Small
32px
Font Weight
300
Letter Spacing
0
Line Height
0
Heading 3
Font Size | Large
50px
Font Size | Medium
45px
Font Size | Small
28px
Font Weight
200
Letter Spacing
0
Line Height
64px
Heading 4
Font Size | Large
40px
Font Size | Medium
25px
Font Size | Small
30px
Font Weight
200
Letter Spacing
0
Line Height
0
Heading 5
Font Size | Large
30px
Font Size | Medium
25px
Font Size | Small
23px
Font Weight
200
Letter Spacing
0
Line Height
0
Heading 6
Font Size | Large
25px
Font Size | Medium
20px
Font Size | Small
20px
Font Weight
200
Letter Spacing
0
Line Height
0
Spacing
When it comes to marketing and advertising, first impressions are everything. Your brand is how customers will perceive your business, so it's important to put some thought into developing a strong visual identity. Part of creating a cohesive brand is ensuring that there is consistent spacing between elements on all collateral.
Why is spacing important? It helps create visual balance and hierarchy, making your materials more legible and easy to scan. It also allows your logo and other key visuals to stand out and be the focus of attention. If you have too much going on in one space, it can be overwhelming for viewers and make your brand appear unprofessional.
[ container widths ]
large
800px
small
500px
large
divided by 3 to fit
800px
small
divided by 3 to fit
500px
[ large padding ]
62px
100px
content
24px
24px
[ small padding ]
32px
32px
content
32px
32px
Preview
Color Backgrounds for Padding Reference
Large Container
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
- Ordered and Unordered Lists.
- Simple Links: Stacks can use Markdown Syntax too.
- Simple formatting: Bold and Italic.
- Code snippets:
10 PRINT "HELLO WORLD"
Small Container
Writing in Markdown format is a simple and fast way to add styled text to your web pages.
- Ordered and Unordered Lists.
- Simple Links: Stacks can use Markdown Syntax too.
- Simple formatting: Bold and Italic.
- Code snippets:
10 PRINT "HELLO WORLD"
