---
name: Bituach
version: 1.1.0
description: Israeli insurance and financial-services portal voice, calibrated against Migdal, Phoenix, Menora, Harel, Clal, AIG, and Ayalon. Deep navy chrome, cool off-white surface, mint-teal CTA accent. Considered, pragmatic, trustworthy.
colors:
  primary: "#0E1632"
  secondary: "#1F2D5C"
  tertiary: "#06D79D"
  surface: "#F4F6FA"
  on-primary: "#F4F6F8"
  on-secondary: "#F4F6F8"
  on-tertiary: "#06181D"
  on-surface: "#0E1632"
  surface-container: "#FFFFFF"
  outline: "#C9D0DD"
  error: "#D32F2F"
colors-dark:
  primary: "#7AB6FF"
  secondary: "#5E97FF"
  tertiary: "#34BB9A"
  surface: "#080B1A"
  on-primary: "#06181D"
  on-secondary: "#06181D"
  on-tertiary: "#06181D"
  on-surface: "#E8EBF2"
  surface-container: "#11183A"
  outline: "#2A3556"
  error: "#FF6679"
typography:
  body-lg:
    fontSize: 18px
    fontFamily: Heebo, sans-serif
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontSize: 16px
    fontFamily: Heebo, sans-serif
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontSize: 14px
    fontFamily: Heebo, sans-serif
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontSize: 14px
    fontFamily: Inter, Heebo, sans-serif
    fontWeight: 500
    lineHeight: 1.3
  label-sm:
    fontSize: 12px
    fontFamily: Inter, Heebo, sans-serif
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.02em
  title-md:
    fontSize: 18px
    fontFamily: Heebo, sans-serif
    fontWeight: 600
    lineHeight: 1.35
  title-lg:
    fontSize: 22px
    fontFamily: Heebo, sans-serif
    fontWeight: 600
    lineHeight: 1.3
  headline-md:
    fontSize: 28px
    fontFamily: Heebo, sans-serif
    fontWeight: 700
    lineHeight: 1.2
  headline-lg:
    fontSize: 40px
    fontFamily: Heebo, sans-serif
    fontWeight: 700
    lineHeight: 1.15
  headline-display:
    fontSize: 56px
    fontFamily: Heebo, sans-serif
    fontWeight: 800
    lineHeight: 1.08
    letterSpacing: -0.01em
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  2xl: 56px
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  full: 9999px
components:
  card:
    padding: "{spacing.lg}"
    rounded: "{rounded.lg}"
    elevation: none
    textColor: "{colors.on-surface}"
    borderWidth: 1px
    backgroundColor: "{colors.surface-container}"
  input:
    padding: 12px 16px
    rounded: "{rounded.md}"
    textColor: "{colors.on-surface}"
    backgroundColor: "{colors.surface-container}"
  button-primary:
    padding: 12px 24px
    rounded: "{rounded.md}"
    textColor: "{colors.on-tertiary}"
    backgroundColor: "{colors.tertiary}"
  button-primary-hover:
    textColor: "{colors.on-tertiary}"
    backgroundColor: "{colors.tertiary}"
  button-secondary:
    padding: 12px 24px
    rounded: "{rounded.md}"
    textColor: "{colors.on-primary}"
    backgroundColor: "{colors.primary}"
  button-ghost:
    padding: 12px 20px
    rounded: "{rounded.md}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    backgroundColor: "{colors.surface}"
---

# Bituach

> Institutional trust for policies, claims, and premium statements. The Israeli insurance and financial-services portal voice, made tokenizable.

## Overview

Bituach is the corporate-trust register Israelis encounter on insurance and pension portals: Harel, Migdal, Clal, Phoenix, Menora Mivtachim, AIG, Ayalon. It is not the sound of government (compare `memshala`, `rishmi`); it is the sound of a private financial institution that handles your premiums, your claims, and your retirement statements. The voice is **considered** (decisions take time, language is precise), **pragmatic** (forms over flourishes, every label earns its place), and **trustworthy** (the palette and rhythm have to read as serious before they read as friendly).

