BrandxBoost Style Guide

BrandxBoost Brand Guidelines

This comprehensive brand guide ensures consistent application of BrandxBoost's visual identity across all platforms. Our brand combines professionalism with modern digital elements to create a distinctive visual language that resonates with our audience.

Typography

BrandxBoost uses a strategic combination of Poppins and Lora typefaces to create a modern, professional look while maintaining visual hierarchy.

Primary Typography: Poppins

Poppins Semi-Bold (700) is our primary heading typeface:

Main Heading (H1)

Subheading (H2)

Section Heading (H3)

Body text uses Poppins Light (300) at 21px with a line height of 1.5:

Our body text maintains clean readability while projecting a modern, lightweight feel. Line length is limited to approximately 70 characters for optimal reading experience across devices.

Secondary Typography: Lora

Lora Regular Italic (400) at 48px is used for highlighted headings and special text treatments:

Highlighted Heading

This elegant italic serif creates contrast with our primary sans-serif and should be used sparingly for impact in:

Hero headlines
Pull quotes
Special callouts
Section intros

This is an example of a special callout using Lora Italic.

Typography Usage Guidelines

Font Hierarchy

Maintain clear visual hierarchy with these type styles:

H1: 48px (Poppins Semi-Bold or Lora Italic)
H2: 32px (Poppins Semi-Bold)
H3: 24px (Poppins Semi-Bold)
Body: 21px (Poppins Light)
Small text/captions: 16px (Poppins Light)

Typography Principles

Use Lora Italic sparingly (10-15% of headings) for maximum impact
Maintain sufficient contrast between heading sizes
Never use more than two font families in a single design
Ensure line lengths don't exceed 70 characters for readability
Apply proper spacing between paragraphs (min 1.5× text size)

Color Palette

The BrandxBoost color palette follows a precise distribution strategy with specific use cases for each color.

White
#FFFFFF

Primary Text & Background (~60%)

Black
#000000

Primary Text & Background (~60%)

Royal Blue
#4169E1

Primary Brand Color (~30%)

Purple Accent
#BE00FE

Digital UI Accent (~10%)

Video Accent
#FF8C00

Video-Only Color - Not for UI elements

Light Gray
#F4F2EE

Secondary Background

Brand Gradient

Primary Gradient
Royal Blue → Purple

Color Usage Strategy

Digital Interface Colors

For all web, app, and digital products:

60% Neutral: White/Black backgrounds and text
30% Royal Blue: Primary brand presence in headers, cards, major sections
10% Purple Accent (#BE00FE): All interactive elements - buttons, links, icons, form fields

Important: The purple accent creates a consistent "interact with me" visual cue across platforms.

Video Production Colors

For all video content only:

Primary Studio Lighting: Royal Blue + Orange split lighting effect
Lower Thirds: Royal Blue with optional orange accent
Video Motion Graphics: May incorporate Orange (#FF8C00) as a secondary accent

Note: Orange (#FF8C00) is reserved exclusively for video production and should never appear in UI elements.

Video Production Guidelines

Our video content uses a distinctive cinematic lighting scheme that extends our brand identity without interfering with our UI color strategy.

Duotone Lighting

▶

Key lighting characteristics:

Royal Blue (#4169E1) key light from presenter's left side
Orange (#FF8C00) fill light from right side
Creates signature brand look without competing with UI elements

Video Graphics

On-screen elements follow these guidelines:

Lower thirds use Royal Blue as primary color
Animated elements may incorporate Orange accents
Text graphics maintain Poppins typeface for consistency
Highlight important text with Lora Italic for emphasis

John Anderson

Marketing Director

Digital UI Elements

All interactive elements use consistent styling to create intuitive user experiences.

Primary Buttons

Royal Blue background with white text. Hover state inverts colors with a blue outline.

Interactive Elements

Links: Royal blue links turn purple on hover to create consistent clickable cues.

Form input example (focused)

Thumbnails

Thumbnail with Purple Accent Border

Color Usage: Do's and Don'ts

Following these guidelines ensures a cohesive brand presence across all platforms and touchpoints.

Do This

Use Purple (#BE00FE) for all interactive UI elements - buttons, links, form fields
Maintain Royal Blue as primary brand color for headers, cards, major sections
Use Orange (#FF8C00) exclusively in video production lighting and graphics
Create clear visual hierarchy with consistent color distribution
Use Lora Italic sparingly for highlighted content

Don't Do This

Never use Orange (#FF8C00) in web UI, app interfaces, or digital graphics
Don't use Purple accent for non-interactive elements
Avoid mixing Purple and Orange in the same visual context
Never use more than one accent color in UI design
Don't overuse Lora Italic for body text or extended content

Proin faucibus nec mauris a sodales, sed elementum mi tincidunt. Sed eget viverra egestas nisi in consequat. Fusce sodales augue a accumsan. Cras sollicitudin eget.
Peter Bowman

BrandxBoost Style Guide

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Poppins H1