The whole system rests on a small set of decisions, encoded as tokens. Get these right and every component falls into place; change one here and it propagates everywhere. The feeling to protect: warm, earthen, quiet — soil and growth, never tech and chrome. כל המערכת נשענת על מערכת קטנה של החלטות, מקודדות כ-tokens. תכוונו אותן נכון וכל רכיב נופל למקומו; שנו אחת כאן והיא מתפשטת לכל מקום. התחושה לשמר: חמה, אדמתית, שקטה — אדמה וצמיחה, לעולם לא טכנולוגיה וכרום.

The four atmospheric devicesארבעת מנגנוני האווירה

Four quiet techniques give every page its depth and warmth. They are subtle by design — felt, not noticed.ארבע טכניקות שקטות נותנות לכל עמוד את העומק והחום שלו. הן עדינות בכוונה — מורגשות, לא נראות.

Spacing & rhythmריווח וקצב

Generous, consistent breathing room. Page gutters are 7vw; chapters are capped at a readable measure; the rhythm is calm and unhurried, never dense.מרחב נשימה נדיב ועקבי. שולי העמוד הם 7vw; הפרקים מוגבלים למידה קריאה; הקצב רגוע ולא נחפז, לעולם לא צפוף.

Note the signature detail: grids are separated by a 2px seam, not a wide gutter. Cards sit shoulder to shoulder on the dark ground, divided by a thin line of background showing through. It reads as solid and considered, never floating.שימו לב לפרט החתימה: גרידים מופרדים ב-תפר 2px, לא במרזב רחב. כרטיסים יושבים כתף-אל-כתף על הרקע הכהה, מחולקים בקו דק של רקע שמציץ. זה נקרא מוצק ושקול, לעולם לא מרחף.

Eight warm neutrals do almost all the work; four grown accents do the rest. The palette is named for soil and plant, not for hex — Void, Soil, Earth, Bark, up through Parchment; Basil, Moss, Terra, Mineral. The discipline is restraint: Basil green earns attention precisely because it is rare. שמונה ניטרליים חמים עושים כמעט את כל העבודה; ארבעה גוונים מהצומח עושים את השאר. הפלטה נקראת על שם אדמה וצמח, לא על שם hex — Void, Soil, Earth, Bark, עד Parchment; Basil, Moss, Terra, Mineral. המשמעת היא ריסון: ירוק Basil מרוויח תשומת לב בדיוק כי הוא נדיר.

The neutrals — Void to Parchmentהניטרליים — מ-Void ל-Parchment

The accents — grown, not syntheticהגוונים — מהצומח, לא סינתטיים

Roles & usageתפקידים ושימוש

Two typefaces, two voices. A warm humanist serif that reveres, and a clean sans that informs — mirrored in Hebrew. The serif carries feeling and headlines; the sans carries fact and body. They never trade jobs. שני גופנים, שני קולות. serif הומניסטי חם שמעריץ, ו-sans נקי שמיידע — משוקפים בעברית. ה-serif נושא תחושה וכותרות; ה-sans נושא עובדה וגוף. הם לעולם לא מחליפים תפקידים.

The scaleהסקאלה

The wordmark is the word, set with intent. No icon, no symbol — the name carries the brand. Calm, confident, unhurried. ה-wordmark הוא המילה, מסודרת בכוונה. אין אייקון, אין סמל — השם נושא את הברנד. רגוע, בטוח, ללא חיפזון.

Every recurring element in the book, shown live. These are the building blocks — each one used across multiple parts, each carrying the same warm-earthen discipline. Copy the pattern, keep the feeling. כל אלמנט חוזר בספר, מוצג חי. אלה אבני הבניין — כל אחת בשימוש על פני חלקים מרובים, כל אחת נושאת את אותה משמעת חמה-אדמתית. העתיקו את הדפוס, שמרו על התחושה.

Buttons & calls to actionכפתורים וקריאות לפעולה

Callouts — three weightsCallouts — שלושה משקלים

Doctrine box — numbered principlesתיבת דוקטרינה — עקרונות ממוספרים

Bridge — chapter continuityגשר — המשכיות פרקים

Stat blocks & napkin mathבלוקי נתונים וחשבון מפית

