Skip to content
GOHUNT Brand

Foundations / 05

Color

Our palette is simple, bold, and rugged—drawn from the world of hunting and from nature. It uses contrast and restraint, allowing for focused communication without window dressing.

Hunter with a tripod and pack stands on a rocky point above a wide alpine basin

Three colors carry the brand

Hero color

GOHUNT Orange

Aa 3.0:1 · AA Large — large, bold type only

HEX
Token
Tailwind
PMS
1575 C
CMYK
0 66 88 0
RGB
243 119 53

Our hero color and primary signifier—instantly recognizable to hunters and non-hunters alike. Use it once per page, for the one place attention should go: a primary call to action, a key figure, or a product feature.

Gunmetal

Aa 14.8:1 · AAA

HEX
Token
Tailwind
PMS
Black 3
CMYK
73 61 70 71
RGB
33 38 33

Our darkest brand ground. Photography and orange sing against it.

Rugged Hazel

Aa 4.8:1 · AA

HEX
Token
Tailwind
PMS
7503
CMYK
34 35 68 4
RGB
170 151 103

Complementary accent, used sparingly. Not for labels, eyebrows, or UI text.

Digital values come from our Figma design tokens (Roosevelt 2.0 – Foundations), which supersede the 2022 PDF. PMS and CMYK remain the print references.

Lean monochrome. Let orange point the way.

Most GOHUNT communication should feel monochromatic. Color comes from imagery; design color exists to draw attention to critical content.
Start planning

Do

Use GOHUNT Orange once per page, on the primary call to action or key figure.

Start planning

Don’t

Don’t set dark grey or black text on GOHUNT Orange. Use white, large and bold (24px+, or 18.66px bold).

Do

Lean monochrome. Let color come from photography.

Start planning

Don’t

