GranitCorp · SparkAudit · AgenticAiNation
מערכת אחת, שלושה מותגים, שתי שפות.
טוקנים בגווני נייבי וזהב, מערך רכיבים מלא ושלושת סימני המותג, שנבנו פעם אחת ומשותפים לכל האתרים והאפליקציות במשפחה — בעיצוב בהיר או כהה, נקראים משמאל לימין או מימין לשמאל, מאותו קוד markup.
טוקנים
כל החלטת עיצוב במערכת הזו שמורה בקובץ tokens/tokens.json ומתורגמת למשתני CSS בתחילית --aain-*. שינוי ערך אחד משפיע באופן אוטומטי על כל הרכיבים, בשתי ערכות הנושא.
צבע — בהיר וכהה
בהיר
כהה
מילויים (בלתי תלויי ערכת נושא)
משמשים לכפתורים מלאים, לתגים (badges) ולשבבים (chips) — בשילוב עם צבע טקסט קבוע on-*-fill, שלא נבדק כלל מול רקע העמוד.
סולם טיפוגרפיה
מרווחים
רדיוס והצללה (elevation)
0 1px 2px -1px rgba(5,10,18,.3)0 16px 40px -12px rgba(5,10,18,.5)תנועה
שלושה משכי זמן (fast 140ms ללחיצת כפתור, base 200ms לתפריטים נפתחים ולפאנל הניווט, slow 280ms למגירת מעטפת האפליקציה) ושלוש עקומות האצה (out, in-out, drawer). הכול מתחשב בהגדרת prefers-reduced-motion; ראו את הערת התנועה בתחתית העמוד.
אייקונים
13 אייקוני קו מצוירים ייעודית, בסט עקבי אחד של 24px וקו מתאר 1.75px, שנבנה לקובץ dist/icons.svg כ-sprite.
רכיבים
כל רכיב להלן הוא HTML פשוט ומחלקות CSS מתוך dist/aain.css — קטע הקוד שמופיע בכל דוגמה הוא בדיוק מה שמוצג מעליו.
כפתורים
ראשי, משני, שקוף (ghost) ומסוכן (danger), בשני גדלים נוספים, וגם מצב טעינה.
<button class="aain-btn aain-btn--primary">פעולה ראשית</button>
<button class="aain-btn aain-btn--danger">מחיקת ביקורת</button>קישורים
<a class="aain-link--arrow" href="/pricing">למידע נוסף
<svg><use href="icons.svg#aain-icon-arrow"></use></svg>
</a>ניווט — מחשב + מגירת טלפון 390px
הניווט בראש העמוד הזה הוא הרכיב החי. מתחת לכך אותו ניווט בתוך מסגרת 390px, עם מתג אמיתי הניתן להפעלה מהמקלדת (aain.js מחבר את data-aain-toggle — בלי צורך בפריימוורק).
כרטיסים
הגרסאות הפשוטה, הפיצ'ר (עם אייקון) והסטטיסטית חולקות כרטיס בסיס אחד.
כרטיס פשוט
מיכל תוכן פשוט — רקע ורדיוס, בלי שום דבר נוסף.
כרטיס פיצ'ר
אריח אייקון מעל כותרת ותיאור קצרים.
<div class="aain-card aain-card--feature">
<div class="aain-card__icon">…</div>
<h4>כרטיס פיצ'ר</h4>
<p>אריח אייקון מעל כותרת קצרה.</p>
</div>כרטיס תמחור
מחיר דוגמה להמחשה בלבד — לא מחירון אמיתי.
SparkAudit — ביקורת במחיר קבוע
דוח אחד, מחיר אחד, בלי התחייבות חודשית.
- ביקורת אוטומציה של שבועיים לתהליך עבודה אחד
- דוח כתוב עם המלצות מדורגות לפי עדיפות
- שיחת סיכום אחת של 45 דקות
איך זה עובד
רצף אמיתי של שלושה שלבים — המספור משמש כי התוכן אכן מסודר לפי שלבים.
שתפו תהליך עבודה אחד
ספרו לנו איזה תהליך גוזל היום הכי הרבה זמן ידני.
אנחנו ממפים ובודקים
אנחנו עוקבים אחרי השלבים, מסמנים מה אפשר להפוך לאוטומטי בבטחה, ובודקים את זה.
אתם מקבלים את הדוח
רשימה מדורגת של שיפורים, כל אחד עם הערכת זמן שנחסך.
שדות טופס ומצבים
מצב רגיל, פוקוס, שגיאה, מושבת והצלחה, וגם פריסת טופס יצירת קשר בשתי עמודות. כל שדה נשאר בתוך עמודת 390px בטלפון.
רצועת KPI + טבלת נתונים
נתוני דוגמה של תהליכי עבודה בעסק קטן, להמחשת הפריסה בלבד.
| תהליך עבודה | סטטוס | שעות שנחסכו / בחודש |
|---|---|---|
| מעקב חשבוניות | פעיל | 6.5 |
| מיון פניות נכנסות | בבדיקה | 3.0 |
| דיווח שבועי | מתוכנן | — |
תגים
התראות
לשוניות
מיתוג
שלושה סימני מותג, שפת סימן-בלוק משותפת בענבר וכחול. הכללים המלאים בקובץ brand/BRAND_NOTE.md.
GranitCorp — חברת האם, לוגו טקסט בלבד
SparkAudit — סימן קיים, ללא שינוי
AgenticAiNation — סימן אח חדש
GranitCorp נשאר בכוונה בלי סימן גרפי משלו — זה השם שמאחורי שני המוצרים, לא מותג שלישי שמתחרה על אותה שפת סימן-בלוק. הסימן של AgenticAiNation משתמש באותם כללי בנייה מדויקים של SparkAudit (שני קווי שבר עם פינות משופעות, אותו עובי קו, אותו סדר ענבר-ואז-כחול), שפוענחו לכדי צללית אחרת — כך ששני הסימנים נקראים כאחים ולא כעותק.
מעטפת אפליקציה
סרגל צד + סרגל עליון + תוכן, לכלים פנימיים. סרגל הצד מתכווץ למגירה מתחת ל-640px — שנו את גודל החלון כדי לראות.
מעקב חשבוניות
הרצה אחרונה לפני שעתיים · 6.5 שעות נחסכו החודש
הערות תנועה
שלוש אנימציות אמיתיות כלולות במערכת הזו: לחיצת כפתור (scale(0.97), 140ms), פתיחת פאנל הניווט ומגירת מעטפת האפליקציה (200–280ms עם עקומת ease-out / drawer מותאמת), ומעבר טבעת פוקוס. שום דבר לא מופיע בהבהרה או בגלילה — תנועה מגיבה רק לפעולה שהמשתמש ביצע בעצמו. prefers-reduced-motion מסיר את חלקי התנועה ומשאיר חזרה שמבוססת על שינוי שקיפות בלבד.