Stepwise — Design Tokens
מערכת העיצוב
הדף הזה מציג את כל הטוקנים בערכת העיצוב. אם משהו נראה שבור — לתקן בקובץ theme.ts (ובמראה שלו ב-globals.css), לא בקומפוננטה.
צבעים — 60 / 30 / 10
60% — Surfaces
bg
bg-subtle
bg-muted
surface
30% — Brand / Green
brand
brand-hover
brand-deep
brand-subtle
10% — Highlight / Yellow
highlight
highlight-hover
highlight-subtle
Ink
fg
fg-muted
fg-subtle
Borders
border
border-strong
Semantic
success
danger
warning
info
טיפוגרפיה
displayמתמטיקה
h1כותרת ראשית
h2כותרת משנית
h3כותרת שלישית
xlטקסט גדול לפתיח
lgטקסט מודגש בגוף
baseטקסט גוף רגיל — זה הגודל הברירת־מחדל לקריאה ארוכה בעברית.
smטקסט קטן ומשני
xsהערות וצדדים
כפתורים
Variants (md)
Sizes
States
IconButton
שדות טופס
כפי שמופיע בתעודת הזהות
כתובת אימייל לא תקינה
משטחים ותגיות
Card — default
משטח ראשי לתוכן. גבול עדין, רדיוס lg, ריווח פנימי lg.
Card — subtle
גרסה רכה יותר על רקע bg-subtle.
Card — raised
עם הצללה — לדגשים או מודלים בתוך עמוד.
Panel — חלופה רזה יותר ל-Card (ריווח md, רדיוס md).
Badges
ניטרליבתהליךחדשהושלםשגיאהאזהרהמידע
ניווט
חוויית מצב
עוד אין כאן שאלות
צרו שאלה ראשונה כדי להתחיל לבנות מסלול לימוד.
פידבק
יA?
רדיוסים
sm
md
lg
xl
pill
הצללה
xs
sm
md
lg
מרווחים
2xs2px
xs4px
sm8px
md16px
lg24px
xl40px
2xl64px
3xl96px