יסודות עיצוב ופריסה

צור מערכת צבעים לאפליקציה הזו:
- צבע מותג ראשי אחד
- צבע משני אחד
- צבע הדגשה אחד להבלטות
- 4 גווני אפור ניטרליים לרקעים, משטחים וגבולות
מפה צבעים לתפקידים כמו primary, surface, border, success, warning, error.
ודא שטקסט על רקעים עומד ברמות ניגודיות של נגישות.
החל את המערכת הזו על כל האפליקציה והחלף צבעים חד-פעמיים.

השתמש בפלטה הזו והקצה לכל hex תפקיד:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
הגדר אילו מהם משמשים בתפקידים ראשי, משני, הדגשה וניטרלי.
החלף צבעים קשיחים בקוד ב-tokens או במחלקות Tailwind שעוקבות אחרי התפקידים האלה.

החל את הצבעים מהתמונה הזו על האפליקציה שלי.
מפה כל צבע לתפקיד כמו primary, background, foreground ו-accent.
החלף את הצבעים הקיימים בכל האפליקציה כך שיתאימו.

ייבא את הגופן "Raleway" מ-Google Fonts.
השתמש בו לכותרות דף ולכותרות מקטע.
שמור על גופן הגוף הנוכחי לפסקאות.
עדכן סגנונות בכל האפליקציה לפי הכלל הזה.

הוסף לדף הבית תמונת hero ברוחב מלא שמתאימה לפלטת הצבעים הנוכחית.
השתמש בתמונת placeholder שמרמזת על דאשבורד אנליטיקס מודרני.

צור סרטון היכרות קצר לאפליקציית הכושר שלי שמציג שגרת אימון בוקר פשוטה. הוסף אותו למסך הפתיחה מעל כפתור Get Started.

השתמש בייחוס הזה כהשראה.
שמור על הפריסה והתוכן שלי, אבל:
- התאם את צורות הכפתורים והצללים
- התאם את רדיוס הפינות וסגנון הגבול של הכרטיסים
- החל גרדיאנט רך דומה רק על הכותרת העליונה
אל תעתיק את הצבעים המדויקים, רק את המבנה והתחושה.

מצילום המסך הזה, חלץ כללי עיצוב עבור:
- תפקידי צבע
- גודלי גופן ומשקלים
- רדיוס פינות וצללים
- ריווח בין מקטעים וכרטיסים
הסבר את הכללים, ואז החל סגנון דומה עם צבעי המותג הנוכחיים שלי.

שנה את סגנון הרקע של האלמנט הזה ל:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
שמור על כל שאר הסגנונות ללא שינוי.

החלף אייקונים גנריים באייקונים משמעותיים יותר:
- השתמש באייקונים שמתאימים בבירור לכל פריט ניווט ולכל פעולה עיקרית
- שמור על גודל אייקון ועובי קו עקביים
- יישר אייקונים בצורה מסודרת עם תוויות בניווט, ברשימות ובכפתורים

עדכן את כל כפתורי הקריאה לפעולה הראשיים:
- השתמש באייקון "sparkles" משמאל לתווית
- שמור על גודל אייקון קטן וריפוד אחיד
- אל תוסיף אייקונים לכפתורים משניים או הרסניים

זהה את סוגי הדפים העיקריים באפליקציה הזו (נחיתה, דאשבורד, רשימה, פירוט, טופס, הגדרות).
עבור כל סוג:
- הצע מבנה פריסה עקבי
- הצע באילו רכיבים קיימים אפשר להשתמש שוב
החל את הפריסות האלה על כל הדפים מאותו סוג, בלי לשנות תוכן.

שפר את ההיררכיה הוויזואלית והשטח הלבן בדף הזה:
- גרום לכותרת הדף לבלוט בבירור מעל שאר הטקסט
- השתמש בכותרות מקטע עקביות לקיבוץ תוכן
- הוסף ריפוד עליון ותחתון סביב כל מקטע
- הגדל את הרווח בין שורות של כרטיסים
הימנע מהוספת צבעים או גופנים חדשים.

הפוך את הפריסה הזו לרספונסיבית:
- בטלפונים, השתמש בעמודה אנכית אחת וערום מקטעים
- בטאבלטים, השתמש בשתי עמודות לכרטיסים היכן שיש מקום
- במחשבים, השתמש בשלוש או ארבע עמודות לכרטיסים
שמור על תמונות ביחס גובה-רוחב של 4:3.
כווץ את הסרגל הצדדי לתפריט עליון במסכים קטנים.
הימנע מגלילה אופקית בכל נקודות השבירה.

עצב את דף הבית כדף נחיתה ממוקד:
- מקטע hero נקי עם כותרת קצרה, משפט תומך אחד וקריאה לפעולה ראשית אחת
- אחריו שלושה יתרונות מרכזיים בכרטיסים
- הוסף מקטע הוכחה חברתית פשוט עם לוגואים
- שמור על ניווט מינימלי
השתמש במערכת הצבעים והטיפוגרפיה הקיימת שלי.

