> ## Documentation Index
> Fetch the complete documentation index at: https://tetrafi.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand Kit

> TetraFi brand colors, logos, and usage guidelines.

Brand assets for partners and integrators. Reference the official color palette.

## Color palette

TetraFi's palette centers on a navy primary with a green-to-cyan accent range, plus standard UI state colors.

### Primary

<div className="color-grid">
  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#2c5282' }}>
      <span style={{ color: '#ffffff' }}>#2C5282</span>
    </div>

    <span className="color-swatch-label">Navy</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#3b6db5' }}>
      <span style={{ color: '#ffffff' }}>#3B6DB5</span>
    </div>

    <span className="color-swatch-label">Navy Light</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#1e3a8a' }}>
      <span style={{ color: '#ffffff' }}>#1E3A8A</span>
    </div>

    <span className="color-swatch-label">Navy Deep</span>
  </div>
</div>

### Accents

<div className="color-grid">
  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#059669' }}>
      <span style={{ color: '#ffffff' }}>#059669</span>
    </div>

    <span className="color-swatch-label">Green</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#0891b2' }}>
      <span style={{ color: '#ffffff' }}>#0891B2</span>
    </div>

    <span className="color-swatch-label">Cyan</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#7c3aed' }}>
      <span style={{ color: '#ffffff' }}>#7C3AED</span>
    </div>

    <span className="color-swatch-label">Purple</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#d97706' }}>
      <span style={{ color: '#ffffff' }}>#D97706</span>
    </div>

    <span className="color-swatch-label">Amber</span>
  </div>

  <div className="color-swatch">
    <div className="color-swatch-block" style={{ background: '#dc2626' }}>
      <span style={{ color: '#ffffff' }}>#DC2626</span>
    </div>

    <span className="color-swatch-label">Red</span>
  </div>
</div>

## Logos

Use the appropriate variant depending on the background. Do not modify, recolor, or distort the logo.

<div className="logo-showcase-row">
  <div className="logo-showcase logo-showcase-dark">
    <div className="logo-showcase-left">
      <img src="https://mintcdn.com/tetrafi/hT7nGse44PNS7QpH/logo/tetrafi-mark-dark.svg?fit=max&auto=format&n=hT7nGse44PNS7QpH&q=85&s=e2f93f71b83104dc5a7ca71c43afe890" alt="TetraFi mark, white" className="logo-sm" width="100" height="100" data-path="logo/tetrafi-mark-dark.svg" />
    </div>

    <div className="logo-showcase-right">
      <img src="https://mintcdn.com/tetrafi/hT7nGse44PNS7QpH/logo/tetrafi-mark-dark.svg?fit=max&auto=format&n=hT7nGse44PNS7QpH&q=85&s=e2f93f71b83104dc5a7ca71c43afe890" alt="TetraFi mark, white" className="logo-lg" width="180" height="180" data-path="logo/tetrafi-mark-dark.svg" />
    </div>

    <span className="logo-showcase-label">Dark background</span>
  </div>

  <div className="logo-showcase logo-showcase-light">
    <div className="logo-showcase-left">
      <img src="https://mintcdn.com/tetrafi/hT7nGse44PNS7QpH/logo/tetrafi-mark-light.svg?fit=max&auto=format&n=hT7nGse44PNS7QpH&q=85&s=cd79dd1bf9d966d0f47e539b4d3775f6" alt="TetraFi mark, navy" className="logo-sm" width="100" height="100" data-path="logo/tetrafi-mark-light.svg" />
    </div>

    <div className="logo-showcase-right">
      <img src="https://mintcdn.com/tetrafi/hT7nGse44PNS7QpH/logo/tetrafi-mark-light.svg?fit=max&auto=format&n=hT7nGse44PNS7QpH&q=85&s=cd79dd1bf9d966d0f47e539b4d3775f6" alt="TetraFi mark, navy" className="logo-lg" width="180" height="180" data-path="logo/tetrafi-mark-light.svg" />
    </div>

    <span className="logo-showcase-label">Light background</span>
  </div>
</div>

For logo files and brand assets, contact [enquiries@tetrafi.io](mailto:enquiries@tetrafi.io).

## Usage guidelines

When using TetraFi brand assets, please keep the following in mind: always maintain clear space around the logo, never place it on visually busy backgrounds, and use the correct color variant for the surface it sits on. If you need additional formats or have questions, reach out at [enquiries@tetrafi.io](mailto:enquiries@tetrafi.io).