@saas-factory/ui-playful

A vibrant, colorful design system for SaaS applications targeting creative professionals. Features bold colors, rounded corners, gradient accents, and a friendly, approachable aesthetic.

Design Philosophy

• Colorful & Vibrant: Bright, energetic color palette
• Friendly & Approachable: Rounded corners and soft edges
• Playful Interactions: Delightful micro-animations
• Creative-Focused: Perfect for design tools, creative agencies
• Gradient Heavy: Modern gradient accents throughout
• Accessible: Despite vibrancy, maintains WCAG AA compliance

Key Features

✅ Vibrant Color System (12+ distinct colors) ✅ Rounded Component variants (cards, buttons, etc.) ✅ Gradient Support (built into components) ✅ Playful Animations (integrated) ✅ Emoji & Icon Integration ✅ Complete Component Library ✅ Fun Templates (creative, projects, portfolios) ✅ Dark Mode Support ✅ Full TypeScript

Installation

npm install @saas-factory/ui-playful

Quick Start

import { PlayfulProvider, Button } from '@saas-factory/ui-playful';

export default function App() {
  return (
    <PlayfulProvider colorScheme="rainbow">
      <Button gradient="purple-to-pink">
        Let's Go! 🚀
      </Button>
    </PlayfulProvider>
  );
}

Color Schemes

• rainbow - Full spectrum colors
• sunset - Warm oranges and pinks
• ocean - Blues and teals
• forest - Greens and earth tones
• candy - Pastel candies
• custom - Define your own

Components with Attitude

• Rounded buttons with shadow effects
• Gradient cards and containers
• Colorful badges and pills
• Fun loading states (animated emojis)
• Playful form inputs
• Celebration animations

Templates

• Portfolio - Showcase projects and work
• Creative Agency - Team and services showcase
• Product Showcase - Fun product demos
• Community - Social features and engagement

Animation Library

Includes playful animations:

• Bounce effects
• Wiggle animations
• Rainbow color cycles
• Confetti celebrations

Performance

Optimized CSS variables and CSS-in-JS for smooth animations without heavy JavaScript overhead.

Browser Support

• All modern browsers
• Mobile-optimized

License

MIT