# Hope Initiatives: case study

Client work by Ido Vadavker (design, development, motion, CMS), 2026. A website in Hebrew, Arabic and English for Hope Initiatives (יוזמות תקווה), a Jewish-Arab nonprofit led by Ghadir Hani and Dror Rubin, working on trust between Jews and Arabs in Lod, Acre and the Galilee. Eight pages in each of the three languages, with a CMS the client edits.

Web page: https://www.idovadavker.com/case-studies/hope-initiatives/
Showcase: https://hope-initiatives-showcase.pages.dev/

This case study shows the first design. After the first review round the client chose a quieter version for their own launch, with colour photos, a drifting strip of pictures and no loader. The first design runs as a showcase on the same content and the same code.

## The problem

Their old site was a Wix page for Women Write Hope, a book by twenty-one women. The consulting, the tours and the education programmes sat behind one menu item, and the language switch offered Hebrew and English only. Arabic appeared once, in the book's title, on the site of a Jewish-Arab partnership. The new home page says what they do in the first screen, in all three languages, with the two people who lead it in the first photograph.

## Where the motion goes

The site is a poster: cream paper, a 30px grid, a condensed headline and one warm band of photograph.

- The name first. The logo opens large and alone on the cream, then travels into its own place in the bar in one move. The half second it sits there before the page arrives is the whole loader. If anything stalls, the page shows itself after 4.5 seconds anyway.
- The photograph opens. At the fold the photograph is a low band. Below the fold that crop cuts Ghadir and Dror off at the forehead, so the first time you scroll to it, the band grows to the photograph's own proportions and stays open. It never opens on load.
- The film grows as you scroll. Their film starts as a small plate beside the statement and grows into a full-width band. It's one video element the whole way, moved with GSAP's Flip, so nothing crossfades and nothing loads twice.
- Three languages, two directions. Hebrew at the root, Arabic and English beside it. Every motion runs in reading order: the programme tabs sway the way the eye moved and the statement's gold wave runs right to left in Hebrew. Arabic letters join, so in Arabic the statement is plain. The Arabic copy comes from the client's team, never from a machine translation.

## Style guide

Seven colours, two type families for three scripts, five durations, and a 30px grid under all of it.

- Colours: Paper #F5F1E9 (page), Plate #F8F6F2 (the bar, cards), Deep #EDE7DA (panels), Ink #1B1815 (type, the footer), Annotation #796A56 (small text), Gold #B7966C (shapes and marks), Gold deep #80623D (gold text).
- Contrast: Ink on paper 15.7:1 (AAA), Gold deep on paper 5.0:1 (AA). The brand's gold is 2.5:1 on paper, under the 3:1 even display text needs, so it only draws shapes and every gold word is set in the deeper gold.
- Photos: one CSS filter on every picture, grayscale(1) sepia(.42) saturate(1.45) contrast(1.1), so photos from different events and cameras read as one set and a new upload matches on its own.
- Type: Karantina (300 and 700, Hebrew and Latin) for display; it has no Arabic, so Arabic falls through to IBM Plex Sans Arabic 600. IBM Plex Sans Hebrew for text. Every face is split by script.
- Logo: the client's own, from their designer, the name in all three languages in one lockup, always shown whole.
- Motion: durations 0.45, 0.5, 0.9, 1.0 and 1.1 seconds; expo.out for pages and the loader, power4.out for scroll reveals. One gold moment: each letter of the statement passes through gold on its way to ink.

## Under the hood

Astro (static HTML), Sanity with one document per language, GSAP self-hosted, Karantina and IBM Plex split by script, Cloudflare Pages.

Measured on the live showcase's Hebrew home page, 2026-10-26: Lighthouse performance 98 and 99 on desktop, largest paint 0.7 to 0.9 s, 0 ms main-thread blocking, no layout shift. On a throttled phone it scored between 85 and 98 over five runs, four of them 97 or 98, largest paint about 2.2 s. The home page weighs 280 to 340 KB on a phone.

- Every word and photo lives in the CMS, one document per language, and a publish there rebuilds the site.
- A language with a blank field shows the Hebrew words there, never an empty gap.
- With reduced motion turned on, you get the finished page with no loader, the film already wide and the photograph already open.
- The showcase is kept out of search on purpose, which is the only thing Lighthouse marks it down for.

## What shipped

- The site: home, about, five programme pages and a media page, each in Hebrew, Arabic and English, plus the legal pages.
- The CMS: a Sanity Studio in its own organisation, ready to hand to the client, that opens straight into each page in each language.

## Credits

Design and build: Ido Vadavker. Words and photos: Hope Initiatives. Logo: Hope Initiatives' designer. Flip scale, gradient wave text and bouncy tabs built on Osmo Supply resources. Type: Karantina and IBM Plex Sans Hebrew and Arabic, SIL Open Font License.

Need a site in more than one language? Book a 15-minute call: https://cal.com/ido-vadavker/intro