Colors

Every visual decision runs through four colors plus a cool-neutral gray scale. Dark Navy carries the brand, Sky Blue accents links and highlights, InTech Orange calls to action, White breathes. Four colors, used with intent — no exceptions.

Brand Colors

The four official colors. Do not add others.

Color palette

#0B0F18

Dark Navy

MAIN COLOR · DEFAULT BACKGROUND

#49B6FF

Sky Blue

PRIMARY ACCENT · LINKS · HIGHLIGHTS

#EB7823

InTech Orange

SECONDARY ACCENT · CTAS · CALLOUTS

#FFFFFF

White

TEXT ON DARK · CLEAN SPACE

⚠ Only use these four colors. Do not add others. Cool-neutral grays support but never lead.

Usage guide

#0B0F18 · Dark Navy

The default canvas for everything we ship.

Sidebars Headers Headings & titles Dark backgrounds

✕ Avoid using it as a CTA color.

#49B6FF · Sky Blue

Primary accent for wayfinding and state.

Links Focus states Selected states Informational badges

✕ Never use it for destructive actions.

#EB7823 · InTech Orange

Secondary accent — when it appears, it matters.

Primary buttons Calls to action Highlighted empty states Important indicators

✕ Use strategically to preserve visual hierarchy.

#FFFFFF · White

Light surfaces and breathing room.

Cards Primary surface Light backgrounds Breathing space

#8A9AB5 · Neutral 400

Body text on light, secondary labels, helper copy, muted icons. The workhorse gray.

Body text on dark: use #8A9AB5 (gray), not white. White is reserved for headlines and key emphasis.

Primary Swatches

CSS custom properties for each brand color.

--brand-navy

#0B0F18

Dark Navy --brand-navy

--brand-sky

#49B6FF

Sky Blue --brand-sky

--brand-orange

#EB7823

InTech Orange --brand-orange

--brand-white

#FFFFFF

White --brand-white

Derived Scales

10-step tonal ramps generated from each accent and the neutral gray.

Sky Blue Scale --sky-{50…900}

#EBF6FF

100

#D1ECFF

200

#A8DAFF

300

#7CCAFF

400

#49B6FF

500

#2B8FD8

600

#2273B4

700

#1B5A8E

800

#143F66

900

#0B233A

InTech Orange Scale --orange-{50…900}

#FEF2E8

100

#FCDFC6

200

#F9C18A

300

#F49960

400

#EF8839

500

#EB7823

600

#C46016

700

#974910

800

#6B340A

900

#3F1E05

Cool Neutral Scale --gray-{50…900}

#F7F8FA

100

#ECEFF3

200

#D6DAE2

300

#B4BAC6

400

#8A9AB5

500

#5E6478

600

#444A5A

700

#2E323E

800

#1C1F28

900

#0B0F18

Color Combinations

Recommended surface pairings that keep contrast and hierarchy intact.

Section label

Headline

Body text sample on this surface.

Navy

#0B0F18

White

#FFFFFF

Sky

#49B6FF

✓ DO · Navy + White + Sky

Section label

Headline

Body text sample on this surface.

Navy

#0B0F18

Gray

#8A9AB5

Orange

#EB7823

✓ DO · Navy + Gray + Orange CTA

Section label

Headline

Body text sample on this surface.

White

#FFFFFF

Navy

#0B0F18

Sky

#49B6FF

✓ DO · White + Navy + Sky

Section label

Headline

Body text sample on this surface.

White

#FFFFFF

Navy

#0B0F18

Orange

#EB7823

✓ DO · White + Navy + Orange CTA

Section label

Headline

Body text sample on this surface.

Navy

#0B0F18

White

#FFFFFF

Orange

#EB7823

✓ DO · Navy + White + Orange CTA

Section label

Headline

Body text sample on this surface.

White

#FFFFFF

Gray

#8A9AB5

Navy

#0B0F18

✓ DO · White + Gray + Navy

Semantic Colors

System feedback colors, taken directly from the live site's CSS tokens (--color-error / success / warning). Destructive states never reuse the CTA color.

#E74C3C

Error / Danger

New token

--color-error · soft #FDECEA

Destructive actions · validation errors

#2E7D32

Success

New token

--color-success · soft #E8F2E9

Confirmations · completed states

#E0C860

Warning

New token

--color-warning · soft #FBF6E3

Caution · non-blocking alerts

#49B6FF

Info

--color-info · soft #EBF6FF

Informational messages · neutral notices

Note: these four are system/feedback colors only — they sit outside the four brand colors and are used exclusively for state, never for layout or decoration.

Accessibility

Contrast rules that keep the palette legible for everyone.

Contrast guidelines

•All text must meet WCAG AA contrast.

•Avoid white text on Sky Blue (#49B6FF) — use Dark Navy instead.

•On dark surfaces, reserve White for headlines and key emphasis; use Neutral 400 (#8A9AB5) for body copy.

White on Sky ✕ Avoid

Navy on Sky ✓ Pass

White on Navy ✓ Pass

Design principle

Color should guide attention, not compete for it.

Use Navy to ground the experience, Sky Blue to inform, and Orange to drive action — sparingly, so it always means something.