Brand Toolkit

Brand guidelines and downloadable assets for Climate Global

Color Palette

Primary Brand Colors

Sapphire Main brand color, logos, headers
Light Sapphire Light backgrounds, hover states

Secondary Brand Colors

Olive Secondary elements, nature accents
Rosewood Tertiary accents, emphasis

Accent Colors

Vibrant Orange CTAs, buttons, highlights
Amber Primary buttons, warm accents

Backgrounds & Neutrals

Pearl White Cards, secondary surfaces
White Primary sections, elevated surfaces
Warm Grey Borders, dividers

Text Colors

Near Black Headings, body text
Dark Grey Secondary text, captions

Preview

Buttons

Typography

Climate Global REIT

Building resilient investments through climate intelligence

Typography

Heading Font

Calibri Fallback: Arial, sans-serif

CLIMATE GLOBAL

Building resilient investments

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Font Family: Calibri, Arial, sans-serif
Weights: Regular (400), Semibold (600), Bold (700)
Usage: Logo wordmark, headings, titles

Body Font

System UI Native system font stack

Climate Global REIT

Building resilient investments through climate intelligence.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Font Family: system-ui, -apple-system, sans-serif
Weights: Regular (400), Medium (500)
Usage: Body text, paragraphs, UI elements

Type Scale

h1 / 2.5rem (40px) Climate Global
h2 / 2rem (32px) Section Heading
h3 / 1.5rem (24px) Subsection Title
h4 / 1.125rem (18px) Card Title
body / 1rem (16px) Body text for paragraphs and general content.
small / 0.875rem (14px) Captions, labels, and secondary text.
xs / 0.75rem (12px) Fine print, legal text, metadata.

CSS Implementation

Typography CSS

:root {
  /* Font Families */
  --font-heading: Calibri, Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --text-h1: 2.5rem;    /* 40px */
  --text-h2: 2rem;      /* 32px */
  --text-h3: 1.5rem;    /* 24px */
  --text-h4: 1.125rem;  /* 18px */
  --text-body: 1rem;    /* 16px */
  --text-small: 0.875rem; /* 14px */
  --text-xs: 0.75rem;   /* 12px */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
}

body {
  font-family: var(--font-body);
  line-height: var(--leading-normal);
}

Design Tokens

Export color values and typography settings for development.

JavaScript / TypeScript

// Climate Global Design Tokens

export const colors = {
  primary: '#1F4E79',      // Sapphire
  primaryLight: '#E8EEF4', // Light Sapphire
  secondary: '#6B7B4E',    // Olive
  tertiary: '#802B40',     // Rosewood
  accent: '#FF6B00',       // Vibrant Orange
  warm: '#D99036',         // Amber
  textPrimary: '#1A1A1A',
  textSecondary: '#5A5A5A',
  background: '#F5F0E6',   // Pearl White
  surface: '#FFFFFF',
  surfaceDark: '#E5E0D6',
  dark: '#1F4E79',
};

export const typography = {
  fontFamily: {
    heading: 'Calibri, Arial, sans-serif',
    body: 'system-ui, -apple-system, sans-serif',
  },
  fontSize: {
    h1: '2.5rem',
    h2: '2rem',
    h3: '1.5rem',
    body: '1rem',
    small: '0.875rem',
  },
};

export const spacing = {
  xs: '0.25rem',
  sm: '0.5rem',
  md: '1rem',
  lg: '1.5rem',
  xl: '2rem',
  xxl: '3rem',
};

CSS Variables

:root {
  /* Climate Global Brand Colors */
  --color-primary: #1F4E79;       /* Sapphire */
  --color-primary-light: #E8EEF4; /* Light Sapphire */
  --color-secondary: #6B7B4E;     /* Olive */
  --color-tertiary: #802B40;      /* Rosewood */
  --color-accent: #FF6B00;        /* Vibrant Orange */
  --color-warm: #D99036;          /* Amber */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5A5A5A;
  --color-background: #F5F0E6;    /* Pearl White */
  --color-surface: #FFFFFF;
  --color-surface-dark: #E5E0D6;
  --color-dark: #1F4E79;

  /* Typography */
  --font-heading: Calibri, Arial, sans-serif;
  --font-body: system-ui, -apple-system, sans-serif;
}

Usage Guidelines

✓ Do

  • Use Sapphire (#1F4E79) for logos and headers
  • Maintain minimum clear space around logo (equal to logo mark height)
  • Use Amber for primary buttons, Orange for CTAs
  • Ensure sufficient contrast for accessibility
  • Use reversed logo on dark backgrounds

✗ Don't

  • Stretch or distort the logo
  • Use unapproved color combinations
  • Place logo on busy backgrounds
  • Modify the globe arcs or proportions
  • Use drop shadows or effects on logo

Header Styles

CSS for the branded header with soft wave texture overlay:

Header CSS 
/* Climate Global Branded Header */
.site-header {
  background-color: #1F4E79;
  color: white;
  padding: 2rem 0;
  position: relative;
  overflow: hidden;
}

/* Soft wave texture overlay */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1' d='M0 30 Q50 10 100 30 T200 30 M0 55 Q50 35 100 55 T200 55 M0 80 Q50 60 100 80 T200 80'/%3E%3C/svg%3E");
  background-size: 200px 100px;
  pointer-events: none;
}

.site-header .container {
  position: relative;
  z-index: 1;
}