Brightback Page Style Guide

Got an eye for design? Here are all the styling options on the Brightback Page you can customize and what's possible. 

Full page view

When all is said and done, here's the full page view of the Brightback Page:

You can customize styles at both the page level and each individual level. You'll find details on each element in this guide.

Page level configurations

Configure the Brightback Page to match the style and feel of your site. Config is the item to customize, Type is what we use to create the customization, and Example is....well...an example of what we mean by the Type. Nuff' said. 


Config Type Example
Main Color Hex or RGB #fa6423
Page Background Hex or RGB #f2f2f2
Text Color Hex or RGB #55555A
Font Family Name of font and font file Font: Gotham Narrow SSm AFile: https://cloud.typography.com/css/fonts.css
Font Size CSS 12px
Font Weight CSS bold

Individual Components

Configure individual components of the page to pop! Here's where you'll find a breakdown of styling options for each individual page component.

Fixed Width Page Header

The Fixed Width Page Header is the presentation of your logo, underlined by your Accent Color. 

Here's what it looks like:

Here's how to style it:


Config Type Example
Logo image
Accent Color Hex or RGB #f2f2f2

Headline

The Headline is the line of text right above your Loss Aversion Cards. 

Here's what it looks like:

Here's how to style it:


Config Type Example
Font Family NOTE: This is referenced from Page Level Configuration
Font Color NOTE: This is referenced from Page Level Configuration
Font Size CSS 12px
Font Weight CSS bold

Loss Aversion Cards

Loss Aversion Cards can show account activity, features, personal messages, social proof, invitations for engagement, or freeform images. 

Here's what they look like:

Here's how to style them:

Config Type Example
Background Color Hex or RGB #D2D2D5
Border CSS "border": "1px solid #D2D2D5"
Border Radius CSS 10px
Font Family Name of font and font file Font: Gotham Narrow SSm AFile: https://cloud.typography.com/css/fonts.css
Font Color Hex or RGB #f2f2f2
Font Size CSS 12px
Font Weight CSS bold
Icon Fill Color Hex or RGB #fff

Upper Nevermind

The Upper Nevermind is a chance for your customer to back-away right out of the gate.

Here's what it looks like:

And here's how to style it:


Config Type Example
Background Color (button and message) Hex or RGB #D2D2D5
Border(button and message) CSS "border": "1px solid #D2D2D5"
Border Radius(button and message) CSS 10px
Font Family(button and message) Name of font and font file Font: Gotham Narrow SSm AFile: https://cloud.typography.com/css/fonts.css
Font Color(button and message) Hex or RGB #f2f2f2
Font Size(button and message) CSS 12px
Font Weight(button and message) CSS bold
Icons image
Icon Fill Color Hex or RGB #fff

Exit Survey

The Exit Survey collects insights about the Reasons your customer cancels, what competitors they've decided to run-off with, and if you've got a shot at winning them back.

Here's what it looks like:

And here's how to style it:

Config Type Example
Background Color (button, label and text) Hex or RGB #D2D2D5
Border(button, label and text) CSS "border": "1px solid #D2D2D5"
Border Radius(button, label and text) CSS 10px
Box Shadow CSS 5px 10px #888888;
Font Family(button, label and text) Name of font and font file Font: Gotham Narrow SSm AFile: https://cloud.typography.com/css/fonts.css
Font Color(button, label and text) Hex or RGB #f2f2f2
Font Size(button, label and text) CSS 12px
Font Weight(button, label and text) CSS bold
Height (text input) CSS 42px
Padding (text input) CSS 0px 7px

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us