מערכת העיצוב
מקור אמת יחיד לכל ערך עיצובי בכלכלן. כל צבע, גודל וקומפוננטה בעמוד הזה נקראים ישירות מתוך tokens.ts. Tailwind נטען מאותו מודול, ולכן utility ו-token אינם יכולים להיפרד.
יסודות
הפלטה היא פלטת SPETZ (הכרעת פרדריק, 19.9.2026, כ41); הסימן: האות כ׳ בכחול טריום עם זכוכית מגדלת ירוקה (הכרעת פרדריק, 20.9.2026). הטיפוגרפיה היא Heebo, ו-Assistant כגופן משני למסמכים; שתי משפחות עבריות שנטענות self-hosted דרך next/font.
לוגו
הסימן (BrandMark) במקום האות הראשונה, ואחריו «לכלן». בהמתנה הזכוכית קוראת את הספרים.
משפחת גופנים
Heebo · עברית + לטינית · משני: Assistant
אבגדהוזחטי
Aa Bb Cc 0123
fallback: Heebo · var(--font-assistant) · Assistant
כיוון
עברית תחילה
RTL
תחילת שורה: right · סוף שורה: left
צבע
הצבעים סמנטיים: פיצ׳ר מבקש surface.subtle או text.muted, אף פעם לא hex. שים לב לפיצול הגבולות — decorative לקווים דקורטיביים בלבד, interactive לכל פקד שהמשתמש מפעיל.
משטחים ופעולה
surface.base
#FFFFFFsurface.subtle
#F4F4F4surface.raised
#FFFFFFsurface.inverted
#0056A7action.primary
#1863DCaction.primaryHover
#0056A7action.soft
#E6EFFBtext.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
צבעי המותג
ארבעת הגוונים של הסמל. הם זהות, לא מצב — עמודה ירוקה אומרת «הקטגוריה הזו», ולעולם לא «זה תקין». לכל גוון שתי צורות: fill לסימון גרפי (נמדד ב-3:1) ו-text למילים (4.5:1). הם אינם אותו ערך.
accent.blue
#0C78C0 · #0C74BA
accent.sky
#2096CB · #1A77A2
accent.green
#0C9048 · #0B8040
accent.lime
#6C992D · #567A24
חוזה ניגודיות
כל צמד צבעים שהמערכת מתירה, עם היחס הנמדד בזמן ריצה. אותה רשימה בדיוק נבדקת ב-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.default on surface.raisedBody copy inside a card | 1.4.3 | 4.5:1 | 16.10:1 | עובר |
| text.muted on surface.raisedHelper text inside a card | 1.4.3 | 4.5:1 | 8.33:1 | עובר |
| text.link on surface.raisedLinks inside a card (the door cards on the home page) | 1.4.3 | 4.5:1 | 5.44: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.link on action.softActive tab-bar item, "due" chip, selected row (kit 19.9.2026) | 1.4.3 | 4.5:1 | 4.69:1 | עובר |
| text.default on action.softBody copy on a primary-tinted row | 1.4.3 | 4.5:1 | 13.88: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.interactive on surface.raisedInput/select/checkbox border inside a card (where the forms live) | 1.4.11 | 3.0:1 | 3.50: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.success.border on surface.basesuccess banner / control edge | 1.4.11 | 3.0:1 | 5.43:1 | עובר |
| text.onPrimary on state.success.fgLabel of a solid success button | 1.4.3 | 4.5:1 | 5.43:1 | עובר |
| text.onPrimary on state.success.strongLabel of a solid success button while hovered/active | 1.4.3 | 4.5:1 | 8.13: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.warning.border on surface.basewarning banner / control edge | 1.4.11 | 3.0:1 | 5.93:1 | עובר |
| text.onPrimary on state.warning.fgLabel of a solid warning button | 1.4.3 | 4.5:1 | 5.93:1 | עובר |
| text.onPrimary on state.warning.strongLabel of a solid warning button while hovered/active | 1.4.3 | 4.5:1 | 8.40:1 | עובר |
| state.danger.fg on surface.basedanger message text | 1.4.3 | 4.5:1 | 6.57:1 | עובר |
| state.danger.fg on state.danger.softdanger banner (tinted background) | 1.4.3 | 4.5:1 | 5.75:1 | עובר |
| state.danger.border on surface.basedanger banner / control edge | 1.4.11 | 3.0:1 | 6.57:1 | עובר |
| text.onPrimary on state.danger.fgLabel of a solid danger button | 1.4.3 | 4.5:1 | 6.57:1 | עובר |
| text.onPrimary on state.danger.strongLabel of a solid danger button while hovered/active | 1.4.3 | 4.5:1 | 9.21:1 | עובר |
| state.info.fg on surface.baseinfo 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 | עובר |
| state.info.border on surface.baseinfo banner / control edge | 1.4.11 | 3.0:1 | 6.48:1 | עובר |
| text.onPrimary on state.info.fgLabel of a solid info button | 1.4.3 | 4.5:1 | 6.48:1 | עובר |
| text.onPrimary on state.info.strongLabel of a solid info button while hovered/active | 1.4.3 | 4.5:1 | 9.20:1 | עובר |
| accent.blue.fill on surface.baseblue as a chart bar / category swatch on the canvas | 1.4.11 | 3.0:1 | 4.70:1 | עובר |
| accent.blue.fill on surface.subtleblue as a mark inside a panel | 1.4.11 | 3.0:1 | 4.28:1 | עובר |
| accent.blue.text on surface.baseblue as words on the canvas | 1.4.3 | 4.5:1 | 4.97:1 | עובר |
| accent.blue.text on surface.subtleblue as words inside a panel | 1.4.3 | 4.5:1 | 4.52:1 | עובר |
| accent.sky.fill on surface.basesky as a chart bar / category swatch on the canvas | 1.4.11 | 3.0:1 | 3.34:1 | עובר |
| accent.sky.fill on surface.subtlesky as a mark inside a panel | 1.4.11 | 3.0:1 | 3.04:1 | עובר |
| accent.sky.text on surface.basesky as words on the canvas | 1.4.3 | 4.5:1 | 4.99:1 | עובר |
| accent.sky.text on surface.subtlesky as words inside a panel | 1.4.3 | 4.5:1 | 4.54:1 | עובר |
| accent.green.fill on surface.basegreen as a chart bar / category swatch on the canvas | 1.4.11 | 3.0:1 | 4.12:1 | עובר |
| accent.green.fill on surface.subtlegreen as a mark inside a panel | 1.4.11 | 3.0:1 | 3.74:1 | עובר |
| accent.green.text on surface.basegreen as words on the canvas | 1.4.3 | 4.5:1 | 5.03:1 | עובר |
| accent.green.text on surface.subtlegreen as words inside a panel | 1.4.3 | 4.5:1 | 4.57:1 | עובר |
| accent.lime.fill on surface.baselime as a chart bar / category swatch on the canvas | 1.4.11 | 3.0:1 | 3.37:1 | עובר |
| accent.lime.fill on surface.subtlelime as a mark inside a panel | 1.4.11 | 3.0:1 | 3.06:1 | עובר |
| accent.lime.text on surface.baselime as words on the canvas | 1.4.3 | 4.5:1 | 4.99:1 | עובר |
| accent.lime.text on surface.subtlelime as words inside a panel | 1.4.3 | 4.5:1 | 4.54:1 | עובר |
חריגים מתועדים
border.decorative on surface.base (light) — 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-card
- 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.
StageTrack
- שלב שהושלם, הושלם
- שלב שמתבצע, מתבצע כעת
- שלב שדולג, דולג
- שלב שנכשל, שגיאה
- שלב שממתין, ממתין
מסלול השלבים של כל ריצה מרובת-שלבים. הפס מתמלא מתחת לשלב שהושלם, סימן המותג מסתובב בשלב המתבצע, והווי מצטייר. המצב נאמר תמיד במילה אחרי השם, לא בצבע ולא בתנועה, ותחת prefers-reduced-motion הכול קופץ למצב הסופי.
שפת התיק
חמישה פרימיטיבים מתיק העיצוב (19.9.2026): צ'יפ למצב, מספר מסכם לפני הפירוט, קיבוץ לפי מצב, ראש כרטיס ישות ומצב ריק. כאן הם מורכבים כמו במסך עבודה.
Stat פריט אחד = אריח, שניים ומעלה = שורה (הכרעת פרדריק, D11).
- מקורות מחכים לעדכון ידני
- 3
- הושלמו
- 23
- פתוחות
- 4
- באיחור
- 1
Chip שישה טונים, כולם מילוי פסטל עם טקסט של אותו גוון; אף פעם לא לבן על צבע.
EntityHeader ראשי תיבות, שם, שורת מטא, והפעולה יורדת לשורה משלה ב-320.
כהן אחזקות בע"מ
חברה בע"מ · לקוח פעיל
ListGroup נקודה, כותרת ומונה; בנייד הקבוצות נערמות, בדסקטופ הן עמודות.
לביצוע, 2
דוח מע"מ יוני
כהן אחזקות בע"מ
מקדמות מס הכנסה
ר.נ ייעוץ
בתהליך, 1
דוח שנתי 2025
י.מ. הנדסה בע"מ · רות
הושלם, 0
אין משימות שהושלמו השבוע
פותח את הספרים…
כיווניות
האפליקציה עברית תחילה, אבל הכיוון הוא ערך שקוראים — לא הנחה שמקובעת בתגיות. ה-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.