LIAT
ZINI
CLAL UI SYSTEM
I DESIGNED MODULAR COMPONENTS FOR CLAL’S CONTENT TEAM, IMPROVING USABILITY AND VISUAL CONSISTENCY WHILE ENABLING INDEPENDENT PAGE CREATION.
Context
After nearly three years of working on Clal’s digital products,
the company launched a full brand refresh including a new logo,
typography, and color system.
With deep familiarity with the existing digital language and constraints,
I was responsible for translating the new brand into a consistent,
scalable digital design system.
Solution
The design system was built alongside real product work, evolving
based on practical needs rather than as a static guideline.
Each color, typography rule, and UI component shown below was created,
tested, and refined through ongoing projects—forming a flexible,
reusable foundation for Clal’s digital products
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 visual hierarchy and consistent interaction across platforms.
The same button component is used across desktop, mobile, and dark mode, differentiated by color and context.
Before
After
Fixed to text
48px
Button Component – Variants
Default
Hover
Primary
Secondary
Dark Mode
Text Link
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
