Wayl

Overview

Wayl is a comprehensive fintech platform designed for Iraqi businesses and entrepreneurs, integrating electronic payments, professional invoicing, and ready-made e-commerce solutions into a single unified dashboard. The design system embodies 'Accessible Fintech Modernism'—a philosophy that prioritizes clarity, confidence, and ease of use through bold accent colors (vibrant purple #9f4fff and electric blue #0090ff), clean typography, and purposeful white space. The aesthetic evokes trust and innovation simultaneously: the interface feels both professional enough for enterprises and approachable enough for solo merchants. The emotional response is one of empowerment—users should feel capable of managing complex financial operations without friction.

Wayl's voice is direct, professional, and locally grounded. The brand speaks in clear, action-oriented language without corporate jargon. Vocabulary emphasizes simplicity and capability: 'start now,' 'manage easily,' 'grow your business.' The tone is confident but never condescending, supportive but never patronizing. Example sentence in brand voice: 'ابدأ مجاناً وأطلق متجرك على الإنترنت في دقائق—بدون برمجة، بدون تعقيد.'

Colors

The Wayl color system is built on three pillars: a neutral foundation (whites, grays, and near-blacks for text and surfaces), two primary accent colors for interaction and hierarchy, and a tertiary warm accent for highlights and secondary CTAs. Primary (#9f4fff, a vibrant purple) is the signature brand color used exclusively on primary call-to-action buttons, active states, and key interactive elements—it commands attention and signals the most important user actions. Secondary (#0090ff, electric blue) supports primary as an alternative accent for secondary CTAs, badges, and informational highlights. Tertiary (#ffbb26, warm golden-yellow) is reserved for tertiary actions, success states, and decorative accents that add warmth without competing for focus. Error (#ff2b3a, vivid red) is used

Typography

The typography system uses a single, versatile typeface family—Graphik with Kurdish-Rubik and SN Pro as fallbacks—to ensure consistent rendering across Arabic and Latin scripts and maintain visual cohesion across the RTL interface. Display (76px, 600 weight, -0.02em tracking) is reserved for hero headlines and major page titles; Headline-lg (48px, 600 weight) anchors section headers; Headline-md (32px, 600 weight) structures subsections; Title-lg (24px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent descriptions; Body-md (16px, 400 weight, 24px line-height) is the default body text and form labels; Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to button text, badges, and UI labe

Layout

Wayl uses a 12-column fluid grid with a maximum container width of 1440px, allowing the design to scale gracefully from mobile (single column) to desktop (full-width layouts with generous side margins). The gutter (horizontal spacing between columns) is fixed at 24px, and the container padding on mobile is 24px on each side, reducing to 40px on larger screens. White space is used strategically to create visual breathing room and guide attention: section separation uses lg spacing (40px) vertically, while card-to-card spacing within a section uses md spacing (24px). The spacing scale is semantic and hierarchical—xs (4px) for micro-interactions like icon padding, sm (12px) for form field padding and tight component spacing, md (24px) for standard card padding and section margins, lg (40px) f

Elevation & Depth

Depth in Wayl is conveyed through a three-tier shadow system that mimics subtle light diffusion rather than harsh drop shadows. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.05)) is applied to subtle interactive elements like hover states on list items and light card lifts—barely perceptible but present. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is the default shadow for cards, modals, and primary interactive surfaces; this is the most frequently used elevation and creates a clear visual separation from the background. Level 3 (lg elevation: 0 8px 24px rgba(0, 0, 0, 0.12)) is re

Shapes

Wayl employs 'Refined Geometric Pragmatism'—a shape philosophy that balances approachability with professionalism through carefully calibrated border-radius values. Buttons use full radius (9999px) to create a pill-shaped, friendly appearance that signals 'click me' without ambiguity; this applies to all button variants (primary, secondary, ghost). Cards and containers use lg radius (12px) to soften corners while maintaining a structured, business-appropriate aesthetic. Form inputs use md radius (8px), slightly less rounded than cards, to create a subtle visual distinction between content cont

Components

Action Elements Buttons are the primary interactive component and come in three variants: primary (background: #9f4fff, color: white, padding: 12px 24px, height: 48px, border-radius: 9999px, font-weight: 600, font-size: 14px), secondary (background: #0090ff, color: white, same padding and radius), and ghost (background: transparent, color: #9f4fff, border: 1px solid #90a1b9). All buttons use transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes. Hover states darken the background by 10–15% and add a contextual shadow (0 6px 16px rgba(primary, 0.25)); active states darken by 20% and remove the shadow to create a 'pressed' effect. Focus states add a 3px inset ring at rgba(159, 79, 255, 0.1) and outline: none to override browser defaults. Disabled button

Do's and Don'ts

**Do**

• Do use primary purple (#9f4fff) exclusively on primary CTAs and active states—never dilute it with secondary uses or it loses impact.
• Do maintain the 8px spacing unit religiously; all margins, padding, and gaps should be multiples of 8px to preserve visual rhythm.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and modals by default; reserve lg elevation only for floating elements that must sit above all content.
• Do use Graphik/Kurdish-Rubik/SN Pro as the single typeface family across all text; this ensures consistent rendering in both Arabic and Latin scripts and maintains brand cohesion.
• Do test all interactive elements (buttons, inputs, links) with keyboard navigation and screen readers—focus states must be visible and semantic HTML must be preserved.

**Don't**

• Don't use near-black (#101828) as a background color; it reduces contrast and makes text hard to read. Use white (#ffffff) or light grays (#f9fafb, #f3f4f6) for surfaces.
• Don't apply shadows to text elements or use text-shadow for emphasis; reserve shadows for elevation of containers only. Use font-weight or color changes for text emphasis instead.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm: 4px, DEFAULT: 6px, md: 8px, lg: 12px, xl: 24px, full: 9999px) to maintain visual consistency.
• Don't disable hover states on interactive elements; even if an element is disabled, it should have a clear visual indicator (grayed out, cursor: not-allowed) rather than no feedback at all.