top of page

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.

Chat1GPT Image Apr 21, 2025, 09_52_29 AM.png

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.

Light Mode.png

Advanced visual language sketches – exploring layout, icon styling, and interaction states across light/dark themes.

Dark Mode.png

​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.

Audio off - Circled.png
Visibilty - Off.png
Alert.png
Edit.png
Bookmark.png
Left.png
Left.png
Headset New.png
Mic-on.png

Design Highlights

52דג4כ5ג.png

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.

Selectors-1.png
Selectors.png

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

image 1.png
Group 2.png
image 2.png
Selectors Comps.png

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

Logos & Labels.png

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.

Primitives.png
Semantic Token in Light Mode.png
Semantic Token in Dark Mode.png

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.

bottom of page