Nanyang Talent Group Design System
A bespoke, clean, institutional visual language for Singapore education. Built upon Deep Navy, Nanyang Red, Globe Sky Blue, and Warm Gold, emphasizing clarity, typography, and accessibility without noisy visual clutter.
1. Brand Palette & Contrast Standards
Calibrated for WCAG 2.1 AA accessibility and high-contrast readability.
2. Typography Hierarchy
Clean bilingual system utilizing Inter/Manrope for English and Noto Sans SC / PingFang for Chinese.
Practice on techniques of Water Colour, Gouache and Oil Painting helps students lay a solid foundation in the usage of colour.
3. Buttons & Action Hierarchy
Accessible focus states, active micro-animations, and distinct semantic variants.
4. Badges & Metadata Chips
Clear tags for course categories, historical marks, and content verification states.
5. Cards & Content Containers
Refined top-border accents without excessive drop shadows or cartoon cards.
Foundational Structure
Subtle borders, clean typography, and balanced white space suited for institutional reading.
Institutional Pillar
Anchored with a 4px Deep Navy top border, ideal for school history and academic pathway cards.
Nanyang Signature
Highlighted with signature Nanyang Red for premier courses and seasonal enrollment announcements.
6. Accessible Form Controls
Clean inputs with proper focus outlines, helper texts, and error validations.
Enter name as per identification
Please provide a valid email format.
7. Breadcrumbs & Bilingual Typography
Schema-compliant breadcrumbs and dual-language typography utilities.
Restrained, Institutional Animation Principles
All animations utilize hardware-accelerated CSS keyframes (`ny-animate-fade-in`, `ny-animate-slide-up`, `ny-animate-pulse`) capped between 150ms and 350ms. No distracting gaming effects. Full support for `@media (prefers-reduced-motion: reduce)` automatically neutralizes motion for users with vestibular sensitivities.