israeli-ui-design-systemlisted
Install: claude install-skill skills-il/localization
# Israeli UI Design System
## 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