israeli-ui-design-system

What this skill does

# Israeli UI Design System

Works with React, Vue, Angular, and vanilla HTML/CSS. No network required for core patterns. Recommended with Storybook for component development.

## Instructions

### Step 1: Choose Hebrew Font Pairings

Select font combinations optimized for Hebrew readability and Latin compatibility:

| Pairing | Hebrew Font | Latin Font | Best For | Style |
|---------|-------------|------------|----------|-------|
| Modern Business | Heebo | Inter | SaaS, dashboards, admin panels | Clean, neutral |
| Friendly Startup | Rubik | Source Sans Pro | Consumer apps, marketing sites | Rounded, approachable |
| Government/Formal | Assistant | Roboto | Gov sites, institutional pages | Professional, clear |
| Editorial | Frank Ruhl Libre | Merriweather | Blogs, news, content sites | Serif, literary |
| Minimal | Secular One | Montserrat | Landing pages, portfolios | Bold headlines |

See `references/hebrew-typography.md` for complete font metrics and loading strategies.

**Font loading configuration:**
```css
/* Primary: Heebo + Inter pairing */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&family=Inter:wght@300;400;500;700&display=swap');

:root {
  --font-hebrew: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif;
  --font-latin: 'Inter', 'Roboto', sans-serif;
  --font-mono: 'Fira Code', 'Source Code Pro', monospace;
}

body {
  font-family: var(--font-hebrew), var(--font-latin);
}
```

### Step 2: Hebrew Typography Scale

Hebrew characters are visually larger than Latin at the same font size. Adjust the type scale:

```css
:root {
  /* Hebrew-adjusted type scale */
  --text-xs: 0.8125rem;   /* 13px -- minimum readable Hebrew */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px -- Hebrew body text minimum */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* Hebrew-specific line heights (taller than Latin) */
  --leading-tight: 1.4;
  --leading-normal: 1.7;
  --leading-relaxed: 1.9;

  /* NEVER use letter-spacing for Hebrew */
  --tracking-hebrew: normal;
  /* Slight word spacing improves Hebrew readability */
  --word-spacing-hebrew: 0.05em;
}

/* Hebrew body text */
body[dir="rtl"] {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-hebrew);
  word-spacing: var(--word-spacing-hebrew);
}
```

### Step 3: RTL-First Component Architecture

Design components with RTL as the default, not an afterthought:

```css
/* RTL-first button component */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  padding-block: 0.75rem;
  border-radius: 0.375rem;
  font-family: var(--font-hebrew), var(--font-latin);
  font-weight: 500;
  text-align: start;
  /* Icon automatically flips in RTL */
}

.btn-icon-start {
  flex-direction: row;
  /* In RTL: icon appears on the right (start side) */
}

.btn-icon-end {
  flex-direction: row-reverse;
  /* In RTL: icon appears on the left (end side) */
}

/* RTL-first card component */
.card {
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: start;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--border-color);
}

/* RTL-first sidebar layout */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  /* In RTL: sidebar appears on the right automatically */
}

.layout-sidebar {
  border-inline-end: 1px solid var(--border-color);
  padding-inline-end: 1.5rem;
}
```

**RTL behavior for the rest of the component set.** Buttons, cards, and the sidebar are not the whole story - mirror every directional component:

| Component | RTL behavior |
|-----------|--------------|
| Breadcrumbs | Flow right-to-left; the separator (`/`, `>`, chevron) points left (toward the next crumb). Use a logical separator or mirror a chevron with `transform: scaleX(-1)`. |
| Modals / dialogs | Centered modals need no change. Close (X) button sits at the inline-end (top-left in RTL). Footer action buttons: primary at the inline-start, so the primary lands on the right in RTL. |
| Dropdowns / menus | Open aligned to the inline-start edge of the trigger; submenu flyouts expand toward the inline-start (to the left in RTL). Caret/chevron mirrors. |
| Sliders / range inputs | The track fills from the inline-start - in RTL the minimum is on the right, maximum on the left. Native `<input type="range">` with `dir="rtl"` handles this; custom sliders must flip the fill direction. |
| Progress bars | Fill grows from the inline-start, so progress advances right-to-left in RTL. Use `transform-origin` / logical properties, not a hardcoded `left: 0` origin. |
| Toasts / snackbars | Slide in from the inline-end edge of the viewport - top-left or bottom-left in RTL (mirrored from the LTR top-right convention). Anchor with `inset-inline-end`, not `right`. |

```css
/* Toast anchored to the inline-end edge -- flips sides automatically in RTL */
.toast {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

/* Progress bar fill grows from the inline-start */
.progress-fill {
  block-size: 100%;
  inline-size: var(--progress, 0%);
  /* fill starts at the inline-start edge: right in RTL, left in LTR */
}
```

### Step 4: Israeli Color Palette and Design Tokens

```css
:root {
  /* Israeli-appropriate color tokens */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* Status colors (universal) */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* Neutral palette */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
}
```

**Dark mode (`colors-dark` token tier).** Define a parallel dark token set rather than hardcoding dark values into components. Keep the same token names so components reference `var(--color-bg)` / `var(--color-text)` and never branch on theme. Direction is orthogonal to theme - RTL and dark mode are independent axes, so a `[data-theme="dark"][dir="rtl"]` combination must just work.

```css
:root {
  /* light (default) */
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #111827;
  --color-border: #e5e7eb;
}

:root[data-theme="dark"] {
  /* colors-dark tier -- same token names, dark values */
  --color-bg: #0b0f19;
  --color-surface: #151b2b;
  --color-text: #e5e7eb;
  --color-border: #2a3346;
}
```

Note: Hebrew text on dark backgrounds can look thinner because of Hebrew letterforms - verify contrast still meets WCAG AA and consider a slightly heavier font weight for dark-mode body text.

### Step 5: Gov.il Design Patterns

For government and institutional Israeli websites, the authoritative reference is the **Israeli Government Design System (IGDS)** - the formal atomic-design system used to unify the user experience across gov.il sites. It is published as a Figma Community file ("IGDS Design System File 2.0", https://www.figma.com/community/file/1426262348206342909/igds-design-system-file-2-0), with companion illustration libraries. If you are building a real gov.il-adjacent product, pull tokens, components, and the RTL Hebrew illustration style directly from the IGDS Figma file rather than approximating them - IGDS defines its own color ramps, spacing, and component anatomy, and approximations will visibly