Design System
Celestial Academy Design System
مَدْرَسَةٌ سَمَاوِيَّةٌ لِلُغَةِ القُرْآنِThe Sabiq interface should feel calm, premium, reverent, and focused — a guided path into the Arabic of the Qur'an.
Color Tokens
Obsidian
Primary background
Slate
Card surface
Deep Slate
Section wells
Gold
Primary accent
Gold Soft
Highlights, shimmer
Bronze
Grounding (majrūr)
Silver
Primary text on dark
Silver Muted
Secondary text
Cream
Manuscript warmth
Emerald
Success
Amber
Warning
Rose
Danger
Typography
Arabic — Amiri
بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيمِ
Display — Cormorant Garamond
The Language of Revelation
Body — IBM Plex Sans
Sabiq is a self-paced, app-taught Arabic-of-the-Qur'an learning journey. The Teaching Board carries the lesson. Ustadh AI, Library, Ledger, Caravan, Majālis, and optional Tutors support the student around it.
Visual Utilities
.celestial-bg
.sabiq-glass-card
.sabiq-gold-divider
Grammar Visual States
Grammar names appear later. Visual meaning comes first.
الرَّحْمٰنُ
Marfūʿ
gold halo
الرَّحْمٰنَ
Manṣūb
silver focus
الرَّحْمٰنِ
Majrūr
bronze grounding
يَرْحَمْ
Majzūm
muted restraint
Support Ladder
Core learning always appears before social or tutor escalation.
- 1Teaching Board / Teach Me
- 2Audio / Replay readiness
- 3Vocabulary Review
- 4Library Resource
- 5Ledger
- 6Ustadh AI
- 7Caravan
- 8Majlis
- 9Optional Tutor Support
Beautiful Layer Example
Root Orrery is the first Beautiful Layer feature: a celestial visualization of Arabic root families.
See ر ح م as an orreryThreshold Ceremonies
Thresholds use the Celestial Academy motion language: gold light, quiet stars, slate glass, and reduced-motion safe transitions.
Preview Threshold CeremoniesPhase Journey Map
The Journey Map turns the curriculum into a calm celestial path, showing where the student is, what supports them, and what opens next.
Open the Path