ResumePrism Design System
Prism Design System
Prism Design System
Oct 2025
-
Present
Lead Designer
Me & Naveed
In a nutshell
In a nutshell
As our design team grows and product verticals expand, our focus has shifted beyond the web to include native mobile and tablet experiences. This rapid growth revealed the constraints of our older design system, which began to feel fragmented and limiting across the product and teams.
To address this, we have embarked on refining our design system with a new foundational structure. This initiative is designed to realize the principles of cross-platform cohesion, built-in interaction, and scalable collaboration - transforming our workflow to empower creativity and consistency across every vertical and team.
A deeper look
A deeper look
Context
The old design system & opportunity areas
The old design system & opportunity areas
The Good
While the old system had its flaws, its core foundations proved remarkably resilient. Elements like typography, colors, icons, and base components such as buttons and inputs stood the test of time, providing a durable and familiar primitive layer we could refine and build upon. In addition, we had years of data on what worked on the platform for users and what did not.
The Bad
As development priorities focused intensely on new features and verticals, we lacked dedicated ownership to continually refine the system and integrate evolving best practices. This gap prevented the foundational layer from maturing alongside our products and team.
The Ugly
The worst problem was a lack of reliability and clarity, which eroded trust. Designers frequently detached bigger components perceived as fragile, restrictive, and lacking real-use variants. This fragility, combined with weak foundations and no single source of truth, led to inconsistency, duplication, and misalignment.
We were so busy building new things that nobody owned the system, so it never really grew up with us - and the more fragile it felt, the more people started working around it.
We were so busy building new things that nobody owned the system, so it never really grew up with us - and the more fragile it felt, the more people started working around it.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
Opportunity areas
The primary opportunity was in rebuilding that trust by transforming the system into a robust, practical, and well-governed toolkit. This required centralizing and strengthening the atomic foundations - tokens, grids, typography - rigorously improving component quality and variants, and creating clear, searchable documentation as the definitive source. By establishing strong governance and deepening collaboration with engineering on behavior and standards, the system could become a reliable partner that accelerates design work instead of obstructing it.
Approach
How we’re doing it, from audit to adoption
How we’re doing it, from audit to adoption
Before moving a pixel, we asked 4 major questions:
How do we make sure all this effort isn’t a surprise rather a rewarding expectation?
How can we gather quick, actionable feedback from design team (the users)?
How do we make the transition seamless?
How do we build a shared language that balances creative freedom with structure?
We brainstormed, researched & ideated the following approaches for each question:
Audit & Visionary Mood-board: A comprehensive audit to inventory all existing components. A collaborative mood-board to define our ideal visual outcome.
Testing & Feedback: Establish twice-weekly testing sessions where designers privately explore updates, then publicly share feedback and align as a team.
Layered rollout: Tokens to atoms to components—with design and dev teams moving in sync.
Implementation & Contributions: Build a shared semantic language in code, documented with design rationale, and governed by an open contribution model.
Audit & Visionary Mood-board
We began with a full-platform audit, mapping every existing component into categorized buckets to understand all real-world use cases. Next, our designers collaborated on mood-boards, envisioning the ideal component implementation on our most complex and impactful screens. The result was a merged, concrete visual artefact that became our true north—eliminating guesswork and setting a clear, shared standard for the system's future.
Testing & Feedback
Twice a week, we run silent testing sessions where designers privately explore the latest system updates in their own workspaces. Afterwards, we come together for structured feedback and collaborative alignment, turning individual insights into shared direction.
Layered Rollout
The transition has been rolling out in layers—starting with tokens and atomic elements, which are now live, while base and higher-level components are still being implemented. Both design and development teams are moving through the remaining phases together, ensuring a synchronised and cohesive adoption process.
Implementation & Contributions:
We're building a shared semantic language in code by actively collaborating with engineers on nomenclature and inspectable patterns. In parallel, we're establishing clear documentation with design rationales and a contribution model where every proposed change undergoes review before being integrated.
More details on implimentation, design and features follow in the next section...
Features
Zooming in on the implementation
Zooming in on the implementation
Built-in Delight & Interactions
Our components feature subtle, built-in animations that make interactions feel alive and engaging. These micro-interactions transform the user experience into something delightful and responsive.
Scalable & Modular
The system uses a clear, layered architecture that cleanly separates logic from style. This modular structure ensures consistent adaptation while remaining flexible enough to scale across any platform.
Voice & Tone Integrated
Voice and tone are woven into components through embedded microcopy and automated linting. This ensures the brand's personality remains consistent and intentional across the entire product.
Collaborative by Design
The system is built collaboratively by design and engineering teams using synced platforms like Figma and Storybook. Shared audits and workflows ensure everyone contributes to and owns a single source of truth.
Accessibility by Default
Accessibility is built into every component from the start. Keyboard nav, and contrast are baked in and validated automatically. This ensures inclusivity is a default, not an afterthought.
Semantic & Thematic
Design tokens use semantic naming like button.background.primary, acting as a single source of truth for dynamic theming across lo-fi and hi-fi modes. This ensures consistency while enabling clear and flexible visual scaling.
Pinpoint Scoping
Scoping variables ensures that properties and values appear precisely where they’re used, delivering relevant options directly in context - so designers see only what applies, right where it matters.
Prioritised, Empowering & Guided
The system provides low-level primitives that empower creativity, while smart defaults and clear documentation guide designers and developers down the right path. This balance ensures freedom without fragmentation.
Ongoing transition & what’s ahead
Ongoing transition & what’s ahead
The transition is underway, with our first foundational layers already live and embraced by teams who helped shape them through constant feedback - building a shared culture of ownership, not imposition.
While no system is ever truly complete, we’re ready for the challenges ahead - scaling thoughtfully with our evolving product and guiding new members to ensure adoption feels natural, not forced.
Hi 👋🏼. Thank you for your time.
Hi 👋🏼. Thank you for your time.
Prism Design System
Prism Design System
Prism Design System
Oct 2025
-
Present
Lead Designer
Me & Naveed
In a nutshell
In a nutshell
As our design team grows and product verticals expand, our focus has shifted beyond the web to include native mobile and tablet experiences. This rapid growth revealed the constraints of our older design system, which began to feel fragmented and limiting across the product and teams.
To address this, we have embarked on refining our design system with a new foundational structure. This initiative is designed to realize the principles of cross-platform cohesion, built-in interaction, and scalable collaboration - transforming our workflow to empower creativity and consistency across every vertical and team.
A deeper look
A deeper look
Context
The old design system & opportunity areas
The old design system & opportunity areas
The Good
While the old system had its flaws, its core foundations proved remarkably resilient. Elements like typography, colors, icons, and base components such as buttons and inputs stood the test of time, providing a durable and familiar primitive layer we could refine and build upon. In addition, we had years of data on what worked on the platform for users and what did not.
The Bad
As development priorities focused intensely on new features and verticals, we lacked dedicated ownership to continually refine the system and integrate evolving best practices. This gap prevented the foundational layer from maturing alongside our products and team.
The Ugly
The worst problem was a lack of reliability and clarity, which eroded trust. Designers frequently detached bigger components perceived as fragile, restrictive, and lacking real-use variants. This fragility, combined with weak foundations and no single source of truth, led to inconsistency, duplication, and misalignment.
We were so busy building new things that nobody owned the system, so it never really grew up with us - and the more fragile it felt, the more people started working around it.
We were so busy building new things that nobody owned the system, so it never really grew up with us - and the more fragile it felt, the more people started working around it.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
Opportunity areas
The primary opportunity was in rebuilding that trust by transforming the system into a robust, practical, and well-governed toolkit. This required centralizing and strengthening the atomic foundations - tokens, grids, typography - rigorously improving component quality and variants, and creating clear, searchable documentation as the definitive source. By establishing strong governance and deepening collaboration with engineering on behavior and standards, the system could become a reliable partner that accelerates design work instead of obstructing it.
Approach
How we’re doing it, from audit to adoption
How we’re doing it, from audit to adoption
Before moving a pixel, we asked 4 major questions:
How do we make sure all this effort isn’t a surprise rather a rewarding expectation?
How can we gather quick, actionable feedback from design team (the users)?
How do we make the transition seamless?
How do we build a shared language that balances creative freedom with structure?
We brainstormed, researched & ideated the following approaches for each question:
Audit & Visionary Mood-board: A comprehensive audit to inventory all existing components. A collaborative mood-board to define our ideal visual outcome.
Testing & Feedback: Establish twice-weekly testing sessions where designers privately explore updates, then publicly share feedback and align as a team.
Layered rollout: Tokens to atoms to components—with design and dev teams moving in sync.
Implementation & Contributions: Build a shared semantic language in code, documented with design rationale, and governed by an open contribution model.
Audit & Visionary Mood-board
We began with a full-platform audit, mapping every existing component into categorized buckets to understand all real-world use cases. Next, our designers collaborated on mood-boards, envisioning the ideal component implementation on our most complex and impactful screens. The result was a merged, concrete visual artefact that became our true north—eliminating guesswork and setting a clear, shared standard for the system's future.
Testing & Feedback
Twice a week, we run silent testing sessions where designers privately explore the latest system updates in their own workspaces. Afterwards, we come together for structured feedback and collaborative alignment, turning individual insights into shared direction.
Layered Rollout
The transition has been rolling out in layers—starting with tokens and atomic elements, which are now live, while base and higher-level components are still being implemented. Both design and development teams are moving through the remaining phases together, ensuring a synchronised and cohesive adoption process.
Implementation & Contributions:
We're building a shared semantic language in code by actively collaborating with engineers on nomenclature and inspectable patterns. In parallel, we're establishing clear documentation with design rationales and a contribution model where every proposed change undergoes review before being integrated.
More details on implimentation, design and features follow in the next section...
Features
Zooming in on the implementation
Zooming in on the implementation
Built-in Delight & Interactions
Our components feature subtle, built-in animations that make interactions feel alive and engaging. These micro-interactions transform the user experience into something delightful and responsive.
Scalable & Modular
The system uses a clear, layered architecture that cleanly separates logic from style. This modular structure ensures consistent adaptation while remaining flexible enough to scale across any platform.
Voice & Tone Integrated
Voice and tone are woven into components through embedded microcopy and automated linting. This ensures the brand's personality remains consistent and intentional across the entire product.
Collaborative by Design
The system is built collaboratively by design and engineering teams using synced platforms like Figma and Storybook. Shared audits and workflows ensure everyone contributes to and owns a single source of truth.
Accessibility by Default
Accessibility is built into every component from the start. Keyboard nav, and contrast are baked in and validated automatically. This ensures inclusivity is a default, not an afterthought.
Semantic & Thematic
Design tokens use semantic naming like button.background.primary, acting as a single source of truth for dynamic theming across lo-fi and hi-fi modes. This ensures consistency while enabling clear and flexible visual scaling.
Pinpoint Scoping
Scoping variables ensures that properties and values appear precisely where they’re used, delivering relevant options directly in context - so designers see only what applies, right where it matters.
Prioritised, Empowering & Guided
The system provides low-level primitives that empower creativity, while smart defaults and clear documentation guide designers and developers down the right path. This balance ensures freedom without fragmentation.
Ongoing transition & what’s ahead
Ongoing transition & what’s ahead
The transition is underway, with our first foundational layers already live and embraced by teams who helped shape them through constant feedback - building a shared culture of ownership, not imposition.
While no system is ever truly complete, we’re ready for the challenges ahead - scaling thoughtfully with our evolving product and guiding new members to ensure adoption feels natural, not forced.
Hi 👋🏼. Thank you for your time.
Hi 👋🏼. Thank you for your time.
Prism Design System
Prism Design System
Prism Design System
Oct 2025
-
Present
Lead Designer
Me & Naveed
In a nutshell
In a nutshell
As our design team grows and product verticals expand, our focus has shifted beyond the web to include native mobile and tablet experiences. This rapid growth revealed the constraints of our older design system, which began to feel fragmented and limiting across the product and teams.
To address this, we have embarked on refining our design system with a new foundational structure. This initiative is designed to realize the principles of cross-platform cohesion, built-in interaction, and scalable collaboration - transforming our workflow to empower creativity and consistency across every vertical and team.
A deeper look
A deeper look
Context
The old design system & opportunity areas
The old design system & opportunity areas
The Good
While the old system had its flaws, its core foundations proved remarkably resilient. Elements like typography, colors, icons, and base components such as buttons and inputs stood the test of time, providing a durable and familiar primitive layer we could refine and build upon. In addition, we had years of data on what worked on the platform for users and what did not.
The Bad
As development priorities focused intensely on new features and verticals, we lacked dedicated ownership to continually refine the system and integrate evolving best practices. This gap prevented the foundational layer from maturing alongside our products and team.
The Ugly
The worst problem was a lack of reliability and clarity, which eroded trust. Designers frequently detached bigger components perceived as fragile, restrictive, and lacking real-use variants. This fragility, combined with weak foundations and no single source of truth, led to inconsistency, duplication, and misalignment.
We were so busy building new things that nobody owned the system, so it never really grew up with us - and the more fragile it felt, the more people started working around it.
We were so busy building new things that nobody owned the system, so it never really grew up with us - and the more fragile it felt, the more people started working around it.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
The old system had some solid bones — the fonts, colors, and buttons that actually lasted. Turns out some things were worth keeping.
Opportunity areas
The primary opportunity was in rebuilding that trust by transforming the system into a robust, practical, and well-governed toolkit. This required centralizing and strengthening the atomic foundations - tokens, grids, typography - rigorously improving component quality and variants, and creating clear, searchable documentation as the definitive source. By establishing strong governance and deepening collaboration with engineering on behavior and standards, the system could become a reliable partner that accelerates design work instead of obstructing it.
Approach
How we’re doing it, from audit to adoption
How we’re doing it, from audit to adoption
Before moving a pixel, we asked 4 major questions:
How do we make sure all this effort isn’t a surprise rather a rewarding expectation?
How can we gather quick, actionable feedback from design team (the users)?
How do we make the transition seamless?
How do we build a shared language that balances creative freedom with structure?
We brainstormed, researched & ideated the following approaches for each question:
Audit & Visionary Mood-board: A comprehensive audit to inventory all existing components. A collaborative mood-board to define our ideal visual outcome.
Testing & Feedback: Establish twice-weekly testing sessions where designers privately explore updates, then publicly share feedback and align as a team.
Layered rollout: Tokens to atoms to components—with design and dev teams moving in sync.
Implementation & Contributions: Build a shared semantic language in code, documented with design rationale, and governed by an open contribution model.
Audit & Visionary Mood-board
We began with a full-platform audit, mapping every existing component into categorized buckets to understand all real-world use cases. Next, our designers collaborated on mood-boards, envisioning the ideal component implementation on our most complex and impactful screens. The result was a merged, concrete visual artefact that became our true north—eliminating guesswork and setting a clear, shared standard for the system's future.
Testing & Feedback
Twice a week, we run silent testing sessions where designers privately explore the latest system updates in their own workspaces. Afterwards, we come together for structured feedback and collaborative alignment, turning individual insights into shared direction.
Layered Rollout
The transition has been rolling out in layers—starting with tokens and atomic elements, which are now live, while base and higher-level components are still being implemented. Both design and development teams are moving through the remaining phases together, ensuring a synchronised and cohesive adoption process.
Implementation & Contributions:
We're building a shared semantic language in code by actively collaborating with engineers on nomenclature and inspectable patterns. In parallel, we're establishing clear documentation with design rationales and a contribution model where every proposed change undergoes review before being integrated.
More details on implimentation, design and features follow in the next section...
Features
Zooming in on the implementation
Zooming in on the implementation
Built-in Delight & Interactions
Our components feature subtle, built-in animations that make interactions feel alive and engaging. These micro-interactions transform the user experience into something delightful and responsive.
Scalable & Modular
The system uses a clear, layered architecture that cleanly separates logic from style. This modular structure ensures consistent adaptation while remaining flexible enough to scale across any platform.
Voice & Tone Integrated
Voice and tone are woven into components through embedded microcopy and automated linting. This ensures the brand's personality remains consistent and intentional across the entire product.
Collaborative by Design
The system is built collaboratively by design and engineering teams using synced platforms like Figma and Storybook. Shared audits and workflows ensure everyone contributes to and owns a single source of truth.
Accessibility by Default
Accessibility is built into every component from the start. Keyboard nav, and contrast are baked in and validated automatically. This ensures inclusivity is a default, not an afterthought.
Semantic & Thematic
Design tokens use semantic naming like button.background.primary, acting as a single source of truth for dynamic theming across lo-fi and hi-fi modes. This ensures consistency while enabling clear and flexible visual scaling.
Pinpoint Scoping
Scoping variables ensures that properties and values appear precisely where they’re used, delivering relevant options directly in context - so designers see only what applies, right where it matters.
Prioritised, Empowering & Guided
The system provides low-level primitives that empower creativity, while smart defaults and clear documentation guide designers and developers down the right path. This balance ensures freedom without fragmentation.
Ongoing transition & what’s ahead
Ongoing transition & what’s ahead
The transition is underway, with our first foundational layers already live and embraced by teams who helped shape them through constant feedback - building a shared culture of ownership, not imposition.
While no system is ever truly complete, we’re ready for the challenges ahead - scaling thoughtfully with our evolving product and guiding new members to ensure adoption feels natural, not forced.
Hi 👋🏼. Thank you for your time.
Hi 👋🏼. Thank you for your time.