Files

T

ccadmingit1 c206a85cb9 Imported design export as-is (3/5)

2026-08-20 12:43:23 +00:00

15 KiB

Raw Blame History

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:

The orange E mark (assets/logo-mark-orange.svg) — used as a logo, never as a generic icon.
Solid orange chevron bullets — used in lists. In RTL these point ◀ (left). See assets/bullet-chevron.svg.
Small flat target / dart marks — used as bullets on the workshop‑style flyers. Two‑colour (orange ring + lavender dart). See assets/bullet-target.svg.
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.

<!-- 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:

<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.

<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.

15 KiB Raw Blame History Unescape Escape