LIAT
ZINI
CLAL UI SYSTEM
I DESIGNED MODULAR COMPONENTS FOR CLAL’S CONTENT TEAM, IMPROVING USABILITY AND VISUAL CONSISTENCY WHILE ENABLING INDEPENDENT PAGE CREATION.
STARTING POINT
After working closely with Clal’s content team for more than two and a half years, I developed a deep understanding of their workflow and the challenges they faced with the existing component library. The components they relied on were limited, inconsistent, and lacked the flexibility needed to build structured, visually appealing pages. The goal of the project was to redesign the entire component system- creating a cohesive, modular, and brand-aligned set of building blocks that would give editors more control and enable them to create better, clearer, and more engaging pages with ease.
Research & Insights
Before designing the new system, I analyzed dozens of existing pages and components across Clal’s digital ecosystem. I mapped content patterns, visual inconsistencies, accessibility issues, and recurring editor pain points. This research provided a clear foundation for defining what the new system needed: clarity, hierarchy, flexibility, and a more unified brand expression.
Solution
Using insights from the research, I defined a new component structure and grid system that ensured visual consistency and flexibility. Components were designed with clear states and modular layouts, enabling the content team to create structured, appealing pages more efficiently.
Flexible Color System
The color system expands the brand palette for digital needs, including background variations and interactive states, while staying fully aligned with Clal’s visual language.
Typographic Consistency
Typography was adapted from the brand book for digital use, maintaining hierarchy, clarity, and editor-friendly flexibility.
Responsive by Design
All components were built for four breakpoints (1920 / 1440 / 774 / 360), ensuring full consistency and proper behavior across desktop and mobile.
Editor-Friendly
Each component was designed so the content team can build pages independently — choosing colors, media, and layouts without needing a designer for every edit.
COMPONENTS
The component system was built on four core principles that guided every design decision, ensuring consistency, flexibility, and full alignment with Clal’s digital needs.
Icon Strip
A flexible icon-and-text component used to add visual interest and reinforce the brand’s graphic language. Editors can upload square icons, choose between horizontal or vertical layouts, align the content as needed, and select background colors to match the page design. The fixed 80×80 frame creates consistency while allowing creative variation.
Hero Banner
A versatile hero section used at the top of pages or as a visual break within long layouts. The component lets the content team upload images, choose background colors, set title and text styles, and add one or two CTAs. It adapts across all breakpoints with fixed spacing, flexible layouts, and support for light/dark text - keeping the banner clear, structured, and aligned with the brand.
Video Carousel
A redesigned component that allows the content team to display multiple videos in one section instead of a single static video. Editors can set the title, optional subtitle, add body text, and upload video thumbnails, with support for white, light-blue, or cream backgrounds. When multiple videos are added, the main video appears centered, with a preview of the next video and simple side navigation for scrolling.
FAQ Section
A core component that appears on most content pages. It helps the content team structure information clearly while supporting SEO through additional keyword-rich text.
The refreshed design allows choosing a white or cream background, includes a simple one-at-a-time interaction, clear dividers, and balanced spacing — making the content easy to scan across all breakpoints.
Basic Info Card
A lightweight card used for articles or general information. Editors can upload an image, add a title and optional subtitle, include body text, and attach a single link. The component supports multiple background colors, grid or horizontal scrolling layouts, and includes hover and click states — providing a clean and simple structure across all breakpoints.
Expandable Info Card
A versatile card component designed for products or detailed content items. Editors can upload an image, add a title and optional subtitle, include body text, and attach multiple links — with two shown by default and the rest revealed in an expandable view. The card supports several background colors, grid or horizontal scrolling layouts, and full responsive behavior across breakpoints.
Text Banner
A flexible text strip designed for clear messaging throughout the page. Content editors can edit the headline and optional sub-headline, select typographic styles for desktop and mobile, choose alignment, and add a call-to-action button when needed. The background color is fully editable, with automatic text adjustments for accessibility. The component also supports body text, and its height adapts dynamically based on content length and responsive spacing.
Contact Form Strip
A flexible text strip designed for clear messaging throughout the page. Content editors can edit the headline and optional sub-headline, select typographic styles for desktop and mobile, choose alignment, and add a call-to-action button when needed. The background color is fully editable, with automatic text adjustments for accessibility. The component also supports body text, and its height adapts dynamically based on content length and responsive spacing.
DESIGN SYSTEM
As part of Clal’s rebranding, a new brand book was created with clear visual and behavioral guidelines. I led the adaptation of the brand to digital, translating these principles into a cohesive, functional, and accessible design system. The system defines Clal’s digital visual language — including color, typography, components, and spacing — ensuring consistency, flexibility, and usability across all interfaces.
01 Colors
The color palette expands Clal’s refreshed brand system for digital use. Darker “plus” shades (+) are used for interactive states like hover and click, while lighter “minus” shades (−) serve as backgrounds and supporting graphics. These adjustments maintain brand consistency while improving readability and usability across digital layouts.
Primary colors
+20
#3D6CED
+30
#293768
Secondary colors
+10
#B0FFAE
-20
-40
-70
+10
#D2E1FF
-20
-40
-60
#FFF2EB
-30
-60
#F8FFD2
-30
-60
02 Typography
Based on Clal’s brand principles, I adapted the typography for digital use — combining large, thin titles with smaller, bold text to create rhythm and hierarchy. For readability and accessibility, I replaced the brand’s print cream tone with white, and used black-blue and brand blue across all digital components.
Desktop
Element
Size
Line Height
Weight
H1
100px
92%
Polin Light
H2
63px
100%
Semi Bold
H3
60px
100%
Polin Light
H4
45px
100%
Polin Medium
Body Text1
24px
120%
Regular / Medium / Semibold
Mobile
Element
Size
Line Height
Weight
H1
56px
95%
Polin Light
H2
40px
110%
Polin Light
H3
30px
120%
Polin Medium
H4
24px
120%
Polin Bold
Body Text
16px
120%
Regular / Medium / Semibold
03 Buttons
Buttons were redesigned to create a clear hierarchy and align with Clal’s new digital language. The system includes Primary, Secondary, and Secondary (Dark Mode) buttons, each with default and hover states, designed to work consistently across both desktop and mobile. This improves contrast, accessibility, and visual consistency throughout the digital platform.
Before
After
Fixed to text
48px
Default
Hover
Primary
Secondary
Dark Mode
04 Form Fields
Clal’s website includes many forms, so I designed input fields with three clear states — default, typing (focus), and error. These states improve clarity, accessibility, and user guidance across all digital flows.
Default
Focus
Error
