Layer 1 — Design Visual Identity & Component Design
𝔽
Figma
Design tooling environment — where KFC's visual identity is defined and maintained
🎨
Tokens Studio
Brand colours, spacing, typography & border radii — the rulebook
→
🧩
UI Kit (Components)
Ready-made Figma components designers assemble into screens
Layer 2 — Development Design System in Code
🔑
Design Tokens
Exported from Figma — the single source of truth for all brand values in code
⚙️
Style Build Process
Compiles design tokens into platform-specific style outputs (native & web)
📱
Generated Native Styles
iOS & Android app styling
🌐
Generated Web Styles
Browser & web app styling
🧱
Native DSC Components
Coded building blocks for iOS & Android apps
🧱
Web DSC Components
Coded building blocks for web apps
Layer 3 — Market Applications What Customers See & Use
Platform Foundations
📦
Core Native App
Shared mobile foundation all native markets inherit from
📦
Core Web App
Shared web ordering foundation for all markets
Active KFC Market Deployments