---
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>
```