ynet's Design System
A modular and scalable design system built for ynet’s digital platform.
The system improves visual consistency, streamlines the design-to-development workflow, and supports efficient creation of new features across the product.
The Challenge
When I joined the team, ynet’s interface lacked a unified design language. While some system decisions were already fixed (like the grid), much of the UI suffered from inconsistency and redundancy.
Here were the main challenges we faced:
-
No shared component library – each designer created their own components, leading to duplication and misalignment
-
Inconsistent UI elements – especially buttons, which appeared in many different styles and logic
-
Legacy constraints – such as a fixed layout grid that couldn’t be changed, requiring all components to adapt to it
-
Long development cycles – due to unclear standards and repeated redesigns, projects were delayed and hard to scale
-
Visual fragmentation – users experienced inconsistent patterns, making the interface feel less cohesive
My Role & Process
I co-led the creation of ynet’s design system with another product designer.
My focus was on defining visual foundations, building a Figma component library, and preparing components for developer implementation.
We mapped all existing UI elements, identified inconsistencies — especially in buttons — and unified them into scalable, token-ready components.
I also created clear documentation to support onboarding and consistent usage.
Advanced visual language sketches – exploring layout, icon styling, and interaction states across light/dark themes.
​The design system provides a strong foundation for consistent, scalable UI across the product. It simplifies design workflows, reduces redundant work, and supports future collaboration between teams.
Design Approach
We based the system on atomic design principles, starting from foundational tokens (color, typography, spacing) and building up to fully functional components.
​
Each component was:
-
Flexible – designed to support different use cases across the product
-
Consistent – built with shared naming and structure
-
Token-ready – allowing easy implementation and future updates
​
The Figma library included:
-
Base components (buttons, inputs, tags, etc.)
-
Layout patterns (cards, media blocks, list views)
-
Guidelines for usage, variants, and overrides (e.g. alerts, states)
​
We also structured the system for future scaling, allowing it to support upcoming features without breaking consistency.
Design Highlights
Visual Foundations
-
Defined a clea hierarchical typography system (font sizes & weights)
-
Created a centralized color palette
-
Defined spacing tokens (5px increments, 2px between icons and text)
-
Set a default border radius of 0 to maintain a sharp, clean aesthetic — with rounded corners used only in rare, intentional cases
-
Documented and applied the fixed layout grid, defined prior to the project
-
Ensured clear interaction states and sufficient contrast for usability
​Below are the core elements I designed and documented as part of ynet’s design system.
Primitive color tokens organized in the Figma library
Spacing and radius tokens – part of the visual rules ensuring consistent layout and sharp UI styling
Reusable UI Components
Designed a cohesive set of buttons, input fields, dropdowns, checkboxes, radio buttons, and toggles, all built with clear naming, defined states, and consistent logic.
Components were structured to support future scalability and ease of maintenance.
Example of button types and component settings in Figma – including variants, states, and layout properties
Example of selector components – including checkboxes, radio buttons, and toggles in different states
Visual Assets Library
Curated a centralized collection of icons, brand logos, and Lottie animations, integrated into the design system as reusable visual components.
This library ensured visual consistency and supported efficient collaboration between designers.
Structured and accessible icon library – organized by category and shared with all designers on the team
A complete set of all logos and labels used across the ynet ecosystem – organized and ready for quick use by the team
Documentation
Clear documentation was created directly within the Figma file, covering naming conventions, usage guidelines, and the structural logic of each component.
All elements followed strict internal rules: consistent spacing, defined states using Variants, and standardized nesting.
The goal was to build a system that’s intuitive, scalable, and easy to maintain — both for solo work and team collaboration.
Color documentation for light & dark modes – showing how primitive colors are used semantically across UI elements
Button documentation – covering structure, color, size, spacing, and editable properties within the Figma component
Button documentation – how the component is built in Figma and what properties are available
Input field documentation – showing states, structure, and editable properties within the Figma component
Impacts
-
Improved workflow speed and consistency by using reusable components
-
Improved team alignment through a shared visual language and clear documentation
-
Provided a scalable foundation for future features, without compromising visual consistency
-
Helped create a structured handoff process for developers, thanks to token-based logic and clear naming
-
Encouraged a shift from one-off design decisions to systematic thinking and shared standards
​
This project was a turning point for me as a designer —
it deepened my appreciation for systems thinking, and showed me how clarity and consistency can unlock creativity across an entire team.
More than anything, I was proud to see the system become a part of everyday design work — something the team could rely on and grow with.