The palette was calibrated against the actual production stylesheets of seven Israeli carriers. The dominant chrome across the market is deep navy (Migdal `#1A1B39`, Phoenix `#0e1632`, Ayalon `#192863`, AIG `#001871`); Bituach adopts `#0E1632` as primary so the system reads on first glance like the homepage of an Israeli insurance brand. The mint-teal tertiary `#06D79D` is lifted from Phoenix's distinctive CTA accent, the most differentiated decision-marker in the category. Every other carrier reaches for blue-on-blue or orange-on-navy and ends up looking like the rest; the mint-teal is the one that says "Israeli insurance" without saying "any other Israeli bank".

Bituach is dense by design but never crowded. Spacing tuned tighter than coastal or editorial systems but looser than classifieds: financial documents need to breathe at the row level so amounts, dates, and policy numbers stay legible at a glance. Cards lift one elevation step above the page, bordered with a single hairline; the effect is "printed statement on paper", not "floating element". Use Bituach when the surface is a policy, a quote, a claim, an annual statement, or any other artifact where the reader's first instinct is "is this trustworthy".

## Colors

The primary `#0E1632` is the deep navy that runs through every major Israeli insurance brand: it is Phoenix's exact header value, sits inside Migdal's `#1A1B39` and Ayalon's `#192863` family, and reads heavier than civic navy (`#003E80` of `memshala`) precisely because insurance brands compete on gravitas. It carries chrome, header bars, primary text on light, and key form labels. On dark surfaces, primary lifts to `#7AB6FF` (Migdal-family electric blue at light tint), keeping the brand identity legible at night.

The secondary `#1F2D5C` is the same hue family stepped lighter; it carries muted chrome, secondary buttons, table header strips, and any region that should feel "less than primary, more than surface". Pair with `on-secondary` `#F4F6F8` for inverse text.

The tertiary `#06D79D` is the mint-teal lifted from Phoenix's CTA accent and is the only place CTAs live. Reserve it for the single most important action on a surface: pay, submit, confirm, claim. Never use tertiary for navigation or chrome; the cool-mint pop is what marks "decision point" against the navy chrome. Contrast `on-tertiary` `#06181D` against `tertiary` clears 9.7:1, comfortable for label sizes down to 12px and for white text in dark-mode CTAs.

The surface `#F4F6FA` is a faintly cool off-white tinted toward the navy hue. Financial UIs are read for long sessions; a tint that pulls toward the brand chrome reduces glare and reinforces palette cohesion across long premium tables and claims histories. Cards lift to `#FFFFFF` (`surface-container`) so a list row separates from the page through a one-step value rise plus the hairline outline.

