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.



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

Normal

Hovered

[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

Stacks Basecamp

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"