Brand Guidelines
Visual Identity
Color Palette
White
Text on dark backgrounds
Deep Sea
Primary text, dark section backgrounds
Deep Sea Dark
Hover states on dark elements
Deep Sea Light
Secondary dark elements
Deep Sea 50%
Muted text, placeholders
Orange
Accent backgrounds, preheading text
Orange Dark
Hover state for orange elements
Orange Light
Subtle accent backgrounds
Sky Blue
Buttons, links, active states
Sky Blue Dark
Hover state for buttons/links
Sky Blue Light
Highlight, selection states
Tan
Borders, dividers
Tan Dark
Stronger borders
Tan Light
Subtle backgrounds
Sand
Page background
Sand Dark
Background hover/active states
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.svgDark backgrounds
hq-logo-orange.svgPatterns
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