Red Carpet Design System

A modern, accessible design system with Material Design influences, ripple effects, and beautiful animations.

Buttons

The core of the Red Carpet UI system - buttons with Material Design ripple effects and modern styling.

Raised Buttons

Primary action buttons with elevation and ripple effects

                    <button class="rc-btn rc-btn-primary rc-btn-ripple">Primary</button>
                    <button class="rc-btn rc-btn-secondary rc-btn-ripple">Secondary</button>

Flat Buttons

Secondary actions with subtle styling and hover effects

Button Sizes

Loading States

Cards

Flexible content containers with subtle shadows and hover effects.

Basic Card

Cards provide a flexible foundation for displaying grouped information. They include subtle shadows and smooth hover animations.

Interactive Card

Cards can contain any type of content including buttons and interactive elements.

                    <div class="card">
                    <div class="card-header">Card Title</div>
                    <div class="card-content">
                    <p>Card content goes here.</p>
                    </div>
                    </div>

Typography

A consistent type scale with semantic color variants.

Extra Large Title

Large Title

Medium Title

Small Title

Large body text

Default body text

Small text

Extra small text

Text Colors

Primary text color

Secondary text color

Muted text color

Color System

Semantic colors that adapt to light and dark themes.

Primary

Main brand color

Success

Positive actions

Danger

Destructive actions

Getting Started

Installation

Include the Red Carpet CSS and JavaScript files in your project:

                            <link rel="stylesheet" href="red-carpet.css">
                            <script src="red-carpet.js"></script>

Theme Support

Toggle between light and dark themes by adding the data-theme attribute:

                            // Light theme (default)
                            <html></html>

                            // Dark theme
                            <html data-theme="dark"></html>