Jarno Kiesiläinen
286699a1a8
All checks were successful
Backend CI / Run Maven Tests (push) Successful in 27s
Reviewed-on: #5 Co-authored-by: Jarno Kiesiläinen <jarnokie@gmail.com> Co-committed-by: Jarno Kiesiläinen <jarnokie@gmail.com>
2.0 KiB
2.0 KiB
Brief overview
Project-specific frontend color theme guidelines for the vibing application. Defines a cohesive peach/coral/pink color palette with specific CSS custom properties, component styling patterns, and accessibility requirements.
Color palette usage
- Always use the defined peach-coral color scheme: Primary Peach (#FFCDB2), Secondary Coral (#FFB4A2), Light Pink (#E5989B), Medium Mauve (#B5838D), Dark Purple (#6D6875)
- Implement CSS custom properties in src/index.css for all color definitions
- Use semantic color naming: --color-primary, --color-secondary, --color-bg-dark, --color-text-primary, etc.
- Support both dark and light modes using @media (prefers-color-scheme: light)
Component styling patterns
- Buttons: Use gradient backgrounds, implement translateY(-2px) hover animations, apply consistent focus states with peach outline
- Cards: White backgrounds with subtle shadows, translateY(-8px) hover animations, 16px border radius, scale(1.05) image hover effects
- Links: Primary color #FFCDB2, hover colors #E5989B (dark mode) or #B5838D (light mode), no text decoration by default
- Use semantic CSS class names: .btn-primary, .btn-secondary, .btn-outline, .btn-ghost
Interactive states and animations
- Apply subtle lift animations using transform: translateY(-2px) for hover effects
- Use rgba(255, 205, 178, 0.3) for focus rings and primary shadows
- Use rgba(229, 152, 155, 0.3) for secondary shadows
- Ensure hover states are distinct from focus states for accessibility
File organization structure
- Place global styles and CSS custom properties in src/index.css
- Create individual .css files in src/components/ for component-specific styles
- Use src/App.css for utility classes
- Consider src/styles/ directory for additional theme files when needed
Accessibility requirements
- Maintain minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text
- Use --color-focus for focus indicators
- Test with color blindness simulators
- Ensure all interactive elements have proper focus states