Website Style Guide
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
Eliminate the monotonous, administrative work that frustrates the dedicated insurance professionals
A connected, digital world where you can quickly get insurance for your business through a simple online experience.
We strive to follow a core set of values in our work and in our relationships. Our actions reflect our commitment to our values
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
In some cases can be used only wordmark.
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.
The logo forks best when it has enough space around. Here some recommendation of the spaces around The logo and around The Symbol:
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
Shadows of #000000 used on the website
Contextual colors (Error, Success)
Was used two fonts. For Headings - Satoshi Vaviable Bold, for text - Karla Regular
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.
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
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
Desktop & mobile sizes
16:9 ratio were used for Desktop Hero, For Mobile hero - 9:16
All illustrations should use the same outline style and have a 2px stroke
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
We used a 12 column grid container (1170px) with a 30px gutter between columns.
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
Distance between elements should be always a multiples of 8. So, for example,
the spacing between cards - 32 px.
Background can be in 4 following variants. On dark background can be used White text #FFFFF, on light background - Dark text #151B25
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