בנה מחדש את הדאשבורד הזה:
- מקם את ה-KPI העיקרי בפינה השמאלית העליונה בכרטיס בולט
- קבץ מדדים קשורים לרשת 2x2 של כרטיסים
- העבר מסננים ובקרות טווח תאריכים לסרגל עליון נקי
- הפחת רעש ויזואלי בתרשימים באמצעות צבעים וסגנונות עקביים

נקה את תצוגת הטבלה הזו:
- הגדל מעט את גובה השורות
- השתמש במפרידי שורות עדינים או בפסי זברה
- יישר פעולות בעמודה עקבית בסוף
- הוסף מצב ריק ברור עם הודעה קצרה ופעולה ראשית

שפר את דף הפירוט הזה:
- העבר את הכותרת הראשית והפעולות הראשיות לראש הדף
- השתמש בפריסת שתי עמודות עם תוכן ראשי משמאל ומידע משני מימין
- קבץ שדות קשורים תחת כותרות קטנות
- ודא שפעולות הרסניות מסומנות בבירור ומובחנות ויזואלית

עצב מחדש את הטופס הזה לבהירות:
- השתמש בפריסת עמודה אחת
- קבץ שדות קשורים תחת כותרות קצרות
- הוסף תוויות ברורות וטקסט עזר היכן שצריך
- הצג הודעות שגיאה בשורה מתחת לכל שדה כשהאימות נכשל
השתמש במערכת הטיפוגרפיה והריווח הקיימת שלי.

הוספתי את חבילת ה-npm בשם framer-motion. שכתב את רשת הכרטיסים הקיימת כך שכל כרטיס יונפש במעבר עכבר באמצעות framer-motion:
- שמור על הפריסה והטקסט הנוכחיים
- השתמש באסימוני הצבע, רדיוס הגבול והטיפוגרפיה הקיימים
- כבד prefers-reduced-motion ושמור על קווי מתאר ברורים לפוקוס מקלדת

שכתב את הרכיבים האלה לשימוש במחלקות Tailwind עקביות:
- החלף מאפייני style בשורה בכלי עזר של Tailwind
- השתמש באסימוני העיצוב לצבעים, ריווח וטיפוגרפיה
- תעד את שילובי המחלקות העיקריים לניווט, כרטיסים וכפתורים

הנה רכיב ה-Layout.js שלי.
התאם אותו כך:
- הכותרת העליונה תישאר דביקה בגלילה
- לתוכן הראשי יהיה רוחב מרבי והוא ימורכז במסכים גדולים
- צבע הרקע ישתמש באסימון ה-surface ממערכת העיצוב שלי
הסבר בהערות מה שינית.

סקור את עיצוב האפליקציה הזו מנקודת מבט של ביצועים:
- זהה אלמנטים ויזואליים או קוד כבדים שעלולים להאט את הטעינה
- הצע חלופות קלות יותר ששומרות על אותו מראה כללי
- הצע מקומות ספציפיים שבהם טעינה באיחור או פיצול קוד יעזרו

בדוק את האפליקציה הזו מבחינת ניגודיות צבעים:
- זהה טקסט או אייקונים עם ניגודיות נמוכה מול הרקע שלהם
- חזק את הניגודיות תוך שמירה על אותה פלטה כללית
- ודא שכפתורים ראשיים וקישורים ניתנים להבחנה בבירור
תאר את התיקונים העיקריים שהחלת.

שפר את קריאות הטקסט:
- הגדל מעט את גודל גופן הגוף הבסיסי
- הגדל את גובה השורה בפסקאות
- ודא שכותרות גדולות בבירור מטקסט הגוף
- צמצם אורכי שורה ארוכים מאוד במסכים רחבים

שפר את נגישות המקלדת והפוקוס:
- ודא שאפשר להגיע לכל האלמנטים האינטראקטיביים עם Tab
- הוסף סגנונות פוקוס גלויים לכפתורים, קישורים ושדות טופס
- תקן בעיות בסדר הפוקוס בדף הזה
תאר שינויים משמעותיים שביצעת.

התאם אנימציות לנגישות:
- כבד את העדפת התנועה המופחתת של המשתמש
- הסר או פשט אנימציות רציפות גדולות
- השאר רק תנועה קצרה ועדינה שעוזרת להבנה

שפר את נגישות התוויות והטקסט החלופי:
- הפוך תוויות כפתורים וקישורים למתארות יותר היכן שצריך
- הוסף או שפר טקסט חלופי לתמונות חשובות
- ודא שהכותרות עוקבות אחרי מבנה ברור
שמור על אותו טון וקול מותג.

הפוך את הפריסה הזו לרספונסיבית למובייל, טאבלט ומחשב.
הימנע מגלילה אופקית ושמור על פעולות ראשיות גלויות בלי גלילה מוגזמת.