1. Bilingual Typography Architecture
English (Default Global Interface)
Business Setup
Infrastructure.
Why Outfit & Inter? Outfit perfectly matches the geometric sharpness of the Pistos logo (especially the arrow/1 motif), enforcing a modern, tech-forward brand. Inter is utilized for all body copy and UI elements due to its unparalleled legibility in dense forms and financial dashboards, signaling operational competency.
Arabic (Bilingual Necessity)
تأسيس بنيوي.
Why Bilingual Early? In the digitized UAE market, perfectly balancing a global English interface with an authentic Arabic counterpart (not a literal translation) is the strongest signal of "Local Clout" and government integration. Tajawal was selected for headings because its geometric architecture mirrors Outfit perfectly. IBM Plex handles the Arabic body copy due to its precision with dense financial data.
2. Color System (Staggered Flow)
Why these choices? The palette is strictly derived from the Pistos logo. We avoid generic blues (too common in consulting) and rely heavily on Black for absolute authority. Deep Crimson is used sparingly as the primary conversion color.
Crucially: The interface will be Light Mode Only. We are selling B2B financial and legal infrastructure; reading dense tax codes or legal documents requires high contrast paper-like visuals, not gaming-style dark modes.
3. Component Architecture
Interactive Elements
Iconography: Lucide Library
Why Lucide Icons? We selected this open-source library because its stroke-based (not solid) design provides a technical, wireframe aesthetic perfectly complementing our flat system. They imply "software infrastructure" and financial compliance, avoiding the cartoonish look of solid vector illustrations.
Why "Flat" design? We are avoiding soft drop-shadows and extreme roundness. The design language is crisp, utilizing hard 1px borders and subtle 4px corner radii. This aesthetic feels faster, more technical, and more secure—reminiscent of high-end dashboards (like Stripe or Xero) rather than playful consumer apps.
4. Imagery & Motion Rationale
The Restrained Motion Rules: As demonstrated by the very scroll unlocking this page, elements slide up slowly (2.8s) and lock into place natively. As discussed regarding Core Web Vitals (CWV), hyper-fast animations degrade the professional B2B tone. Our rule: slow speeds, cubic-bezier easing to simulate mass, and zero repetitive scrubbing.
Image Strategy: We will actively avoid generic stock photos of smiling models. Imagery must focus on high-contrast architectural structures (the Dubai skyline, modern corporate interiors) or clean data visualizations, firmly embedded within sharp 1px borders without feathering or blur.