32 خطوط
1.8 KiB
Markdown
32 خطوط
1.8 KiB
Markdown
# 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-motion` support
|
|
- 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.
|