Brainlabs Brand Style Guide

Colors

Primary / Accent Colours

Brainlabs Yellow

#FFDD33

Primary CTA, accent, attention-drawing — use sparingly. Exception: may be used as a Mondrian grid cell background, but only in small cells with no content.

Brainlabs Blue

#80DBFF

Secondary accent — use sparingly

Mid-Range (Most Used)

Yellow 2

#FFE770

Medium yellow — used frequently in layouts

Blue 2

#C2EEFF

Medium blue — used frequently in layouts

Secondary Colours

Yellow 3

#FFF5C2

In palette — not an approved background

Blue 3

#EBF9FF

In palette — not an approved background

Approved Backgrounds — Slide Decks & Social Graphics

White

#FFFFFF

Primary background — approved for all media

Cream

#FFFEF7

Secondary background — approved for all media

Yellow 2

#FFE770

Slide decks & social graphics only — not for HTML web page section fills

Blue 2

#C2EEFF

Slide decks & social graphics only — not for HTML web page section fills

Approved Backgrounds — HTML Web Pages

White

#FFFFFF

Primary web background

Cream

#FFFEF7

Secondary web background — warm, soft

Warm Cream

#FFFCEB

Alternate warm web background

⚠️

NEVER use #FFDD33 (bright yellow), #80DBFF (bright blue), or #000000 (black) as a background colour — with one exception: #FFDD33 may be used inside Mondrian grid cells, sparingly, and only in small cells that contain no content. On HTML web pages, Yellow 2 (#FFE770) and Blue 2 (#C2EEFF) are not approved as section background fills — white and cream only.

Text

Black

#000000

All text — the only approved text colour

⚠️

All text is always black. Never colorful.

Colour Proportion Rule

Large areas

Medium

Accent

Large areas: white & cream — Medium areas: Yellow 2 & Blue 2 (slides & social only — not HTML web section fills) — Small/accent: bright Yellow & Blue to draw attention

Accessible Text Combinations

Text	Background	Contrast	Status
Black	Brainlabs Blue	12.86 : 1	✅
Black	Brainlabs Yellow	12.82 : 1	✅
White	Black	21.00 : 1	✅
Black	Blue 2	12.86 : 1	✅
Black	Yellow 2	15.31 : 1	✅
Black	Cream	20.78 : 1	✅

Typography

Brand Fonts: Kanit· all stylesRoboto· Regular only, for long paragraph textBoth on Google Fonts — free to use

Type Scale — Desktop

Scientific Media Agency

Heading 176px · Semiboldlh 64

Test. Learn. Win.

Heading 248px · Semiboldlh 48

Performance marketing

Heading 336px · Mediumlh 40

Data-driven results

Heading 426px · Mediumlh 32

Client partnerships that move fast

Heading 522px · Regularlh 28

Brainlabs is a scientific media agency that drives growth through rigorous experimentation.

Paragraph 118px · Lightlh 24

Brainlabs is a scientific media agency that drives growth through rigorous experimentation.

Paragraph 216px · Lightlh 22

Brainlabs is a scientific media agency that drives growth through rigorous experimentation.

Paragraph 3 — Long Paragraph14px · Regular (Roboto)lh 20

PAID SEARCH · PAID SOCIAL · SEO

Eyebrow14px · Regularlh 18

Mobile Scale

Level	Weight	Size	Line Height
Heading 1	Semibold	48px	42
Heading 2	Semibold	36px	36
Heading 3	Medium	26px	30
Heading 4	Medium	22px	28
Heading 5	Regular	18px	24
Paragraph 1	Light	16px	22
Paragraph 2	Light	14px	20
Paragraph 3 — Long Paragraph	Regular (Roboto)	12px	18
Eyebrow	Regular	12px	14

Special Styles

Focus is power.

Kanit Bold Italic — used for statement slides and large text on a primarily blank slide (sentence or less)

Typography Rules

