Design System
Kudos | 2021
About Kudos - a B2C/B2B SaaS platform designed for individual researchers and academic institutions. Specializing in research impact and performance analytics, it helps users from solo researchers to large organizations to enhance visibility and collaboration. The platform provides advanced metrics and data integration, empowering users to maximize their impact and outreach.
Kudos' Clients:
Designing Kudos’s Design System from the Ground Up
As Kudos’ product designer, I had the opportunity to design a new system ‘Kudos Pro’ from the ground up. To ensure a seamless user experience, I developed a comprehensive design system to ensure consistency and efficiency. Icons, typography, colors and components, all working together to create a cohesive and user-friendly interface.
By implementing this system, I enabled faster development, maintained visual coherence, and ensured the product could easily evolve as new features were added.
Icons
As part of the new design system, I created custom icons for key features, ensuring they were tailored to fit the product’s unique style and aligned with the brand’s visual identity. These icons were designed to be simple, intuitive, and scalable.
For basic icon needs like ‘search’ and arrows, I used Font Awesome, an efficient icon toolkit based on CSS. This allowed for seamless integration into the system’s code, providing a quick and flexible solution without compromising on consistency or performance, while maintaining design coherence across the entire product.
Colors
For the new design system, I carefully defined a color palette that both preserved the brand’s identity and optimized the user experience.
The primary colors were selected to reflect the brand’s personality, while semantic colors were introduced to clearly convey meaning and guide user actions. I ensured that call-to-action buttons, links, and interactive elements used distinct, high-contrast colors for easy recognition, making the interface intuitive and accessible. By maintaining consistency in color usage across the product, I created a visually cohesive experience that improved usability and made navigation seamless for users.
Typography
For the typography in the new design system, I selected a modern, readable font pair that aligns with the brand’s tone and ensures a clear, consistent reading experience across the product. I established a clear hierarchy with defined sizes, weights, and line spacing to guide users through the content. This approach not only enhanced visual coherence but also improved accessibility, ensuring that text was easily readable for all users, regardless of their context or device.
Buttons
I designed a range of button styles to support various user interactions, from primary actions to secondary and tertiary options.
Each button was designed with consistent padding, border radius, and color schemes to align with the brand's identity and enhance usability.
I also established clear states for hover, active, and disabled states to provide users with immediate visual feedback. The button styles were designed to be flexible yet standardized, allowing for easy integration across the product while ensuring consistency and clarity in the user experience.
Small details. Big Impact. Best Practice for Adding Icons to Buttons.
Adding icons to buttons improves user experience by enhancing clarity, convey the action, reducing cognitive load. Here is a set of rules I used in the design system, when adding icons to buttons.
Padding - Add consistent spacing between the icon and the text, it is best to use a space of 8px to 12px between the icon and the text, depending on the button size. I used a space of of 8px.
Alignment - Define whether the icon is on the left, right, or above/below the text. I used the icon to the left of the text, it is standard for most buttons. I sticked to a single placement for consistency.
Dimensions - The icon should be in proportion to the text size, and the button should be large enough to accommodate both the icon and the text. A typical size for Font Awesome icons is 1.2x the button's font size. I used 16pt for the type and for the icon - 22pt.
Components
I created a library of reusable UI elements, such as buttons, forms, cards, and modals, to ensure consistency and efficiency across the product. Each component was designed with flexibility in mind, allowing for easy customization while maintaining uniformity in style and interaction.
I also defined clear usage guidelines, so teams could implement these components correctly, ensuring a cohesive experience. This modular approach not only sped up development but also allowed the system to scale seamlessly as new features were added, all while keeping the user interface intuitive and cohesive.
1. Figma - Creating a design system using the ‘Components’ feature
First, I created the core design elements in Figma, using the Components feature. These reusable components (e.g., buttons, icons, form fields) ensure consistent styling across different screens and projects.
2. Zeplin - Providing Design System Visibility for the Dev Team
After finalizing the designs in Figma, I uploaded them to Zeplin, providing a centralized platform where developers can easily access design specifications, assets, and code snippets. This improves collaboration by offering clear, organized handoff details.
3. Storybook - Creating design tokens
​
While Zeplin makes design elements easily accessible, it's not always enough for ensuring full consistency.

To address this, the development team built the design system in Storybook, a platform for testing and documenting UI components. Storybook allows us to maintain a consistent, robust user interface.

Naming elements with clear design tokens (e.g. button-primary-bg-color, text-color-primary) ensures the design system remains scalable and easy to update across projects.
Handing Off the Design System to the Dev Team
In Conclusion
These are the steps I took to design the UX/UI of ‘Kudos Pro’ from the ground up and create its design system:
-
Create Core Components
Define reusable design elements like buttons, icons, and typography in Figma using the Components feature.

-
Establish a Color and Typography System
Choose brand-aligned colors and legible fonts for consistency and accessibility.

-
Design Components
Build flexible, reusable elements to maintain visual coherence.

-
Facilitate Handoff
Use Figma for design and Zeplin to deliver specs.

-
Implement Design Tokens
Create design tokens in Storybook for scalability, ensuring easy updates and consistency across the system.