Brand Guidelines

Visual Identity

Color Palette

#FFFFFF

White

Text on dark backgrounds

#264A50

Deep Sea

Primary text, dark section backgrounds

#153439

Deep Sea Dark

Hover states on dark elements

#335C63

Deep Sea Light

Secondary dark elements

#7C8E8E

Deep Sea 50%

Muted text, placeholders

#FFB584

Orange

Accent backgrounds, preheading text

#FAA46A

Orange Dark

Hover state for orange elements

#FFC198

Orange Light

Subtle accent backgrounds

#84D7DC

Sky Blue

Buttons, links, active states

#2FB2B8

Sky Blue Dark

Hover state for buttons/links

#9BEFF4

Sky Blue Light

Highlight, selection states

#E4D5C3

Tan

Borders, dividers

#BCAB96

Tan Dark

Stronger borders

#FAEFE1

Tan Light

Subtle backgrounds

#FCF3EB

Sand

Page background

#F2E6DB

Sand Dark

Background hover/active states

#FFFAF5

Sand Light

Card backgrounds

Color Guidance

Deep Sea — primary text color
Sky Blue — default for buttons, links, and active states
Orange — accents (section backgrounds, preheading text)
Sand — page backgrounds
Sand Light — card backgrounds
Deep Sea — dark section backgrounds with White text

Fonts

Typography

Headings — Tools

Instrument Sans

SemiBold weight for tool/product interfaces.

Headings — Marketing

Nib Pro SemiBold

Serif font for marketing pages and hero sections.

Body

Instrument Sans — regular weight for body text. Clean, modern, and highly legible at all sizes.

Google Fonts: Instrument+Sans:wght@400;500;600;700

Accent Preheadings

Sky Blue Preheading

Orange Preheading

Instrument Sans SemiBold, uppercase, 14px, tracking-widest

Components

Buttons

Corner radius: 0 (square edges on all elements)

Light Background

Dark Background

Identity

Logo

Square aspect ratio, fills full header height (~80px)

Light backgrounds

hq-logo-deep-sea.svg

Dark backgrounds

hq-logo-orange.svg

Patterns

Background Waves

Wave SVG patterns used over Sky Blue, Orange, and Deep Sea sections. Waves are often paired with a transparent foreground image and can bleed across color blocks.

On Sky Blue / Orange

On Deep Sea

Behind Graphic

Left Edge on Tan/Sand

For Developers

Tailwind Configuration

Theme Colors

colors: {
  white: '#FFFFFF',
  deep: {
    DEFAULT: '#264A50',
    dark: '#153439',
    light: '#335C63',
    muted: '#7C8E8E',
  },
  orange: {
    DEFAULT: '#FFB584',
    dark: '#FAA46A',
    light: '#FFC198',
  },
  sky: {
    DEFAULT: '#84D7DC',
    dark: '#2FB2B8',
    light: '#9BEFF4',
  },
  tan: {
    DEFAULT: '#E4D5C3',
    dark: '#BCAB96',
    light: '#FAEFE1',
  },
  sand: {
    DEFAULT: '#FCF3EB',
    dark: '#F2E6DB',
    light: '#FFFAF5',
  },
}

Component Classes

// Buttons
Primary:        bg-sky text-deep hover:bg-sky-dark
Primary (dark): bg-deep text-white hover:bg-deep-dark
Primary (alt):  bg-orange text-deep hover:bg-orange-dark
Secondary:      bg-transparent text-deep border border-tan

// Layout
Card:           bg-sand-light p-6
Page bg:        bg-sand
Dark section:   bg-deep text-white

// Typography
Preheading:     text-sm font-semibold uppercase
                tracking-widest text-sky
Preheading alt: ... text-orange