E-learning Design system for Children learning

The following color system was designed to create a visually appealing, user-friendly interface while maintaining clarity and accessibility. This system ensures a cohesive and engaging experience for users, especially for an educational platform catering to children. Here's an overview of the chosen colors and their intended usage:

1. Primary Color

• Sky Blue (#4A90E2):
• This serves as the main brand color, symbolizing trust, calmness, and creativity. It's primarily used for:
• Call-to-action buttons (CTA).
• Primary headers and highlighted elements.
• Active states for navigation.

2. Secondary Color

• Warm Orange (#FF8C42):
• Adds vibrancy and energy to the design, balancing the coolness of the primary color. It's used for:
• Secondary buttons.
• Icons or elements requiring user attention.
• Accents that complement the primary blue.

3. Tertiary Color

• Peach Pink (#FF80AB):
• A soft and cheerful hue, providing variety and visual interest. It is suitable for:
• Illustrations or decorative elements.
• Subtle backgrounds to enhance design appeal.
• Notifications or highlights.

4. Neutral Colors

• Neutral Gray (#B8B9BA):
• A versatile shade that provides balance and contrast to the vibrant colors. Used for:
• Text (subheadings, placeholders).
• Backgrounds for secondary elements.
• Borders and separators.

5. Warning Color

• Amber Yellow (#FFC107):
• This color signifies caution or potential issues that require user attention. It is not critical but serves as a heads-up for users. It is typically used for:
• Warning messages or alerts.
• Icons or elements indicating non-critical issues.
• Highlighting optional actions or reminders.

6. Error Color

• Bright Red (#FF0F0F):
• A bold and urgent color to signal critical issues or mistakes that need immediate action. It ensures the error is noticeable. Used for:
• Error messages or validations.
• Icons or elements indicating failed actions.
• Critical system notifications.

7. Confirmation Color

• Lime Green (#4CAF50):
• A positive and reassuring color representing success or completed actions. It conveys a sense of accomplishment and reliability. Ideal for:
• Success messages or confirmations.
• Positive feedback icons.
• Elements indicating completion, like progress bars or checkmarks.