מדריך סגנון (Style Guide) - MB Center
1. פלטת צבעים
Primary (CTA)
#005542
Accent
#0E836A
Background (Light)
#F8F9FA
Background (Dark)
#23282D
Text (Primary)
#333333
Text (Secondary)
#555555
Borders / Lines
#DDDDDD
2. טיפוגרפיה
כותרת ראשית (H1)
Font: Assistant | Weight: 700 (Bold) | Size: 52px | Line Height: 1.2
כותרת סעיף (H2)
Font: Assistant | Weight: 700 (Bold) | Size: 40px | Line Height: 1.3
כותרת משנה (H3)
Font: Assistant | Weight: 600 (Semi-Bold) | Size: 28px | Line Height: 1.4
זוהי דוגמה לפסקת טקסט (Paragraph). הטקסט צריך להיות קריא, ברור ונעים לעין. אנו משתמשים בפונט "Assistant" בגודל 18 פיקסלים עם מרווח שורות נדיב של 1.7 כדי להבטיח נוחות קריאה מקסימלית בעברית. זהו הטקסט שישמש לגוף התוכן העיקרי באתר.
Font: Assistant | Weight: 400 (Normal) | Size: 18px | Line Height: 1.7
3. כפתורים ואלמנטים אינטראקטיביים
כפתור ראשי (Primary Button)
Hover State: רקע הכפתור משתנה לצבע Accent (#0E836A).
כפתור משני (Secondary Button)
Hover State: רקע הכפתור הופך לצבע Primary (#005542) והטקסט הופך ללבן.
שדות טופס (Form Fields)
Focus State: צבע המסגרת משתנה לצבע Primary (#005542).
4. פריסה ומרווחים (Layout & Spacing)
רוחב תוכן מרבי
רוחב התוכן המרבי באתר נקבע ל-1200px. זה מבטיח שהטקסט לא יימתח יתר על המידה על מסכים רחבים ושומר על קריאות מיטבית.
סרגל מרווחים (Spacing Scale)
כל המרווחים באתר (פנימיים וחיצוניים) מבוססים על כפולות של 8px. זה יוצר קצב ויזואלי אחיד ומקצועי.
- x-small: 8px
- small: 16px
- medium: 24px
- large: 32px
- x-large: 48px
- xx-large: 64px / 80px (למרווחים גדולים בין סקשנים)