118 lines
3.8 KiB
Plaintext
118 lines
3.8 KiB
Plaintext
---
|
|
alwaysApply: true
|
|
---
|
|
# Frontend Color Theme Guidelines
|
|
|
|
## Color Palette
|
|
|
|
### Primary Colors
|
|
- **Primary Peach**: `#FFCDB2` - Main brand color, used for primary buttons, links, and accents
|
|
- **Secondary Coral**: `#FFB4A2` - Used for gradients and secondary elements
|
|
- **Light Pink**: `#E5989B` - Hover states and secondary buttons
|
|
- **Medium Mauve**: `#B5838D` - Alternative secondary color
|
|
- **Dark Purple**: `#6D6875` - Text and dark accents
|
|
|
|
### Background Colors
|
|
- **Dark Mode Background**: `#6D6875` - Main dark theme background
|
|
- **Light Mode Background**: `#FFCDB2` - Main light theme background (very light)
|
|
- **Card Background**: `white` - Card and component backgrounds
|
|
|
|
### Text Colors
|
|
- **Primary Text (Dark)**: `#6D6875` - Main text color in light mode
|
|
- **Primary Text (Light)**: `rgba(255, 255, 255, 0.87)` - Main text color in dark mode
|
|
- **Secondary Text**: `#B5838D` - Subtitle and body text
|
|
- **Accent Text**: `#E5989B` - Card subtitles and accent text
|
|
|
|
### Interactive States
|
|
- **Hover Effects**: Use `transform: translateY(-2px)` for subtle lift animations
|
|
- **Focus Rings**: `rgba(255, 205, 178, 0.3)` - Peach focus outline
|
|
- **Shadows**: `rgba(255, 205, 178, 0.3)` for primary elements, `rgba(229, 152, 155, 0.3)` for secondary
|
|
|
|
## CSS Custom Properties
|
|
|
|
Always define colors using CSS custom properties in [src/index.css](mdc:src/index.css):
|
|
|
|
```css
|
|
:root {
|
|
/* Primary Colors */
|
|
--color-primary: #FFCDB2;
|
|
--color-primary-dark: #FFB4A2;
|
|
--color-secondary: #E5989B;
|
|
--color-secondary-dark: #B5838D;
|
|
--color-dark: #6D6875;
|
|
|
|
/* Background Colors */
|
|
--color-bg-dark: #6D6875;
|
|
--color-bg-light: #FFCDB2;
|
|
--color-bg-card: white;
|
|
|
|
/* Text Colors */
|
|
--color-text-primary: #6D6875;
|
|
--color-text-primary-light: rgba(255, 255, 255, 0.87);
|
|
--color-text-secondary: #B5838D;
|
|
--color-text-accent: #E5989B;
|
|
|
|
/* Interactive Colors */
|
|
--color-focus: rgba(255, 205, 178, 0.3);
|
|
--color-shadow-primary: rgba(255, 205, 178, 0.3);
|
|
--color-shadow-secondary: rgba(229, 152, 155, 0.3);
|
|
}
|
|
```
|
|
|
|
## Component Styling Guidelines
|
|
|
|
### Buttons
|
|
Follow the patterns in [src/components/Button.css](mdc:src/components/Button.css):
|
|
- Use gradient backgrounds for primary/secondary buttons
|
|
- Implement hover animations with `translateY(-2px)`
|
|
- Apply consistent focus states with green outline
|
|
- Use semantic class names: `.btn-primary`, `.btn-secondary`, `.btn-outline`, `.btn-ghost`
|
|
|
|
### Cards
|
|
Follow the patterns in [src/components/Card.css](mdc:src/components/Card.css):
|
|
- Use white background with subtle shadows
|
|
- Implement hover animations with `translateY(-8px)`
|
|
- Use consistent border radius (16px)
|
|
- Apply image hover effects with `scale(1.05)`
|
|
|
|
### Links
|
|
- Primary color: `#FFCDB2`
|
|
- Hover color: `#E5989B` (dark mode), `#B5838D` (light mode)
|
|
- No text decoration by default
|
|
|
|
## Dark/Light Mode Support
|
|
|
|
Always include both dark and light mode variants using `@media (prefers-color-scheme: light)` in [src/index.css](mdc:src/index.css).
|
|
|
|
## Accessibility
|
|
|
|
- Maintain minimum contrast ratios (4.5:1 for normal text, 3:1 for large text)
|
|
- Use focus indicators with `--color-focus`
|
|
- Ensure hover states are distinct from focus states
|
|
- Test with color blindness simulators
|
|
|
|
## File Organization
|
|
|
|
- Global styles and CSS custom properties: [src/index.css](mdc:src/index.css)
|
|
- Component-specific styles: Individual `.css` files in [src/components/](mdc:src/components/)
|
|
- Utility classes: [src/App.css](mdc:src/App.css)
|
|
- Consider creating a dedicated [src/styles/](mdc:src/styles/) directory for theme files
|
|
|
|
## Usage Examples
|
|
|
|
```css
|
|
/* Button with theme colors */
|
|
.my-button {
|
|
background: var(--color-primary);
|
|
color: var(--color-dark);
|
|
box-shadow: 0 4px 12px var(--color-shadow-primary);
|
|
}
|
|
|
|
/* Card with theme colors */
|
|
.my-card {
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text-primary);
|
|
border: 1px solid rgba(109, 104, 117, 0.1);
|
|
}
|
|
```
|