You can make quick changes using the Basic tab or explore deeper customization through Palette & Typography.
How to personalize Colors:
- Navigate to the design studio ( Left sidebar → Acadlix → Design Studio)
- Choose Basic or Palette, as per your requirement.
- Click on the color that you want to change
- Set the color in hex code, or rgb, or just choose from the selection area
- Repeat the same for other colors that you want to change
- Click the Save Changes button.
Palette & Usage
This guide shows where each color role is applied across the system.
Primary
Used for main actions and highlights.
Backend
-
Homepage buttons (Let’s discuss, Get help now, Explore docs)
-
Action buttons (Add, Edit, Bulk apply, Refresh, Back, Template, Save, Import)
-
Tab highlight color
-
Form controls (Radio buttons, Checkboxes)
-
Student view actions (Enrolled courses, Assignment chips)
-
Settings & Add-ons toolbar, Active sidebar button
Frontend
-
Quiz action buttons (Start, Next, Back, Skip, Hint, Summary, Finish, Restart, Leaderboard, View answers)
-
Student Dashboard elements:
-
Student name
-
Tab buttons
-
Refresh button
-
Progress bar
-
Course header toolbar
-
Checkbox buttons
-
Update profile button
-
Secondary
Used for supporting actions and secondary emphasis.
Backend
-
Quiz question action button
Success
Indicates positive status.
Backend
-
Success order chip
-
Quiz: Result % text, “Add more” buttons (Options → Questions)
-
Results table → Pass chip
Frontend
-
Purchase history → Success chip
-
Forgot password → Success alert
-
Results table → Pass chip
-
In- result → questions → Correct status
-
Checkout button
Warning
Indicates pending or cautionary actions.
Backend
-
Pending order chip
-
Warning alerts in Paragraphs
-
Quiz leaderboard action button
-
View answer sheet button
Frontend
-
Purchase history → Pending chip
-
View answer sheet chip
Info
Indicates informational alerts or neutral actions.
Backend
-
Quiz result action button
-
Quiz subject modal alerts
-
Quiz advanced options info alerts
-
Forgot password → Info alert
Error
Indicates failed actions or errors.
Backend
-
Cancel buttons in modals
-
Delete actions (Quiz, Question, Statistic, Paragraph, Lesson, Assignment, Order)
-
Remove links (Lessons, Assignment resources)
-
Order failed chip
-
Form validation errors (Required fields)
-
Error alerts
-
Delete question option button
-
Results table → Fail chip
-
Delete category in Settings
Frontend
-
Checkout page → Remove course
-
Dashboard → Mark as Incomplete
-
Purchase history → Failed order chip
-
Quiz → No questions alert
-
In-question result → Incorrect status
-
Results → Failed chip
Grey Text
Indicates neutral/secondary text or skipped states.
Backend
-
Quiz result → NA chip
-
Quiz paragraph action icons
-
Quiz subject-wise action icons
Frontend
-
In-question result → Skipped status
-
Quiz result → NA chip