מיזינסקי — Design System · MASTER

מקור האמת העיצובי לאתר. כל החלטה כללית חיה כאן; חריגות ספציפיות-לעמוד יושבות ב-design-system/pages/<page>.md ודורסות את הקובץ הזה. גרסה 0.1 · פלטה פעילה: Periwinkle × Lavender · פונטים: Heebo + Assistant קבצים: tokens.css (מקור אמת) · styleguide חי

---

1. עקרונות (מה הופך את זה ל”לא גנרי”)

1. רעיון חתימה אחד — מוטיב הזרימה (Flow): ה-chevron הכפול מהלוגו הופך לשפת תנועה של nodes שמתחברים. חוזר ב-hero, בכיסויי מקרים, ובמעברי עמוד. זה ה”דבר שזוכרים”.
2. צבע במינון — בסיס נקי + אקסנט מוביל אחד. לא רקעים צבעוניים צעקניים (למדנו את זה תוך כדי).
3. טיפוגרפיה נועזת — כותרות Heebo כבדות (800/900), הרבה שטח לבן, ברוח Cuberto/Ramotion.
4. תוכן אמיתי — מספרי תוצאה, לוגואי לקוחות (אזריאלי, הרבלייף, בזק, קרסו), פרס Integromat. ספציפיות הורגת גנריות.
5. RTL, עברית-first — נבדק בעברית, לא תרגום מאנגלית.

2. מותג ולוגו

• נשמר רק הלוגו הקיים (chevron כפול שחור + wordmark). שאר הזהות חדשה.
• גרסה כהה: הלוגו בלבן על סקשנים --dark-bg. (צריך לייצר PNG/SVG לבן — פעולה פתוחה.)
• ה-chevron לבדו = אייקון/מוטיב חוזר.

3. צבע

| תפקיד | Token | ערך | |—|—|—| | מותג ליבה | --brand-500 | #6260FF Periwinkle | | סקשן רך | --brand-100 | #E4E4FF Lavender | | כהה (פוטר/באנר) | --brand-950 | #14123D | | אקסנט (מספרים/הדגשות) | --accent-500 | #FF6B53 Coral | | טקסט כותרת | --ink | neutral-900 | | טקסט גוף | --text | neutral-700 |

• תמיד דרך semantic tokens (--primary, --bg-soft, --ink) — לא scales גולמיים ברכיבים.
• פלטת חלופה Royal Blue #3447AA × Powder Pink #FBEAEB שמורה מוערת ב-tokens.css — החלפה = שורה אחת. (החלטה סופית בין השתיים — פתוחה.)
• ניגודיות: כל טקסט ≥ AA (4.5:1).

4. טיפוגרפיה

• Heebo כותרות (300–900) · Assistant גוף · Secular One display accent ל-hero בלבד.
• סקאלה: ראה --fs-* ב-tokens. כותרות letter-spacing: -.02em, גוף line-height 1.55, אורך שורה ≤ ~70 תווים.

5. ריווח, פינות, צללים

• ריווח על בסיס 4px (--sp-*). מרווח סקשן: --section-py (clamp 56–120px).
• פינות: כרטיסים --r-lg, כפתורים --r-pill, תמונות/כיסויים --r-xl.
• צללים: --shadow-sm/md/lg + --shadow-brand (זוהר מותג ל-CTA/hover).

6. רכיבים (מפורט ב-styleguide)

כפתורים (primary/ghost/light/whatsapp · sm/lg · hover/active/focus/disabled) · שדות טופס + states · צ’יפים/פילטרים · כרטיסים (פתרון/מקרה/בלוג) · badge + stat · נאב · באנר AutoTuesday · פוטר.

7. תנועה

• משכים: --dur-fast 150 (micro) · --dur-base 250 (hover) · --dur-slow 400 (reveal) · --dur-page 600 (מעבר עמוד).
• Easing: --ease-out ברירת מחדל.
• רק transform/opacity לאנימציות. תמיד prefers-reduced-motion (כבר ב-tokens).
• חתימות: blob נוזלי עדין · scroll-reveal (12–26px) · פולס זרימה במוטיב · מעברי עמוד.

8. נגישות

• Focus-ring נראה (--focus-ring) · touch targets ≥ 44px · label לכל שדה · aria-label לאייקונים · צבע אף פעם לא האינדיקטור היחיד · תקן ישראלי (IS 5568 / WCAG AA).

9. אינטגרציה (Jekyll CMS)

התוכן ב-collections קיימים: _services, _clients, _articles, _courses, _posts, _categories. העיצוב חייב להתמפות אליהם — הרכיבים נבנו במחשבה על המבנה הזה.

10. החלטות פתוחות

• פלטה סופית: Periwinkle או Royal×Powder?
• גרסת לוגו לבנה לסקשנים כהים.
• כיוון ויזואלים: צילומים אמיתיים / צילומי מסך של אוטומציות / גרפיקה מותאמת.
• עברית בלבד או דו-לשוני.