Primary — teals

Five shades of teal that work as one system. Bot Teal Deep carries weight (backgrounds, footers), Bot Teal punches (marks, indicators), and Bot Teal Light and Pale soften surfaces and headlines on dark.

Bot Teal Deep

--c-teal-deep

HEX
#082C2C
RGB
8, 44, 44
Role
Nav, footer, hero overlay, body text on light

Bot Teal

--c-teal

HEX
#00BBB4
RGB
0, 187, 180
Role
Brand accent, glyphs, dot indicators, links

Bot Teal Pale

--c-aqua

HEX
#A5DFDF
RGB
165, 223, 223
Role
Soft surface, pill background, headlines on dark

Bot Teal Dark

--c-teal-dark

HEX
#005655
Role
Section backgrounds, alt nav

Bot Teal Light

--c-seafoam

HEX
#78CFCF
Role
Card insets, secondary accent

Action — warm

Trigger Amber is the call-to-action color. It lives almost exclusively on primary buttons and the occasional headline that needs to land. Trigger Amber Light is the "glow" behind the arrow accent.

Trigger Amber

--c-orange · --action

HEX
#F9A100
RGB
249, 161, 0
Role
Primary CTA button fill

Trigger Amber Light

--c-amber · --action-glow

HEX
#FDD999
RGB
253, 217, 153
Role
Button glow circle, soft warm surface

Alert Coral

--c-coral · --action-arrow

HEX
#F15B5B
RGB
241, 91, 91
Role
Button arrow, alert states

Accent — indigo & amber tints

Ops Indigo and Ops Indigo Light appear as full-section blocks (think testimonial bands, hero alternates). Trigger Amber Dark and Deep sit on amber surfaces, where black text would feel too harsh.

Ops Indigo

--c-indigo

HEX
#504384

Ops Indigo Light

--c-lavender

HEX
#BAB3CF

Trigger Amber Dark

--c-brown

HEX
#7D5100

Trigger Amber Deep

--c-brown-dark

HEX
#3F2900

Neutrals

Neutrals are the connective tissue — never lead with them. White is the default page; the grays carry dividers, nav pills, and the rare flat surface that doesn't want to be aqua.

White

--c-white

HEX
#FFFFFF

Gray Light

--c-gray-light

HEX
#E6E6E6

Gray

--c-gray

HEX
#D9D9D9

Black

--c-black

HEX
#000000

How color pairs

Every colored block pairs a saturated color with a supporting shade from the same family — that's how depth happens without drop shadows. Solid fills only; no gradients between hues.

Primary — full sections & pages

Use these on large, primary surfaces: heroes, full-bleed section bands, and whole pages.

Base Bot Teal Deep
Bot Teal
Bot Teal Pale
Hero bands & footers
Base Bot Teal Deep
Trigger Amber
Bot Teal Light
CTA on a dark hero
Base Bot Teal
Bot Teal Deep
Bot Teal Dark
Bright section bands
Base Bot Teal Pale
Trigger Amber
Bot Teal Dark
CTA on a teal section
Base Bot Teal Pale
Bot Teal Deep
Bot Teal Dark
Soft surface sections
Base Trigger Amber Light
Trigger Amber
Bot Teal Dark
Warm CTA surfaces
Base Gray Light
Bot Teal Dark
Bot Teal
Light-page sections
Base Gray Light
Trigger Amber
Bot Teal Dark
Light-page CTA

Secondary — insets, icons & inline

Monochromatic treatments: a single hue carried across base, surface, and accent. Use on smaller inset sections, iconography, and small inline moments within a page.

Base Bot Teal Light
Bot Teal Deep
Bot Teal Dark
Insets, icons & inline
Base Alert Coral Light
Alert Coral Deep
Alert Coral Dark
Insets, icons & inline
Base Ops Indigo Light
Ops Indigo Deep
Ops Indigo
Insets, icons & inline
Base Trigger Amber Light
Trigger Amber Deep
Trigger Amber
Insets, icons & inline
Base Bot Teal Dark
Bot Teal Pale
Bot Teal
Insets, icons & inline
Base Alert Coral Dark
Alert Coral Light
Alert Coral
Insets, icons & inline
Base Ops Indigo Deep
Ops Indigo Light
Ops Indigo
Insets, icons & inline
Base Trigger Amber Dark
Trigger Amber Light
Trigger Amber
Insets, icons & inline

Do / don't

Do
Anchor every layout in Bot Teal — dark or primary.
Pair a saturated color with its softer tint for depth.
Use Trigger Amber sparingly — it's the CTA color, not a decoration.
Don't
Don't use gradients between two brand hues.
Don't introduce new hues outside this palette.
Don't lead with neutrals — they're connective tissue, not the headline.