54 lines
1.1 KiB
Markdown
54 lines
1.1 KiB
Markdown
|
# Color & Theme — Frontend
|
||
|
|
|
||
|
|
## CSS Variables Setup
|
||
|
|
|
||
|
|
```css
|
||
|
|
:root {
|
||
|
|
--background: 0 0% 100%;
|
||
|
|
--foreground: 222.2 84% 4.9%;
|
||
|
|
--primary: 222.2 47.4% 11.2%;
|
||
|
|
--primary-foreground: 210 40% 98%;
|
||
|
|
--secondary: 210 40% 96%;
|
||
|
|
--accent: 210 40% 96%;
|
||
|
|
--destructive: 0 84% 60%;
|
||
|
|
--border: 214.3 31.8% 91.4%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark {
|
||
|
|
--background: 222.2 84% 4.9%;
|
||
|
|
--foreground: 210 40% 98%;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Color Rules
|
||
|
|
|
||
|
|
1. **70-20-10**: Primary 70%, secondary 20%, accent 10%
|
||
|
|
2. **Commit to light OR dark** — no muddy mid-grays
|
||
|
|
3. **High contrast CTAs** — buttons must pop
|
||
|
|
4. **Semantic colors**: red=destructive, green=success, yellow=warning
|
||
|
|
|
||
|
|
## Backgrounds
|
||
|
|
|
||
|
|
**AVOID**: Solid white (#fff) or plain gray
|
||
|
|
|
||
|
|
**USE**:
|
||
|
|
- Subtle gradients: `bg-gradient-to-br from-slate-50 to-slate-100`
|
||
|
|
- Noise/grain texture overlay
|
||
|
|
- Glassmorphism with backdrop-blur
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* Grain overlay */
|
||
|
|
.grain::before {
|
||
|
|
content: '';
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
background: url("data:image/svg+xml,...");
|
||
|
|
opacity: 0.03;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Dark Theme
|
||
|
|
|
||
|
|
Always define both themes. Use CSS variables so switching is automatic.
|