.svg)
Website Style Guide
.svg)
Overview
We help commercial insurance brokers grow sales by simplifying the application and renewal process for you and your clients.
What we stand for
We are a purpose-driven company guided by a clear mission, an inspirational vision, and core set of values
Our Mission
Eliminate the monotonous, administrative work that frustrates the dedicated insurance professionals
Our Vision
A connected, digital world where you can quickly get insurance for your business through a simple online experience.
Our Values
We strive to follow a core set of values in our work and in our relationships. Our actions reflect our commitment to our values
Branding
Logo
Primary Logo
This is the primary logo of The Broker Buddha using on light background and dark background. 2 direction of the Logo are allowed: Horizontal and Vertical
Horisontal Direction
Vertical Direction
The Wordmark
In some cases can be used only wordmark.
.jpg)
.jpg)
The symbol
In some cases using only symbol without wordmark is allowed:
- when logo legibility is compromised. If the size of the logo would make the wordmark illegible.
- when space is extremely limited. For example, when the logo must live within a square or circle shape.
.jpg)
.jpg)
Clear space
The logo forks best when it has enough space around. Here some recommendation of the spaces around The logo and around The Symbol:
.svg)
Minimum size
To maintain the visual integrity of our logo, don’t scale it below 125 pixels or 33 millimetres wide.
Do not alter the logo
Some examples of things you should NOT do with our logo
Colors
Greys
Shadows of #000000 used on the website
Primary colors
Secondary colors
Gradients
Contextual colors (Error, Success)
Typography
Font
Was used two fonts. For Headings - Satoshi Vaviable Bold, for text - Karla Regular
.svg)
Headings
.svg)
Text
Links
Forms
Input field has follow size: max-width: 400px, height: 64 px, spacing between fields - 32 px.
Font size for Label in status "Default" - 18 px, "Input" - 12 px, text inputting - 18 px, error text - 12 px.
Images
Large Image
For Large images was used 16:9 ratio and they have their width set to the layout grid. In these cases, the height of these images doesn't follow the 10 system
Small Image
For Small images was used 5:6 ratio and they have their width set to the layout grid. In these cases, the height of these images doesn't follow the 10 system
Templates
Desktop & mobile sizes
16:9 ratio were used for Desktop Hero, For Mobile hero - 9:16
Ilustrations
All illustrations should use the same outline style and have a 2px stroke
Icons
All frames of icons size should have ratio 1:1 and be a multiple of 10. All icons should be in the same outline style
Grid
We used a 12 column grid container (1170px) with a 30px gutter between columns.
Spacing
Vertical Spacing
Distance between elements should be always a multiples of 10. Some examples of spaces:
- between blocks - 160 px;
- inside the block between groups - 80 px;
- inside of the group - 60 px, ecc
Horisontal spaCing
Distance between elements should be always a multiples of 8. So, for example,
the spacing between cards - 32 px.
Background
Vertical Spacing
Background can be in 4 following variants. On dark background can be used White text #FFFFF, on light background - Dark text #151B25
Accessibility
Pay attention on the color contrast. Users can be able to distinguish various text and non-text elements. Higher contrast makes objects easier to see.
Contrast ratios represent how different one color is from another color, commonly. The greater the difference is between the two numbers in the ratio, the greater the difference in relative luminance between the colors.
Some reccomendation for contrast using for text:- for large text (from 18 px in bold, from 24 px in recular) we use 3:1 against the background;- for small text - 4.5:1 against the background.
Good contrast vs bad contrast examples
