Design system
Design Tokens
CSS Custom Properties שמרכזות החלטות עיצוב גלובליות. שינוי בטוקן אחד מתפשט לכל מי שמשתמש בו.
"Value Example": הערכים בעמודה הם דוגמה, לא live.הם לא נמשכים מקבצי ה-CSS. כדי לראות את הערך האמיתי שמרונדר בפועל, תפתח את הקובץ ב-Source או DevTools. הטבלה הזו היא ארכיון של שמות, לא מצב חי.
במקום inline values בכל קובץ, להפנות לטוקן. הדף הזה מתעד רק את הטוקנים הגלובליים(חוקי משחק של המערכת). טוקנים פנימיים של קומפוננטות (--uk-breadcrumb-*, --uk-toggle-list-* וכו') חיים בקובץ ה-CSS של אותה קומפוננטה.
Layout & Container
| Token | Value Example | Source | Notes |
|---|---|---|---|
--uk-container-max-width | 1200px | app/globals.css | - |
--uk-container-padding-horizontal | 40px | app/globals.css | - |
--uk-container-padding-horizontal-sm | 16px | app/globals.css | - |
--uk-container-padding-horizontal-md | 40px | app/globals.css | - |
--uk-container-padding-horizontal-lg | 80px | app/globals.css | - |
--uk-grid-gutter | 40px | app/globals.css | - |
--uk-grid-gutter-sm | 20px | app/globals.css | - |
--uk-global-border-radius | 16px (12px ≤767px) | app/globals.css | Global corner radius for images and cards. One value across a site keeps the look uniform. Mobile drops to 12px for proportion on smaller elements. Override per-scope by redeclaring inside the scope selector. |
--uk-tracking-label | 0.04em | app/globals.css | Letter-spacing of every label, eyebrow, chip and button. Safe on Hebrew: wider, the letters fall apart. In JSX: tracking-label. npm run rhythm flags Hebrew over 0.06em (TRACK). |
--uk-tracking-caps | 0.14em | app/globals.css | The wide one, for CAPITALS and digits only ("STUDIO · 2024", "01"), never on a class that also carries Hebrew. |
--uk-expand-padding | 32px | styles/uk-components.css | Breathing room used by the .uk-expand-padding modifier, add alongside .uk-expand-to-edge-left/right to pull the bleeding side back from the viewport edge so rounded corners stay visible. Active ≥960px only. |
Breakpoints
נקודת שבירה היא תמיד קידומת, כמו בכל קלאס של Tailwind: uk-grid uk-s:grid-cols-2 uk-l:grid-cols-4, uk-spacer-v-32 max-uk-s:uk-spacer-v-16, uk-clamp-2 md:uk-clamp-3. לא סיומת על מספר: uk-grid-2@m ו-@r. ה-gap, היחסים וה-span עדיין עם @m (uk-grid-large, uk-m:grid-cols-[7fr_5fr]). קובץ CSS של דמו או רכיב כותב @media רגיל, על אותם ערכים: 639/640, 767/768, 959/960, 1023/1024, 1199/1200.
| Token | Value Example | Source | Notes |
|---|---|---|---|
--breakpoint-uk-s | 40rem (640px) | app/globals.css | uk-s:grid-cols-2 · @variant uk-s max-uk-s: = under 640, the phone (max-uk-s:uk-spacer-v-16) |
--breakpoint-md | 48rem (768px) | node_modules/tailwindcss/theme.css | Tailwind's own. md:uk-clamp-3 (the clamp's step) |
--breakpoint-uk-m | 60rem (960px) | app/globals.css | uk-m:grid-cols-2 · @variant uk-m the grid splits here |
--breakpoint-lg | 64rem (1024px) | node_modules/tailwindcss/theme.css | Tailwind's own. lg:grid-cols-3 |
--breakpoint-uk-l | 75rem (1200px) | app/globals.css | uk-l:grid-cols-4 · @variant uk-l |
--breakpoint-uk-xl | 100rem (1600px) | app/globals.css | uk-xl: · @variant uk-xl |
Section Padding
| Token | Value Example | Source | Notes |
|---|---|---|---|
--uk-section-padding-small | 40px | app/globals.css | - |
--uk-section-padding | 100px (default) | app/globals.css | - |
--uk-section-padding-medium | 100px | app/globals.css | - |
--uk-section-padding-large | 140px | app/globals.css | - |
--uk-section-padding-xlarge | 200px | app/globals.css | - |
Typography
| Token | Value Example | Source | Notes |
|---|---|---|---|
--font-sans | var(--font-google-sans), 'Google Sans', system-ui, sans-serif | app/globals.css | Studio: next/font, in @theme inline. A demo sets its own in the block at the top of its CSS: [data-demo] + body.demo-x, never :root (CLAUDE.md §11) |
--font-display | var(--font-sans) | demos/*/_styles/*.css | A demo's headings family, next to --font-sans. A second family = this line |
--font-mono | 'Geist Mono', monospace | app/globals.css | - |
--heading-font-family | inherit (defaults to font-sans) | app/globals.css | - |
--h1-size | 4rem | app/globals.css | - |
--h1-weight | 700 | app/globals.css | - |
--h1-leading | 1.15 | app/globals.css | - |
--h1-tracking | -0.02em | app/globals.css | - |
--h2-size | 3rem | app/globals.css | - |
--h2-weight | 600 | app/globals.css | - |
--h2-leading | 1.25 | app/globals.css | - |
--h2-tracking | -0.02em | app/globals.css | - |
--h3-size | 1.5rem | app/globals.css | - |
--h3-weight | 600 | app/globals.css | - |
--h3-leading | 1.3 | app/globals.css | - |
--h3-tracking | 0em | app/globals.css | - |
--h4-size | 1.25rem | app/globals.css | - |
--h5-size | 1.1rem | app/globals.css | - |
--h6-size | 1rem | app/globals.css | - |
--h4-weight | 600 | app/globals.css | - |
--h5-weight | 600 | app/globals.css | - |
--h6-weight | 600 | app/globals.css | - |
--heading-mobile-factor | 0.65 | app/globals.css | factor: 0.65 desktop: 24 mobile: 15.6 phone caps: h1 38, h2 28, h3 21 |
--lead-size | 1.125rem | app/globals.css | The lead paragraph (.uk-text-lead) from 768px: one size above the body. Size only, no colour |
--lead-size-mobile | 1rem | app/globals.css | .uk-text-lead under 768px |
--lead-line-height | 1.625 | app/globals.css | .uk-text-lead at every width |
Colors (Tailwind)
רוב הטוקנים בטבלה הזו מגיעים מתבנית הבסיס של shadcn/Tailwind, לא נוצרו ידנית בפרויקט. ערכי Light mode מוצגים; Dark mode override מוגדר ב-.dark selector באותו קובץ. דמואים יכולים לדרוס לפלטה משלהם.
| Token | Value Example | Source | Notes |
|---|---|---|---|
--background | oklch(1 0 0) | app/globals.css | - |
--foreground | oklch(0.145 0 0) | app/globals.css | - |
--primary | oklch(0.50 0.18 258) | app/globals.css | - |
--primary-foreground | oklch(1 0 0) | app/globals.css | - |
--secondary | oklch(0.97 0 0) | app/globals.css | - |
--secondary-foreground | oklch(0.205 0 0) | app/globals.css | - |
--muted | oklch(0.97 0 0) | app/globals.css | - |
--muted-foreground | oklch(0.33 0 0) | app/globals.css | - |
--accent | oklch(0.97 0 0) | app/globals.css | - |
--accent-foreground | oklch(0.205 0 0) | app/globals.css | - |
--card | oklch(1 0 0) | app/globals.css | - |
--card-foreground | oklch(0.145 0 0) | app/globals.css | - |
--popover | oklch(1 0 0) | app/globals.css | - |
--popover-foreground | oklch(0.145 0 0) | app/globals.css | - |
--destructive | oklch(0.577 0.245 27.325) | app/globals.css | - |
--destructive-foreground | oklch(1 0 0) | app/globals.css | - |
--border | oklch(0.922 0 0) | app/globals.css | - |
--input | oklch(0.922 0 0) | app/globals.css | - |
--ring | oklch(0.708 0 0) | app/globals.css | - |
Navbar
| Token | Value Example | Source | Notes |
|---|---|---|---|
--uk-navbar-h | 64px (mobile) / 80px (≥md) | components/uikit/uk-navbar/uk-navbar.css | - |
--uk-navbar-is-active-bg | per-demo override | demos/*/styles/*.css | - |
--uk-navbar-is-active-color | per-demo override | demos/*/styles/*.css | - |
Effects
| Token | Value Example | Source | Notes |
|---|---|---|---|
--uk-transition | all 0.5s ease | app/globals.css | - |
--uk-gradient-global-overlay | linear-gradient (dark → transparent) | app/globals.css | - |
--uk-heading-line-width | 60px | app/docs/_styles/heading-plays.css | - |
--uk-heading-line-height | 2px | app/docs/_styles/heading-plays.css | - |
--uk-heading-line-color | var(--primary) | app/docs/_styles/heading-plays.css | - |
דוגמת שימוש
// במקום מספר קסם:
<section style={{ padding: '140px 0' }}>...</section>
// משתמשים בטוקן:
<section style={{ padding: 'var(--uk-section-padding-large) 0' }}>...</section>עדיף עוד יותר, להשתמש במחלקות מוכנות (uk-section uk-section-large) שכבר משתמשות בטוקן הזה מאחורי הקלעים.
