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.
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
/* 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';
.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:
<html data-contrast="low">
Kawaii colors with auto dark mode
</html>
<html data-contrast="high">
High contrast colors with auto dark mode
</html>
Use suffixed classes for colors that don't respond to dark mode changes:
Always kawaii, regardless of dark mode
Always high contrast, regardless of dark mode
Mixed light background with dark text
blue, pink, purple, green, orange, yellowsky, red, brown, gray, neutral, black, whitetext - 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 elementsDepth 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 colorThe 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:
<html>
<body class="dark:bg-background-dark">
Content
</body>
</html>
<html class="dark">
<body class="bg-background">
Content automatically uses dark colors
</body>
</html>
Control color variants independently of dark mode:
<html data-contrast="low">
<body class="bg-background text-text">
Kawaii colors, dark mode follows OS
</body>
</html>
<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 build
The pastel palette aesthetic emphasizes:
-kawaii)-hc)Scaffold a new React app pre-wired with Vite 8, React Compiler, file-based routes, and the Pastel theme:
pnpm dlx degit Innei/Pastel/templates/react-starter my-app
See templates/react-starter for details.
2025 © Innei, Released under the MIT License.
Personal Website · GitHub @Innei
$ claude mcp add Pastel \
-- python -m otcore.mcp_server <graph>