Logos | Colors | Fonts | Design Elements | Photography
White logo over Rich Blue Grey background
Rich Blue Grey logo on white background
White logo over photography background
Rich Blue Grey logo on white background
White logo over Rich Blue Grey background
Using Black text and logos anywhere will look harsh compared to the softer Rich Blue Grey and should be avoided. Other peoples logos should not be black as they will stand out compared to Potratz.
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.
Rich Blue Grey
#282F3C
Use on white or light blue background only.
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.
White
#ffffff
Use on Rich Blue Grey background or secondary color backgrounds only.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
Solid Orange
#FF8204
(Use rarely) for check boxes or symbols, icons, rarely for text. Use on white, light blue background or Rich Blue Grey background only.
Solid Green
#09B73F
(Use rarely) for check boxes or symbols, icons only. Use on white, light blue background or Rich Blue Grey background only.
Backgrounds should be full width.
Rich Blue Grey
#282F3C
White
#ffffff
Pale Blue
#EDF4FB
Solid Dark Grey
#333333
Solid Facebook Blue
#556EB1
Solid Aqua Blue
#7DBAE7
Solid Sage Green
#89B2C1
Solid Lavender
#B5BBE4
Solid Red
#EE4242
Only for Live Video Course, white text, red background, rounds corner box, bold text, all caps
No Orange Backgrounds
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.
Roboto
Weight: 300
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.
Roboto
weight: 400
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.
Roboto
Weight: 700
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.
Roboto
Weight:900
Georgia Italic
Weight: 300 or normal
For testimonials, headlines with less emphasis, sub heads after light headlines, generally use for only 10% of page text
Georgia
Weight: 300 or normal
Use only in white on Rich Blue Grey background as an alternate for less important headlines (use rarely)
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. 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.
Body font size: 17px
Line Height for Body font: 22px
Font weight: 400
Font: Roboto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dol.
Line length to not exceed 75 characters including spaces.
Hero Headline
Weight: 400
Font: Roboto
Hero Headline
Weight: 700
Font: Roboto
Hero Headline
Weight: 700 & 400
Font: Roboto
Hero Sub Headline
Weight: 400 & 700
Font: Roboto
Hero Sub Headline
Weight: 400 & 700
Font: Roboto
Headline Example A
Weight: 400
Size: 34px
Font: Roboto
Headline Example B
Weight: 300
Size: 28px
Font: Georgia Italic
Headline Example C
Weight: 400
Size: 42px
Font: Roboto
Headline with Sub Headline Example A
Weight: 700 headline, 400 sub-headline
42px headline, 28px sub-headline
Font: Roboto
Headline with Sub Headline Example B
Weight: 300 and 700 Headline, 300 sub-headline
46px headline, 22px sub-headline
Font: Roboto
Headline with Sub Headline Example C
Weight: 400 headline, 300 sub-headline
46px headline, 22px sub-headline
Font: Roboto headline, Georgia Italic sub-headline
You will have direct access to ask your questions and receive thoughtful answers unique to your business, budget and market fast from our coaches as you progress through the formula and from your fellow Revolutionaries in the Revolutionaries Facebook Group.
Headline with Sub Headline Example D
Weight: 300
28px headline, 17px sub-headline
Font: Roboto
Headline with Sub Headline Example E
Weight: 300
28px headline, 20px sub-headline
Font: Roboto headline, Georgia Italic sub-headline
Our clients find our 1-to-1 coaching program the perfect solution to continuing their sales, marketing and business performance success. Your coach will monitor your success weekly and you will have scheduled live in-person or video calls to ensure your businesses success. You have direct access via email and text when you need additional assistance or an expert opinion. We have experts that cover every aspect of growing a successful business in highly competitive markets and can help you achieve success that is due to you.
Headline with Sub Headline Example F
Weight: 300 & 700
66px headline, 20px sub-headline
Font: Roboto
Hero Headlines should be Large and Bold, Large and Thin or Large and Mixed with smaller lighter sub-headlines. Sizes are a guideline but keep in mind where headlines break, making them slightly larger or smaller as needed.
Don't make everything bold. Use bold sparingly for emphasis.
Headlines should be set solid with line heights that match the font size (30px line height for 30px font size). There should be some space between a headline and a sub headline, but they should feel like one unit, like they are related, part of the same thing.
Generally avoid centered text paragraphs. Use centering only for headlines. If a headline is connected to a paragraph, they should both align left (unless it's unavoidable).
Headlines should only rarely be all caps. Most headlines should be Title Caps. Use punctuation if it is a sentence.
Always keep readability in mind.
Primary CTA Button 1
Use this less, for emphasis
Orange Gradients with 50% rounded corners like a bubble, text all caps, white text, font weight 400 or 700, font size 17px
Colors; #ff4e00 to #ff8204
Should only be on white or Rich Blue Grey backgrounds
Primary CTA Button 2
Use this for products, can be used elsewhere also, use this more
Green Gradient with 4px rounded corner like a softened rectangle, text all caps, Dark Blue Grey text, font weight 400 or 700, font size 17px
Colors: #93f7d5 to #53fa87
Should only be on white or Rich Blue Grey backgrounds
Secondary CTA Button White
Use this more
White background with Rich Blue Grey 2px Solid Border, text all caps, Rich Blue Grey text, font weight 400 or 700, with 50% rounded corners like a bubble, font size 17px
Can be used on all backgrounds.
Secondary CTA Button Transparent
Use this less, for emphasis
Transparent background with White 2px Solid Border, text all caps, Rich Blue Grey text, font weight 400 or 700, with 50% rounded corners like a bubble, font size 17px
Use over photography
Grids and cards have a 34px gap and light soft shadows and no borders.
Lorem ipsum dolor sit amet, turpis vestibulum imperdiet vel duis elit, sociis magna vehicula nec in id pretium.
Lorem ipsum dolor sit amet, turpis vestibulum imperdiet vel duis elit, sociis magna vehicula nec in id pretium.
Lorem ipsum dolor sit amet, turpis vestibulum imperdiet vel duis elit, sociis magna vehicula nec in id pretium.
Lorem ipsum dolor sit amet, turpis vestibulum imperdiet vel duis elit, sociis magna vehicula nec in id pretium.
Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Example 7
Example 8
Example 9
Example 10
Hexagons can contain centered simple icons/logos, Roboto text, can have background colors Solid Dark Grey, Solid Facebook Blue, Solid Aqua Blue, Solid Sage Green, Solid Lavender with white text. Also can be transparent and have Rich Blue Grey borders or other color borders with in the palette.
Full width backgrounds that bleed off the edge in Rich Blue Grey, Pale Blue and occasionally Solid Aqua Blue, Solid Facebook Blue, Solid Sage Green with white text, minimum of 50px space above and below text. Don't use all the background colors on one page. Text should be vertically centered in background sections. Text should also be horizontally centered, no text should be outside the center 1200px wide center area.
Photography for the Hero section (Head of page) should include people, soft greyed blue, greyed purple, cool, calming, solid or simple backgrounds when possible so the emphasis is on the people ( and their shadows) and text is readable over the image. Text should be white over images, unless image is too light. Image/people should be friendly and approachable. Photography should not have orange backgrounds.
Example 1
Example 2
Example 3
Don't do this. No Orange backgrounds for Hero/Header images.
Photography for apsirations will be people doing things that potential clients might aspire to do. People should be friendly and approachable. Text should not be over these images, as the backgrounds will likely be too busy.
Example 1
Example 2
