turbo-design

Introduction

The "turbo-design" project aims to create a comprehensive and modern design system for an online education coaching platform. The focus is on developing a landing page that effectively attracts potential students by highlighting key features such as testimonials and course highlights. The design system will be clean, minimal, and inspired by Material UI, ensuring accessibility and a modern aesthetic.

System Overview

The design system will be inspired by a modern and creative EdTech platform UI design style, focusing on vibrant visuals and clear messaging. The turbo-design project will deliver a structured, reusable design system tailored for an online education coaching platform. This system will include a responsive grid layout, a well-defined color palette, typography, UI components, and design tokens. The goal is to create a cohesive and visually appealing user interface that enhances user engagement and supports interactive elements like video testimonials and course previews.

Functional Requirements

• As a User, I should be able to view video testimonials on the landing page.
• As a User, I should be able to interact with course previews to learn more about the offerings.
• As a User, I should be able to read student success stories to gain confidence in the coaching classes.

User Personas

• Prospective Student: Individuals looking for online coaching classes to enhance their skills or knowledge.
• Current Student: Enrolled students who may provide testimonials or feedback.
• Administrator: Manages the content and updates on the landing page.

Visuals Colors and Theme

• The design will incorporate vibrant colors and engaging visuals inspired by the provided reference design style.
• primary: #1A73E8 (a deep blue for brand identity)
• primary_light: #E8F0FE (a lighter tint of primary for hover states)
• secondary: #FF7043 (a coral hue for headlines and emphasis)
• accent: #00C853 (a vibrant green for CTAs and active states)
• highlight: #FFC107 (a warm amber for hover states and notifications)
• bg: #FFFFFF (a clean white background)
• surface: rgba(255, 255, 255, 0.9) (a slightly translucent white for cards/panels)
• text: #202124 (a dark gray for primary text)
• text_muted: #5F6368 (a softer gray for secondary text)
• border: rgba(0, 0, 0, 0.1) (a subtle border color)

Signature Design Concept

For the turbo-design project, the landing page will feature an interactive "Course Galaxy" concept. Users will navigate through a 3D galaxy map where each star represents a different course. Hovering over a star will reveal a brief course description, while clicking will open a detailed course preview. Video testimonials will be integrated as floating video orbs that users can click to watch. This concept will be brought to life using @react-three/fiber for 3D interactions and framer-motion for smooth animations and transitions.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, providing a layered depth experience as users scroll. Decorative elements like stars and video orbs will move at different speeds, creating an immersive storytelling environment. Internal pages will adopt a "static" model to maintain clarity and focus on content.

Non-Functional Requirements

• The design system must be responsive across all devices (mobile, tablet, desktop).
• The UI should maintain a high level of accessibility, adhering to WCAG standards.
• The system should support both light and dark modes for user preference.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• AI Models: GPT 5.4 for user-friendly responses
• AI Tools: Litellm for LLM Routing
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The design system will be primarily used for an online education platform.
• The platform will support interactive elements like video and 3D models.
• The system must be scalable to accommodate future updates and expansions.

Glossary

• UI/UX: User Interface/User Experience
• WCAG: Web Content Accessibility Guidelines
• CTA: Call to Action
• 3D: Three-Dimensional

This document outlines the comprehensive design system for the turbo-design project, ensuring a modern, engaging, and accessible user experience for an online education coaching platform.