A color system made for Arabic-speaking learners (16–30). Every shade has a clear purpose.
This system is grounded in psychology, accessibility, culture, and reward science.
Each primary color ties to a human need: Indigo for competence, Coral for motivation, Mint for connection. UI choices support real motivation, not gimmicks.
Coral and lemon work together to make rewards feel satisfying without feeling pushy.
All core colors meet WCAG 2.1 AA contrast for text. Coral is used only in large text for best readability.
Research in MENA markets shows a strong preference for violet-indigo and warm gold tones. This palette aligns with those preferences.
Each color has a single purpose. Mixing roles makes the message unclear.
Seven shades from deep to near-white. Use these for backgrounds, states, and glass effects.
Each semantic color has a single purpose. Mixing roles makes the message unclear.
Each discipline uses a base accent plus soft and dim variants for UI hierarchy, tone, and texture.
Cool-leaning greys keep the brand tone even in long text. Made for mobile-first interfaces.
This palette is tuned for Arabic-speaking, mobile-first learners aged 16–30.
Signals mastery and focus. Used for headers, emphasis, and trusted brand moments.
Used only for rewards and progress streaks. Makes reward moments feel clear and exciting.
Used for success and confirmation. High contrast from Coral keeps it clear for all users.
Used only for earned rewards (coins, stars). Keeps gold meaningful and rare.
Use for errors and stops. Designed to stay clear even for colorblind users.
Dark text and UI elements that feel modern and digital without being harsh.
All primary text colors meet WCAG 2.1 AA. Coral is used only in large text for readability.
A true dark mode palette tuned for night use and AMOLED screens. Not just inverted.
- +20 lightness for dark UI.
- 5:1 contrast on the main dark background.
- +18 lightness for dark backgrounds.
- Rewards still feel bright and punchy.
- Neon contrast on dark cards (5.1:1).
- Clear success signal without glare.
- 8.3:1 contrast on dark background.
- Used only for major reward moments.
Stick to these roles in both light and dark mode to keep meaning clear.
| Color | Light Mode Use | Dark Mode Equivalent | Never Use For |
|---|---|---|---|
| Electric Indigo | Primary buttons, active nav, headers, skill nodes, links, AI critique UI | Neon Indigo #7C66F5 — same role, +20 lightness for contrast | Errors, streaks, reward events, success indicators |
| Coral Punch | Streak fire, XP bursts, level-up banners, coin cards, reward moments only | Bright Coral #FF6E50 — recalibrated for dark contrast | Navigation, body text, form inputs, errors, informational states |
| Neon Mint | Correct answers, lesson completion, progress bars, skill unlocked | Hyper Mint #00E8A8 — full neon on dark backgrounds | Decorative use, brand headers, streak/reward UI |
| Lemon Zest | XP numbers, coin icons, star ratings, achievement badges only | Pure Gold #FFD000 — 8.3:1 on dark, unmissable | Primary buttons, body text, backgrounds, error or caution states |
| Hot Rose | Wrong answers, form validation errors, depleted hearts | #E83257 works on dark too — same value, sufficient contrast | Any decorative, branding, neutral, or positive state |
| Surface | #F8F7FD — cool-tinted near-white, not pure #FFFFFF | 4-layer stack: #0A0816 → #120F24 → #1A1730 → #24203E | Never pure #FFFFFF (too stark) or #000000 (too flat) |