ivangdavila_frontend/colors.md

Color & Theme — Frontend

CSS Variables Setup

: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

/* 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.