מערכת העיצוב
מקור אמת יחיד לכל ערך עיצובי ב-SPETZ. כל צבע, גודל וקומפוננטה בעמוד הזה נקראים ישירות מתוך tokens.ts — אין ערכים שהוקלדו ידנית. Tailwind נטען מאותו מודול, ולכן utility ו-token לא יכולים להיפרד.
יסודות
המותג נלקח מ-spetz.org — לוגו וצבעים בלבד. הטיפוגרפיה היא Assistant, משפחה עברית שנטענת self-hosted דרך next/font.
לוגו
public/brand/spetz-logo.png · 615×213
משפחת גופנים
Assistant · עברית + לטינית
אבגדהוזחטי
Aa Bb Cc 0123
fallback: Assistant · Segoe UI · Arial Hebrew
כיוון
עברית תחילה
RTL
תחילת שורה: right · סוף שורה: left
צבע
הצבעים סמנטיים: פיצ׳ר מבקש surface.subtle או text.muted, אף פעם לא hex. שים לב לפיצול הגבולות — decorative לקווים דקורטיביים בלבד, interactive לכל פקד שהמשתמש מפעיל.
משטחים ופעולה
surface.base
#FFFFFFsurface.subtle
#F4F4F4surface.raised
#FFFFFFsurface.inverted
#0056A7action.primary
#1863DCaction.primaryHover
#0056A7text.default
#212121text.muted
#4E4B66גבולות
border.decorative
#D0D5D2 · 1.49:1 על לבן
קווים דקורטיביים בלבד. נכשל WCAG 1.4.11 ולכן אסור לשמש כגבול של פקד.
border.interactive
#8A8798 · 3.50:1 על לבן · 3.18:1 על subtle
גבול של כל פקד: input, select, checkbox. עובר את סף 3:1.
מצבים
state.success
state.warning
state.danger
state.info
חוזה ניגודיות
כל צמד צבעים שהמערכת מתירה, עם היחס הנמדד בזמן ריצה. אותה רשימה בדיוק נבדקת ב-contrast.test.ts, כך ששינוי token לא יכול לשבור WCAG AA בשקט.
| צמד | קריטריון | נדרש | נמדד | תוצאה |
|---|---|---|---|---|
| text.default on surface.baseDefault body copy on the page canvas | 1.4.3 | 4.5:1 | 16.10:1 | עובר |
| text.default on surface.subtleBody copy inside tinted panels | 1.4.3 | 4.5:1 | 14.64:1 | עובר |
| text.muted on surface.baseHelper text, captions, input descriptions | 1.4.3 | 4.5:1 | 8.33:1 | עובר |
| text.muted on surface.subtleHelper text inside tinted panels | 1.4.3 | 4.5:1 | 7.57:1 | עובר |
| text.link on surface.baseInline links, tertiary buttons | 1.4.3 | 4.5:1 | 5.44:1 | עובר |
| text.link on surface.subtleInline links inside tinted panels | 1.4.3 | 4.5:1 | 4.95:1 | עובר |
| text.linkHover on surface.baseLink hover / active state | 1.4.3 | 4.5:1 | 7.27:1 | עובר |
| text.onPrimary on action.primaryLabel of the primary button | 1.4.3 | 4.5:1 | 5.44:1 | עובר |
| text.onPrimary on action.primaryHoverLabel of the primary button while hovered/active | 1.4.3 | 4.5:1 | 7.27:1 | עובר |
| text.onInverted on surface.invertedCopy on inverted bands (hero, footer) | 1.4.3 | 4.5:1 | 7.27:1 | עובר |
| border.interactive on surface.baseInput/select/checkbox border on the page canvas | 1.4.11 | 3.0:1 | 3.50:1 | עובר |
| border.interactive on surface.subtleInput/select/checkbox border inside tinted panels | 1.4.11 | 3.0:1 | 3.18:1 | עובר |
| border.strong on surface.baseEmphasised control border (hover/filled) | 1.4.11 | 3.0:1 | 8.33:1 | עובר |
| border.focus on surface.baseFocus ring on the page canvas | 1.4.11 | 3.0:1 | 5.44:1 | עובר |
| border.focus on surface.subtleFocus ring inside tinted panels | 1.4.11 | 3.0:1 | 4.95:1 | עובר |
| state.success.fg on surface.baseSuccess message text | 1.4.3 | 4.5:1 | 5.43:1 | עובר |
| state.success.fg on state.success.softSuccess banner (tinted background) | 1.4.3 | 4.5:1 | 4.84:1 | עובר |
| state.warning.fg on surface.baseWarning message text | 1.4.3 | 4.5:1 | 5.93:1 | עובר |
| state.warning.fg on state.warning.softWarning banner (tinted background) | 1.4.3 | 4.5:1 | 5.39:1 | עובר |
| state.danger.fg on surface.baseField error text, destructive labels | 1.4.3 | 4.5:1 | 6.57:1 | עובר |
| state.danger.fg on state.danger.softError banner (tinted background) | 1.4.3 | 4.5:1 | 5.75:1 | עובר |
| state.danger.border on surface.baseInvalid input border | 1.4.11 | 3.0:1 | 6.57:1 | עובר |
| state.info.fg on surface.baseInformational message text | 1.4.3 | 4.5:1 | 6.48:1 | עובר |
| state.info.fg on state.info.softInfo banner (tinted background) | 1.4.3 | 4.5:1 | 5.64:1 | עובר |
| text.onPrimary on state.danger.fgLabel of a solid destructive button | 1.4.3 | 4.5:1 | 6.57:1 | עובר |
| text.onPrimary on state.danger.strongLabel of a solid destructive button while hovered/active | 1.4.3 | 4.5:1 | 9.21:1 | עובר |
| text.onPrimary on state.success.strongLabel on a solid success fill (hover/active) | 1.4.3 | 4.5:1 | 8.13:1 | עובר |
| text.onPrimary on state.warning.strongLabel on a solid warning fill (hover/active) | 1.4.3 | 4.5:1 | 8.40:1 | עובר |
| text.onPrimary on state.info.strongLabel on a solid info fill (hover/active) | 1.4.3 | 4.5:1 | 9.20:1 | עובר |
| state.success.border on surface.baseSuccess banner / valid control edge | 1.4.11 | 3.0:1 | 5.43:1 | עובר |
| state.warning.border on surface.baseWarning banner edge | 1.4.11 | 3.0:1 | 5.93:1 | עובר |
| state.info.border on surface.baseInfo banner edge | 1.4.11 | 3.0:1 | 6.48:1 | עובר |
חריגים מתועדים
border.decorative on surface.base — 1.49:1
Ornamental hairline only. Never draws the boundary of an operable control — use border.interactive for that.
טיפוגרפיה
סולם אחד לכל המערכת. גובה השורה בברירת מחדל הוא 1.6 — עברית צריכה יותר אוויר מלטינית.
מרווח, רדיוס וצל
בסיס 4px. הרדיוסים והצללים מדורגים כדי שהיררכיית העומק תישאר עקבית בין מסכים.
מרווח
- 1 · 0.25rem
- 2 · 0.5rem
- 3 · 0.75rem
- 4 · 1rem
- 6 · 1.5rem
- 8 · 2rem
- 12 · 3rem
רדיוס
- sm · 0.25rem
- md · 0.5rem
- lg · 0.75rem
- xl · 1rem
- 2xl · 1.25rem
- full · 9999px
צל
- shadow-sm
- shadow-md
- shadow-lg
focus: 0 0 0 3px rgba(24, 99, 220, 0.35)
קומפוננטות
הסט המינימלי שדרוש כדי לבנות מסך: Button, Input, Card. לכל אחת variants ומצבי disabled / focus / error מוגדרים מראש.
Button
כל הגדלים עומדים ביעד המגע של 44px (WCAG 2.5.5 / ת"י 5568). sm מצמצם ריפוד וגודל טקסט בלבד — לא גובה.
Input
Card
default
קו דק + הרמה קלה
flat
ללא צל, לשימוש בתוך מיכל מורם
subtle
הפרדה ע״י גוון בלבד
as="a"
כרטיס-יעד — עובר לפרק הנגישות
כרטיס לחיץ חייב להיות button או a אמיתי. <div role="button" tabIndex={0}> נשמע כמו כפתור לקורא מסך אבל לא מגיב ל-Enter/Space (הפרת WCAG 4.1.2 ו-2.1.1), ובנוסף מוחק את הכותרת שבתוכו מעץ הנגישות. לכן as גם משדרג אוטומטית ל-variant interactive.
כיווניות
האפליקציה עברית תחילה, אבל הכיוון הוא ערך שקוראים — לא הנחה שמקובעת בתגיות. ה-hook מתרגם מושגים לוגיים (התחלה/סוף, הבא/הקודם) לפיזיים.
מצב נוכחי
- direction
- rtl
- start / end
- right / left
- flip(24)
- -24
- arrowStep("ArrowLeft")
- 1
- arrowStep("ArrowRight")
- -1
תכונות לוגיות
משתמשים ב-ms/me ולא ב-ml/mr, ב-text-start ולא ב-text-left
הפס הצבעוני יושב בתחילת השורה — מימין ב-RTL, משמאל ב-LTR — בלי שורת JavaScript אחת.
The same markup inside a dir="ltr" subtree flips automatically.
נגישות
הפרימיטיבים שכל מסך יורש: דילוג לתוכן, טבעת פוקוס אחידה, טקסט לקוראי מסך, וכיבוד העדפת תנועה מופחתת.
דילוג לתוכן
WCAG 2.4.1
לחץ Tab מתחילת העמוד — הקישור נחשף בפינה העליונה וקופץ אל #main-content.
טבעת פוקוס
WCAG 2.4.7 · 1.4.11
2px בצבע border.focus עם 2px offset, דרך:focus-visible בלבד — 5.44:1 מול לבן.
טקסט לקוראי מסך
.sr-only
השורה הבאה מוסתרת חזותית אך נקראת:זהו טקסט שמיועד לקוראי מסך בלבד ואינו מוצג על המסך.
תנועה מופחתת
prefers-reduced-motion
כשההעדפה פעילה במערכת ההפעלה, כל האנימציות והמעברים מנוטרלים גלובלית ב-globals.css.