1. Bilingual Typography Architecture
English (Default Global Interface)
Business Setup
Infrastructure.
Why Outfit & Inter? Outfit matches the geometric sharpness of the Pistos logo (especially the arrow/1 motif), reinforcing a clean, modern brand. Inter is used for all body copy and UI elements due to its high legibility in dense forms and financial dashboards.
Arabic (Bilingual Necessity)
تأسيس الأعمال.
بنية تحتية موثوقة.
الضرائب والامتثال المالي
اختيار خطي Tajawal و IBM Plex ليس عشوائياً. تم دمجها ليعكسا الهوية الهندسية الدقيقة للعلامة التجارية، مع ضمان مقروئية تامة في الجداول المالية والبيانات القانونية المعقدة، تماماً كما تتطلبه المنصات الحكومية الرسمية في الإمارات.
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 Strategy
High-contrast, grayscale B2B assets.
A. Architecture & Scale (Monochrome)
To project stability and integration within the UAE economy, we use hyper-modern architectural photography (e.g., Dubai skyline, empty corporate interiors, glass structures).
The Rule: Convert to high-contrast grayscale to remove emotional bias and match the severe charcoal-black palette.
B. UI / Data Visualization
The strongest proof of competence is showing the "machine" at work. We use crisp, zoomed-in, unbranded snippets of data dashboards, calculators, and API flows.
The Rule: Never use 3D isometric graphics. Stick to strictly 2D flat visuals with 1px borders, simulating the exact CSS constraints of the final product.
C. The "Workspace" Reality
When human presence is required to imply service delivery, we show the environment—desks, servers, or legal documents—obscuring faces heavily. It is about the process, not the person.
Focus: Documentation, stamps, servers, clean desk setups.
5. Motion Rationale
As demonstrated by the scroll behavior of this deck, elements slide up slowly and settle into place. Fast, attention-seeking animations are not appropriate for a B2B professional audience. We use minimal, deliberate motion throughout.
- Speed: Extended durations (1.5s - 2.8s) for all major load events.
- Easing: Custom cubic-bezier curves to simulate physical mass settling into place.
- Prevention: Zero repetitive scrubbing, aggressive parallax, or janky scroll-jacking.
Core Web Vitals (CWV) Alignment
These rules are not just aesthetic; they are strictly aligned with technical performance goals. By relying on CSS-native transitions and avoiding heavy JS animation libraries (like Three.js or complex GSAP timelines on the public site), we ensure near-perfect scores for Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP).