Mashreq Neo

Overview

Mashreq Neo is a vibrant, forward-thinking digital banking platform designed for the modern Middle Eastern customer. The brand embodies 'Energetic Minimalism'—a design philosophy that pairs bold, warm accent colors (particularly the signature orange #ff5e00) with clean, accessible layouts and generous white space. The UI evokes confidence, growth, and everyday accessibility: banking feels less like a chore and more like an empowering daily ritual. The visual language combines the warmth of orange gradients with cool blues and bright yellows, creating a palette that feels both professional and approachable.

Mashreq Neo's voice is conversational, direct, and optimistic—never patronizing. The tone emphasizes clarity and action: 'Unlock lasting value from your savings, daily banking, investments & beyond.' Sentences are short, benefit-driven, and speak to real customer needs. The brand personality is that of a trusted financial partner who understands local markets and speaks the customer's language (literally—the site supports Arabic and English). Example sentence in brand voice: 'Your savings earn 6.25% interest p.a., and transfers are free worldwide—because banking shouldn't hold you back.'

Colors

The Mashreq Neo color system is built on a foundation of warmth and trust. Primary (#ff5e00) is the signature accent—a vibrant, energetic orange used exclusively on call-to-action buttons ('Sign In', 'Become A Customer', 'Customer Care'), interactive elements, and brand highlights. This color commands attention without aggression; it signals opportunity and forward momentum. Secondary (#ffdc00) is a bright, optimistic yellow deployed for highlights, badges, and supporting accents—it reinforces the 'rise everyday' brand promise. Tertiary (#1ca8dd) is a cool, professional blue used for secondary information, links, and status indicators, providing visual balance against the warm palette.

The surface stack is anchored in clean whites and near-whites: surface (#ffffff) for primary backgrounds

Typography

Mashreq Neo uses Bukra as its primary typeface, a locally-relevant Arabic-optimized font that pairs seamlessly with system fallbacks (-apple-system, Arial) for Latin characters. The type system is hierarchical and purposeful: display (56px, 700 weight) anchors hero sections and major announcements; headline-lg (40px, 700 weight) introduces key sections; headline-md (28px, 600 weight) breaks up content; title-lg (20px, 600 weight) labels subsections; body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry primary content; label-md (14px, 500 weight) and label-sm (12px, 500 weight) annotate buttons, badges, and metadata. Letter-spacing is minimal (0 to -0.02em) to maintain warmth and approachability. Line heights are generous (1.4x to 1.6x) to ensure readability on mobile and desktop

Layout

Mashreq Neo employs a fluid, mobile-first 12-column grid system with a maximum container width of 1280px. The page rhythm is driven by generous spacing: lg spacing (40px) separates major sections (hero, feature blocks, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The gutter width is 24px, creating a balanced rhythm across breakpoints. Hero sections occupy full viewport height with asymmetric layouts—text and CTAs on the left, hero imagery on the right—creating visual tension and guiding the eye toward primary actions. Feature cards are arranged in 3-column grids on desktop, collapsing to 2 columns on tablet and 1 column on mobile. Container padding is consistently {spacing.md} (24px) on desktop, reducing to

Elevation & Depth

Mashreq Neo uses subtle, layered shadows to create visual hierarchy without introducing visual noise. The elevation system comprises three levels: Level 1 (sm, 0 1px 3px rgba(0, 0, 0, 0.08)) for cards and containers at rest—barely perceptible, maintaining a flat aesthetic; Level 2 (md, 0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards, modals, and hover states—a gentle lift that signals interactivity; Level 3 (lg, 0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements, dropdowns, and high-priority overlays. Shadows use a warm black (rgba(0, 0, 0, ...)) rather than pure black to harmonize with t

Shapes

Mashreq Neo employs 'Soft-Technical' border-radius philosophy: sharp enough to feel modern and precise, rounded enough to feel approachable and friendly. Buttons and inputs use {rounded.DEFAULT} (4px)—a minimal radius that maintains geometric clarity while softening hard edges. Cards and containers use {rounded.lg} (8px) for a more pronounced softness, signaling they are content containers rather than interactive elements. Badges and pills use {rounded.full} (9999px) for maximum roundness, creating a capsule shape that feels playful and contemporary. Circular elements (avatars, icon buttons) u

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#ff5e00) with {colors.on-primary} (white) text, {typography.label-md} (14px, 500 weight), {rounded.DEFAULT} (4px), and padding 7px 15px for a compact, high-impact appearance. On hover, background shifts to #e84b25 with a 0.2s ease transition—no shadow added, maintaining visual simplicity. Button-secondary uses {colors.surface-variant} (#d2cec9) with {colors.on-surface} text for lower-priority actions; on hover, it darkens to #c4c4c4. Button-tertiary is transparent with a 1px border in {colors.primary}, useful for secondary CTAs in hero sections; on hover, it fills with {colors.primary-container} (#ffe6d5) while maintaining the border. All buttons have a minimum height of 40px to meet to

Do's and Don'ts

**Do**

• Do use primary (#ff5e00) exclusively for high-priority CTAs and interactive states—it commands attention and should never be diluted or overused.
• Do maintain generous white space around content blocks (lg spacing, 40px) to create visual breathing room and guide the user's eye to key actions.
• Do apply the full Material 3 color token stack (surface, surface-container-*, on-surface, on-surface-variant, etc.) to ensure consistent, accessible color usage across all states.
• Do use Bukra as the primary typeface for all headings and body text to maintain local relevance and brand consistency.
• Do transition all interactive elements (buttons, cards, inputs) with 0.2s–0.3s ease timing to create a responsive, tactile feel without feeling sluggish.
• Do pair warm orange accents with cool blue tertiary colors to create visual balance and prevent the palette from feeling one-dimensional.

**Don't**

• Don't use primary color (#ff5e00) for body text, backgrounds, or non-interactive elements—it will cause visual fatigue and dilute its impact on CTAs.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components; reserve maximum elevation for modals and floating elements only.
• Don't mix typefaces—Bukra + system fallbacks is the approved stack; avoid introducing additional fonts like Metropolis or custom web fonts that fragment the visual identity.
• Don't use border-radius values outside the defined scale (sm: 2px, DEFAULT: 4px, md: 6px, lg: 8px, xl: 12px, full: 9999px); arbitrary radii create visual inconsistency.
• Don't reduce padding or spacing below {spacing.sm} (12px) on interactive elements; touch targets must remain at least 40px tall and 40px wide for accessibility.
• Don't apply opacity or transparency to primary color (#ff5e00) for backgrounds; use the primary-container (#ffe6d5) token instead to maintain color harmony and readability.