נגיש · אמין · מודרני · מארח
חוויית מטופל ישראלית: כחול עמוק, מגנטה מודגש, פינות עגולות
npx skills-il add-design briut -a claude-codeסוכן הקוד שלכם קורא את הקובץ CLAUDE.md. הדביקו לסוכן את הפרומפט הבא, והוא יוסיף בעצמו הפניה ל-DESIGN.md בקובץ:
Add the following rule to CLAUDE.md: When working on UI, treat DESIGN.md at the project root as the source of truth for colors, typography, spacing, and component patterns. If the file doesn't exist, create it.
לא משתמשים ב-CLI? הורידו את DESIGN.md ותוסיפו אותו לתיקייה הראשית של הפרויקט.
הורדת DESIGN.mdחוויית מטופל ישראלית: כחול עמוק, מגנטה מודגש, פינות עגולות
error
#DC2626
outline
#DAE2EC
primary
#0D47A1
surface
#FFFFFF
tertiary
#BF188D
secondary
#1E2F41
on-primary
#FFFFFF
on-surface
#1E2F41
on-tertiary
#FFFFFF
on-secondary
#FFFFFF
surface-container
#F4F9FF
display
שועל חום קפץ מעלdisplay
headline-lg
כותרת ראשית בולטתheadline-lg
headline-md
כותרת משנה תומכתheadline-md
body-lg
גוף גדול · קריא לטקסט ארוך, בטוח בהיררכיה.body-lg
body-md
גוף רגיל · נושא את רוב התוכן של הממשק.body-md
caps
קטגוריה · תגיתcaps
פרופיל ציבורי
דורש אימות דו־שלבי
אישור הזמנות אוטומטי
תכונה
טוקנים מוסברים בפרוזה. כל החלטה עיצובית מגיעה עם ההנמקה שלה, באותו קובץ.
מדד
▲ +12.4% מהשבוע שעבר
פרופיל
איריס נקמורה
מובילת עיצוב · סטודיו סייקאי
קובץ ה־DESIGN.md מוכן לפרסום. סקירת שינויים ←
פורסם לספרייה כגרסה v0.alpha.
עודכן לפני 2 דקות
| חבר | עיצוב | שימוש | סטטוס | |
|---|---|---|---|---|
לורן כ. לפני 2ש | מורשת | 78% | פורסם | … |
חארס ו. לפני 2ש | משרד ברוטלי | 52% | בסקירה | … |
נאדיה א. לפני 2ש | טרקוטה | 24% | טיוטה | … |
ריו ק. לפני 2ש | גלסליין | 91% | פורסם | … |
חביאר מ. לפני 2ש | ניאון ארקייד | 45% | בסקירה | … |
אחסון
68% · 34.2 GB of 50
אונבורדינג
שלב 3 מתוך 5
ניגוד
72%
כמות
סטארטר
לחודש
פרו
הנבחרתלחודש
צוות
לחודש
© 2026 בריאות
A DESIGN.md example
חוויית מטופל ישראלית: כחול עמוק, מגנטה מודגש, פינות עגולות
error
#DC2626
outline
#DAE2EC
primary
#0D47A1
surface
#FFFFFF
tertiary
#BF188D
secondary
#1E2F41
on-primary
#FFFFFF
on-surface
#1E2F41
on-tertiary
#FFFFFF
on-secondary
#FFFFFF
surface-container
#F4F9FF
display
שועל חום קפץ מעלdisplay
headline-lg
כותרת ראשית בולטתheadline-lg
headline-md
כותרת משנה תומכתheadline-md
body-lg
גוף גדול · קריא לטקסט ארוך, בטוח בהיררכיה.body-lg
body-md
גוף רגיל · נושא את רוב התוכן של הממשק.body-md
caps
קטגוריה · תגיתcaps
פרופיל ציבורי
דורש אימות דו־שלבי
אישור הזמנות אוטומטי
תכונה
טוקנים מוסברים בפרוזה. כל החלטה עיצובית מגיעה עם ההנמקה שלה, באותו קובץ.
מדד
▲ +12.4% מהשבוע שעבר
פרופיל
איריס נקמורה
מובילת עיצוב · סטודיו סייקאי
קובץ ה־DESIGN.md מוכן לפרסום. סקירת שינויים ←
פורסם לספרייה כגרסה v0.alpha.
עודכן לפני 2 דקות
| חבר | עיצוב | שימוש | סטטוס | |
|---|---|---|---|---|
לורן כ. לפני 2ש | מורשת | 78% | פורסם | … |
חארס ו. לפני 2ש | משרד ברוטלי | 52% | בסקירה | … |
נאדיה א. לפני 2ש | טרקוטה | 24% | טיוטה | … |
ריו ק. לפני 2ש | גלסליין | 91% | פורסם | … |
חביאר מ. לפני 2ש | ניאון ארקייד | 45% | בסקירה | … |
אחסון
68% · 34.2 GB of 50
אונבורדינג
שלב 3 מתוך 5
ניגוד
72%
כמות
סטארטר
לחודש
פרו
הנבחרתלחודש
צוות
לחודש
© 2026 בריאות
A DESIGN.md example
--- name: Briut version: 1.0.0 description: "A Maccabi-flavored patient portal. Deep blue, magenta accent, generously rounded shapes. Built for Israeli health-services portals: kupat-cholim member areas, doctor-finder flows, prescription queues." colors: primary: "#0D47A1" surface: "#FFFFFF" tertiary: "#BF188D" secondary: "#1E2F41" on-primary: "#FFFFFF" on-surface: "#1E2F41" on-tertiary: "#FFFFFF" on-secondary: "#FFFFFF" surface-container: "#F4F9FF" outline: "#DAE2EC" error: "#DC2626" colors-dark: primary: "#5B8DEF" surface: "#0E1A2E" tertiary: "#FF5BC7" secondary: "#A8B7CD" on-primary: "#0E1A2E" on-surface: "#E8EDF5" on-tertiary: "#0E1A2E" on-secondary: "#0E1A2E" surface-container: "#14253D" outline: "#2A3A52" error: "#FCA5A5" typography: body-lg: fontSize: 18px fontFamily: Heebo, Inter, sans-serif fontWeight: 400 lineHeight: 1.6 body-md: fontSize: 16px fontFamily: Heebo, Inter, sans-serif fontWeight: 400 lineHeight: 1.6 body-sm: fontSize: 14px fontFamily: Heebo, Inter, sans-serif fontWeight: 400 lineHeight: 1.55 label-md: fontSize: 14px fontFamily: Heebo, Inter, sans-serif fontWeight: 500 lineHeight: 1.4 label-sm: fontSize: 12px fontFamily: Heebo, Inter, sans-serif fontWeight: 500 lineHeight: 1.35 title-md: fontSize: 17px fontFamily: Heebo, Inter, sans-serif fontWeight: 500 lineHeight: 1.35 title-lg: fontSize: 20px fontFamily: Heebo, Inter, sans-serif fontWeight: 700 lineHeight: 1.3 headline-md: fontSize: 28px fontFamily: Heebo, Inter, sans-serif fontWeight: 700 lineHeight: 1.2 headline-lg: fontSize: 40px fontFamily: Heebo, Inter, sans-serif fontWeight: 900 lineHeight: 1.1 headline-display: fontSize: 56px fontFamily: Heebo, Inter, sans-serif fontWeight: 900 lineHeight: 1.05 letterSpacing: -0.02em spacing: xs: 8px sm: 12px md: 16px lg: 24px xl: 36px 2xl: 56px rounded: none: 0px sm: 8px md: 16px lg: 28px full: 9999px components: card: padding: "{spacing.lg}" rounded: "{rounded.md}" elevation: 0 4px 14px rgba(13,71,161,0.08) textColor: "{colors.on-surface}" borderWidth: 0px backgroundColor: "{colors.surface-container}" input: padding: 12px 16px rounded: "{rounded.md}" textColor: "{colors.on-surface}" backgroundColor: "{colors.surface}" borderWidth: 1px borderColor: "{colors.outline}" button-primary: padding: 14px 24px rounded: "{rounded.lg}" textColor: "{colors.on-primary}" typography: "{typography.title-md}" backgroundColor: "{colors.primary}" button-primary-hover: textColor: "{colors.on-tertiary}" backgroundColor: "{colors.tertiary}" alert-error: padding: "{spacing.md}" rounded: "{rounded.md}" textColor: "{colors.on-surface}" backgroundColor: "{colors.surface}" borderColor: "{colors.error}" borderWidth: 0 0 0 4px badge-accent: padding: 4px 12px rounded: "{rounded.full}" textColor: "{colors.on-tertiary}" backgroundColor: "{colors.tertiary}" typography: "{typography.label-sm}" chip-secondary: padding: 4px 12px rounded: "{rounded.full}" textColor: "{colors.on-secondary}" backgroundColor: "{colors.secondary}" typography: "{typography.label-sm}" --- # Briut > A Maccabi-flavored patient portal: deep blue, magenta accent, generously rounded shapes. ## Overview Briut is a Maccabi-flavored design system for Israeli health-services portals: patient dashboards, member areas, doctor-finder flows, prescription queues, lab-result histories, and appointment widgets. The palette pairs Maccabi's signature deep blue (`#0D47A1`) with a punch of magenta (`#BF188D`) so the system feels modern and human rather than clinical-cold. Generous 28px button rounds and a soft `#F4F9FF` card tint carry the warmth without sacrificing the institutional-trust signal patients expect from medical UIs. Briut is specifically Maccabi-coded, not a generic "kupat cholim" mood. The other three Israeli HMOs are visually distinct: Clalit runs teal-blue plus purple on near-flat corners, Meuhedet runs warm orange on small radii, Leumit runs a purple-magenta-heavy palette on a rounded Rubik base. None of those would fit Briut's tokens. Each will earn its own system in the directory in time. Use Briut when a product needs to feel like a Maccabi-coded Israeli health portal that respects the user's time: fast to scan, clearly hierarchical, warm without being saccharine. Anchor visual idioms were captured from maccabi4u.co.il production stylesheets on 2026-04-30 (`evidence.json` records the raw observations, the comparative kupot research, and the AA-driven deviations from observed values). ## Colors The palette has three load-bearing roles. **Primary `#0D47A1`** is Maccabi-blue: it covers primary CTAs, the active-tab underline, focus rings, and the header brand bar. The blue is dark enough to pass `on-primary: #FFFFFF` at 9.45:1, well past WCAG AA for body text. **Tertiary `#BF188D`** is the human warmth: magenta highlights on alerts, urgent reminders, and pull-quotes inside health articles. It was darkened from the observed `#D625A1` so on-tertiary white text passes 5.10:1 instead of borderline 4.27:1. **Secondary `#1E2F41`** is the dense-information color: chart axes, table headers, and structured data tables. `surface-container: #F4F9FF` is the system's soft anchor. Cards and panels float on it instead of pure white, which keeps the whole experience feeling like one continuous health-portal surface rather than a stack of disconnected white tiles. `outline: #DAE2EC` is intentionally cool-tinted to harmonize with the surface-container. In dark mode the palette inverts to `surface: #0E1A2E`. The primary lifts to `#5B8DEF` for legibility on dark surfaces; the magenta lifts to `#FF5BC7`. Both still hit AA against the new `on-primary: #0E1A2E` and `on-tertiary: #0E1A2E`. Use the dark palette for late-night portal logins and clinic-floor tablets where the room lighting is dim. ## Typography Heebo leads every type role with Inter as the latin co-stack. Heebo's wide range of weights (300 to 900) covers the full hierarchy from `label-sm` to `headline-display` without bringing in a second Hebrew family. Inter is paired only as a latin fallback so English content (medication brand names, lab codes) renders with comparable x-height to Heebo Hebrew text. `headline-display` ships with `letterSpacing: -0.02em` for tight Latin display headlines (think the homepage hero). Hebrew display text overrides this back to `0` (see Hebrew typography overrides below). Body and label tokens hold a comfortable 1.55-1.60 line-height, which is the right density for Hebrew with its descender-heavy letterforms (ק, ץ, ן, ן sof, ם sof) when stacked over multi-line patient summaries. Title tokens use 500 weight by default. Avoid 700 for in-page section headings; reserve 700+ for `headline-lg` and `headline-md` so the visual rhythm stays calm. ## Layout Spacing follows an airy 4-8-12-16-24-36-56 progression. The intentional jump from `lg: 24` to `xl: 36` opens up section breathing room between major page regions (hero, metrics row, tabbed content). Use `md: 16` between dense items like list rows; `lg: 24` between cards in a grid; `xl: 36` between section blocks; `xxl: 56` only for top-of-page hero spacing. Page max-width: 1200px for desktop dashboards, 1440px for marketing-style health content. Grid: 12-column at 24px gutters, collapsing to 4-column at 16px gutters on mobile. Maintain at least 16px page-side padding on phones so card content never butts against the viewport edge. ## Elevation & Depth Cards use `elevation: 2` (a soft 2-layer shadow) and zero border. Elevation comes from shadow plus the `surface-container` tint behind, not from a hairline outline. Use `elevation: 0` only on full-width banner sections that already separate themselves visually via background color shifts. Modals float on a 24% scrim of `secondary` (`rgba(30, 47, 65, 0.24)`). Toasts and snackbars get `elevation: 3` so they stand off from any open modal. ## Shapes The rounded scale is generous: `sm: 8`, `md: 16`, `lg: 28`, `full: 9999`. Buttons land at `lg` (28px) by default; that's the signature Maccabi-portal feel, big enough that primary CTAs read as friendly invitations rather than transactional buttons. Inputs use `md: 16`. Avatar chips and status badges use `full`. A signature shape idiom (captured in the Examples section as raw CSS, not a token): hero cards on the homepage use an asymmetric `border-radius: 0 0 40px 0`, anchoring the start-top corner sharply while opening the end-bottom corner. This is the visual hook that says "this is a Maccabi-style portal" before any content loads. Use it sparingly: once per page, on the hero card only. ## Components ### Button Primary: `bg-primary`, `color: on-primary`, `padding: 14px 24px`, `border-radius: tokens.rounded.lg` (28px), `font-weight: 500`, `font-size: tokens.title-md.fontSize` (17px). Hover: 8% darker primary. Focus: 3px outline at `primary` with 2px offset. Disabled: 40% opacity. Secondary: same shape, `bg: transparent`, `border: 2px solid primary`, `color: primary`. Hover: 8% primary tint background. Tertiary (text-only): `color: primary`, no border, no background. Used for tertiary actions in card footers. ### Card `bg: surface-container`, `border: none`, `border-radius: tokens.rounded.md` (16px), `box-shadow: tokens.components.card.elevation`, `padding: tokens.spacing.lg` (24px). Header uses `title-lg`, body uses `body-md`, footer-action area aligns to the end side with `tokens.spacing.md` gap. ### Input `bg: surface`, `border: 1px solid outline`, `border-radius: tokens.rounded.md` (16px), `padding: 12px 16px`, `font-size: tokens.body-md.fontSize`. Focus: border becomes 2px primary, no fill change. Error: border `error`, helper text below in `body-sm` `color: error`. ### Tag / Badge Pill shape (`rounded: full`), `padding: 4px 12px`, `font-size: tokens.label-sm.fontSize`. Variants: `info` (primary, on-primary text), `accent` (tertiary, on-tertiary text), `neutral` (surface-container, on-surface text), `error` (error, white text). Use `accent` sparingly; one per card maximum. ### Alert Full-width, `padding: tokens.spacing.md`, `border-radius: tokens.rounded.md`, left-edge accent strip 4px wide in the variant color. Variants: `info` (primary), `warning` (tertiary, yes magenta, matches the brand), `error` (error), `success` (cool green, see Localization for accessibility note). ## Do's and Don'ts **Do**: pair primary blue with magenta as the two-color story. Skip tertiary on dense text-heavy screens; reserve it for moments of warmth (welcome messages, confirmation states, important reminders). **Do**: use the soft `surface-container` tint behind cards. White-on-white card stacks feel cold and lose the Briut warmth. **Do**: keep button radius at 28px (`lg`). Smaller corners pull the system back toward institutional/civic territory. **Don't**: combine tertiary magenta with error red on the same screen. They compete and create urgency confusion in medical contexts where error has a specific meaning. **Don't**: use the asymmetric `0 0 40px 0` corner on more than one element per page. It becomes noise instead of a hook. **Don't**: drop below 1.55 line-height on body text. Hebrew descenders need the room. ## Localization Briut is built Hebrew-first. The token block above ships values that work for both scripts when consumed via a Hebrew-capable font stack; the rules below capture the practical RTL, BiDi, and Hebrew typography decisions that the tokens alone do not encode. ### RTL behavior - **Text alignment**: default to logical `start` for headlines, body, labels, and lists (right in RTL). Use `center` only for hero subheads and standalone CTA labels. Never hardcode `text-align: left` or `right`. - **Asymmetric grids mirror**: an "image | text" hero in LTR puts the image on the left; in RTL the image goes on the right (start side). Order via DOM, never via `order` properties; the document order should read naturally in both directions. - **Button stacks**: primary action goes on the start side (right in RTL); secondary follows toward the end. A "Save | Cancel" pair reads "שמור | ביטול" with שמור on the right. - **Direction-aware glyphs**: CTA arrows (`←` RTL / `→` LTR), chevrons in disclosure widgets, breadcrumb separators (`›` flips), pagination next/prev, undo/redo, send-message icons. Use `transform: scaleX(-1)` for asymmetric icons or maintain dual SVGs. - **Drawers and side sheets**: slide in from the start side (right in RTL). - **Modal close button**: end side (left in RTL), matching Hebrew/Arabic OS convention. - **Steppers and wizards**: step 1 anchors on the start side (right in RTL); the progress bar fills from start to end (right-to-left). - **Pagination**: page 1 on the start side; "next" arrow points toward the end (left in RTL). - **Tables**: first column anchors on the start side. Numeric columns may stay LTR via `<bdi>`-wrapped cells while the table itself flows RTL. - **Logical CSS only**: `padding-inline-start`, `margin-inline-end`, `inset-inline-start`. Tailwind: `ps-*`, `me-*`, `start-*`. Never `padding-left`, `left:`, `ml-*`. ### Hebrew typography overrides - **Letter-spacing override**: `headline-display.letterSpacing` is `-0.02em`. Apply this to Latin runs only. For Hebrew display text, override to `0`. Hebrew letterforms have no Latin-style ascenders/descenders, so negative tracking visually crowds them and hurts legibility. - **Display line-height**: `headline-display.lineHeight` is `1.05`. Hebrew descenders (ק, ץ, ן) clash with the next line at this density. Override to `1.15` minimum for Hebrew display text. - **Heebo weight floor**: Heebo at 900 reads correctly for Hebrew display headlines without further adjustment. Do not drop below 500 for Hebrew title text; thin Heebo glyphs (300, 400) lose stem contrast at title sizes against the soft `surface-container`. - **font-feature-settings**: keep `kern` and `calt` enabled on every text node. The kerning table for Heebo is needed for proper Hebrew rendering. Never set `font-feature-settings: normal` globally. ### Bidirectional (BiDi) handling - **Wrap mixed-direction inline content in `<bdi>`**: numerals inside Hebrew flow ("1,200 ₪", "85 מ״ר"), phone numbers ("052-123-4567"), Israeli ID numbers, version strings, file paths, code identifiers, medication brand names ("Cipramil 20mg"). Without `<bdi>` the Unicode BiDi algorithm reorders unpredictably. - **Code, URLs, and email addresses stay LTR** even inside RTL pages. Wrap with `<bdi>` or apply `direction: ltr` on the containing element. Never let an `@`, `/`, or `.` flip across BiDi boundaries. - **User-input fields**: apply `unicode-bidi: plaintext` so the typed direction follows the content (a Hebrew name and a Latin URL render correctly in the same input). - **Code blocks**: `<pre>` and `<code>` always `direction: ltr; text-align: start` even on RTL pages. ### Punctuation - **Quote marks**: gershayim ״ (U+05F4) for double-quote in Hebrew abbreviations (e.g., צה״ל, ארה״ב). Geresh ׳ (U+05F3) for single-quote and Hebrew apostrophe. Never use ASCII `"` or `'` in Hebrew. - **Hyphens in compound Hebrew words**: maqaf ־ (U+05BE), not ASCII hyphen. ASCII hyphen is fine inside code spans and Latin-only runs. - **Em dashes**: never. Use commas, parentheses, periods, or colons instead. This rule is system-wide, not Hebrew-only. - **Latin runs inside Hebrew**: standard ASCII punctuation works (commas, periods, parens). The mixed-direction display is handled by BiDi. ### Numbers, dates, currency, identifiers - **Date format (numeric)**: `dd/mm/yyyy` (Israeli convention, not US `mm/dd/yyyy`). - **Date format (long-form Hebrew)**: `dd בMMMM yyyy` (note the prefix ב for "in", e.g. "12 ביוני 2026"). Hebrew month names: ינואר, פברואר, מרץ, אפריל, מאי, יוני, יולי, אוגוסט, ספטמבר, אוקטובר, נובמבר, דצמבר. - **Time format**: 24-hour (`14:30`). AM/PM is wrong in Israeli context, especially in clinical contexts where appointment times must be unambiguous. - **Currency**: ₪ (NIS) symbol AFTER the amount with a space: `1,200 ₪`, not `₪1,200`. Use `ש"ח` interchangeably; pick one per surface and stay consistent. - **Phone numbers**: `0X-XXX-XXXX` for landlines (`03-1234567`), `05X-XXX-XXXX` for mobile (`052-123-4567`). Always wrap in `<bdi>`. - **Israeli ID (תעודת זהות, ת.ז.)**: 9 digits, displayed LTR-wrapped: `<bdi>123456789</bdi>`. Never break with hyphens or spaces. - **Week start**: Sunday (יום ראשון), not Monday. Affects calendar pickers, weekly summaries, and day-of-week labels. - **Hebrew calendar**: surface alongside Gregorian for ceremonial or holiday-aware contexts. Format: `ב׳ תשרי תשפ״ז`. ### Accessibility (Hebrew-specific) - **`<html lang="he" dir="rtl">`**: both attributes required on every Hebrew page. Screen readers use `lang` to pick the Hebrew voice; layout uses `dir` for direction. - **Inline language switching**: wrap Latin spans inside Hebrew flow with `<span lang="en">` so screen readers switch voices mid-sentence. Especially important for medication brand names and clinical terminology. - **aria-labels in Hebrew**: author them in Hebrew at build time; never machine-translate at runtime. A button with Hebrew visible text needs a Hebrew `aria-label`, not the English equivalent. - **Skip links in Hebrew**: "דלג לתוכן הראשי" (skip to main content), "דלג לניווט" (skip to navigation). Position: top-start (top-right in RTL). - **Focus order matches visual order**: in RTL the visual reading order is right-to-left, so the keyboard tab order should follow the same path. ### Forms - **Field labels**: top-aligned by default; if inline, label is on the start side (right in RTL). - **Placeholder alignment**: start-aligned (right in RTL); never center-align placeholders in inputs. - **Caret position**: at the start side of an empty field (right in RTL for Hebrew input, left in LTR for Latin input). `unicode-bidi: plaintext` handles this automatically. - **Required asterisk**: on the start side of the label, right against the label text in RTL. Color: `error`. - **Error message voice**: direct and Hebrew-natural. "שדה חובה" not "השדה הזה הוא שדה חובה". Patient-facing flows must avoid clinical jargon in error states. ### Cultural notes In Israeli health portals, the relationship between patient and HMO is closer to a service-utility relationship than a doctor-patient one. Voice should be efficient and warm but not over-personalized, closer to a bank's tone than a wellness app's. Avoid emoji in clinical content, avoid first-person bot voice ("I'll help you book your appointment"), and prefer second-person plural for operational copy ("נקבע את התור" / "Let's book the appointment"). Reserve magenta-accented warmth for moments that genuinely earn it: confirmations, vaccination success states, family-portal greetings. ## Examples ### Hero card (Hebrew) ```html <section class="hero" dir="rtl" lang="he"> <article style=" background: var(--ds-color-surface-container); border-radius: 0 0 40px 0; padding: 36px 24px; "> <h1 style=" font: 900 56px/1.15 Heebo, sans-serif; letter-spacing: 0; color: var(--ds-color-on-surface); ">שלום דנה, יש לך תור מחר ב-14:30</h1> <p style="font: 400 18px/1.6 Heebo; color: var(--ds-color-on-surface);"> ד״ר אבנר כהן, רפואת משפחה, סניף רמת גן. </p> <button style=" background: var(--ds-color-primary); color: var(--ds-color-on-primary); border-radius: 28px; padding: 14px 24px; border: 0; font: 500 17px Heebo; ">לאישור התור ←</button> </article> </section> ``` ### Primary CTA (English) ```html <button style=" background: #0D47A1; color: #FFFFFF; border-radius: 28px; padding: 14px 24px; border: 0; font: 500 17px Inter; letter-spacing: -0.01em; ">Book your appointment →</button> ``` ### Error toast (Hebrew, magenta-free) ```html <div role="alert" dir="rtl" lang="he" style=" background: var(--ds-color-surface); border-inline-start: 4px solid var(--ds-color-error); border-radius: 16px; padding: 16px; font: 400 16px/1.6 Heebo; color: var(--ds-color-on-surface); "> <strong>שדה חובה.</strong> נא למלא את <bdi>תעודת הזהות</bdi> שלך לפני המשך. </div> ```
צבעים
טיפוגרפיה
פינות ומרווחים
בריאות נועד לפורטלים של שירותי בריאות בישראל: אזור אישי, חיפוש רופא, ניהול תורים, מרשמים, תוצאות בדיקות. הפלטה משלבת כחול עמוק בנוסח מכבי עם מגע מגנטה שמכניס חמימות לחוויה הקלינית. פינות מעוגלות נדיבות וגוון תכלת רך על כרטיסים מאזנים בין הרושם המוסדי האמין לבין תחושת מודרניות ונגישות שמטופלים בישראל מצפים לה.
המערכת לא מנסה לחקות פורטל של קופת חולים מסוימת. ההשראה החזותית נשענת על maccabi4u.co.il (כחול #0D47A1, מגנטה #BF188D, פינות עגולות 28px), אבל הפלטה והרצף הטיפוגרפי מותאמים ל-WCAG AA ולעבודה דו־לשונית מלאה. השתמשו בה כשמוצר רוצה להרגיש כמו פורטל בריאות ישראלי שמכבד את זמנו של המטופל: ניווט מהיר, היררכיה ברורה, חמים בלי להיות סוכרי.
בריאות נועד לפורטלים של שירותי בריאות בישראל: אזור אישי, חיפוש רופא, ניהול תורים, מרשמים, תוצאות בדיקות. הפלטה משלבת כחול עמוק בנוסח מכבי עם מגע מגנטה שמכניס חמימות לחוויה הקלינית. פינות מעוגלות נדיבות וגוון תכלת רך על כרטיסים מאזנים בין הרושם המוסדי האמין לבין תחושת מודרניות ונגישות שמטופלים בישראל מצפים לה. בחרו ב-בריאות כשזה הסגנון שאתם רוצים שהממשק יעביר.
קובץ אחד שמתאר לסוכן הקוד איך האתר אמור להיראות: צבעים, גופנים, מרווחים, סגנון של כפתורים וכרטיסים. מוסיפים אותו לפרויקט, וסוכנים כמו Claude Code או Cursor קוראים אותו ומיישמים את העיצוב על מה שהם בונים, בלי שתצטרכו להחליט הכול מחדש.
מדריך מלא לשימושמריצים מהתיקייה הראשית של הפרויקט `npx skills-il add-design <slug>` וה-CLI יוצר את הקובץ. אפשר גם להוריד את DESIGN.md ישירות מהעמוד, או להעתיק את התוכן ולשמור ידנית בתיקייה.
קובץ DESIGN.md יחיד, עם מחסנית גופנים שמציבה ראשונה משפחה שתומכת בעברית (למשל Heebo לפני Inter). הפרק "Localization" בסוף הקובץ מסכם את הכללים ל-RTL, כיוון ספרות, ניקוד וסוג המרכאות, כדי שהסוכן ייצר ממשק עברי נכון כבר בפעם הראשונה.