Israeli Railways (Rakevet Yisrael)

Overview

Israeli Railways (Rakevet Yisrael) is the national public transportation operator serving Israel's rail network. The design system embodies institutional trust and civic accessibility through a maritime-inspired blue (#00458a) paired with warm accent gold (#f9ba4d), creating a welcoming yet authoritative presence. The aesthetic is 'Civic Modernism'—clean, legible, and optimized for multilingual audiences (Hebrew, English, Arabic, Russian). The brand voice is direct and service-oriented: clear, helpful, never condescending. Example: 'Your next train departs at 14:32 from Platform 3.'

Colors

The color system is anchored by Primary Blue (#00458a), a deep maritime tone used for all interactive elements, typography hierarchy, and brand identity. This is the dominant accent on CTAs, language selectors, and focus states. Secondary Gold (#f9ba4d) provides warmth and highlights secondary actions or status indicators. The surface stack ranges from pure white (#ffffff) for primary backgrounds to light blue (#d8f2fc) for hover states and container highlights, creating subtle depth without visual noise. Tertiary Gray (#6c757d) supports neutral text and disabled states. All interactive elements use Primary Blue with white text (contrast ratio 8.5:1 minimum). Hover states transition to darker blue (#003d7a) or light blue containers (#d8f2fc) depending on component type. Shadows use rgba(0,

Typography

The type system pairs FB Reforma (a distinctive Israeli serif) for display and headlines with Open Sans for body and labels, creating a dual-personality hierarchy. FB Reforma at 59px (display) and 40px (headline-lg) conveys institutional authority and cultural specificity; Open Sans at 16–18px ensures legibility across multilingual content and smaller screens. Letter-spacing is conservative (0.01–0.02em) to maintain density and professionalism. All body text uses 16px / 24px line-height for comfortable reading; labels use 14px / 20px with 0.01em tracking for crisp distinction. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on white text over light backgrounds to ensure accessibility. Headlines use 400 weight (not bold) to maintain the refined, civic tone.

Layout

The layout follows a 12-column grid with a max-width of 1216px (76rem), centered with auto margins. Header padding is 74px horizontal (4.64rem) to accommodate the logo and language selector. Section gaps are 70px vertical, creating generous breathing room between hero, content, and footer zones. The spacing scale uses semantic tokens: lg (40px) for section separation, md (24px) for component padding, sm (12px) for internal element spacing. Container padding is 24px on desktop, reducing to 16px on tablet and 12px on mobile. The RTL (right-to-left) layout is native to the HTML (dir='rtl'), so flexbox and grid automatically mirror without additional CSS. Gutter width is 24px between columns.

Elevation & Depth

Depth is conveyed through subtle shadows and layered backgrounds rather than dramatic drop-shadows. Level 1 (base surface) is pure white (#ffffff) with no shadow. Level 2 (cards, dropdowns) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) and a 1px border in outline-variant (#e2e2e2). Level 3 (modals, elevated containers) uses box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) with the same border. Hover states transition shadows from sm to md (200ms ease) to signal interactivity. Language dropdowns use a fixed z-index of 999 and appear with a 150ms fade-in. No blur or glassmorphism is used; the aesth

Shapes

The shape philosophy is 'Civic Clarity'—rounded corners are minimal and functional, never decorative. Buttons and inputs use 0.75rem (12px) border-radius for a slightly softened edge that feels modern without being playful. Cards and containers use 1rem (16px) for slightly more breathing room. Language selector dropdowns use 0.6rem (9.6px) for a tighter, more compact feel. The full-radius token (9999px) is reserved for badges and pill-shaped elements. All borders are 1px solid in outline-variant (#e2e2e2) or outline (#d0d0d0), never thicker. This restraint maintains the institutional, trustwor

Components

Action Elements Buttons are 48px tall with 12px vertical and 24px horizontal padding. Primary buttons use Primary Blue (#00458a) text on white, with a 0.75rem radius and sm shadow. On hover, the background darkens to #003d7a and shadow elevates to md (200ms transition). Secondary buttons are transparent with a 2px Primary Blue border; on hover, they fill with light blue (#d8f2fc). All buttons use label-md typography (14px, 600 weight, 0.01em tracking).

Containers & Surfaces Language selector is a 40px tall dropdown trigger with 8px vertical and 12px horizontal padding, 1px border in outline-variant, and 0.75rem radius. On hover, background shifts to surface-container-high (#c0e8f8). The dropdown menu itself uses 999 z-index, appears at top: 4.36rem (desktop) or 49rem (mobile), and

Do's and Don'ts

**Do**

• Do use Primary Blue (#00458a) for all interactive elements, focus states, and primary CTAs—it is the brand's signature accent and must be instantly recognizable.
• Do maintain 48px minimum height for all touch targets (buttons, language selector) to meet accessibility standards across mobile and desktop.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on hover/focus state changes to signal interactivity without jarring the user.
• Do preserve the RTL layout natively via HTML dir='rtl' attribute; do not override with CSS transforms or manual positioning.
• Do use FB Reforma for headlines and display text to reinforce institutional identity; reserve Open Sans for body and labels only.
• Do maintain 70px vertical spacing between major sections to create a calm, unhurried visual rhythm appropriate for civic infrastructure.

**Don't**

• Don't use Primary Blue for backgrounds or large surface areas—it is an accent color, not a canvas. Keep surfaces white or light gray.
• Don't apply shadows thicker than 0 15px 30px rgba(0, 0, 0, 0.15); excessive depth contradicts the clean, legible aesthetic.
• Don't mix FB Reforma and Open Sans weights arbitrarily; use 400 weight for both to maintain the refined, non-aggressive tone.
• Don't reduce button height below 48px or padding below 12px/24px; accessibility and touch-friendliness are non-negotiable.
• Don't add blur, glassmorphism, or transparency effects to cards or containers—the design relies on solid colors and borders for clarity.
• Don't override the RTL layout with LTR CSS; the HTML dir attribute is the source of truth for text direction and element flow.