Ofek (אופק)

Overview

Ofek is an Israeli educational content aggregation platform that unifies learning environments, textbooks, digital tools, and interactive resources for educators and students. The design system embodies "Playful Clarity"—a balance between vibrant, energetic visual language and functional, accessible information architecture. The aesthetic draws from contemporary educational UI patterns: bold primary purples (#5750fa) paired with soft lavender surfaces, accented by playful greens and warm yellows for status and engagement signals. The emotional response is one of approachability and discovery—users feel invited to explore, not overwhelmed by complexity.

Ofek's voice is warm, encouraging, and direct. The platform speaks to educators and learners as collaborative partners, using action-oriented language and celebratory tone. Vocabulary emphasizes agency ("choose," "discover," "create") and community ("together," "shared," "connected"). Example sentence in brand voice: "מה תרצו ללמד היום?" (What would you like to teach today?)—a question that positions the educator as the protagonist.

Colors

The color system is anchored by a vibrant, saturated primary purple (#5750fa) used exclusively for interactive elements, CTAs, and focus states. This purple commands attention without aggression, evoking trust and creativity. The surface stack uses cool, desaturated purples and grays (#f6f5ff, #ecebff, #ececf0) to create visual breathing room and reduce cognitive load. Secondary green (#6ddc98, #89e0aa) signals success, completion, and positive actions—used sparingly on achievement badges and confirmations. Tertiary yellow (#facd50, #ffdb7a) adds warmth for warnings and highlights without alarm. Error red (#d71515) is reserved for destructive actions and validation failures. Text hierarchy is maintained through on-surface (#1b1a38, a near-black) for primary content and on-surface-variant (

Typography

The type system prioritizes clarity and warmth through a Hebrew-first font stack: AlmoniNeue (primary), Spacer (accent/UI), and Arial (fallback). Display and headline levels (40px–32px) use 600–700 weight to establish hierarchy and draw focus to section titles and hero messaging. Body text (18px–16px) maintains 400 weight with 1.5–1.75 line-height (28px–24px) for comfortable reading in both RTL and LTR contexts. Labels and UI text use Spacer at 12px–14px with 600 weight and 0.01em letter-spacing to ensure legibility in dense layouts. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) when placed over busy gradient backgrounds (e.g., hero section) to maintain contrast. Headings in the hero use white text (rgb(255, 255, 255)) on the primary purple gradient, with -0.02

Layout

Ofek uses a 12-column fluid grid with a max-width of 1280px, allowing responsive reflow on mobile and tablet. The page rhythm is built on a 24px gutter (md spacing) between major sections, with 40px (lg spacing) separating hero from content blocks. Container padding uses 24px on desktop, reducing to 12px (sm spacing) on mobile to maximize content area. The hero section spans full-width with a vibrant gradient background (primary purple #5750fa transitioning through lighter purples), establishing immediate visual identity. Search and filter components sit in a 800px max-width container within the hero, centered and elevated via 0 2px 5px rgba(0, 0, 0, 0.26) shadow. Card-based content sections use 12px (sm spacing) gaps between items in a 3–4 column grid on desktop, collapsing to 1–2 columns

Elevation & Depth

Elevation is conveyed through a shadow-based hierarchy with three distinct levels. Level 1 (sm): 0 1px 2px rgba(0, 0, 0, 0.06)—used for subtle hover states on list items and inactive cards. Level 2 (md): 0 2px 5px rgba(0, 0, 0, 0.26)—applied to standard cards, search boxes, and dropdown panels; this is the default elevation for interactive surfaces. Level 3 (lg): 0 3px 8px rgba(0, 0, 0, 0.15)—reserved for modals, popovers, and elevated card states on hover. Transitions between levels use cubic-bezier(0.75, -0.02, 0.2, 0.97) over 0.3s to create a smooth, spring-like motion. The hero section use

Shapes

The shape philosophy is "Soft-Technical"—combining rounded corners with functional clarity. Buttons and interactive elements use 4px (sm, 0.25rem) border-radius for a slightly softened, approachable feel that avoids pure rectangles while maintaining professional clarity. Cards and containers use 12px (md, 0.75rem) for a more pronounced roundness that signals content grouping and visual separation. Input fields and search boxes use 8px (DEFAULT, 0.5rem) to balance softness with input-specific conventions. Badges and status indicators use 9999px (full) for perfect circles or pills, emphasizing t

Components

Action Elements Buttons follow a two-tier system: primary (solid purple #5750fa on white, 8px 16px padding, 40px height, 4px radius) for main CTAs and secondary (transparent with 1px purple border, same padding/height) for alternative actions. Primary buttons use Spacer font at 24px 700 weight for visual prominence. On hover, primary buttons darken to #4a42d9 and gain md shadow (0 2px 5px rgba(0, 0, 0, 0.26)); secondary buttons fill with primary-container (#ecebff). Transitions use 0.3s cubic-bezier timing. Focus states add a 3px ring of rgba(87, 80, 250, 0.1) around the button.

Containers & Surfaces Cards use surface-container-lowest (#eae9f5) background with md shadow (0 2px 5px rgba(0, 0, 0, 0.26)) and 12px border-radius. On hover, background shifts to surface-container-high (#

Do's and Don'ts

**Do**

• Do use primary purple (#5750fa) exclusively for interactive elements, CTAs, and focus states—never for backgrounds or body text.
• Do maintain the 24px gutter between major sections and use the semantic spacing scale (xs/sm/md/lg) consistently across all components.
• Do apply the cubic-bezier(0.75, -0.02, 0.2, 0.97) transition timing for all hover and state changes to create the brand's characteristic spring-like motion.
• Do use AlmoniNeue as the primary typeface for all body and heading text to maintain Hebrew-first accessibility and warmth.
• Do layer elevation through the three-tier shadow system (sm/md/lg) rather than relying on color alone to convey hierarchy.

**Don't**

• Don't use secondary green (#6ddc98) or tertiary yellow (#facd50) as primary accent colors—reserve them for status badges and success states only.
• Don't apply border-radius larger than 12px (md) to buttons or interactive controls; use full (9999px) only for badges and pills.
• Don't hardcode hex colors inside component definitions; always reference the color token system ({colors.primary}, {colors.surface-container}, etc.).
• Don't use system fonts or generic sans-serif fallbacks in place of the Spacer/AlmoniNeue stack; this breaks the brand's distinctive voice.
• Don't exceed 0.3s transition duration for hover and focus states; faster feels snappy, slower feels sluggish and breaks the playful, responsive feel.