240405/LearnIT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Telas de login e dashboard de estudante feito

Browse Source
This commit is contained in:
240405
2026-05-07 21:10:30 +01:00
parent 547d5f5484
commit c1d1a0fce1
44 changed files with 6740 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
docs/UI_DESIGN_GUIDELINES.md
View File

@@ -12,59 +12,60 @@
## 🎨 COLOR PALETTE
### Primary Colors (Extracted from EPVChat Design)
### Primary Colors (New EPVC Color Scheme)
```dart
class AppColors {
// Primary Brand Colors
static const Color primaryBlue = Color(0xFF4A90E2); // Light blue from gradient
static const Color primaryTeal = Color(0xFF5AC8FA); // Teal/light blue from UI
static const Color primaryOrange = Color(0xFFFF9500); // Orange from logo
static const Color primaryTeal = Color(0xFF82C9BD); // Main teal color - PRIMARY
static const Color primaryOrange = Color(0xFFF68D2D); // Accent orange - SECONDARY
// Gradient Colors
static const Color gradientStart = Color(0xFF4A90E2); // Light blue
static const Color gradientEnd = Color(0xFF5AC8FA); // Teal
static const Color gradientStart = Color(0xFF82C9BD); // Teal gradient start
static const Color gradientEnd = Color(0xFF6AB8A8); // Darker teal gradient end
// Secondary Colors
static const Color secondaryBlue = Color(0xFF2E7CD6); // Darker blue
static const Color accentTeal = Color(0xFF30B0C7); // Deeper teal
static const Color secondaryTeal = Color(0xFF6AB8A8); // Darker teal
static const Color accentTeal = Color(0xFF5AA69A); // Lighter teal accent
static const Color lightOrange = Color(0xFFF7A960); // Lighter orange
// Neutral Colors
static const Color background = Color(0xFFF8F9FA); // Light gray background
static const Color surface = Color(0xFFFFFFFF); // White surfaces
static const Color cardBackground = Color(0xFFFFFFFF); // White cards
static const Color background = Color(0xFFF8F9FA); // Light gray background
static const Color surface = Color(0xFFFFFFFF); // White surfaces
static const Color cardBackground = Color(0xFFFFFFFF); // White cards
// Text Colors
static const Color textPrimary = Color(0xFF1A1A1A); // Primary text
static const Color textSecondary = Color(0xFF6B7280); // Secondary text
static const Color textHint = Color(0xFF9CA3AF); // Hint text
static const Color textPrimary = Color(0xFF1A1A1A); // Primary text
static const Color textSecondary = Color(0xFF6B7280); // Secondary text
static const Color textHint = Color(0xFF9CA3AF); // Hint text
// Status Colors
static const Color success = Color(0xFF10B981); // Green for success
static const Color warning = Color(0xFFF59E0B); // Amber for warnings
static const Color error = Color(0xFFEF4444); // Red for errors
static const Color info = Color(0xFF3B82F6); // Blue for info
static const Color success = Color(0xFF10B981); // Green for success
static const Color warning = Color(0xFFF59E0B); // Amber for warnings
static const Color error = Color(0xFFEF4444); // Red for errors
static const Color info = Color(0xFF3B82F6); // Blue for info
// Interactive Colors
static const Color buttonPrimary = Color(0xFF4A90E2); // Primary button
static const Color buttonSecondary = Color(0xFFE5E7EB); // Secondary button
static const Color iconActive = Color(0xFF4A90E2); // Active icons
static const Color iconInactive = Color(0xFF9CA3AF); // Inactive icons
static const Color buttonPrimary = Color(0xFF82C9BD); // Primary button (teal)
static const Color buttonAccent = Color(0xFFF68D2D); // Accent button (orange)
static const Color buttonSecondary = Color(0xFFE5E7EB); // Secondary button
static const Color iconActive = Color(0xFF82C9BD); // Active icons (teal)
static const Color iconInactive = Color(0xFF9CA3AF); // Inactive icons
// Chat Specific Colors
static const Color chatBubbleStudent = Color(0xFF4A90E2); // Student messages
static const Color chatBubbleAI = Color(0xFFF3F4F6); // AI messages
static const Color chatBubbleStudent = Color(0xFF82C9BD); // Student messages (teal)
static const Color chatBubbleAI = Color(0xFFF3F4F6); // AI messages
static const Color chatInputBackground = Color(0xFFF8F9FA); // Input background
static const Color chatSendButton = Color(0xFF5AC8FA); // Send button
static const Color chatSendButton = Color(0xFF82C9BD); // Send button (teal)
}
```
### Color Usage Guidelines
#### Primary Colors (70% usage)
- **Primary Blue**: Main actions, navigation, important CTAs
- **Primary Teal**: Secondary actions, accents, hover states
- **Primary Orange**: Highlights, achievements, important notifications
- **Primary Teal (#82C9BD)**: Main actions, navigation, important CTAs, backgrounds, frequent UI elements
- **Primary Orange (#F68D2D)**: Accent buttons, highlights, achievements, important notifications (used sparingly)
- **Secondary Teal**: Hover states, secondary actions, supporting elements
#### Neutral Colors (25% usage)
- **Background**: Page backgrounds, card backgrounds
@@ -77,6 +78,11 @@ class AppColors {
- **Error**: Network errors, validation failures
- **Info**: System notifications, help text
#### Color Distribution Strategy
- **Teal (#82C9BD)**: 60% of color usage - Primary brand color for backgrounds, main actions, navigation
- **Orange (#F68D2D)**: 10% of color usage - Accent color for CTAs, highlights, special buttons
- **Neutral Colors**: 30% of color usage - Backgrounds, surfaces, text hierarchy
---
## 📝 TYPOGRAPHY