A buddha linear icon

Website Style Guide

Broker Buddha logo in white


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



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
Broker Buddha horizontal logo in white backgroundBroker Buddha logo in blue background
Vertical Direction
Broker Buddha vertical logo in white backgroundBroker Buddha vertical logo in blue background
Light background color code details
Dark background color code details
The Wordmark

In some cases can be used only wordmark.

broker buddha text in white backgroundbroker buddha text in blue background
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.

broker buddha symbol in white backgroundbroker buddha symbol in blue background
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:

broker buddha logo spacesbroker buddha symbol spaces
Minimum size

To maintain the visual integrity of our logo, don’t scale it below 125 pixels or 33 millimetres wide.

Broker Buddha logo 125pxBroker Buddha 33mm logo
Do not alter the logo

Some examples of things you should NOT do with our logo

Broker Buddha don't stretch of squeeze logo warningBroker Buddha don't use busy background on logo warningBroker Buddha don't beak composition of logo warningBroker Buddha don't change color brands warningBroker Buddha don't modificte logo warningBroker Buddha don't use low-contrast background warningBroker Buddha don't use low resolution logo warningBroker Buddha don't rotate logo warning



Shadows of #000000 used on the website

Broker Buddha brand color percentageBrand color percentage of Broker Buddha
Primary colors
Broker Buddha blue brand color codesbroker buddha brand color details
Secondary colors
Broker Buddha brand color detailsBroker Buddha gray and white brand color codesbroker buddha brand color codes
Blue gradient color code details
Contextual colors (Error, Success)
Red color code detailsYellow color code detailsGreen color code details



Was used two fonts. For Headings - Satoshi Vaviable Bold, for text - Karla Regular

Satoshi font previewKarla font details
Satoshi font detailsHeading font detailsheading font detailsSatoshi font detailsfont detailsfont details
Font detailsregular text font detailsKarla font details
Karla font detailsfont detailsfont detailsfamily font details


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.

online contact form online login form


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

A blank image icon

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

Three Blank image icon


Desktop & mobile sizes

16:9 ratio were used for Desktop Hero, For Mobile hero - 9:16

Two Blank image icon


All illustrations should use the same outline style and have a 2px stroke

Broker Buddha application form of small business multi coverageCTA illustration


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

icons setset of icons


We used a 12 column grid container (1170px) with a 30px gutter between columns.


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.


Vertical Spacing

Background can be in 4 following variants. On dark background can be used White text #FFFFF, on light background - Dark text #151B25

Lorem ipsum text with transparent backgroundLorem ipsum text in black backgroundLorem ipsum text in white backgroundLorem ipsum text in blue  background


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

Contrast Ration Do's dashboardContrast Ration Don'ts dashboard