Section 6
Platform-Specific Standards
Guidelines for implementing the design system across Web, iOS, Android, and internal portals.
Web Applications
Browser Support
Support the latest two versions of major browsers:
- • Chrome (latest 2 versions)
- • Safari (latest 2 versions)
- • Firefox (latest 2 versions)
- • Edge (latest 2 versions)
Typography
Use CSS @font-face to load Myriad Pro (or fallback to system fonts). Ensure Arabic text uses GE Thameen with proper RTL support via dir="rtl".
CSS Framework
Use CSS custom properties (variables) for design tokens. Tailwind CSS is recommended for utility-first styling.
Performance
- • Target Lighthouse score ≥ 90 for Performance
- • Lazy load images and non-critical resources
- • Use modern image formats (WebP, AVIF)
Cross-Platform Standards
Loading States
- • Use skeleton screens for initial page loads
- • Spinner for actions taking 2-10 seconds
- • Progress bar for operations with known duration
- • Always provide feedback for user actions
Error Handling
- • Display user-friendly error messages
- • Provide clear recovery actions
- • Log technical details for debugging
- • Never expose internal system errors to users
Offline Support
- • Gracefully handle network failures
- • Cache critical data for offline access
- • Queue actions for sync when online
- • Clearly indicate offline status
Localization
- • Support English and Arabic as primary languages
- • Use ICU message format for pluralization
- • Store dates in ISO 8601 format
- • Display dates in user's locale preference