Colors

The TpGroup color system includes 43 color tokens spanning multiple brands. Each brand has its own primary and secondary colors, with full scales for each hue.

Brand Colors

TpGROUP

Primary

#194A8D

Secondary

#666666

Light

Primary

#194A8D

Secondary

#666666

Dark

Primary

#1A4181

Secondary

#808080

TpGroup

Primary

#ED6A02

Secondary

#EDEDED

TpMIS

Primary

#1180D0

Secondary

#1A4181

FambulTik

Primary

#B94A0D

Secondary

#1A4181

TpESTATE

Primary

#008080

Secondary

#1A4181

TpLEARN

Primary

#6028D0

Secondary

#1A4181

TellStoryAgent

Primary

#294273

Secondary

#1A4181

Kent Resort

Primary

#008080

Secondary

#1A4181

Fambul Tour Guide

Primary

#ED6A02

Secondary

#1A4181

HassanMakai

Primary

#808080

Secondary

#808080

Color Scales

Neutral

50

#F9F9F9

100

#F0F0F0

200

#E0E0E0

300

#C8C8C8

400

#A0A0A0

500

#7F7F7F

600

#666666

700

#4D4D4D

800

#333333

900

#1A1A1A

CSS: var(--color-neutral-[shade])

Navy (TpGROUP)

50

#E8EEF5

100

#C5D4E8

200

#9EB8D9

300

#769BCA

400

#5885BF

500

#3B70B4

600

#3568AD

700

#2D5DA4

800

#26539C

900

#194A8D

CSS: var(--color-navy-(tpgroup)-[shade])

Orange

50

#FFF3E0

100

#FFE0B2

200

#FFCC80

300

#FFB74D

400

#FFA726

500

#FF9800

600

#FB8C00

700

#F57C00

800

#EF6C00

900

#ED6A02

CSS: var(--color-orange-[shade])

Blue

50

#E3F2FD

100

#BBDEFB

200

#90CAF9

300

#64B5F6

400

#42A5F5

500

#2196F3

600

#1E88E5

700

#1976D2

800

#1565C0

900

#1180D0

CSS: var(--color-blue-[shade])

Coral

50

#FFEBE6

100

#FFCEC1

200

#FFAD98

300

#FF8C6E

400

#FF734F

500

#FF5A30

600

#F0522B

700

#DC4824

800

#C83F1D

900

#B94A0D

CSS: var(--color-coral-[shade])

Teal

50

#E0F2F1

100

#B2DFDB

200

#80CBC4

300

#4DB6AC

400

#26A69A

500

#009688

600

#00897B

700

#00796B

800

#00695C

900

#008080

CSS: var(--color-teal-[shade])

Purple

50

#F3E5F5

100

#E1BEE7

200

#CE93D8

300

#BA68C8

400

#AB47BC

500

#9C27B0

600

#8E24AA

700

#7B1FA2

800

#6A1B9A

900

#6028D0

CSS: var(--color-purple-[shade])

Usage Guidelines

  • • All color combinations meet WCAG 2.2 AA contrast requirements (4.5:1 for text)
  • • Use semantic color tokens (accent, text) rather than direct color values
  • • Brand colors automatically switch based on the active theme/brand context
  • • Test colors in both light and dark modes before finalizing designs