Don’t use pure white (#FFFFFF) or pure black (#000000) in digital design. The one exception: #FFF text on GOHUNT Orange is acceptable.

Greys define and delineate

Our index runs from 0 (pure white) to 1000 (pure black). Higher numbers are darker. Prioritize the three primary greys before reaching for the rest.

Adventure Snow

Aa 11.8:1 · AAA

HEX
Token
PMS
Cool Gray 1
CMYK
0 0 0 11

Wolf Grey

Aa 4.6:1 · AA

HEX
Token
PMS
Cool Gray 8
CMYK
2 2 0 43

Dark Grey

Aa 12.4:1 · AAA

HEX
Token
PMS
412 C
CMYK
70 64 62 59

Values follow our Figma tokens, which have shifted since the 2022 guide. Steps marked “Web” are where GOHUNT.com still ships the older shade—those will converge as the site adopts the Figma tokens.

Accents for meaning, not decoration

Accents carry information—status, data, map layers. Each has a dedicated dark-mode value, so always use the token rather than the hex.
  • Light
    Dark

    sky

    Water, weather, informational UI

  • Light
    Dark

    blue

    Links in dense data, selection, maps

  • Light
    Dark

    purple

    Premium features, special draws

  • Light
    Dark

    magenta

    Rare highlights; use sparingly

  • Light
    Dark

    red

    Errors and destructive actions

  • Light
    Dark

    green

    Success and confirmation

  • Light
    Dark

    yellow

    Warnings and alerts

  • Light
    Dark

    brown

    Terrain, land, and earth tones

Muted accents

Earthy tones for illustration, charts, and large fields where a saturated accent would shout. Same value in both modes.

Data visualization

Light mode

graph-red · graph-blue · graph-contrast · graph-gunmetal · graph-hazel

Dark mode

graph-red · graph-blue · graph-contrast · graph-gunmetal · graph-hazel

Tinted backgrounds for emphasis

Highlights are translucent washes of our accents—8% in light mode, 16% in dark—used behind badges, callouts, and selected rows. Pair each with its matching content or line color.

Light mode

  • brand highlightbg-highlight-brand
  • green highlightbg-highlight-green
  • yellow highlightbg-highlight-yellow
  • red highlightbg-highlight-red
  • blue highlightbg-highlight-blue

Dark mode

  • brand highlightbg-highlight-brand
  • green highlightbg-highlight-green
  • yellow highlightbg-highlight-yellow
  • red highlightbg-highlight-red
  • blue highlightbg-highlight-blue
brand
green
yellow
red
blue

Beyond the palette

For error and success states, warnings, maps, and user-generated content. Use these before inventing anything new.

Negative / error

  • Red 100
  • Red 500
  • Red 600

Confirmation / success

  • Green 400
  • Green 500
  • Kermit

Warning / alert

  • Yellow 500
  • Golden

Additional

  • Calypso
  • Bourbon
  • Brown 500

For designers & engineers

Semantic tokens

In product, never use a primitive directly—reach for the semantic token that describes the job. Every token has a light and dark value, straight from Figma.
container5 tokens
TailwindLightDarkFigma
#FFFFFFgrey-0#262627grey-800color/container/container-light
#EEEEEEgrey-50#1C1C1Dgrey-900color/container/container
#E3E3E3grey-100#262627grey-800color/container/container-2nd-stack
#404040grey-600#E3E3E3grey-100color/container/container-inverted
#323932gunmetal-800#323932gunmetal-800color/container/container-gunmetal
surface18 tokens
TailwindLightDarkFigma
#FAFAFAgrey-25#121212grey-950color/surface/background
#B5B5B8grey-300#505050grey-500color/surface/highest
#D0D0D0grey-200#404040grey-600color/surface/high
#E3E3E3grey-100#323132grey-700color/surface/surface
#EEEEEEgrey-50#262627grey-800color/surface/low
#FAFAFAgrey-25#1C1C1Dgrey-900color/surface/lowest
#FFFFFFgrey-0#121212grey-950color/surface/white-black
#202620gunmetal-900#202620gunmetal-900color/surface/background-gunmetal
#879287gunmetal-400#879287gunmetal-400color/surface/tertiary-highest
#556155gunmetal-600#556155gunmetal-600color/surface/tertiary-high
#424C42gunmetal-700#424C42gunmetal-700color/surface/tertiary-surface
#323932gunmetal-800#323932gunmetal-800color/surface/tertiary-low
#202620gunmetal-900#202620gunmetal-900color/surface/tertiary-lowest
#FAFAFAF5grey-25-96#1C1C1DF5grey-900-96color/surface/overlay
#FAFAFAB8grey-25-72#1C1C1DB8grey-900-72color/surface/overlay-md
#FAFAFA7Agrey-25-48#1C1C1D7Agrey-900-48color/surface/overlay-lt
#FAFAFAgrey-25#FAFAFAgrey-25color/surface/light
#121212grey-950#121212grey-950color/surface/dark
content18 tokens
TailwindLightDarkFigma
#262627grey-800#FAFAFAgrey-25color/content/primary
#5F5F5Fgrey-450#B5B5B8grey-300color/content/secondary
#8E8E92grey-350#707070grey-400color/content/label
#F26D26orange-500#F26D26orange-500color/content/brand
#DB6B30orange-600#F26D26orange-500color/content/link
#FAFAFAgrey-25#262627grey-800color/content/on-primary
#FAFAFAgrey-25#FAFAFAgrey-25color/content/on-secondary
#FFFFFFgrey-0#FFFFFFgrey-0color/content/on-brand
#EEEEEEgrey-50#404040grey-600color/content/on-inverted-surface
#A3905Chazel-500#A3905Chazel-500color/content/hazel
#879287gunmetal-400#879287gunmetal-400color/content/on-gunmetal
#F26D26orange-500#F26D26orange-500color/content/link-on-gunmetal
#8E8E92grey-350#707070grey-400color/content/disabled
#B5B5B8grey-300#5F5F5Fgrey-450color/content/placeholder
#FF3B30red-500#EA4D44red-525color/content/negative
#0A8447green-400#119955green-525color/content/success
#FAFAFAgrey-25#FAFAFAgrey-25color/content/light
#262627grey-800#262627grey-800color/content/dark
Base (active)16 tokens
TailwindLightDarkFigma
#262627grey-800#FAFAFAgrey-25color/active_base/primary
#5F5F5Fgrey-450#505050grey-500color/active_base/secondary
#424C42gunmetal-700#424C42gunmetal-700color/active_base/gunmetal
#D0D0D0grey-200#323132grey-700color/active_base/disabled
#E3E3E3grey-100#323132grey-700color/active_base/disabled-input
#F26D26orange-500#F26D26orange-500color/active_base/brand
#FAFAFAgrey-25#262627grey-800color/active_base/primary-inverted
#505050grey-500#505050grey-500color/active_base/secondary-inverted
#323132grey-700#D0D0D0grey-200color/active_base/disabled-inverted
#A3905Chazel-500#A3905Chazel-500color/active_base/accent
#D93229red-600#D93229red-600color/active_base/error
#EEEEEEgrey-50#404040grey-600color/active_base/selected-menu
#EEEEEEgrey-50#404040grey-600color/active_base/segment-background
#202620E5gunmetal-900-90#202620E5gunmetal-900-90color/active_base/dialog-bg
#FAFAFAgrey-25#FAFAFAgrey-25color/active_base/light
#262627grey-800#262627grey-800color/active_base/dark
hover10 tokens
TailwindLightDarkFigma
#C05821orange-700#C05821orange-700color/hover/brand
#404040grey-600#E3E3E3grey-100color/hover/primary
#404040grey-600#5F5F5Fgrey-450color/hover/secondary
#556155gunmetal-600#556155gunmetal-600color/hover/tertiary
#E3E3E3grey-100#404040grey-600color/hover/on-primary
#7B6E4Ahazel-700#7B6E4Ahazel-700color/hover/accent
#FF3B30red-500#EA4D44red-525color/hover/negative
#F7D6D4red-100#F7D6D4red-100color/hover/negative-secondary
#5F5F5Fgrey-450#FFFFFFgrey-0color/hover/segment-active
#FAFAFAgrey-25#323132grey-700color/hover/dropdown-background
line10 tokens
TailwindLightDarkFigma
#E3E3E3grey-100#404040grey-600color/line/primary
#D0D0D0grey-200#505050grey-500color/line/secondary
#262627grey-800#FAFAFAgrey-25color/line/outline
#A4AEA4gunmetal-300#A4AEA4gunmetal-300color/line/outline-gunmetal
#D0D0D0grey-200#404040grey-600color/line/disabled
#556155gunmetal-600#556155gunmetal-600color/line/tertiary
#262627grey-800#FAFAFAgrey-25color/line/focused
#FF3B30red-500#EA4D44red-525color/line/error
#00AA55green-500#119955green-525color/line/success
#F26D26orange-500#F26D26orange-500color/line/brand
Accents13 tokens
TailwindLightDarkFigma
#5AC8FAsky-500#6AC1EAsky-525color/accents/sky
#3366FFblue-500#4770EAblue-525color/accents/blue
#563CF1purple-500#634EDFpurple-525color/accents/purple
#A021CCmagenta-500#9732BBmagenta-525color/accents/magenta
#FF3B30red-500#EA4D44red-525color/accents/red
#00AA55green-500#119955green-525color/accents/green
#FFCC00yellow-500#E5BC19yellow-525color/accents/yellow
#795548brown-500#795548brown-500color/accents/brown
#B55E48flame#B55E48flamecolor/accents/graph-red
#416C86calypso#416C86calypsocolor/accents/graph-blue
#121212grey-950#FAFAFAgrey-25color/accents/graph-contrast
#868E86gunmetal-400#868E86gunmetal-400color/accents/graph-gunmetal
#A3905Chazel-500#A3905Chazel-500color/accents/graph-hazel
Highlights5 tokens
TailwindLightDarkFigma
#F26D2614highlight-orange-8#DB6B3029highlight-orange-16color/highlights/brand
#00AA5514highlight-green-8#11995529highlight-green-16color/highlights/green
#FFCC0014highlight-yellow-8#E5BC1929highlight-yellow-16color/highlights/yellow
#FF3B3014highlight-red-8#EA4D4429highlight-red-16color/highlights/red
#3366FF14highlight-blue-8#4770EA29highlight-blue-16color/highlights/blue

Contrast is not optional

Body text needs 4.5:1 against its background (WCAG AA). Large type—24px, or 18.66px bold—needs 3:1. White on GOHUNT Orange clears that bar only when set large and bold.

Aa

White on Orange

3.00:1 · large, boldAA Large

Aa

White on Orange · body

3.00:1Fail

Aa

Light on Gunmetal

14.80:1AAA

Aa

Hazel on Gunmetal

4.93:1AA

Aa

Primary text

14.49:1AAA

Aa

Secondary text

6.12:1AA

Aa

Primary text · dark

17.95:1AAA

Aa

Secondary text · dark

9.16:1AAA

Aa

Brand on dark

6.24:1AA