Design Brief: Color System

Your design is well-structured, clear, and visually polished. It meets most of the design task requirements and aligns with evaluation criteria. Here’s a detailed breakdown of what works and what can be improved.

🔹 What You Did Well

✅ 1. Clean & Well-Organized Layout

• Everything is structured properly.
• Sections for Primary, Secondary, System, and Neutral colours are clearly separated.
• The UI example is practical and easy to understand.

💡 Minor Improvement:

• Tertiary colours aren’t explicitly labelled. If they’re included, just mark them clearly.

✅ 2. Strong Color Rationale

• You explained why each colour was chosen and how it connects to LMS branding.
• The emotional targeting (trust, motivation, urgency) is well thought out.

💡 Possible Enhancement:

• A quick summary of how colours stay consistent across the UI would add more depth.

✅ 3. Good Accessibility & WCAG Compliance

• All colours meet AA contrast standards.
• The secondary colour (#1A4DCC) is AAA compliant, which is a strong accessibility win.
• Text on backgrounds is easy to read.

💡 Improvement Opportunity:

• Show grayscale or high-contrast mode variations for users with colour blindness.

✅ 4. Practical UI Example

• The tablet UI mockup effectively demonstrates colour usage.
• Primary, secondary, and system colours are applied in buttons, alerts, and navigation.

💡 Small Refinement:

• More examples of secondary colour usage (links, hover states, backgrounds) would strengthen the case.

🔸 What Can Be Improved

⚠️ 1. Show UI States (Hover, Disabled, Dark Mode)

• The design is strong in static form, but how do these colours look in different states?
• 💡 Fix:
• Add hover, active, and disabled states for buttons and text.
• Show dark mode variations (contrast might shift).

⚠️ 2. Slightly Darken Warning Color

• The warning colour (#A36B00) is readable but may lack contrast in lighter versions.
• 💡 Fix:
• Adjust lighter shades to improve visibility.

⚠️ 3. More UI Context for Greyscale Usage

• Grey colours are well-defined, but how they work in UI text isn’t fully shown.
• 💡 Fix:
• Add examples of primary, secondary, and disabled text styles in an actual UI component.

🌟 What Works Well

✅ Clean layout with logical sections.

✅ Color choices are well-explained and match LMS branding.

✅ Meets accessibility standards, ensuring a good user experience.

✅ Real UI examples make the design practical.

Your work is high-quality and well-structured—just a few refinements will strengthen it. 🚀

Hi Olha,

This is a well-thought-out and structured colour system, especially for an LMS platform where clarity and accessibility are key. I appreciate the detailed rationale behind each colour choice, ensuring usability while maintaining WCAG AA compliance.

The contrast ratios are impressive, making sure the UI remains legible and inclusive. The primary and secondary colours work well together, creating a sense of trust and professionalism, while the system colours differentiate status indicators without overwhelming the design.

This is a solid and thoughtful execution. Great job!