TpGroup Design System

A comprehensive, multi-brand design system for TpGROUP and its subsidiaries. Built with a three-tier architecture: Global Foundations, Brand Extensions, and Product Customizations.

Global Foundations

Colors

43 color tokens across 10+ brands

43 tokens

Typography

Type scale from 12px to 48px

10 tokens

Spacing

Consistent spacing scale 4-96px

12 tokens

Border Radius

From sharp to fully rounded

7 tokens

Elevation

Shadow system for depth

4 tokens

Semantic Colors

Purpose-driven color assignments

9 tokens

System Architecture

1

Global Foundations

Core design tokens shared across all brands: colors, typography, spacing, elevation, and semantic mappings.

2

Brand Extensions

Brand-specific variations for TpGROUP, TpISENT, TpESTATE, FambulTik, and more.

3

Product Customizations

Application-specific components for TpEMIS, TpLEARN, KentSL, and other products.

Key Principles

Accessibility First

WCAG 2.2 AA compliant with 4.5:1 contrast ratios for all text and interactive elements.

Mobile & Offline Ready

Optimized for low-bandwidth environments with system fonts and progressive enhancement.

Multi-Brand Support

Consistent experience across 10+ brands with flexible theming and token architecture.

AI-Ready Components

Built for agentic design workflows with clear semantic structure and documentation.