→All text is black (#000000) — never coloured, never grey

→White (#FFFFFF) text is permitted on black backgrounds only

→Roboto Regular is used for Paragraph 3 (long paragraph text) only — all other styles use Kanit

→Use Kanit Bold Italic for statement slides and large text on a primarily blank slide (sentence or less)

Logo & Imagery

Logo Variants

Full Colour

Primary Colour — on White

Secondary Colour — on White

Colour Icon — on White

Mono White

Primary Mono White — on Black

Secondary Mono White — on Black

Mono Icon White — on Black

Mono Black

Primary Mono Black — on Cream

Secondary Mono Black — on Cream

Mono Icon Black — on Cream

Which variant to use

✅Primary Colour logo — use when there is sufficient vertical space, or when the logo is going into a square or near-square area. This is the correct default for most layouts.

✅Secondary Colour logo — use when the space is horizontal and wide rather than tall: navigation bars, horizontal headers, wide banners.

✅Colour Icon — use only when the full Brainlabs wordmark (primary or secondary) has already appeared somewhere else in the same design. Never use as the sole logo unless the user has specifically requested it.

✅Mono White logos — use on dark or black backgrounds only. Use only when specifically requested.

✅Mono Black logos — use on cream or light backgrounds only. Use only when specifically requested.

Logo Rules

✅Always load the logo from an approved asset URL — never recreate, redraw, or approximate it

✅Always use the flask icon alongside the wordmark

✅Maintain clear space equal to the height of the "b" in "brainlabs" on all sides

✅Full-colour logos approved on: white, cream, Yellow 2 (#FFE770), Blue 2 (#C2EEFF), and images with a dim or dark layer

✅If an asset URL cannot be loaded: leave the space empty. A missing logo is always better than an incorrect one.

❌Never write "Brainlabs" as text in place of the logo

❌Never use a placeholder or stand-in of any kind

❌Never use the wordmark without the flask icon

❌Never distort, recolour, or rotate the logo

❌Never use a mono variant unless specifically requested

❌Never use the icon as the sole logo unless specifically requested — the full wordmark must appear elsewhere in the same piece first

❌Pink (#FF69B4) is the brain colour inside the flask — never use it outside the logo

❌Never place the logo on bright yellow (#FFDD33) or bright blue (#80DBFF) backgrounds

Minimum Sizes

Primary logo

Min: 80px wide

Secondary logo

Min: 120px wide

Logo icon only

Min: 32px × 32px

Photography Guidelines

📝 Photography guidelines needed — add do's and don'ts for photography style: real people vs. stock, preferred aesthetic, lighting direction, subject matter rules

Design Elements

Core Concept: Momentum

Brainlabs visuals always imply forward movement — circuit lines, italic type, Mondrian grid structure, and directional elements all point the same way: forward.

Flask Pattern

Each flask has a minimum 5px gap on all sides. The gap is built into the SVG viewBox — never reduce the tile size below spec.

RegularBlue flask · 60% opacity · on white or cream

LightWhite flask · 50% opacity · on Brainlabs Blue

LightWhite flask · 50% opacity · on Yellow 2

Padded viewBox is mandatory — You must use the expanded viewBox (-185.45 -181.37 1298.15 1269.58), not the original (0 0 927.25 906.84). Using the original removes all inter-flask spacing and the flasks will appear edge-to-edge.

Narrow or constrained spaces — The standard 60px tile is sized for full-width canvases. For zones narrower than 150px (e.g. a sidebar column or badge chip), reduce the tile size so at least 2–3 flasks fit across the width. Calculate: tile = zone_width ÷ 2.5, rounded to the nearest whole pixel.

Opacity by context — Use 60% opacity for the regular pattern on white or cream backgrounds. Use 0.08 (8%) only when the flask pattern is inside a Mondrian grid cell (watermark level). These are not interchangeable — 8% on a white background will be nearly invisible.

Table and email layouts — The position: absolute approach requires a positioned parent element, which breaks in HTML email clients and table-based layouts. For those contexts, apply background-image directly to the table cell or element itself rather than using an absolutely positioned child.

Circuit Lines

Preferred — dot on right, line moves left → right ✅

Secondary — dot on left, use only when layout requires it

Derived from the brain circuit inside the flask logo. The dot marks the end of the line — not the origin.

→ Prefer dot on the right (left-to-right) or dot on the top (bottom-to-top).

→ The open end (no dot) must always be anchored to a border line or bleed off the edge of the design.

→ Use no more than one circuit line per design.

→ Circuit lines should only be used to direct the viewer's eye toward the most important element on the design — the element with the highest visual hierarchy. This is typically the main slide title, or a hero stat if that's the dominant element. The dot end of the line points toward or terminates near that element.

Mondrian Colour Grid

Rectangular colour blocks divided by a consistent 1px black border — never 2px, never a gap. All brand colour shades can be used.

→ Never place two boxes of the same colour adjacent to each other.

→ Never place two similar shades adjacent — e.g. Yellow next to Yellow 2, or Blue next to Blue 2.

→ Always include at least one box with the flask pattern on white or cream. In larger grids, up to 2–3 flask pattern boxes is acceptable.

→ Minimum cell size: 50px in any dimension. No cell may be thinner than 50px.

When & how to use the Mondrian grid

Required on every Brainlabs design — The Mondrian grid must appear in some form on every Brainlabs design — even minimally. Two cells, or a strip of cells along one edge, still counts. If it is absent entirely, the design is off-brand.

Use it to establish and bookend — In slide decks: use on the cover slide and the closing/thank-you slide to clearly mark where the presentation starts and ends. On landing pages and HTML: use in the header, and optionally the footer or on sections where you want to draw the eye.

Do not use it throughout — The Mondrian grid becomes overwhelming quickly. It should never run across every slide in a deck or every section of a page. Selective, deliberate placement is the rule.

Content goes inside the grid — nothing overlaps it — The Mondrian grid surrounds and contains copy and content. No design elements — text, images, icons, or overlays — should cross or overlap the grid lines or the grid area itself.

Never use as a line divider — The Mondrian grid is made of solid colour blocks — it is not a line. Do not use a thin row or strip of the grid as a substitute for a horizontal or vertical rule between sections. For a line separator, use a circuit line. (This does not apply to divider slides in a deck — a section-break slide using the Mondrian grid is perfectly correct.)

Graphic Style Spectrum

Level	Style	Use Case
01	Simple circuit lines	Subtle slide features, attention guides
02	Line graphics / bold icons	Event branding, sub-brands, Culture Code
03	Icons (black/white)	Decks, reports — always black or white, on colour
04	Infographic visuals	Stylised charts/graphs
05	Detailed graphics	Reports, social, abstract concept visualisation

Spacing & Layout

8px Base Grid

4px

8px

16px

24px

32px

48px

64px

Web Spacing Tokens

Token	Value	Use
--space-xs	4px	Tight label gaps, icon-to-text
--space-sm	8px	Related element gaps
--space-md	16px	Standard component padding
--space-lg	24px	Section internal gaps
--space-xl	32px	Between components
--space-2xl	48px	Section breaks
--space-3xl	64px	Page-level section gaps

Border Radius

Structural (0px)

Colour blocks, tables, service cards

Info cards (8px)

Info cards

Buttons (999px)

All buttons — pill-shaped always

Pills (999px)

Tags and pill labels only

Button Padding

Standard 10px / 20px

Large CTA 14px / 28px

Web Page Content Width

BROWSER VIEWPORT — background & design elements fill full width

Content container — max-width: 1400px

Text · cards · columns · buttons

Section backgrounds fill the full viewport

The outer section element carries background-color, flask patterns, and Mondrian grids — it stretches 100% of browser width at all screen sizes.

Content is constrained to 1400px

All page content — text, cards, columns, buttons — lives inside an inner container with max-width: 1400px and margin: 0 auto. Content never stretches beyond 1400px regardless of screen size.

Horizontal padding prevents edge-hugging

The content container always has padding: 0 48px on desktop and padding: 0 16px on mobile. Content should never touch the browser edge on any screen size.

Grid Gutters

2-col, 3-col & 4-col

20px

Mondrian tight

1px

3-COLUMN — 20px GUTTER

PAID SEARCH

Lorem ipsum dolor