color

Instruction file imported from xsmartpick/smartpick-frontend (.cursor/rules/color.mdc). Copyright stays with the author.

Pastel Colors for TailwindCSS

You should use @https://github.com/Innei/Pastel Pastel color system with kawaii-inspired OKLCH colors and TailwindCSS v4 integration.

⚠️ CRITICAL: Forbidden Color Patterns

NEVER use standard Tailwind color utilities with numeric scales. These break the design system:

// ❌ FORBIDDEN - Standard Tailwind colors with scales
text-gray-700, text-gray-200, text-gray-400, text-gray-500, text-gray-600
bg-gray-50, bg-gray-100, bg-gray-200, bg-gray-700, bg-gray-800, bg-gray-900
border-gray-200, border-gray-600, border-gray-700
text-blue-500, text-blue-600, bg-blue-500, bg-blue-600, bg-blue-700
text-purple-500, bg-purple-500, bg-purple-600
text-red-500, text-red-400, bg-red-500, bg-red-600
text-green-500, bg-green-500, bg-green-600
text-yellow-500, bg-yellow-500

// ❌ FORBIDDEN - Gradient colors with scales
from-blue-50, from-blue-500, from-blue-600
to-purple-50, to-purple-500, to-purple-600
via-white, via-gray-800

// ❌ FORBIDDEN - Dark mode variants with raw colors
dark:text-gray-200, dark:bg-gray-700, dark:border-gray-600
dark:from-gray-900, dark:via-gray-800, dark:to-blue-900

✅ Correct: Use Pastel Semantic Colors

Use Pastel color system with Tailwind classes. Important: Always use the correct Tailwind prefix for each color category:

Regular Colors (no numeric scales): text-blue, bg-pink, border-purple (same for green, orange, yellow, sky, red, brown, gray, neutral, black, white)

Semantic Colors:

• Text: text-text, text-text-secondary, text-text-tertiary, text-placeholder-text, text-link, text-disabled-text
• Background: bg-background, bg-background-secondary, bg-background-tertiary, bg-background-quaternary, bg-background-quinary
• Border: border-border, border-separator
• Fill: bg-fill, bg-fill-secondary, bg-fill-tertiary, bg-fill-quaternary, bg-fill-quinary
  • Use for form controls, interactive elements, and content containers that need subtle background colors
  • bg-fill: Primary fill for buttons, inputs, cards
  • bg-fill-secondary: Secondary elements like disabled states, inactive tabs
  • bg-fill-tertiary: Subtle backgrounds for hover states, secondary actions
  • bg-fill-quaternary & bg-fill-quinary: Very subtle backgrounds for grouping or visual hierarchy

Material Colors: bg-material-ultra-thick, bg-material-thick, bg-material-medium, bg-material-thin, bg-material-ultra-thin, bg-material-opaque

• Use for glass morphism effects, overlays, and semi-transparent surfaces
• bg-material-opaque: Solid surfaces like modals, dropdowns
• bg-material-ultra-thick: Heavy glass effect for important overlays
• bg-material-thick: Medium glass effect for panels, sidebars
• bg-material-medium: Standard glass effect for cards, tooltips
• bg-material-thin: Light glass effect for subtle overlays
• bg-material-ultra-thin: Minimal glass effect for delicate surfaces

Application Colors: bg-accent, bg-primary, bg-secondary, text-accent, text-primary, text-secondary

Control Colors: bg-disabled-control

Color Variants:

• Kawaii (softer): Add -kawaii suffix: bg-background-kawaii, text-text-kawaii
• High contrast (accessible): Add -hc suffix: bg-background-hc, text-text-hc
• Light/Dark specific: Add -light or -dark suffix: bg-background-light, text-text-dark

Dark Mode & Variants Control

• Dark mode: The Pastel system handles dark mode automatically. You do NOT need dark: prefixes for semantic colors.
• Color variants: Use data-contrast="low" for kawaii or data-contrast="high" for high-contrast on HTML element
• Automatic adaptation: All color variants work seamlessly with dark mode

Conversion Guide: Raw Tailwind → Pastel

Usage Examples

// ✅ Correct - Semantic colors
<div className="bg-background text-text border border-border">
  Content with default colors
</div>

// ✅ Correct - Fill colors for interactive elements
<button className="bg-fill hover:bg-fill-secondary text-text">
  Secondary Button
</button>

// ✅ Correct - Accent for primary actions
<button className="bg-accent text-background">
  Primary Button
</button>

// ✅ Correct - Input styling
<input
  className="bg-fill border border-border text-text placeholder:text-placeholder-text"
  placeholder="Input field"
/>

// ✅ Correct - Status colors (no scales)
<span className="text-red">Error message</span>
<span className="text-green">Success message</span>
<span className="text-yellow">Warning message</span>

// ✅ Correct - Material colors for glass morphism
<div className="bg-material-medium backdrop-blur border border-border">
  Glass card with medium opacity
</div>

// ✅ Correct - Subtle backgrounds with opacity
<div className="bg-accent/10 text-accent">
  Accent tinted background
</div>
<div className="bg-green/10 text-green">
  Success indicator
</div>

Gradient Alternatives

Instead of raw Tailwind gradients, use semantic colors with opacity:

// ❌ FORBIDDEN
<div className="bg-gradient-to-br from-blue-50 via-white to-purple-50">

// ✅ Correct - Use subtle accent backgrounds
<div className="bg-background">
  <div className="absolute inset-0 bg-accent/5 blur-3xl" />
</div>

// ✅ Correct - Accent gradient using semantic colors
<div className="bg-gradient-to-br from-accent to-accent/70">

These colors use OKLCH color space with sRGB and P3 fallbacks, providing modern color rendering with kawaii aesthetic and accessibility support. The system automatically adapts to light/dark mode following TailwindCSS v4 conventions.