UX Design
Design Systems
Sales Industry
Designing a Scalable Enterprise Design System for AI Products
Designing a Scalable Enterprise Design System for AI Products
COmpany:
Proshort
Category:
UX Research and Design
My Role:
Lead Designer
Building a multi-product system that scaled across dashboards, AI workflows, CRM experiences, and multimodal interfaces — balancing consistency, flexibility, and future adaptability.
2025-2026
Timeline
AI-Ready
Impact
2.4× engagement
Impact
01 — THE REAL PROBLEM
Components Were Growing Faster Than the System
When the Platform Outpaces the Architecture
The platform evolved rapidly — from focused sales tooling into a broader AI-powered enterprise ecosystem. New workflows appeared constantly: AI coaching, multimodal feeds, CRM automation, analytics, roleplays, collaborative workflows. The issue wasn't lack of components. It was components evolving independently without a scalable system layer underneath.
Inconsistent spacing across 6 product surfaces. 14 button variants in production. 17 grey tokens with no semantic naming. Three modal patterns built by three different engineers in the same sprint. The more the platform scaled, the harder consistency became.
The Drift Audit
02 — WHAT MADE THIS HARD
This Wasn't Just a UI Library
Adaptive Behavioral Building Blocks
The challenge wasn't creating buttons and cards. The challenge was designing a system that could support structured and unstructured interfaces, adapt to AI-generated content, scale across enterprise workflows, maintain backward compatibility, and remain flexible without becoming inconsistent. Most components were no longer static UI elements. They became adaptive behavioral building blocks.
Backward compatibility while innovating
Challenge
AI-generated content with unpredictable length
New constraint
3 product squads, same component library
Scope
03 — SYSTEM THINKING
Designing Beyond Components
Five Layers Instead of One
Instead of designing isolated UI pieces, the system was reframed around five interconnected layers. Each layer serves the next — foundations give tokens their values, tokens give components their language, components combine into patterns, patterns compose into AI surfaces. Breaking any layer breaks everything above it.
FOUNDATIONS: Typography, spacing, color, elevation, motion → TOKENS: Primitive + semantic token architecture → COMPONENTS: Reusable scalable building blocks → PATTERNS: Enterprise workflows and interaction behaviors → AI SURFACES: Interfaces designed for dynamic generated content
System Architecture
04 — BUILDING FOR SCALE
Two Realities at Once
Stability vs Scalability vs Adaptability
Existing enterprise products already depended on older tokens and legacy behaviors. New AI-native workflows required flexibility that the old system never anticipated. This created constant tension between stability, scalability, and adaptability. The goal became: evolve the system without breaking trust.
Evolve the system without breaking trust. Every change had to be invisible to the end user and painless for the engineer.
Depended on older tokens — cannot break
Current products
Depended on older tokens — cannot break
Current products
Required flexibility old system couldn't anticipate
Future products
Required flexibility old system couldn't anticipate
Future products
05 — COMPONENT ECOSYSTEM
A Unified Language Across Products
From Atoms to Enterprise Patterns
The system organised components into three tiers — not by visual complexity, but by how much context they required to use correctly. Foundations require no context. Core components require product context. Advanced patterns require workflow context. The tier determined documentation depth and governance requirements.
Typography · Colors · Spacing · Elevation · Grid
Foundations
Typography · Colors · Spacing · Elevation · Grid
Foundations
Tables · Tags · Inputs · Buttons · Nav · Filters · Modals
Core Components
Tables · Tags · Inputs · Buttons · Nav · Filters · Modals
Core Components
AI feeds · Coaching systems · CRM intelligence · Roleplay workflows
Advanced Patterns
AI feeds · Coaching systems · CRM intelligence · Roleplay workflows
Advanced Patterns
06 — AI CHANGED THE RULES
Human-Written UI Became Machine-Generated UI
From Visual Consistency to Resilient Interface Behavior
Traditional design systems assume predictable content. AI interfaces broke those assumptions. The system now had to support unpredictable text lengths, generated labels, dynamic hierarchy, contextual metadata, and adaptive layouts. This forced the design system to evolve from visual consistency to resilient interface behavior.
Static component → Behavioral container. Fixed sizing → Adaptive sizing. Controlled content → AI-generated content. Single-context usage → Multi-context semantic layer. The tag component became the clearest example of this evolution.
What AI Changed
07 — DEEP DIVE
One Component Explained the Entire System
The Tag That Became a Semantic Enterprise Layer
Among all components, one became the clearest example of system evolution: the Tag component. What started as a simple dashboard label evolved into a semantic enterprise communication layer used across dashboards, AI feeds, CRM workflows, skill systems, activity timelines, company identifiers, and follow-up systems. Four versions. One architectural lesson.
We thought we were designing a label. We were actually designing a semantic communication protocol for the entire product.
Static dashboard labels
V1
Icon-based semantic tags
V2
Responsive enterprise tags
V3
AI-compatible semantic containers
V4
Tag System Case Study →
How a dashboard label became an enterprise semantic system
08 — KEY LEARNINGS
What This Taught Me
Three Principles That Survived the Build
01
Consistency alone doesn't scale systems
Flexibility without governance creates fragmentation. The two have to be designed together from the first token decision.
02
AI changes component assumptions
Generated content introduces behavioral unpredictability traditional systems aren't designed for. Every component needs an AI content test before it ships.
03
Design systems are organizational systems
The hardest problems weren't visual — they were coordination, scalability, and long-term adaptability. The system succeeded when engineers adopted it faster than they built around it.
UX Design
Design Systems
Sales Industry
Designing a Scalable Enterprise Design System for AI Products
Designing a Scalable Enterprise Design System for AI Products
COmpany:
Proshort
Category:
UX Research and Design
My Role:
Lead Designer
Building a multi-product system that scaled across dashboards, AI workflows, CRM experiences, and multimodal interfaces — balancing consistency, flexibility, and future adaptability.
2025-2026
Timeline
AI-Ready
Impact
2.4× engagement
Impact
01 — THE REAL PROBLEM
Components Were Growing Faster Than the System
When the Platform Outpaces the Architecture
The platform evolved rapidly — from focused sales tooling into a broader AI-powered enterprise ecosystem. New workflows appeared constantly: AI coaching, multimodal feeds, CRM automation, analytics, roleplays, collaborative workflows. The issue wasn't lack of components. It was components evolving independently without a scalable system layer underneath.
Inconsistent spacing across 6 product surfaces. 14 button variants in production. 17 grey tokens with no semantic naming. Three modal patterns built by three different engineers in the same sprint. The more the platform scaled, the harder consistency became.
The Drift Audit
02 — WHAT MADE THIS HARD
This Wasn't Just a UI Library
Adaptive Behavioral Building Blocks
The challenge wasn't creating buttons and cards. The challenge was designing a system that could support structured and unstructured interfaces, adapt to AI-generated content, scale across enterprise workflows, maintain backward compatibility, and remain flexible without becoming inconsistent. Most components were no longer static UI elements. They became adaptive behavioral building blocks.
Backward compatibility while innovating
Challenge
AI-generated content with unpredictable length
New constraint
3 product squads, same component library
Scope
03 — SYSTEM THINKING
Designing Beyond Components
Five Layers Instead of One
Instead of designing isolated UI pieces, the system was reframed around five interconnected layers. Each layer serves the next — foundations give tokens their values, tokens give components their language, components combine into patterns, patterns compose into AI surfaces. Breaking any layer breaks everything above it.
FOUNDATIONS: Typography, spacing, color, elevation, motion → TOKENS: Primitive + semantic token architecture → COMPONENTS: Reusable scalable building blocks → PATTERNS: Enterprise workflows and interaction behaviors → AI SURFACES: Interfaces designed for dynamic generated content
System Architecture
04 — BUILDING FOR SCALE
Two Realities at Once
Stability vs Scalability vs Adaptability
Existing enterprise products already depended on older tokens and legacy behaviors. New AI-native workflows required flexibility that the old system never anticipated. This created constant tension between stability, scalability, and adaptability. The goal became: evolve the system without breaking trust.
Evolve the system without breaking trust. Every change had to be invisible to the end user and painless for the engineer.
Depended on older tokens — cannot break
Current products
Depended on older tokens — cannot break
Current products
Required flexibility old system couldn't anticipate
Future products
Required flexibility old system couldn't anticipate
Future products
05 — COMPONENT ECOSYSTEM
A Unified Language Across Products
From Atoms to Enterprise Patterns
The system organised components into three tiers — not by visual complexity, but by how much context they required to use correctly. Foundations require no context. Core components require product context. Advanced patterns require workflow context. The tier determined documentation depth and governance requirements.
Typography · Colors · Spacing · Elevation · Grid
Foundations
Typography · Colors · Spacing · Elevation · Grid
Foundations
Tables · Tags · Inputs · Buttons · Nav · Filters · Modals
Core Components
Tables · Tags · Inputs · Buttons · Nav · Filters · Modals
Core Components
AI feeds · Coaching systems · CRM intelligence · Roleplay workflows
Advanced Patterns
AI feeds · Coaching systems · CRM intelligence · Roleplay workflows
Advanced Patterns
06 — AI CHANGED THE RULES
Human-Written UI Became Machine-Generated UI
From Visual Consistency to Resilient Interface Behavior
Traditional design systems assume predictable content. AI interfaces broke those assumptions. The system now had to support unpredictable text lengths, generated labels, dynamic hierarchy, contextual metadata, and adaptive layouts. This forced the design system to evolve from visual consistency to resilient interface behavior.
Static component → Behavioral container. Fixed sizing → Adaptive sizing. Controlled content → AI-generated content. Single-context usage → Multi-context semantic layer. The tag component became the clearest example of this evolution.
What AI Changed
07 — DEEP DIVE
One Component Explained the Entire System
The Tag That Became a Semantic Enterprise Layer
Among all components, one became the clearest example of system evolution: the Tag component. What started as a simple dashboard label evolved into a semantic enterprise communication layer used across dashboards, AI feeds, CRM workflows, skill systems, activity timelines, company identifiers, and follow-up systems. Four versions. One architectural lesson.
We thought we were designing a label. We were actually designing a semantic communication protocol for the entire product.
Static dashboard labels
V1
Icon-based semantic tags
V2
Responsive enterprise tags
V3
AI-compatible semantic containers
V4
Tag System Case Study →
How a dashboard label became an enterprise semantic system
08 — KEY LEARNINGS
What This Taught Me
Three Principles That Survived the Build
01
Consistency alone doesn't scale systems
Flexibility without governance creates fragmentation. The two have to be designed together from the first token decision.
02
AI changes component assumptions
Generated content introduces behavioral unpredictability traditional systems aren't designed for. Every component needs an AI content test before it ships.
03
Design systems are organizational systems
The hardest problems weren't visual — they were coordination, scalability, and long-term adaptability. The system succeeded when engineers adopted it faster than they built around it.
UX Design
Design Systems
Sales Industry
Designing a Scalable Enterprise Design System for AI Products
Designing a Scalable Enterprise Design System for AI Products
COmpany:
Proshort
Category:
UX Research and Design
My Role:
Lead Designer
Building a multi-product system that scaled across dashboards, AI workflows, CRM experiences, and multimodal interfaces — balancing consistency, flexibility, and future adaptability.
2025-2026
Timeline
AI-Ready
Impact
2.4× engagement
Impact
01 — THE REAL PROBLEM
Components Were Growing Faster Than the System
When the Platform Outpaces the Architecture
The platform evolved rapidly — from focused sales tooling into a broader AI-powered enterprise ecosystem. New workflows appeared constantly: AI coaching, multimodal feeds, CRM automation, analytics, roleplays, collaborative workflows. The issue wasn't lack of components. It was components evolving independently without a scalable system layer underneath.
Inconsistent spacing across 6 product surfaces. 14 button variants in production. 17 grey tokens with no semantic naming. Three modal patterns built by three different engineers in the same sprint. The more the platform scaled, the harder consistency became.
The Drift Audit
02 — WHAT MADE THIS HARD
This Wasn't Just a UI Library
Adaptive Behavioral Building Blocks
The challenge wasn't creating buttons and cards. The challenge was designing a system that could support structured and unstructured interfaces, adapt to AI-generated content, scale across enterprise workflows, maintain backward compatibility, and remain flexible without becoming inconsistent. Most components were no longer static UI elements. They became adaptive behavioral building blocks.
Backward compatibility while innovating
Challenge
AI-generated content with unpredictable length
New constraint
3 product squads, same component library
Scope
03 — SYSTEM THINKING
Designing Beyond Components
Five Layers Instead of One
Instead of designing isolated UI pieces, the system was reframed around five interconnected layers. Each layer serves the next — foundations give tokens their values, tokens give components their language, components combine into patterns, patterns compose into AI surfaces. Breaking any layer breaks everything above it.
FOUNDATIONS: Typography, spacing, color, elevation, motion → TOKENS: Primitive + semantic token architecture → COMPONENTS: Reusable scalable building blocks → PATTERNS: Enterprise workflows and interaction behaviors → AI SURFACES: Interfaces designed for dynamic generated content
System Architecture
04 — BUILDING FOR SCALE
Two Realities at Once
Stability vs Scalability vs Adaptability
Existing enterprise products already depended on older tokens and legacy behaviors. New AI-native workflows required flexibility that the old system never anticipated. This created constant tension between stability, scalability, and adaptability. The goal became: evolve the system without breaking trust.
Evolve the system without breaking trust. Every change had to be invisible to the end user and painless for the engineer.
Depended on older tokens — cannot break
Current products
Depended on older tokens — cannot break
Current products
Required flexibility old system couldn't anticipate
Future products
Required flexibility old system couldn't anticipate
Future products
05 — COMPONENT ECOSYSTEM
A Unified Language Across Products
From Atoms to Enterprise Patterns
The system organised components into three tiers — not by visual complexity, but by how much context they required to use correctly. Foundations require no context. Core components require product context. Advanced patterns require workflow context. The tier determined documentation depth and governance requirements.
Typography · Colors · Spacing · Elevation · Grid
Foundations
Typography · Colors · Spacing · Elevation · Grid
Foundations
Tables · Tags · Inputs · Buttons · Nav · Filters · Modals
Core Components
Tables · Tags · Inputs · Buttons · Nav · Filters · Modals
Core Components
AI feeds · Coaching systems · CRM intelligence · Roleplay workflows
Advanced Patterns
AI feeds · Coaching systems · CRM intelligence · Roleplay workflows
Advanced Patterns
06 — AI CHANGED THE RULES
Human-Written UI Became Machine-Generated UI
From Visual Consistency to Resilient Interface Behavior
Traditional design systems assume predictable content. AI interfaces broke those assumptions. The system now had to support unpredictable text lengths, generated labels, dynamic hierarchy, contextual metadata, and adaptive layouts. This forced the design system to evolve from visual consistency to resilient interface behavior.
Static component → Behavioral container. Fixed sizing → Adaptive sizing. Controlled content → AI-generated content. Single-context usage → Multi-context semantic layer. The tag component became the clearest example of this evolution.
What AI Changed
07 — DEEP DIVE
One Component Explained the Entire System
The Tag That Became a Semantic Enterprise Layer
Among all components, one became the clearest example of system evolution: the Tag component. What started as a simple dashboard label evolved into a semantic enterprise communication layer used across dashboards, AI feeds, CRM workflows, skill systems, activity timelines, company identifiers, and follow-up systems. Four versions. One architectural lesson.
We thought we were designing a label. We were actually designing a semantic communication protocol for the entire product.
Static dashboard labels
V1
Icon-based semantic tags
V2
Responsive enterprise tags
V3
AI-compatible semantic containers
V4
Tag System Case Study →
How a dashboard label became an enterprise semantic system
08 — KEY LEARNINGS
What This Taught Me
Three Principles That Survived the Build
01
Consistency alone doesn't scale systems
Flexibility without governance creates fragmentation. The two have to be designed together from the first token decision.
02
AI changes component assumptions
Generated content introduces behavioral unpredictability traditional systems aren't designed for. Every component needs an AI content test before it ships.
03
Design systems are organizational systems
The hardest problems weren't visual — they were coordination, scalability, and long-term adaptability. The system succeeded when engineers adopted it faster than they built around it.