Brand Guidelines

Welcome to BrandStack’s Brand Guidelines
‍
These guidelines are your key to maintaining a consistent brand identity across all touchpoints. They outline how to use our logo, colours, typography, and other design elements, ensuring that every communication reflects our values. By following these instructions, you help keep the BrandStack identity strong and recognisable. Consistency is crucial, and these guidelines ensure our brand stays clear and cohesive in everything we do.

Positioning

Value Proposition

BrandStack is the one-stop shop for B2B SaaS startups looking to level up their brand, providing a mix of DIY resources and consulting services.

Mission & Vision

Most B2B brands suck. And they shouldn’t. Our mission is to help as many startups as possible get a brand that shows off their products in the best possible way. Why? Because when you nail your brand, you nail your business.

Values

Done is better than perfect — Always prioritise shipping stuff and iterating over agonizing over the smallest details.
Do something different — Don’t just blindly follow the usual ways of doing things, think about what you can do that’s fresh and exciting.
Always add value — Make sure everything you put out for our audience adds enough value that we aren’t just wasting their time.
Enjoy it — We aren’t saving lives here. Brand-building should be fun and creative and energetic, so let’s keep it that way.

Tone of Voice

We’re a branding supergroup. We love this work, but we also approach it from a perspective of restraint. We value creativity (obviously). But we won’t blow things out of proportion, cowboy-style. When writing for us, try to put on the “hat” of an agency owner who has frameworks they trust and have built over decades of experience. We know exactly when to get a little weird.
Full ToV guide

Colour

Palette

BrandStack's primary colours are designed to represent the brand's dynamic and distinctive personality, creating a harmonious yet striking visual identity.
Heliotrope
#CB88FF
Electric
#cff500
Sherwood
#0b3e26
Bone
#e1d1be
Wild Sands – Light
#f5f5f5
Wild Sands – Dark
#292929

Tints

Tints provide both lighter and darker variations of BrandStack’s primary colours, offering flexibility in design across UI elements like hover states and other interactions. This ensures clear visual feedback for users while maintaining a consistent and cohesive interface.
Wild Sands – Light to dark
50
#f5f5f5
100
#efefef
200
#dcdcdc
300
#bdbdbd
400
#989898
500
#7c7c7c
600
#656565
700
#525252
800
#464646
900
#3d3d3d
950
#292929

Gradients

Gradients add depth and dimension to BrandStack’s visual identity by blending two or more colours seamlessly that enhance backgrounds, buttons, and other elements.
Electric
Heliotrope
#cff500
#CB88FF

Typography

Fonts

Our primary typeface at BrandStack is the bold and expressive font called Obviously. Rooted in the charm of retro vinyl and hand-painted signs, Obviously brings personality and impact to every design. Its clean, modern lines make it perfectly suited for the digital age, ensuring our message is delivered with clarity and confidence across all platforms.
Download Fonts
Obviously Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890  ±!@#$%^&*()
Obviously Normal
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890  ±!@#$%^&*()
Obviously Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890  ±!@#$%^&*()
Obviously Semi-bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890  ±!@#$%^&*()
Obviously Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890  ±!@#$%^&*()

Hierarchy

Typography hierarchy is essential for clear and effective communication. By varying font size, weight, and spacing, we guide the viewer’s attention, making content easier to read and understand. This structure helps differentiate headings, subheadings, and body text, ensuring information is presented logically while reinforcing BrandStack’s identity.
Hero - Obviously Bold - 80px - 110%

Branding defines who you are

H1 - Obviously Bold - 64px - 110%

It shapes perceptions and builds trust.

H2 - Obviously Bold - 40px - 120%

Through consistent branding, businesses create lasting connections with their audience.

H3 - Obviously - 24px - 130%

A strong brand identity not only differentiates a company from its competitors but also fosters loyalty by resonating with customers on a deeper emotional level.

H4 - Obviously Medium - 14px - 140%

Ultimately, effective branding lays the foundation for long-term success by influencing every aspect of a business, from its market positioning to the customer experience, driving growth and sustainability.

P1 - Large - Obviously Normal - 24px - 150%
Ultimately, effective branding lays the foundation for long-term success by influencing every aspect of a business, from its market positioning to the customer experience, driving growth and sustainability.
P2 - Medium - Obviously Normal - 20px - 150%
Ultimately, effective branding lays the foundation for long-term success by influencing every aspect of a business, from its market positioning to the customer experience, driving growth and sustainability.
P3 - Regular - Obviously Normal - 16px - 150%
Ultimately, effective branding lays the foundation for long-term success by influencing every aspect of a business, from its market positioning to the customer experience, driving growth and sustainability.
P4 - Small - Obviously Normal - 14px - 150%
Ultimately, effective branding lays the foundation for long-term success by influencing every aspect of a business, from its market positioning to the customer experience, driving growth and sustainability.
P5 - Tiny - Obviously Normal - 12px - 150%
Ultimately, effective branding lays the foundation for long-term success by influencing every aspect of a business, from its market positioning to the customer experience, driving growth and sustainability.

Graphics

Icons

We use Phosphor icons across our UI and website to maintain a consistent and modern visual style. These bold icons are highly legible on all screens, enhancing user experience while keeping BrandStack’s design clean and cohesive. Their flexibility in style and weight ensures each icon aligns perfectly with our brand aesthetic.
Download Icons

Patterns

Typography hierarchy is essential for clear and effective communication. By varying font size, weight, and spacing, we guide the viewer’s attention, making content easier to read and understand. This structure helps differentiate headings, subheadings, and body text, ensuring information is presented logically while reinforcing BrandStack’s identity.
Zigzag Tear
Fill repeat pattern (any colour)
Outline repeat pattern