TIGC Design System Documentation
A flexible, adaptive design system that simplifies interface creation through a library of reusable components, detailed documentation, and guidelines, empowering teams to deliver consistent, high-quality user experiences.
Introduction
What is a Design System ?
The TIGC Design System is a unified, reusable set of components, patterns, and guidelines designed for consistency, efficiency, and scalability across all TIGC products. Our system combines color, typography, grids, spacing, icons, components, and tokens for seamless brand experience.
Foundations
A.Color System
Approach:
Multi-level variable tokens:
Level 1: Brand Colors
Level 2: Color Alias
Level 3: Color Tokens
Benefits:
Ensures global consistency and enables effortless color updates—simply change at the variable source for immediate impact across products
B.Typography
Principles:
Defined font families (Pretendard), weights, and clear scale for headings, body, labels, buttons, and more.
Variable Tokens:
Modular tokens for each style, enabling fast updates and responsive design.
Foundations
A.Color System
Approach:
Multi-level variable tokens:
Level 1: Brand Colors
Level 2: Color Alias
Level 3: Color Tokens
Benefits:
Ensures global consistency and enables effortless color updates—simply change at the variable source for immediate impact across products.
B.Typography
Principles:
Defined font families (Pretendard), weights, and clear scale for headings, body, labels, buttons, and more.
Variable Tokens:
Modular tokens for each style, enabling fast updates and responsive design.
C. Grid System
Layout:
Adaptable grid framework for desktop, tablet, and mobile.
Implementation:
Uniform gutters, columns, and breakpoints let teams build with order and flexibility.
D. Iconography
Library:
Bespoke, scalable icons built on a consistent grid and style, available as reusable component tokens.
E. Color Palette
Library:
Bespoke, scalable icons built on a consistent grid and style, available as reusable component tokens.
F. Image Ratios
Usage:
Standardized aspect ratios (2:3, 1:1, 3:4, 2:1) maintain harmony and sharp visuals across platforms.
G. Text Styles
System:
All text styles (heading, body, label, button, etc.) organized with variables for easy adaptation and global consistency.
Components
A.Card Components
Modular cards (e.g., PLP cards, info blocks) designed with component properties and nested elements, allowing rich, adaptive layouts.
B.CTA Buttons
Standardized button tokens for size, color, state, and spacing.
Ensures action clarity, accessibility, and quick style management.
C.Post Order Components
High-level component properties for order tracking and notifications.
Enables consistent user flows and rapid updates after purchase.
How We Built It (Documentation Best Practice)
Token-first approach ensures scalability:
All foundational styles (color, typography, spacing) are defined as tokens.
Modularity:
Every major component and style uses variable references—change a token once, update everywhere.Clear Naming & Nesting:
Screenshots show hierarchical structure (Brand > Alias > Tokens, Typography > Size > Weight, Scale Systems).Live Examples:
Annotate visuals in your portfolio with brief explanations and use-cases for each screenshot (e.g., "Our grid adapts for desktop/tablet/mobile, providing design clarity and responsive flexibility").Inspired by Uber Design System:
Like Uber, TIGC emphasizes clarity, documentation, and throughput. Every asset is documented visually, with component properties, usage examples, and rationale for every token.
Ready to Use:
With this system, designers and developers can build, scale, and maintain TIGC interfaces fast—with reliability and exceptional brand consistency.
