Official Brand Guide 2026
BrandScale Partners Logo

BrandScale
Partners

Your complete visual identity system — colours, typography, buttons, and component guidelines.

Scroll to explore
01 — Brand Colours

Colour Palette

Our palette is anchored in teal and silver — confidence and precision. Click any swatch to copy the hex value.

Teal Primary
#0097A7
Primary Brand Colour
Teal Dark
#006978
Hover / Depth
Teal Light
#00BCD4
Highlights / Accents
Black
#0A0A0A
Primary Background
Silver
#B0BEC5
Secondary / Subtle
Silver Dark
#607D8B
Body Text / Muted
Silver Light
#ECEFF1
Backgrounds / Borders
White
#FFFFFF
Surface / Text on Dark
Teal Gradient
linear-gradient(135deg, #006978, #00BCD4)
Dark Brand Gradient
linear-gradient(135deg, #0A0A0A, #1A1A1A, #006978)
02 — Typography

Font System

Two fonts. One for authority and impact — one for clarity and warmth. Never mix these with other typefaces.

Display / Headings
Poppins
Bold
Poppins — Display Font
Used for all headings, titles, labels, buttons, and UI elements. Geometric, confident, and distinctive.
800 Extra Bold — Headlines
700 Bold — Section Titles
600 Semibold — Subheads
400 Regular — Labels
Body / Content
Inter
Light
Inter — Body Font
Used for paragraphs, descriptions, captions, and longer reading text. Geometric yet approachable.
500 Medium — Emphasis
400 Regular — Body Copy
300 Light — Descriptions
300i Light Italic — Quotes
Level Preview Size / Weight Use Case
Display Hero Title 64–80px / 800 Hero sections, page titles
H1 Heading One 40–48px / 700 Major section headers
H2 Heading Two 28–36px / 700 Sub-section headers
H3 Heading Three 22–24px / 600 Card titles, widget heads
Body L Large body paragraph text 17–18px / 400 Lead paragraphs
Body Default body copy and descriptions 14–16px / 300 Main content text
Caption Labels, captions, helper text 11–13px / 300 Footnotes, metadata
Label SECTION LABEL 10–12px / 700 UI labels, tags, badges
03 — Buttons

Button System

Every button variant, size, and state — ready to implement. Hover each button to preview the interaction.

Primary
background: #0097A7
color: #FFFFFF
border-radius: 8px
padding: 14px 28px
font: Poppins 600 14px
Primary Dark
background: #0A0A0A
color: #FFFFFF
border-radius: 8px
padding: 14px 28px
Outline — Teal
background: transparent
border: 2px solid #0097A7
color: #0097A7
border-radius: 8px
Outline — Dark
background: transparent
border: 2px solid #0A0A0A
color: #0A0A0A
border-radius: 8px
Ghost
background: transparent
color: #0097A7
no border
hover: rgba bg
Pill — Primary
background: #0097A7
color: #FFFFFF
border-radius: 100px
padding: 14px 32px
Pill — Outline
background: transparent
border: 2px solid #0097A7
border-radius: 100px
Button Sizes
Status Buttons
Icon Button
04 — Cards & Boxes

Component Boxes

Surface styles for cards, panels, and containers — use consistently across all touchpoints.

Default Card
White Surface
Background: #FFFFFF
Shadow: 0 2px 16px rgba(0,0,0,0.06)
Border-radius: 16px
Brand Card
Teal Primary
Background: #0097A7
Shadow: 0 8px 32px rgba(0,151,167,0.3)
Border-radius: 16px
Dark Card
Black Surface
Background: #0A0A0A
Shadow: 0 8px 32px rgba(0,0,0,0.25)
Border-radius: 16px
Outline Card
Bordered Surface
Border: 2px solid #ECEFF1
Background: transparent
Hover: teal border
Teal Outline
Teal Bordered
Border: 2px solid #0097A7
Background: transparent
Use for featured items
Gradient Card
Gradient Surface
linear-gradient(135deg,
#006978, #00BCD4)
Use sparingly — for CTAs
05 — Spacing

Spacing Scale

An 8px base grid ensures consistent rhythm and visual harmony across all elements.

--space-14pxIcon gaps, micro-spacing
--space-28pxInline padding, tight elements
--space-312pxButton padding (vertical)
--space-416pxCard inner padding
--space-624pxGrid gaps, form spacing
--space-832pxContainer padding
--space-1248pxSection sub-blocks
--space-1664pxMajor section padding
--space-24100pxFull section vertical padding
06 — Brand Rules

Usage Guidelines

Follow these rules to maintain brand integrity across every surface and medium.

🎨
Colour Usage
  • Teal Primary is the hero colour — use it for CTAs and key actions
  • Never use more than 2 brand colours in a single component
  • Black backgrounds pair with teal for high-impact sections
  • Silver is strictly a secondary / supporting colour
  • White text only on dark or teal backgrounds
🔤
Typography Rules
  • Poppins for all headings, buttons, and UI labels — never body text
  • Inter for all paragraph and descriptive content
  • Never stretch, condense, or distort either typeface
  • Minimum 16px for body text; 14px only for captions
  • Use letter-spacing 0.2em+ on all uppercase labels
📦
Logo Guidelines
  • Logo appears on black or very dark backgrounds only
  • Maintain 32px clear space on all sides of the logo
  • Never place on patterned or cluttered backgrounds
  • Never recolour, rotate, or distort the logo
  • Minimum logo width: 120px for digital, 30mm for print
🖱️
Button & Interaction
  • Primary action: always use Teal Primary button
  • One primary CTA per section maximum
  • All interactive elements must have a visible hover state
  • Disabled states use silver — never teal at reduced opacity
  • Pill buttons for hero CTAs; rounded for standard actions
📐
Layout Principles
  • Maintain 8px base grid for all spacing decisions
  • Maximum content width: 1200px centred
  • Section vertical padding minimum: 80px
  • Card border-radius: 8px (compact), 16px (standard), 24px (featured)
  • Never reduce line-height below 1.4 for body text
🚫
What Not To Do
  • No purple, pink, or warm colours in the palette
  • No gradient overuse — max one gradient element per screen
  • Never use Arial, Roboto, or system fonts as substitutes
  • Avoid all-caps for body text — labels only
  • No drop-shadows on teal backgrounds
Copied to clipboard!