# eazy Design System

A working design system for **eazy** (E.Z.WAY / איזיווי) — an Israeli company that runs psychometric exam (פסיכומטרי) prep courses for high‑schoolers, pre‑army youth, soldiers, and adults preparing for university.

> Brand line: **פשוט תצליחו.** ("Simply succeed.")
> Domain: ezway.co.il · Phone: 1‑700‑70‑70‑07

---

## Index

| File / folder | What's in it |
| --- | --- |
| `README.md` | This file. Brand context + content + visual + iconography rules. |
| `SKILL.md` | Agent skill manifest — used when this folder is mounted as a Claude skill. |
| `colors_and_type.css` | All CSS variables for color, type, spacing, radii, shadow, plus element-level type rules. **Import this from any HTML you build.** |
| `fonts/` | Brand OTF webfonts (Avigul family, Almoni Neue Tzar, Geomanist, FbTamlilCondensed). |
| `assets/` | Logos (orange E mark + wordmark, white wordmark), brand shapes (`Z` block, arrow, dot motif). Any new icons go here. |
| `preview/` | Small HTML cards rendered by the Design System tab — colors, type, components, etc. |
| `ui_kits/web/` | Recreation of the **eazy.co.il marketing site** as a click‑through prototype with reusable JSX components. |
| `ui_kits/flyer/` | Square / portrait social flyer template — the most common artifact eazy ships. |
| `_source/` | Original mockups, PDFs, and flyers shipped by the user. Reference only — never serve from here. |

## What is eazy?

eazy (stylised lowercase — `eazy`) is a brand of the company **E.Z.WAY**. They sell:

* **Psychometric prep courses** for high‑school students (the bulk of marketing flyers).
* **Pre‑army / army programs** — Tzav Rishon prep, programs for Atidim (עתידים) and lone soldiers.
* **Adult & municipal courses** through partnerships with city youth centers (מרכז צעירים) — Kiryat Bialik, Tiberias, Raanana, Sderot, Kiryat Gat, etc.
* **eazy VOD** — recorded course content as backup.
* The marketing site **ezway.co.il** ties everything together.

The audience is overwhelmingly **young Israelis aged 16–22**. The whole brand is RTL Hebrew with English used sparingly (product names like "eazy VOD", "Start now").

## Source materials

Provided by the client through the importer (not all may be re‑accessible):

* **Mounted folder `אתר + עמוד נחיתה/`** — desktop + mobile homepage and inner page mockups (PNGs), plus full PDFs of the marketing site (`EZ_WWW_01.pdf`, `EZ_WWW_04_.pdf`) and the desktop landing page (`EZ_LANDING PAGE03 FINAL.pdf`). The `Document fonts/` folder inside it carries the print fonts.
* **Mounted folder `עלונים/`** — ~30 social/event flyers (square JPG/PNG) for everything from a stress workshop to lone‑soldier benefits. These are the main visual reference for the brand voice.
* **Uploads** — the orange/black eazy mark (PNG + SVG), the white wordmark SVG + PDF, and the four Avigul webfonts (light, regular, bold, shadow).

Working copies live in `_source/` and `fonts/`.

---

## Content fundamentals

eazy writes the way a confident older sibling would talk to a 17‑year‑old who is anxious about a big test. **Reassuring, plural, second‑person, no jargon.**

### Voice

* **Plural "you" (אתם / תצליחו / שלכם).** Almost everything is addressed to a group — students together, parents and students together. The brand does not use the singular "אתה / את" except in informal stickers ("מה הכיוון שלך?").
* **Imperative + reassurance.** The hero of every flyer is a verb in the imperative: `תצליחו`, `כנסו`, `בחרנו`. It's followed immediately by softening copy: "פשוט תצליחו" — *just* succeed, you've got this.
* **Statement → answer.** Headlines often work as a question + flat answer: "להתקבל לתואר ראשון? **זה איזי**." ("Getting into a Bachelor's? It's eazy.") The pun on the brand name is core; let it land.
* **No hype, no exclamation pile‑ups.** A single `!` for emphasis is the maximum. Never SCREAM. Never use multiple `!!!`.
* **Numbers feel concrete, not boastful.** "8 הדרכים ל‑800 בפסיכומטרי" is a typical move — name a thing, count it, attach a benefit.

### Casing & typographic moves

