Skip to main content
TpGroup

Design System

  • Overview

Global Foundations

  • Colors
  • Typography
  • Spacing
  • Border Radius
  • Elevation
  • Semantic Colors
  • Iconography & Imagery
  • Accessibility

Supporting Foundations

  • Design Principles
  • Content & Voice
  • Logo Usage

Components

  • Component Library

Form Components

  • Button
  • Form Fields
  • Checkbox
  • Radio Group
  • Select
  • Slider
  • Switch

Data Display

  • Chips & Badges
  • Card
  • Table
  • Accordion
  • Tabs
  • Badge
  • Avatar
  • Carousel

Feedback & Overlays

  • Alert
  • Alert Dialog
  • Dialog
  • Toast
  • Popover
  • Tooltip
  • Sheet

Navigation

  • Breadcrumb
  • Pagination
  • Command
  • Dropdown Menu

Layout & Structure

  • Separator

Indicators

  • Progress

Schema-aware (GEO)

  • Testimonial
  • FAQ
  • Author Byline
  • Article Card
  • Event Card
  • Product Card
  • Course Card
  • How-to
  • Call to Action
  • Site Navigation

Page Templates

  • All page templates
  • TpGROUP home
  • TpISENT home
  • TpESTATE home
  • TpLEARN home
  • FambulTik home
  • Kent Oasis home
  • About us
  • History timeline
  • Blog index
  • Article (detail)
  • Tour listing
  • Services listing
  • Product listing
  • Staff directory
  • Portfolio
  • Careers
  • Getting started
  • FAQ page
  • Support
  • Contact
  • Product detail
  • Service detail
  • Person detail
  • Event detail
  • Tour detail
  • Course detail
  • Job detail
  • Project / case-study detail
  • Video detail
  • Podcast episode detail
  • Book detail
  • Place / heritage site detail
  • Video listing
  • Podcast listing
  • Book listing
  • Place / heritage sites listing

Patterns

  • Header / Navbar
  • Footer
  • Hero Sections
  • Typography
  • Lists / Groups
  • Gallery
  • Features
  • Pricing
  • Call-to-Action
  • Testimonials

v1.0.0 • April 2026

Component Library

A comprehensive library of reusable components built with foundation variables for multi-brand support

Form Components

Input elements for user data collection

Buttons

Interactive buttons with multiple variants, sizes, and states

Form Fields

Input fields, textareas, and select dropdowns for forms

Checkbox

Checkboxes for multiple selections

Radio Group

Radio buttons for single selections

Select

Dropdown select menus

Slider

Range sliders for numeric input

Switch

Toggle switches for binary options

Data Display

Components for presenting information

Chips & Badges

Status indicators, tags, and labels

Card

Flexible content containers

Table

Tabular data display

Accordion

Collapsible content sections

Tabs

Tabbed content organization

Avatar

User profile images and placeholders

Badge

Compact status indicators

Feedback & Overlays

Alerts, dialogs, and notifications

Alert

Inline alert messages

Alert Dialog

Modal confirmation dialogs

Dialog

Modal dialogs for content

Toast

Temporary notification messages

Popover

Contextual popup content

Tooltip

Hover tooltips for additional info

Sheet

Slide-out panels

Navigation

Navigation and wayfinding components

Breadcrumb

Hierarchical navigation

Pagination

Page navigation controls

Command

Command palette interface

Dropdown Menu

Dropdown action menus

Layout & Structure

Structural and layout components

Separator

Visual content dividers

Indicators

Progress and loading states

Progress

Progress bars and indicators

Carousel

Image and content carousels