Design System

מקור אמת אחד לעיצוב האתר — צבע, טיפוגרפיה, ריווח, רכיבים ותנועה. RTL, עברית-first, ברוח Cuberto / Ramotion.

גרסה 0.1
פלטה: Periwinkle × Lavender
פונטים: Heebo · Assistant
01 · Color
צבע

Brand · Periwinkle

50
100
200
300
400
500
600
700
800
900
950

--brand-500 #6260FF ליבת המותג · --brand-100 #E4E4FF = Lavender לסקשנים רכים · --brand-950 לסקשנים כהים.

Neutral · violet-tinted

0
50
100
200
300
400
500
600
700
900
950

Accent + Functional

Accent · Coral#FF6B53 · highlights, מספרים
Success#1FB36A
Warning#F5A524
Error#E5484D

⤷ פלטת חלופה Royal Blue × Powder Pink שמורה ב-tokens.css (החלפה = שורה אחת).

02 · Typography
טיפוגרפיה
display · Secular Oneאוטומציה חכמה
Heebo 900 · H1תשתית הצמיחה של עסקים
Heebo 800 · H2איך הם עשו את זה
Heebo 800 · H3הפתרונות שלנו
eyebrow · captionאוטומציה ו-AI לעסקים
Assistant · body-lgטקסט משני גדול — להוביל את העין מהכותרת אל הפעולה.
Assistant · bodyפסקת גוף רגילה. גובה שורה 1.55, אורך שורה עד ~70 תווים לקריאוּת.
Assistant · body-smטקסט עזר / כיתובים.
03 · Space · Radius · Elevation
ריווח, פינות וצללים

Spacing — 4px base

1·4
2·8
4·16
6·24
8·32
12·48
16·64

Radius

sm·8
md·14
lg·20
xl·28
pill

Elevation

04 · Components — Actions
כפתורים

Hover = הרמה 2px + גוון כהה · Focus = focus-ring נגיש · Active = חזרה למקום.

05 · Components — Forms & Filters
טפסים, צ'יפים
מספר טלפון לא תקין
הכלאוטומציהAIנדל"ןמכירות
06 · Components — Cards
כרטיסים

הטמעת אוטומציות

חיבור המערכות לתהליך אחד חלק.

חברת נדל"ן · לידים

אוטומציה למערך המכירות.

×3.4זמן תגובה
פרס Integromat ★
68%פניות נסגרות אוטומטית
07 · Signature — מוטיב החתימה
זרימה (Flow) — ה-chevron בתנועה

החתימה הלא-גנרית: ה-chevron הכפול מהלוגו הופך לשפת תנועה — nodes (מערכות/לידים) שמתחברים בקו זורם עם פולס נע. חוזר ב-hero, בכיסויי המקרים, ובמעברים.

✓ עשה

  • צבע במינון — אקסנט מוביל, לא רקעים צבעוניים בכל מקום
  • תנועה דרך transform/opacity בלבד (ביצועים)
  • scroll-reveal עדין (12–26px, 400–600ms, ease-out)
  • ה-chevron כמוטיב חוזר, לא דקורציה אקראית
  • ניגודיות AA על כל טקסט

✕ אל תעשה

  • אימוג'י כאייקונים — רק SVG
  • hover שמזיז layout (scale שמקפיץ)
  • יותר מ-2 פונטים פעילים בו-זמנית
  • סגול ישן מהאתר הקודם (#6E51C8)
  • גרדיאנטים צעקניים על רקעים שלמים