* Hebrew has no case so this is mostly about the English: **all‑lowercase wordmark `eazy`** — no trailing period. Never uppercase, never `Eazy`, never `eazy.` with a dot. Product names ride along (`eazy VOD`).
* English snippets inside Hebrew copy stay LTR inside the line (browsers handle this automatically — don't fight it).

### Tone words (use)

confident, encouraging, calm, plural‑warm, can‑do, pragmatic, slightly cheeky.

### Tone words (avoid)

corporate, salesy, edgy, ironic, urgent, finger‑wagging, hustle‑culture.

### Vocabulary examples (real)

| Real eazy line | Where it appears |
| --- | --- |
| **פשוט תצליחו.** | Brand tagline. Closes most flyers + the homepage. |
| **זה איזי.** | "It's eazy." Brand‑name pun, used as a flat answer to a question headline. |
| **בחרנו בך** | "We chose you." Used on the partnership flyer with Tiberias / Atidim. |
| **מה הכיוון שלך?** | "What's your direction?" Course discovery flyer. |
| **חשוב וכדאי לדעת מראש** | "Important & worth knowing in advance." Long FAQ-style flyer header. |
| **הוובינר הזה בול בשבילכם** | "This webinar is exactly for you." Event invite. |

### Emoji & punctuation

* Emoji are **not** used in headlines or marketing copy. The smiley `(:` (Western, eyes‑on‑right) shows up rarely in friendly body copy on a few flyers — that's the only emoji‑adjacent move.
* The orange period (`.`) after the wordmark and tagline is sacred.
* Bullets in flyers are **small orange targets / chevrons** (see Iconography), not Unicode dots.
* Question marks land at the end of question headlines and the question mark sits on the **left** in RTL — browsers handle this if you set `dir="rtl"`.

### Length

* Hero headlines: 2–5 Hebrew words.
* Sub‑heads: one full sentence, ≤ 12 words.
* Body paragraphs in flyers: 2–4 short lines, never a wall.

---

## Visual foundations

### Palette in use

The brand colour is a single, vivid **orange** (`#F37327`) used as the only true accent — for CTAs, the "E" mark, the price/date stamp, and small icons. The supporting colour is a soft **lavender** (`#A9A4EC`) used as the giant `Z`/arrow shapes that fill hero blocks. A handful of flyers swap the lavender for a deep editorial **indigo** (`#3F4197`) on heavier headlines. Beyond that the system is **off‑white paper** (`#F4F2EE`), pure white cards, near‑black ink, and the cooler `#EFEFF2` for slate‑tinted backgrounds.

There is **no gradient** in the brand. Solids only.

### Typography

| Role | Family | Weights actually used |
| --- | --- | --- |
| Hebrew display / headline | **Avigul** | 700 bold (almost everything), 300 light for the supporting line |
| Hebrew body / long‑form | **Almoni Neue Tzar AAA** | 400 regular, 300 light |
| Outlined display variant | **Avigul Shadow** | 700 — used sparingly for posters / event titles |
| English condensed display | **FbTamlilCondensed Black** | 900 — only for short English headlines on landing |
| English body / numerals | **Geomanist** | 400 — phone numbers, dates, English run‑in copy |

The hierarchy on a real flyer is almost always **giant Avigul Bold headline (lavender or indigo) → small Avigul Bold sub‑label (orange) → Almoni body (dark gray)**.

### Backgrounds & motifs

* **Off‑white paper (`#F4F2EE`)** is the default page surface — *not* pure white. Pure white shows up only inside cards.
* **Two giant lavender slashes** are the brand's most recognisable graphic device: an oversized `Z` made of two stacked parallelograms (referencing the `z` in eazy + the `E` mark). They sit behind hero imagery, often clipped by the page edges.
* **Black‑and‑white cut‑out photography.** Real young people, full‑height, smiling or thumbs‑up, with the background removed. Imagery is desaturated to grayscale (slight cool tint) so the orange and lavender pop. **Never** colour photography.
* **Orange dot cluster** — 4–6 soft `#FBD9C2` / `#F37327` circles at varying sizes, often layered behind the photo. Treat them as a brand sticker, not random decoration.
* **Arrow chevron bullets** — solid orange `◀` (RTL) on flyers, used as list bullets and section dividers.
* No textures, no noise, no patterns beyond the Z shapes + dots. No illustrations.

### Layout rules

* Hebrew RTL throughout — set `dir="rtl"` on `<body>`.
* Logo (orange E + wordmark) anchors the **bottom of the design** on flyers and **top‑right on the website header**. It is rarely centered.
* The tagline `פשוט תצליחו.` lives near the logo and is in **orange Avigul Bold**.
* Photos are **full‑height, anchored to a vertical edge** — left edge on most flyers, both edges on group shots.
* Headlines hug the opposite vertical edge of the photo. Big white space between is fine; the lavender Z fills it.

### Animation

The brand is print‑first; nothing observed has motion. For web, default to:

* **Easing:** `cubic-bezier(.2,.7,.2,1)` (gentle, not bouncy).
* **Durations:** 150ms (state changes), 280ms (entry), 480ms (large transitions).
* **Style:** soft fades + small translate (4–8px). **No bounces, no slide‑ins from off‑screen, no parallax.**

### States

* **Hover (button / card)**: fill darkens 8% (lavender → `--ez-lavender-deep`, orange → `--ez-orange-deep`). Opacity tricks are not the move.
* **Hover (link)**: colour shifts to `--ez-orange-deep` and a 1px border‑bottom appears in the same colour.
* **Active / pressed**: 1px scale down (`scale(.99)`), no colour shift beyond hover.
* **Focus**: 2px outline in `--ez-orange` with 2px offset. Visible. Always.
* **Disabled**: 40% opacity, `cursor: not-allowed`. No grey‑out tint.

### Borders, radii, shadows

* **Radii are small**: 4–12px on most cards/buttons; the brand reads tighter than today's "soft 24px" trend. The big lavender Z shapes are **not rounded** at all — sharp parallelograms.
* **Shadows** are barely there. `0 6px 20px rgba(40,30,80,0.08)` is the working card shadow. The print materials use **no shadow** — favor flat where possible.
* **Borders** are 1px in `--ez-line` (`#E2E2E6`). On orange/lavender surfaces, drop the border and rely on the colour break.

### Transparency & blur

* **Blur** is not part of the brand. Don't use `backdrop-filter: blur()`.
* **Transparency** appears only in the orange dot motif and in the faint inner Z shape (a 60% lighter lavender showing through the outer Z). Roughly: outer Z `var(--ez-lavender)`, inner Z `var(--ez-lavender-soft)` at full opacity (not alpha) — the look is two solid stacked shapes.

### Cards

A "card" in the eazy world is a **white panel on the off‑white page**, with a hairline border (`--ez-line`), a 12px radius, and an optional faint shadow on hover only. No coloured left borders. No pill‑shaped frames. Photos inside cards are full‑bleed to the top.

### Imagery colour vibe

Cool grayscale (slight desaturation toward blue, not warm). **No grain, no film effects.** Cut‑outs are clean — no halos. People look directly at the camera.

---

## Iconography

eazy does not ship a system icon font. The "icons" you see in materials are very small, intentional, and almost always one of these four moves:

1. **The orange `E` mark** (`assets/logo-mark-orange.svg`) — used as a logo, never as a generic icon.
2. **Solid orange chevron bullets** — used in lists. In RTL these point ◀ (left). See `assets/bullet-chevron.svg`.
3. **Small flat target / dart marks** — used as bullets on the workshop‑style flyers. Two‑colour (orange ring + lavender dart). See `assets/bullet-target.svg`.
4. **Decorative dot cluster** — 4–6 circles in `--ez-orange-soft` and `--ez-orange`, scattered at random sizes (12–48px). See `assets/dot-cluster.svg`.

For any UI work that needs more icons (chat bubble, calendar, phone, location pin) **substitute Phosphor Icons "regular"** weight from CDN — they share Avigul's geometric, lightly rounded character. This is a substitution; flag it.

```html
<!-- Phosphor icons via CDN — substitution for missing eazy iconography -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<i class="ph ph-calendar-blank"></i>
```

**No emoji.** **No Material/Font Awesome.** **No Unicode characters used as icons** (the brand explicitly avoids `★ → ☎`‑type tricks).

When you need imagery (a hero photo of a student) and don't have a real cut‑out yet, leave a **labelled grey placeholder block** — never generate AI imagery, never draw an SVG person.

---

## Substitutions flagged

The OTF files don't include a CSS‑native fallback chain that exactly matches Avigul. Web stacks fall back to **Heebo** (Google Fonts) or **Assistant** if Avigul fails to load — both are open‑source Hebrew sans with similar geometric character but slightly heavier counters. Visually close enough for prototyping; for production, ensure the `.otf` files are served and licensed correctly.

If the Avigul / Almoni / Geomanist / FbTamlil licenses do not permit web embedding, replace with **Heebo + Rubik + Bebas Neue** (Google Fonts) and update `colors_and_type.css`. **Please confirm font licensing before shipping production.**

---

## How to use

In any HTML you build, link the foundations once at the top:

```html
<link rel="stylesheet" href="../colors_and_type.css">
<body dir="rtl">
  <h1 class="ez-h1">פשוט תצליחו.</h1>
</body>
```

Then pull components from the right kit (`ui_kits/web/` for marketing pages, `ui_kits/flyer/` for social flyers). Both kits expose React components via `<script type="text/babel" src="...">`.

---

## Exported components

Reusable React components live under `components/<Name>/` and are exposed on the
compiled namespace `window.EazyDesignSystem_019e08`. Each ships a `<Name>.jsx`
(`export function <Name>`), a `<Name>.d.ts` typing, and a `<Name>.html` `@dsCard`
preview.

* **`EzButton`** — the brand button. Solid fills only (no gradients), pill radius,
  Avigul display type. Variants: `primary` (orange), `secondary` (lavender),
  `ghost` (outline), `link`. Hover darkens the fill 8%; active presses to
  `scale(.99)` — per the States spec above.

```html
<script src="../../_ds_bundle.js"></script>
<script>
  const { EzButton } = window.EazyDesignSystem_019e08;
  // React.createElement(EzButton, { variant: "primary" }, "לרישום לקורס")
</script>
```

The standalone games (`quiz-game/`, `quiz-game-server/`, `quiz-game-export/`,
`role-game/`, `flashcards/`) are full deployable builds, not library exports —
they mount their own root via `window.<Name>` and are intentionally not on the
shared namespace.