The outline `#C9D0DD` is a cool gray-blue that reads as "border on paper" rather than as a UI divider. The error `#D32F2F` is the Material-grade crimson used on Israeli insurance claim-rejected notifications (compare AIG's exact `#d32f2f`), calibrated to be authoritative without being alarming.

In dark mode the relationship inverts: surface drops to `#080B1A` (almost-black with a navy bias), primary lifts to `#7AB6FF` (electric blue, Migdal family), tertiary lifts to `#34BB9A` (the second mint Phoenix uses for buttons on darker surfaces). The system reads as the same brand at night, not a different one. All required pairings clear WCAG AA in both modes (body text on surface 16.5:1 light, 16.4:1 dark; on-tertiary on tertiary 9.7:1 light, 7.5:1 dark).

## Typography

Heebo leads. It is a Hebrew-capable family with five working weights (300/400/500/700/900) and an optical balance that makes Hebrew and Latin sit at compatible heights, which matters on policy headers where "Policy 11234567" is a Latin string inside a Hebrew sentence. Heebo carries every headline, title, and body token.

Inter pairs in for `label-md` and `label-sm` only, where two qualities matter: tabular Latin numerals (`font-feature-settings: "tnum", "lnum"`) so column widths in premium tables and amount stacks stay aligned, and a slightly tighter letterform that reads as "metadata" rather than "content". The label tokens fall back to Heebo for Hebrew labels so direction-mixed UI (a Hebrew label above a Latin policy number) renders coherently.

The display weight is 800. Insurance brand voices typically peak at 700-800; 900 reads as news (compare `kotarot`), and 600 reads as marketing. The display letter-spacing is `-0.01em` (very mild tightening for Latin), overridden to `0` for Hebrew runs (see Localization). The body line-height of 1.6 is slightly looser than the institutional norm; it is calibrated for nikkud breathing room and for long-form policy text where users read paragraphs, not just bullet points.

The label tokens carry `letterSpacing: 0.02em` on `label-sm`. This is the mid-density UI tracking that makes 12px metadata read as "system text", separating it from body. Never apply this to Hebrew label content; Hebrew letterforms gain nothing from positive tracking.

## Layout

The spacing scale is form-density-tuned: `xs:4 sm:8 md:12 lg:20 xl:32 2xl:56`. The 12-20 jump is the system's most-used pair, sized for "row gutter inside a form section" and "section gap between form sections". The 2xl:56 is reserved for hero margins and statement-cover spacing, not body content.

Page max-width: 1200px for marketing surfaces, 960px for policy detail and forms. Insurance content reads better in narrower measure than marketing copy; long line-lengths on body-md across a wide column degrade comprehension on dense legal-tinged text.

Grids: 12-column on desktop, 4-column on mobile, gutter `lg` (20px). Form sections use a 2-column grid for paired fields (first name + last name, policy number + date) collapsing to 1-column below 720px.

## Elevation & Depth

One elevation step. Cards lift from the page using `surface-container` (`#FFFFFF`) plus a single 1px outline; no shadow on rest. On hover or focus an action card may add a subtle 2px-4px y-shadow at 6% opacity, but the resting state is flat-with-outline. The system reads as "printed", not "stacked". A second elevation step is reserved for modals and drawers, which use a 24px y-shadow at 12% opacity.

Banded sections (page-level) alternate between `surface` and `surface-container` in dark mode, but in light mode prefer hairline rule separators over banding to keep the page reading as one continuous document.

## Shapes

The rounded scale is `none:0 sm:4 md:8 lg:12 full:9999`. Buttons sit at `md` (8px), institutional but approachable, not the hard 0-4 of government forms (compare `memshala`, `rishmi`) and not the 14-16 of consumer apps. Cards sit at `lg` (12px). Inputs match buttons at `md`. The `full` token is reserved for status pills (e.g. policy status badges: "Active", "Lapsed", "In claim").

Per-component overrides: form sections use `rounded: lg` to match cards, but inline form field-groups inside a section use `rounded: sm` to read as "cells inside a form" rather than "independent components".

## Components

### Button

**Primary.** Background `tertiary` `#E27D3F`, label `on-tertiary` `#16110A`, `rounded: md`, padding `12px 24px`, weight 600. Reserved for the single most important action on a surface. Never use two primary buttons on the same view; if you have two equally-weighted actions, both should be secondary.

**Secondary.** Background `primary` `#0E3F4B`, label `on-primary` `#F6F8F8`. Used for the "main path" action when it is not yet a decision point (e.g. "Continue to step 2", "View policy details"). Same shape and padding as primary.

**Ghost.** Transparent background, label `primary`, hover background `surface-container`. Used for navigation actions and toolbar buttons.

### Card

`background: surface-container`, `borderWidth: 1`, `borderColor: outline`, `borderRadius: lg`, `elevation: none` (1px outline, no shadow at rest). Padding `lg` (20px) on most surfaces; padding `xl` (32px) on hero or statement-cover cards.

### Input

`background: surface-container`, `borderWidth: 1`, `borderColor: outline`, `borderRadius: md`, padding `12px 16px`, height 44px (mobile-tap-target safe), font `body-md`. Focus state: `borderColor: primary`, 2px outer ring at `primary` 20% opacity. Error state: `borderColor: error`, message rendered below at `body-sm` weight 500, color `error`.

### Tag / Badge

For policy status, claim status, document state. `borderRadius: full`, padding `4px 10px`, font `label-sm`. Variants:
- **Active**: background `secondary` 12%, text `secondary`
- **Lapsed**: background `outline`, text `on-surface` 70%
- **In claim**: background `tertiary` 12%, text `tertiary`
- **Rejected**: background `error` 12%, text `error`

### Alert

Inline alert box for policy notifications. `background: surface-container`, `borderInlineStartWidth: 4` (logical, RTL-aware), `borderInlineStartColor: tertiary` (info) or `error` (warning), `borderRadius: md`, padding `lg`. Heading `title-md`, body `body-md`, optional ghost button trailing.

## Do's and Don'ts

**Do** reserve `tertiary` for one CTA per surface. The warm amber is the only color that breaks the cool palette; it loses meaning if it appears on more than one decision point per view.

**Do** wrap policy numbers, premium amounts, and Israeli ID strings in `<bdi>` when they appear inside Hebrew prose. The currency `1,200 ₪` and the policy `Pol-11234567` will reorder unpredictably without it.

**Do** use `surface` (not `surface-container`) for the page background on long-form policy reads; the cool tint reduces eye strain across multi-screen statements.

**Don't** use `primary` for CTAs. Primary is for chrome, headers, and key text; the warm `tertiary` is the only color that means "act here".

**Don't** apply the display `letterSpacing: -0.01em` to Hebrew text. Hebrew has no Latin-style ascenders; negative tracking visually crowds the letterforms. See Localization for the override rule.

**Don't** stack two cards directly without spacing. The hairline-outline-only elevation makes adjacent cards visually merge; require minimum `lg` (20px) gap between siblings.

## Localization

Bituach 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.01em` and `label-sm.letterSpacing` is `0.02em`. Apply both to Latin runs only. For Hebrew display text, override `headline-display.letterSpacing` to `0`. For Hebrew label text, override `label-sm.letterSpacing` to `0`. Hebrew letterforms have no Latin-style ascenders/descenders; negative tracking crowds them and positive tracking visually fragments them.
- **Display line-height**: `headline-display.lineHeight` is `1.08`, suitable for Heebo Latin display. Hebrew descenders (ק, ץ, ן) clash with the next line at this density. Override to `1.20` minimum for Hebrew display text. `headline-lg` at `1.15` is at the floor; if your hero stacks two Hebrew headlines, push to `1.20`.
- **Body line-height**: `body-md.lineHeight` is `1.6`. Already tuned for Hebrew nikkud; do not lower for Hebrew. For long-form Hebrew policy text (multi-paragraph), consider raising to `1.65`.
- **Tabular numerals**: `label-md` and `label-sm` use `Inter, Heebo, sans-serif`. Apply `font-feature-settings: "tnum", "lnum"` on these tokens so premium amounts and policy numbers render with Latin tabular figures even when the surrounding label is Hebrew. This keeps amount stacks vertically aligned in claim and premium tables.
- **font-feature-settings**: keep `kern` and `calt` enabled on every text node. Heebo's kerning table 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 ₪", "פוליסה 11234567"), phone numbers ("052-123-4567"), Israeli ID numbers, version strings, file paths, code identifiers. Without `<bdi>` the Unicode BiDi algorithm reorders unpredictably. This rule is load-bearing for Bituach because policy and claim numbers appear inside almost every sentence.
- **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 policy number 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 (e.g. policy IDs).
- **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`). Policy issue and renewal dates always.
- **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.
- **Currency**: ₪ (NIS) symbol AFTER the amount with a space: `1,200 ₪`, not `₪1,200`. Use `ש"ח` interchangeably; pick one per surface and stay consistent. Use `<bdi>` to keep the digits and the symbol from BiDi-flipping inside Hebrew sentences.
- **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.
- **Policy and claim numbers**: alphanumeric, displayed LTR-wrapped: `<bdi>POL-11234567</bdi>`. The `-` separator stays ASCII.
- **Week start**: Sunday (יום ראשון), not Monday. Affects calendar pickers, premium-due-date selectors, claim incident-date pickers, and weekly policy summaries.

