Style Guide for

Welcome to our Branding Style Guide.

This document isn’t just a set of rules; it’s the blueprint for our brand’s identity. Here, you’ll find everything from our logo and color palette to our voice and messaging.

Our brand is an experience and a promise to our audience. This guide ensures that every interaction, design, and communication consistently reflects our brand’s essence.

Whether you’re creating a design, crafting a message, or representing our brand, this guide is your essential resource. Let’s work together to maintain and strengthen our brand’s unique identity.

The Theology

BNice is a web3 company 

The Logos

Logo Sizing

Maximum Width:

Unlimited

Minimum Width:

32px

Logo Variations

Knockout Logo
Text Logo
Token Icon

The Fonts

Heading 1

Font Family: Poppins

Font Size: 2.5 rem, 30pt, 40px

Font Weight: 200, Extra Light

Example:

The quick brown fox jumps over the lazy dog and runs away.

Heading 2

Font Family: Poppins

Font Size: 2 rem, 24pt, 32px

Font Weight: 200, Extra Light

Example:

The quick brown fox jumps over the lazy dog and runs away.

Heading 3

Font Family: Poppins

Font Size: 1.75 rem, 21pt, 28px

Font Weight: 200, Extra Light

Example:

The quick brown fox jumps over the lazy dog and runs away.

Heading 4

Font Family: Poppins

Font Size: 1.5 rem, 18pt, 24px

Font Weight: 200, Extra Light

Example:

The quick brown fox jumps over the lazy dog and runs away.

Heading 5

Font Family: Poppins

Font Size: 1.25 rem, 15pt, 20px

Font Weight: 200, Extra Light

Example:
The quick brown fox jumps over the lazy dog and runs away.
Heading 6

Font Family: Poppins

Font Size: 1.2 rem, 14.4pt, 19.2px

Font Weight: 200, Extra Light

Example:
The quick brown fox jumps over the lazy dog and runs away.
Paragraph

Font Family: Poppins

Font Size: 1.1 rem, 13.2pt, 17.6px

Font Weight: 300, Light

Link

Font Family: Poppins

Font Weight: 700, Semi-bold

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar sem ornare lorem imperdiet, nec hendrerit lacus volutpat. Vestibulum auctor, tellus sit amet dapibus luctus, magna ante posuere sem, non dictum eros sapien vel diam. In hac habitasse platea dictumst. Vivamus sed eleifend enim. Morbi posuere urna sed ipsum hendrerit, a interdum erat bibendum. Mauris laoreet tortor elit, sit amet condimentum ipsum accumsan at. Etiam condimentum ante quis scelerisque ornare. Nullam felis felis, volutpat ac risus faucibus, tincidunt finibus tortor. Aliquam vel pellentesque est. Phasellus tempus scelerisque libero sit amet molestie. Nam in tellus vel urna porta sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut consequat elit eu justo ultricies sodales. Mauris tristique rhoncus vulputate.

The Colors

Hex: #ffffff
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0

Hex: #000000
RGB: 0,0,0
CMYK: 100, 100, 100, 100

Animated GIF rainbow gradient for links, buttons, & accents.

Hex: #ffffff
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0

Hex: #000000
RGB: 0,0,0
CMYK: 100, 100, 100, 100

Link & Buttons

Icon Link
Default button
Button with icon left
Button with icon right

Forms

Input field
Textarea
Select
Select multiple options
Radio
Checkbox
Datepicker
Datepicker native HTML5
File upload
File upload (multiple files)
Password
Search

Custom Icons

Custom Classes

.black-glass
				
					.black-glass {
	background: rgba(0,0,0,0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	border: rgba(0,0,0,0.5);
	color: #fff;
}
				
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

.white-glass
				
					
.white-glass {
	background: rgba(255,255,255,0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	border: rgba(255,255,255,0.5);
	color: #000;
}
				
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.