The page architecture is the same in every document: a fixed table-of-contents rail, a cover, a sequence of chapters, and a continuity footer. The most distinctive pattern is the one you're using right now — full, simultaneous bilingual EN/HE with a single toggle. ארכיטקטורת העמוד זהה בכל מסמך: סרגל תוכן קבוע, cover, רצף פרקים, ופוטר המשכיות. הדפוס המובהק ביותר הוא זה שאתם משתמשים בו עכשיו — דו-לשוניות מלאה וסימולטנית EN/HE עם toggle יחיד.

Page architectureארכיטקטורת העמוד

The bilingual systemהמערכת הדו-לשונית

Every translatable string ships as two adjacent spans — .en-inline and .he-inline — and CSS shows exactly one based on the html class. The toggle swaps the class, sets dir, switches the font stack, and persists the choice. No translation files, no reload — both languages live in the same DOM.כל מחרוזת ניתנת-לתרגום נשלחת כשני spans סמוכים — .en-inline ו-.he-inline — ו-CSS מציג בדיוק אחד לפי מחלקת ה-html. ה-toggle מחליף את המחלקה, קובע dir, מחליף את ערימת הגופנים, ושומר את הבחירה. ללא קבצי תרגום, ללא רענון — שתי השפות חיות באותו DOM.

Scroll-spy navigationניווט scroll-spy

An IntersectionObserver watches every .chapter[id] and highlights the matching TOC link as it enters view. Zero dependencies, a dozen lines of vanilla JS, in every document.IntersectionObserver צופה בכל .chapter[id] ומדגיש את קישור ה-TOC התואם כשהוא נכנס לתצוגה. אפס תלויות, תריסר שורות JS וניל, בכל מסמך.

The chapters before this one defined the materials — palette, type, components. This chapter defines how they are lit and arranged. It is the difference between a flat, evenly-lit interface that looks machine-generated, and a warm, cinematic one that feels authored. Five principles, learned by building, then tightened into rules. הפרקים שלפני זה הגדירו את החומרים — פלטה, טיפוגרפיה, רכיבים. הפרק הזה מגדיר איך הם מוארים ומסודרים. זה ההבדל בין ממשק שטוח ומואר-אחיד שנראה מכונתי, לבין ממשק חם וסינמטי שמרגיש מחבר-יד-אדם. חמישה עקרונות, שנלמדו דרך בנייה ואז הודקו לכללים.

1 · Glow hierarchy — intensity is importance1 · היררכיית זוהר — עוצמה היא חשיבות

The core idea. Not every element is lit equally. Visual intensity signals importance, on three levels — and crucially, all three are the same component at different exposure, not different designs. One hero per screen, at most.הרעיון המרכזי. לא כל אלמנט מואר באותה מידה. עוצמה ויזואלית מסמנת חשיבות, בשלוש דרגות — וחשוב: כל השלוש הן אותו רכיב בחשיפה שונה, לא עיצובים שונים. גיבור אחד למסך, לכל היותר.

2 · Temperature — amber for atmosphere, basil for signature2 · טמפרטורה — ענבר לאווירה, basil לחתימה

The dark is not neutral black — it is warm: amber-brown, like candlelight or a low sun. The warmth carries the mood; the single basil green is reserved for the signature moments (actions, the live point). Two temperatures share one identity: dark for product and hero moments, light for the accessible, daytime surfaces (the "Light Team", e.g. Home).הכהה אינו שחור ניטרלי — הוא חם: ענבר-חום, כמו אור נר או שמש נמוכה. החום נושא את מצב הרוח; הירוק basil היחיד שמור לרגעי החתימה (פעולות, הנקודה החיה). שתי טמפרטורות חולקות זהות אחת: כהה לרגעי מוצר וגיבור, בהיר למשטחים הנגישים של היום (ה"Light Team", למשל Home).

3 · Surfaces without borders3 · משטחים בלי בורדרים

