Colors

The TpGroup color system: six brand families over seven primitive ramps, plus a TpEMIS-specific Indigo / Ember / Cyan / Slate set introduced in Phase 5.5. All values are generated from tokens/src/core and tokens/src/brand via Style Dictionary; this page mirrors the pipeline output.

Brands

TpGROUP
Navy #194A8D · corporate parent
TpEMIS
Indigo #4F46E5 · Education ERP (rebranded 2026-04)
TpISENT
Blue #1180D0 · ICT consultancy
FambulTik
Baobab Green #15713E + Krio Orange #AE4E19 · heritage tourism (rebranded 2026-04)
TpESTATE
Evergreen #115E59 · sustainable real estate (rebranded 2026-04)
TpLEARN
Leaf Green #15803D + Vivid Violet #7C3AED · gamified learning (rebranded 2026-04)

TpEMIS palette · Indigo / Ember / Cyan / Slate

Scoped to .brand-tpemis. Rebranded 2026-04: legacy Navy/Gold failed WCAG AA.

TpEMIS Primary · Indigo

--color-tpemis-primary-{stop}

Replaces the legacy Navy reference for TpEMIS. 50–950 full scale.

50
#EEF2FF
100
#E0E7FF
200
#C7D2FE
300
#A5B4FC
400
#818CF8
500
#6366F1
600
#4F46E5
700
#4338CA
800
#3730A3
900
#312E81
950
#1E1B4B

TpEMIS Accent · Ember

--color-tpemis-accent-{stop}

Replaces Gold #FFC700 which failed WCAG AA on white at 1.6:1. Ember-700 passes AA at 5.9:1.

50
#FFF7ED
100
#FFEDD5
200
#FED7AA
300
#FDBA74
400
#FB923C
500
#F97316
600
#EA580C
700
#C2410C
800
#9A3412
900
#7C2D12

TpEMIS Secondary · Cyan

--color-tpemis-secondary-{stop}

New secondary for freshness and energy. 700 passes AA on white at 5.5:1.

50
#ECFEFF
100
#CFFAFE
200
#A5F3FC
300
#67E8F9
400
#22D3EE
500
#06B6D4
600
#0891B2
700
#0E7490
800
#155E75
900
#164E63

TpEMIS Neutral · Slate

--color-tpemis-neutral-{stop}

Cooler-toned neutrals, harmonizes with Indigo. Replaces the shared Neutral grays inside .brand-tpemis.

50
#F8FAFC
100
#F1F5F9
200
#E2E8F0
300
#CBD5E1
400
#94A3B8
500
#64748B
600
#475569
700
#334155
800
#1E293B
900
#0F172A
950
#020617

TpLEARN palette · Leaf Green / Violet / Amber / Rose / Sky

Scoped to .brand-tplearn. Rebranded 2026-04 for gamified learning (ages 10–18).

TpLEARN Primary · Leaf Green

--color-tplearn-primary-{stop}

Growth, progress, correct answers. Replaces legacy Purple reference for TpLEARN.

50
#F0FDF4
100
#DCFCE7
200
#BBF7D0
300
#86EFAC
400
#4ADE80
500
#22C55E
600
#16A34A
700
#15803D
800
#166534
900
#14532D

TpLEARN Gamification · Vivid Violet

--color-tplearn-gamification-{stop}

Achievements, badges, XP, power-ups, levels.

50
#F5F3FF
100
#EDE9FE
200
#DDD6FE
300
#C4B5FD
400
#A78BFA
500
#8B5CF6
600
#7C3AED
700
#6D28D9
800
#5B21B6
900
#4C1D95

TpLEARN Reward · Sunshine Amber

--color-tplearn-reward-{stop}

Streaks, celebrations, gold stars, bonus points.

50
#FFFBEB
100
#FEF3C7
200
#FDE68A
300
#FCD34D
400
#FBBF24
500
#F59E0B
600
#D97706
700
#B45309
800
#92400E
900
#78350F

TpLEARN Hearts · Spark Rose

--color-tplearn-hearts-{stop}

Lives/hearts system, errors, wrong answers, alerts.

50
#FFF1F2
100
#FFE4E6
200
#FECDD3
300
#FDA4AF
400
#FB7185
500
#F43F5E
600
#E11D48
700
#BE123C
800
#9F1239
900
#881337

TpLEARN Info · Ocean Sky

--color-tplearn-info-{stop}

Hints, tips, informational content, progress indicators.

50
#F0F9FF
100
#E0F2FE
200
#BAE6FD
300
#7DD3FC
400
#38BDF8
500
#0EA5E9
600
#0284C7
700
#0369A1
800
#075985
900
#0C4A6E

TpESTATE palette · Evergreen / Timber / Ocean / Sand

Scoped to .brand-tpestate (also applied to Kent Oasis). Rebranded 2026-04 for sustainable real estate.

TpESTATE Primary · Evergreen

--color-tpestate-primary-{stop}

