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

The rest of the palette

Every color in the system, with its hex value and token — the complete spec, matching the asset library. These families are deliberately shown small: they support Bot Teal, they don't compete with it.

Completeness isn't a license. A color appearing here is documented for accuracy — not an invitation to use every hue equally. Bot Teal leads; these fill specific, secondary roles.

Trigger Amber — the action family

Trigger Amber is the CTA fill, used sparingly. The tints back the button glow and warm surfaces.

Trigger Amber Deep

#3F2900

--c-brown-dark

Trigger Amber Dark

#7D5100

--c-brown

Trigger Amber

#F9A100

--c-orange

Trigger Amber Light

#FBC766

--c-light-amber

Trigger Amber Pale

#FDD999

--c-amber

Ops Indigo — secondary family

Full-section blocks — testimonial bands, hero alternates. A supporting color, never a lead.

Ops Indigo Deep

#141121

--c-black-deep

Ops Indigo Dark

#282242

--c-purple-dark

Ops Indigo

#504384

--c-indigo

Ops Indigo Light

#968EB5

--c-lavender-muted

Ops Indigo Pale

#BAB3CF

--c-lavender

Alert Coral — alert family

Alert states and the button arrow accent. The smallest footprint of any family.

Alert Coral Deep

#3C1717

--c-burgundy

Alert Coral Dark

#792E2E

--c-red-dark

Alert Coral

#F15B5B

--c-coral

Alert Coral Light

#F79D9D

--c-pink

Alert Coral Pale

#F9BDBD

--c-pink-soft

Neutrals — connective tissue

Dividers, nav pills, page base. Never lead with them.

White

#FFFFFF

--c-white

Gray Light

#E6E6E6

--c-gray-light

Gray

#D9D9D9

--c-gray

Black

#000000

--c-black

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.