ManDa - Color System

ManDa Color System – Accessible UI Colors for a Smart Campus Platform

Product & Platform

ManDa is a fictional smart campus management system designed for web-based interfaces across desktop and tablet. It serves multiple user types including students, parents, teachers, and finance administrators.

Color System Overview

The system includes a structured set of color tokens across:

• Primary: A deep slate blue that communicates trust and clarity
• Accent Families: Six accessible accent groups used for categorization and grouping
• Neutrals: A cool, institutional gray range used for structure and readability
• System Colors: Success, warning, error, and info tokens for functional states
• No tertiary color was introduced, as role coverage was sufficiently handled via accent families

Brand Principles & Emotional Direction

The system is guided by three principles: Trustworthy, Friendly, and Inclusive.

Colors were chosen to feel calm, institutional, and legible across roles without skewing toward any single user group. Accent hues bring clarity without overpowering the interface.

Accessibility

All foreground/background combinations were tested for WCAG 2.1 AA compliance. Primary and system colors were deliberately restricted from certain roles (e.g., no text-on-primary in dark mode) to maintain legibility. Each token was verified for contrast, and decisions avoided ambiguity between semantic and non-semantic colors.

Color in Use

Every component shown — buttons, tags, cards, chips — uses color tokens directly. No custom overrides were used. Light and dark themes share the same token structure to ensure theme parity and system maintainability.

Design Philosophy

This project intentionally moves beyond traditional “color palette” design to demonstrate constraint-based, scalable thinking. It shows how to plan for edge cases, document usage rules, and build color systems that are ready for real product environments.