UI Design System

UI Design System & Theme

Core Philosophy

• Aesthetic: Premium, Modern, "Physical AI" (Dark, Sleek, Futuristic).
• Feel: Smooth, Responsive, High-End.

Typography

• Font: Poppins (Geometric Sans-Serif).
• Weights: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold).
• Usage: Clean, legible, widely spaced.

Color Palette (Dark Mode - Primary)

• Background: linear-gradient(135deg, #1a1f28 0%, #161b23 50%, #0f1419 100%)
• Primary Accent: #2d7d6c (Teal/Greenish) used in buttons and highlights.
• Text: #ededed (Off-white for readability).
• Borders: Subtle, often rgba(255, 255, 255, 0.1).

Components

• Buttons: Rounded corners, smooth hover transitions, subtle shadows.
• Cards: Glassmorphism effect (blur + transparency), rounded corners (12px or 16px).
• Inputs: Rounded (24px), borderless or subtle border, focus rings.
• Dropdowns: Floating, animated slide-in, shadow depth.

Animations

• Transitions: all 0.2s ease or cubic-bezier for premium feel.
• Keyframes: fadeIn, slideIn, dropdownSlideIn.

CSS Structure

• Global: app/globals.css (Tailwind + Variables).
• Docusaurus: textbook/src/css/custom.css (Overrides).
• Modules: styles.module.css for complex components (like Chatbot, Dropdown).