243 lines
15 KiB
Markdown
243 lines
15 KiB
Markdown
# 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.
|