A repeated, visible border is the tell of machine-generated UI. We separate instead the way Apple and the calmest interfaces do: by whitespace, a faint tonal step between surfaces, and soft light — never by a line on everything. Corners are rounded a little more generously (radius 14px) for an accessible softness that balances the conservative serif. The thin "seam" line survives only as a deliberate accent, never as the default wrapper.בורדר חוזר ונראה הוא הסימן ל-UI מכונתי. במקום זה אנחנו מפרידים כמו Apple והממשקים הרגועים ביותר: דרך white space, מדרגת טון עדינה בין משטחים, ואור רך — לעולם לא דרך קו על הכל. הפינות מעוגלות מעט יותר בנדיבות (רדיוס 14px) לרכות נגישה שמאזנת את ה-serif השמרני. קו ה"תפר" הדק שורד רק כאקסנט מכוון, לעולם לא כמעטפת ברירת מחדל.

4 · Contrast — three kinds, never a line4 · קונטרסט — שלושה סוגים, לעולם לא קו

When a one-temperature screen goes muddy, the fix is contrast — but contrast of tone, value, or temperature, never an added border. Tonal: widen the surface step. Value pop: one bright surface on the dark (this is also the bridge to the Light Team). Warm–cool: a cool mineral surface against the warm.כשמסך בטמפרטורה אחת נעשה בוצי, התיקון הוא קונטרסט — אבל קונטרסט של טון, ערך, או טמפרטורה, לעולם לא בורדר נוסף. טונאלי: להרחיב את מדרגת המשטח. Value pop: משטח בהיר אחד על הכהה (זה גם הגשר ל-Light Team). חם–קר: משטח מינרלי קריר מול החם.

5 · Spotlight & annotation — the governing rule5 · ספוטלייט ואנוטציה — כלל-העל

Drawn from the brand's founding image — a single warm beam falling on one plant in the dark. A diagonal spotlight and a small lit annotation pill mark the one element that matters. The rule is absolute: the spotlight falls only on the single most important element on the screen — never on more than one. The moment two things are spotlit, neither is.נשאב מתמונת היסוד של הברנד — קרן חמה יחידה שנופלת על צמח אחד בחושך. ספוטלייט אלכסוני ותווית-אנוטציה קטנה ומוארת מסמנים את האלמנט האחד שחשוב. הכלל מוחלט: הספוטלייט נופל רק על האלמנט המרכזי ביותר במסך — לעולם לא על יותר מאחד. ברגע ששני דברים מוארים, אף אחד לא.

6 · Buttons — filled, ghost, text6 · כפתורים — מלא, רפאים, טקסט

A small but firm rule that came up repeatedly: the primary action is always filled basil. The secondary is a ghost — bordered, never text-only. Text-only is reserved for the lightest tertiary links. A ghosted primary, or a glowing button, reads as technical — avoid both.כלל קטן אך נחרץ שעלה שוב ושוב: הפעולה הראשית תמיד מלאה ב-basil. המשנית היא רפאים — עם מסגרת, לעולם לא רק-טקסט. רק-טקסט שמור לקישורים שלישוניים הקלים ביותר. כפתור ראשי מרוקן, או כפתור זוהר, נקרא כטכני — להימנע משניהם.

New tokenstokens חדשים

The entire knowledge center is static: self-contained HTML files, fonts embedded or from Google, no build step, no framework, no dependencies. That is a deliberate choice — it loads instantly, hosts anywhere, and will still open in a decade. כל מרכז הידע סטטי: קבצי HTML עצמאיים, גופנים מוטמעים או מ-Google, ללא שלב build, ללא framework, ללא תלויות. זו בחירה מכוונת — הוא נטען מיידית, מתארח בכל מקום, ועדיין ייפתח בעוד עשור.

The token block — copy this to startבלוק ה-tokens — העתיקו זאת כדי להתחיל

Hosting on Vercelאחסון ב-Vercel

Because the site is pure static files, deployment is just "serve this folder." Drop all the HTML files in one directory with index.html at the root, connect the folder to Vercel, and it's live — no framework preset, no build command, no environment variables. The relative links between parts work as-is. Updates are a re-deploy of the same folder.כי האתר הוא קבצים סטטיים טהורים, פריסה היא פשוט "הגש את התיקייה הזו." הניחו את כל קבצי ה-HTML בתיקייה אחת עם index.html בשורש, חברו את התיקייה ל-Vercel, והוא חי — ללא preset framework, ללא פקודת build, ללא משתני סביבה. הקישורים היחסיים בין החלקים עובדים כמו שהם. עדכונים הם re-deploy של אותה תיקייה.