A comprehensive kawaii-inspired color system with OKLCH color space support, TypeScript definitions, and TailwindCSS v4 integration. Features a cute & kawaii aesthetic with soft, pastel tones.
- 🎨 OKLCH Color Space: Modern color format with sRGB and P3 fallbacks
- 🌸 Kawaii Aesthetic: Soft pastel colors with high lightness values
- 🔧 TypeScript Support: Full type definitions for all color values
- 🎯 Semantic Colors: UIKit-inspired semantic color system
- 🌓 Dark Mode: Automatic light/dark mode adaptation with multiple strategies
- 💨 TailwindCSS v4: CSS-based configuration with @theme directives
- 📦 Monorepo Structure: Modular packages for colors and TailwindCSS integration
TailwindCSS v4 integration with automatic CSS generation and color variants support.
/* Use generated CSS variables in your styles */
.my-element {
color: var(--color-text);
background-color: var(--color-background);
border-color: var(--color-border);
}# Install TailwindCSS integration
npm install @pastel-palette/tailwindcss
# Or using pnpm
pnpm add @pastel-palette/tailwindcss- Import the generated theme CSS in your main CSS file:
/* Choose your color space - all include unified kawaii and high-contrast support */
/* OKLCH color space (recommended) */
@import '@pastel-palette/tailwindcss/dist/theme-oklch.css';
/* sRGB color space (fallback) */
@import '@pastel-palette/tailwindcss/dist/theme-srgb.css';
/* P3 Display color space (wide gamut) */
@import '@pastel-palette/tailwindcss/dist/theme-p3.css';- Use the color variables in your TailwindCSS config or CSS:
.button {
background-color: var(--color-accent);
color: var(--color-white);
border: 1px solid var(--color-border);
}
/* With opacity modifiers */
.overlay {
background-color: var(--color-material-medium);
}The color system now supports three variants: regular, kawaii, and high-contrast. You can use them in two ways:
Use data attributes to apply color variants that automatically switch between light and dark modes:
<!-- Kawaii mode -->
<html data-contrast="low">
<div class="bg-background text-text">Kawaii colors with auto dark mode</div>
</html>
<!-- High contrast mode -->
<html data-contrast="high">
<div class="bg-background text-text">
High contrast colors with auto dark mode
</div>
</html>Use suffixed classes for colors that don't respond to dark mode changes:
<!-- Always use kawaii colors (fixed) -->
<div class="bg-background-kawaii text-text-kawaii">
Always kawaii, regardless of dark mode
</div>
<!-- Always use high contrast colors (fixed) -->
<div class="bg-background-hc text-text-hc">
Always high contrast, regardless of dark mode
</div>
<!-- Specific light/dark variants -->
<div class="bg-background-light text-text-dark">
Mixed light background with dark text
</div>blue,pink,purple,green,orange,yellowsky,red,brown,gray,neutral,black,white- Available in three variants: regular (default), kawaii (softer), high-contrast (more accessible)
text- Primary text colors with depth levelsplaceholder-text- Form placeholder textborder- Border colors with primary/secondary variantsseparator- Divider/separator lineslink- Interactive link colorsdisabled-control- Disabled UI controlsdisabled-text- Disabled text elements
Depth levels: primary, secondary, tertiary, quaternary, quinary
System fills with depth levels for UI components
Opacity-based materials:
ultra-thick(93% opacity)thick(85% opacity)medium(72% opacity)thin(60% opacity)ultra-thin(45% opacity)opaque(100% opacity)
accent- Main accent colorprimary- Primary brand colorsecondary- Secondary brand color
The unified theme system automatically handles dark mode via TailwindCSS v4's built-in dark mode support. All color variants (regular, kawaii, high-contrast) work seamlessly with dark mode.
Dark mode is activated using TailwindCSS v4's standard approach:
<!-- Automatic (follows OS preference) -->
<html>
<body class="dark:bg-background-dark">
Content
</body>
</html>
<!-- Manual toggle with class -->
<html class="dark">
<body class="bg-background">
Content automatically uses dark colors
</body>
</html>Control color variants independently of dark mode:
<!-- Kawaii colors with automatic dark mode -->
<html data-contrast="low">
<body class="bg-background text-text">
Kawaii colors, dark mode follows OS
</body>
</html>
<!-- High contrast colors with manual dark mode -->
<html data-contrast="high" class="dark">
<body class="bg-background text-text">
High contrast + dark mode
</body>
</html># Clone the repository
git clone https://github.com/Innei/pastel.git
cd pastel
# Install dependencies
pnpm install
# Regenerate TailwindCSS themes
cd packages/tailwindcss-colors && pnpm buildThe pastel palette aesthetic emphasizes:
- High lightness values (0.7-0.95 in OKLCH)
- Moderate chroma (0.08-0.18) for soft appearance
- Harmonious pastels that work well together
- Gentle contrasts while maintaining accessibility
- Balanced lightness and chroma for general use
- WCAG AA compliant contrast ratios
- Suitable for most UI applications
- Higher lightness values (0.82-0.9 in OKLCH)
- Lower chroma (0.08-0.14) for extra softness
- Ultra-cute aesthetic with pastel softness
- Perfect for kawaii/cute themed applications
- Lower lightness values (0.4-0.6 in OKLCH)
- Higher chroma (0.2-0.3) for vivid appearance
- WCAG AAA compliant contrast ratios
- Enhanced accessibility for visually impaired users
2025 © Innei, Released under the MIT License.
Personal Website · GitHub @Innei