Better Insurance Network — Brand Reference

This page documents the visual fundamentals of the BIN site as they exist in code today. Colour values, type sizes, and component styles below are rendered live from the theme's design tokens.

Logo

Primary mark, alternate weights, and the butterfly mark used in compact contexts.

Colour

The teal palette is the brand's foundation. Brand 600 is the primary action colour; brand 800 and 900 carry headings and high-contrast surfaces. Neutrals handle text, borders, and surfaces.

Brand (teal)

brand-25 #FEFDF0
brand-50 #FEFBE8
brand-100 #FEF7C3
brand-200 #B2CCFF
brand-300 #5FE9D0
brand-400 #2ED3B7
brand-500 #15B79E
brand-600 #0E9384
brand-700 #107569
brand-800 #125D56
brand-900 #134E48
brand-950 #0A2926

Neutrals

neutral-25 #FCFCFC
neutral-50 #FAFAFA
neutral-100 #F5F5F5
neutral-200 #E9EAEB
neutral-300 #D5D7DA
neutral-400 #A4A7AE
neutral-500 #717680
neutral-600 #535862
neutral-700 #414651
neutral-800 #292524
neutral-900 #181D27
neutral-950 #0A0D12

Accents & system colours

coral (link) #F95738
success #16A34A
warning #D97706
error #D92D20

Brand gradients

brand-300 → brand-100
brand-800 → brand-600
brand-900 → brand-700
brand-950 → brand-800

Typography

Two faces: Red Hat Display for headings and display contexts, Red Hat Text for body and UI. Inter is used sparingly as a display-alt for small UI labels. Headings sit at one ramp on small/medium viewports and step up at the 960px breakpoint.

Faces

Red Hat Display

Headings, display copy. Weights 400 → 900; default usage is extrabold (800).

Red Hat Text

Body, paragraphs, UI labels. Weights 400 → 700.

Inter (display-alt)

Used for small eyebrows / labels. Limit to short uppercase strings.

Heading ramp (live samples)

Heading 1 — Sustainability for Brokers

h1 · display-xs / display-md @ lg

Heading 2 — Membership tiers

h2 · text-xl / display-sm @ lg

Heading 3 — Event ticketing

h3 · text-lg / display-xs @ lg

Heading 4 — Section heading

h4 · text-md / text-xl @ lg
Heading 5 — Card title
h5 · text-sm / text-lg @ lg
Heading 6 — Small heading
h6 · text-xs / text-md @ lg

Paragraph text — Better Insurance Network is a community of insurance professionals committed to sustainability and responsible business. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

p · text-sm-regular / text-md-regular @ sm

Buttons

Three primary variants. Use primary-gradient for CTAs that need to draw attention; primary for default actions; secondary for low-emphasis or paired alongside primary.

Primary gradient Primary Secondary

Voice & tone

  • Direct, not corporate. Short sentences. Active voice. No filler.
  • Confident on substance. Sustainability and ethics are core; communicate them plainly, not in jargon.
  • Warm, not cute. Welcoming and professional. Avoid emoji, exclamation marks, and forced humour.
  • UK English. Spelling, grammar, and dates default to UK conventions.

This page is unlinked from the site navigation. Bookmark /branding/ for ongoing reference.