CLAL UI SYSTEM

I DESIGNED MODULAR COMPONENTS FOR CLAL’S CONTENT TEAM, IMPROVING USABILITY AND VISUAL CONSISTENCY WHILE ENABLING INDEPENDENT PAGE CREATION.

STARTING POINT

The dynamic pages were originally built using Clal’s previous brand language,

which became a clear trigger once the company transitioned to a new brand.

At the same time, the content team relied on limited and inconsistent components,

making it difficult to create clear, structured, and scalable pages.

Research & Insights

Clal’s dynamic pages were built on top of an older brand language,

resulting in visual and structural inconsistencies after the brand refresh.

Beyond the visual gap, the existing components suffered from usability

and responsiveness issues, and the content team was unable to create

or update pages independently—relying heavily on designers for even

basic changes.

Solution

I designed a modular component library built on top of the new design system,

allowing the content team to assemble pages independently.

Each component was defined with clear structure and rules,

ensuring flexibility without compromising UX consistency or brand integrity.

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

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

100px

92%

Polin Light

63px

100%

Semi Bold

60px

100%

Polin Light

45px

100%

Polin Medium

Body Text1

24px

120%

Regular / Medium / Semibold

Mobile

Element

Size

Line Height

Weight

56px

95%

Polin Light

40px

110%

Polin Light

30px

120%

Polin Medium

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