Design System
Designed and maintained a scalable design system from core foundations through advanced components, ensuring consistency and alignment with evolving requirements
- UX Research
- UI Design
- Design System
Background
When I joined the company, the existing design system was outdated and minimal, lacking the structure and flexibility needed to support efficient product development. Recognizing this gap, I was given full ownership of the Design System initiative. My mission was to build a modern, scalable system that would align both the design and development teams, streamline workflows, and deliver a consistent user experience across all products. I collaborated closely with developers and fellow designers, leading the UI/UX strategy, driving the technical implementation, and ensuring comprehensive documentation to support seamless adoption and future growth.
Research & Tools
To build a solid foundation for the new design system, I researched industry-leading design systems and analyzed our internal needs through conversations with designers and developers. Since our products serve the public sector, I aligned the visual style with GOV.IL guidelines to ensure familiarity and consistency. I used a variety of tools throughout the process to support exploration and collaborationץ
Visual Foundations
Color Palette
We built an extended, flexible color palette to cover all component states and use cases. Each color was carefully tested for clarity, consistency, and accessibility. The entire palette was integrated into Figma variables in a clear, user-friendly structure, enabling easy adoption by both designers and developers.
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
Typography
We established a clean, consistent typographic system that aligns with the product’s tone and hierarchy. Font styles were defined for all heading levels, body text, captions, and interactions — ensuring scalability across different platforms and screen sizes.
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
Spacing & Layout Grids
To ensure visual rhythm and alignment, we built a spacing system based on an 8px grid. This grid was applied consistently across all components and layouts, simplifying the handoff to development and improving the overall structure of the UI.
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
Iconography
To support the design team and ensure visual consistency, we built a structured icon library based on Material Symbols. Icons were organized into categories for easy access, providing a flexible and scalable system that aligned with the design language.
111
111
111
111
111
111
111
111
111
111
111
111
111
111
111
Basic Controls
Based on our research and the organization’s specific needs, we developed a wide range of essential UI elements—including buttons, input fields, checkboxes, toggles, dropdowns, calendars, and more. Each component was built as a smart, reusable asset in Figma, with clearly defined interaction states like hover, active, and disabled. Accessibility and clarity were prioritized to ensure ease of use for both designers and developers. Below is a small sample of the full set.
Components & Layouts
Alongside core components, I created templates and patterns tailored to our internal systems—like menus, popups, charts, and system messages. These were designed to match product needs and ensure consistency. Here, I showcase a selection of these real-use components.
This presentation showcases just a glimpse of the full design system. The structured process significantly reduced design and development time, streamlined collaboration, and ultimately lowered costs for the organization.
The full file can be presented in person.