1.8 KiB
Design System
The interface is flat, professional, content-first, and medium-to-compact density. The supplied product references establish a bright neutral canvas, white analytical cards, restrained borders, a violet primary accent, compact navigation, and a mobile-first learner experience. It uses semantic tokens instead of raw values in screens.
Foundations
- Persian typography: Dana when licensed assets are supplied; system sans fallback until then
- English typography: Inter with system sans fallback
- Spacing: 4/8px rhythm
- Default radius: 12px
- Motion: fast 150ms, default 200ms, slow 250ms
- Shadows: reserved for overlays and meaningful elevation
- Icons: Lucide only; no emoji navigation icons
Color tokens cover canvas, surface, elevated surface, text, muted text, border, primary, success, warning, danger, and focus. Light and dark themes are independently contrast checked.
The Designer dashboard prioritizes a single compact KPI row, a visibly stronger Needs Attention panel, readable trend charts, heatmaps, and comparison tables. The Builder uses the referenced three-column studio composition (block library, canvas, inspector) and mirrors it in RTL. Learner screens use focused phone-scale cards, persistent progress, and a five-item bottom navigation.
Accessibility
- WCAG AA text contrast
- visible 2-4px focus indicators
- 44px minimum interactive target
- keyboard navigation and alternatives for drag actions
- semantic headings, labels, status announcements, and error recovery
prefers-reduced-motionsupport- charts include a text summary or accessible table
Directionality
The document dir is set from locale. Logical CSS properties drive layout. Navigation, breadcrumbs, pagination, inspectors, drawers, directional icons, and charts are tested in both RTL and LTR.