Coastal vegetation, sustainable living. 700 passes AA/AAA on white at 7.6:1.

50
#F0FDFA
100
#CCFBF1
200
#99F6E4
300
#5EEAD4
400
#2DD4BF
500
#14B8A6
600
#0F766E
700
#115E59
800
#134E4A
900
#0C3B38
950
#042F2E

TpESTATE Accent · Timber

--color-tpestate-accent-{stop}

Locally sourced hardwood. 700 passes AA/AAA on white at 6.7:1.

50
#FDF8F1
100
#F5E6D3
200
#E8CBA8
300
#D4A574
400
#C08B52
500
#A67039
600
#8F5E30
700
#7C533A
800
#5C3D2A
900
#3D2A1C

TpESTATE Secondary · Ocean

--color-tpestate-secondary-{stop}

Atlantic beachfront. Information, links, water/nature imagery.

50
#F0F9FF
100
#E0F2FE
200
#BAE6FD
300
#7DD3FC
400
#38BDF8
500
#0EA5E9
600
#0284C7
700
#1D6A8A
800
#155E75
900
#164E63

TpESTATE Tertiary · Sand

--color-tpestate-tertiary-{stop}

Beach sand, laterite earth. Pricing, premium badges, tertiary accents.

50
#FEFCE8
100
#FEF9C3
200
#FEF08A
300
#FDE047
400
#FACC15
500
#CA9E17
600
#A17F1B
700
#87692B
800
#6B5320
900
#4A3A16

FambulTik palette · Baobab Green / Krio Orange / Heritage Teal / Warm Stone

Scoped to .brand-fambultik. Rebranded 2026-04: heritage-tourism warmth, African-centric palette.

FambulTik Primary · Baobab Green

--color-fambultik-primary-{stop}

Family tree, growth, African forest. Replaces legacy Coral reference.

50
#F0F9F0
100
#D4EDDA
200
#A8DBB5
300
#6BC085
400
#3AA35E
500
#1B8A4B
600
#1B8A4B
700
#15713E
800
#115C32
900
#0D4B28

FambulTik Accent · Krio Orange

--color-fambultik-accent-{stop}

Sunset warmth, terracotta, African earth.

50
#FFF8F0
100
#FEECD6
200
#FDD5AA
300
#F9B474
400
#F28E42
500
#E87426
600
#D05E1C
700
#AE4E19
800
#9C4515
900
#7A3610

FambulTik Secondary · Heritage Teal

--color-fambultik-secondary-{stop}

The Atlantic, diaspora connection, depth of history.

50
#F0F8FA
100
#D6EDF2
200
#B5DDE5
300
#7CC2D0
400
#4AA3B5
500
#28869A
600
#1F7080
700
#1A5C6B
800
#134955
900
#0D3640

FambulTik Neutral · Warm Stone

--color-fambultik-neutral-{stop}

Intentionally warm neutrals (not cold slate) to match heritage brand warmth.

50
#FAF8F5
100
#F5F0EB
200
#E8E4DF
300
#D6D0C8
400
#A8A29E
500
#78716C
600
#6B6355
700
#44403C
800
#292524
900
#1C1917
950
#2A2520

Shared primitive ramps

Available to every brand. Used today by TpGROUP and TpISENT; TpEMIS / TpLEARN / TpESTATE / FambulTik ship their own scoped ramps above.

Neutral

--color-neutral-{stop}

Shared neutrals. TpEMIS overrides with a Slate ramp inside .brand-tpemis.

50
#F9F9F9
100
#F0F0F0
200
#E0E0E0
300
#C8C8C8
400
#A0A0A0
500
#7F7F7F
600
#666666
700
#4D4D4D
800
#333333
900
#1A1A1A

Navy

--color-navy-{stop}

TpGROUP parent scale. Full 50–900.

50
#E8EEF5
100
#C5D4E8
200
#9EB8D9
300
#769BCA
400
#5885BF
500
#3B70B4
600
#3568AD
700
#2D5DA4
800
#26539C
900
#194A8D

Blue

--color-blue-{stop}

TpISENT anchor. Only 500 + 900 populated today — full scale is a follow-up.

500
#2196F3
900
#1180D0

Orange

--color-orange-{stop}

Legacy TpEMIS anchor (since superseded by Indigo). Shared primitive, retained.

500
#FF9800
900
#ED6A02

Coral

--color-coral-{stop}

FambulTik anchor. Only 500 + 900 populated today.

500
#FF5A30
900
#B94A0D

Teal

--color-teal-{stop}

TpESTATE anchor. Only 500 + 900 populated today.

500
#009688
900
#008080

Purple

--color-purple-{stop}

TpLEARN anchor. Only 500 + 900 populated today.

500
#9C27B0
900
#6028D0

State colors

Brand-invariant. Same values across all brands.

success
#10B981 · #D1FAE5
warning
#F59E0B · #FEF3C7
error
#EF4444 · #FEE2E2
info
#3B82F6 · #DBEAFE