### 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 proper nouns, brand names, and policy identifiers read aloud.
- **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**: appears at the visual end of typed text. Handled automatically by the browser when `dir` is set correctly on the input or its container.
- **Required-field indicator**: asterisk `*` AFTER the label in RTL ("שם מלא *", not "* שם מלא").
- **Error messages**: rendered below the field, start-aligned (right in RTL). Voice: address the user directly and explain how to fix ("הדוא״ל אינו תקין. נסו שוב במבנה name@example.com"), not "Invalid input".
- **Phone, ID, postcode, policy-number inputs**: set `inputmode="numeric"` and `pattern` for native keyboard; wrap displayed values in `<bdi>`.

### Cultural notes

Bituach speaks the formal-but-warm Israeli corporate-finance register. Use plural imperative for instructions ("שלחו טופס", "הזינו פרטים"), not the gendered singular ("שלח", "הזיני"). Address the user as "אתם" (plural you) for forms and instructions; "את/אתה" (singular gendered) reads as marketing. Insurance is read by adults of all ages; vocabulary should be standard, not slang. The English voice mirrors: clear, direct, second-person plural where applicable, never colloquial.

## Examples

### Hero (Hebrew)

```html
<section dir="rtl" lang="he" style="background: var(--ds-color-surface); padding: 56px 32px;">
  <h1 style="font: var(--ds-font-headline-display); color: var(--ds-color-on-surface); letter-spacing: 0; line-height: 1.20; margin: 0 0 12px;">
    הביטוח שלכם, במקום אחד.
  </h1>
  <p style="font: var(--ds-font-body-lg); color: var(--ds-color-on-surface); max-width: 60ch; margin: 0 0 32px;">
    פוליסות, תביעות, והוראות תשלום, עם ממשק שמיועד לקריאה ארוכה ולא להפעלה מהירה.
  </p>
  <a href="/policies" style="background: var(--ds-color-tertiary); color: var(--ds-color-on-tertiary); padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none;">
    צפו בפוליסות שלכם ←
  </a>
</section>
```

