FirmTree Brand Guide

Home / Brand Guide

Colors

Color Palette

Our palette reflects trust, energy, and clarity. Navy, white, and teal are primary. All others serve as background or accent colors.

Primary Colors

Primary

Navy Blue

#003366

Headings, primary text, dark backgrounds, navbar logo

Primary

Teal

#14bdc7

CTAs, links, badges, highlights, brand accent

Primary

White

#FFFFFF

Backgrounds, cards, light text on dark surfaces

Supporting Colors

Text

Dark Charcoal

#3a3839

Body text, secondary headings

Muted

Gray

#999798

Muted text, captions, placeholders

Accent

Dark Teal

#005e74

Secondary accent, hover states, badges

Accent Colors

Accent

Orange / Amber

#ffa718

Warnings, highlights, secondary CTAs, star ratings

Accent

Red-Orange

#f04c26

Errors, destructive actions, urgent alerts

Background

Light Gray

#F4F5F7

Alternating section backgrounds, cards, inputs

Logo

Logo Usage

The FirmTree logo comes in landscape and portrait orientations. Use navy on light backgrounds and white on dark backgrounds. The teal variant is for special use cases.

Navy Landscape
Navy Landscape — Light backgrounds
White Landscape
White Landscape — Dark backgrounds
Teal Landscape
Teal Landscape — Special use
Navy Portrait
Navy Portrait — Light backgrounds
White Portrait
White Portrait — Dark backgrounds
Teal Portrait
Teal Portrait — Special use

Favicon

The favicon adapts to the user's system theme — navy icon on light mode, white icon on dark mode.

Favicon Light

Light mode

Favicon Dark

Dark mode

Typography

Type System

Two font families create hierarchy and readability across all surfaces.

Be Vietnam Pro — Headings & UI

The Smart Way to Start

Build a Business That Lasts

Section Heading (H3)

Navigation & Button Labels

Inter — Body Text & Content

Hero body text — 17px, regular weight, #3a3839

Standard body text — 15px, regular weight, #3a3839

Card descriptions — 14px, regular weight, #999798

Captions, meta, small text — 13px, #999798

Components

Buttons

Consistent button styles across the platform.

Primary Large Primary Default Primary Small
Secondary Large Secondary Default Secondary Small
Outline Large Outline Default Outline Small

Badges & Labels

Used above section headings and on cards to categorize content.

Teal Badge Dark Teal Badge Teal Card Navy Card Orange Card Red Card

Usage Guidelines

Do

  • Use navy logo on white/light backgrounds
  • Use white logo on navy/dark backgrounds
  • Maintain clear space around the logo
  • Use teal (#14bdc7) for interactive elements
  • Use Be Vietnam Pro for all headings
  • Alternate white/gray sections for visual rhythm

Don't

  • Place navy logo on dark backgrounds
  • Stretch or distort the logo
  • Use colors outside the palette for UI elements
  • Mix heading fonts with body fonts
  • Use orange for primary CTAs (teal is primary)
  • Stack more than 2 white sections without a gray break