### CTA card (English)

```html
<article dir="ltr" lang="en" style="background: var(--ds-color-surface-container); border: 1px solid var(--ds-color-outline); border-radius: 12px; padding: 20px;">
  <h2 style="font: var(--ds-font-title-lg); color: var(--ds-color-on-surface); margin: 0 0 8px;">
    Annual statement ready
  </h2>
  <p style="font: var(--ds-font-body-md); color: var(--ds-color-on-surface); margin: 0 0 20px;">
    Your <bdi>2026</bdi> pension annual statement is available. Premium total: <bdi>14,250 ₪</bdi>.
  </p>
  <button style="background: var(--ds-color-tertiary); color: var(--ds-color-on-tertiary); padding: 12px 24px; border-radius: 8px; font-weight: 600; border: 0;">
    Download statement →
  </button>
</article>
```

### Inline error (Hebrew form)

```html
<div dir="rtl" lang="he">
  <label style="font: var(--ds-font-label-md); color: var(--ds-color-on-surface);">
    מספר תעודת זהות *
  </label>
  <input style="border: 1px solid var(--ds-color-error); border-radius: 8px; padding: 12px 16px; width: 100%; font: var(--ds-font-body-md);" value="12345" />
  <p style="font: var(--ds-font-body-sm); color: var(--ds-color-error); margin: 4px 0 0;">
    מספר תעודת זהות חייב להכיל 9 ספרות. נסו שוב.
  </p>
</div>
```