103 lines
3.1 KiB
Markdown
103 lines
3.1 KiB
Markdown
# Theme Rules & Color Palette - Aperonight
|
|
|
|
Extracted from `app/views/pages/home.html.erb`
|
|
|
|
## Color Palette
|
|
|
|
### Primary Colors
|
|
- **Indigo**: `#4338ca` (rgb(67, 56, 202)) - Used in hero gradient
|
|
- **Purple**: `#8b5cf6` (rgb(139, 92, 246)) - Primary brand color
|
|
- **Pink**: `#ec4899` (rgb(236, 72, 153)) - Accent color
|
|
|
|
### Background Gradients
|
|
- **Hero**: `bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700`
|
|
- **CTA**: `bg-gradient-to-r from-purple-900 via-indigo-900 to-pink-900`
|
|
- **Cards**: `bg-gradient-to-br from-gray-800 to-gray-900`
|
|
- **Buttons**: `bg-gradient-to-r from-purple-600 to-pink-600`
|
|
|
|
### Text Colors
|
|
- **White**: `text-white` - Primary text
|
|
- **Gray-200**: `text-gray-200` - Secondary text
|
|
- **Gray-300**: `text-gray-300` - Subtle text
|
|
- **Gray-400**: `text-gray-400` - Muted text
|
|
- **Transparent gradient**: `text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400` - Special highlight
|
|
|
|
### Background Colors
|
|
- **Gray-900**: `bg-gray-900` - Main background
|
|
- **Black**: `bg-black` - Overlay backgrounds
|
|
- **Gray-800**: `bg-gray-800` - Card backgrounds
|
|
- **White/Transparent**: `bg-white bg-opacity-10 backdrop-blur-sm` - Glass effect
|
|
|
|
## Spacing & Layout
|
|
|
|
### Hero Section
|
|
- **Height**: `min-h-[70vh]`
|
|
- **Max-width**: `max-w-7xl mx-auto`
|
|
- **Padding**: `px-4 sm:px-6 lg:px-8`
|
|
|
|
### Grid Layouts
|
|
- **Responsive**: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
|
|
- **Gap**: `gap-8` standard spacing
|
|
|
|
### Padding Classes
|
|
- **Section**: `py-16`, `py-20`
|
|
- **Card**: `p-4`, `p-6`, `p-8`
|
|
- **Button**: `py-3`, `py-4`, `px-6`, `px-8`
|
|
|
|
## Typography
|
|
|
|
### Font Sizes
|
|
- **Hero Title**: `text-5xl md:text-7xl`
|
|
- **Section Title**: `text-4xl`
|
|
- **Card Title**: `text-2xl`
|
|
- **Body**: `text-xl`, `text-lg`
|
|
- **Small**: `text-sm`
|
|
|
|
### Font Weights
|
|
- **Bold**: `font-bold` (headings)
|
|
- **Semibold**: `font-semibold` (buttons, important text)
|
|
- **Medium**: `font-medium` (labels)
|
|
|
|
## Interactive States
|
|
|
|
### Hover Effects
|
|
- **Scale**: `hover:scale-105`
|
|
- **Transition**: `transition-all duration-300`
|
|
- **Button Hover**: `hover:from-purple-700 hover:to-pink-700`
|
|
- **Glass Hover**: `hover:bg-opacity-20`
|
|
|
|
### Shadows
|
|
- **Default**: `shadow-lg`
|
|
- **Strong**: `shadow-xl`
|
|
- **Card**: `shadow-2xl`
|
|
|
|
## Border Radius
|
|
- **Buttons**: `rounded-full` (pill-shaped)
|
|
- **Cards**: `rounded-2xl`
|
|
- **Inputs**: `rounded-lg`
|
|
|
|
## Icon Colors
|
|
- **Primary**: `text-white` (on colored backgrounds)
|
|
- **Accent**: `text-purple-400`, `text-pink-400`
|
|
- **Muted**: `text-gray-400`
|
|
|
|
## Usage Examples
|
|
|
|
### Primary Button
|
|
```html
|
|
class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg"
|
|
```
|
|
|
|
### Card Background
|
|
```html
|
|
class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl"
|
|
```
|
|
|
|
### Hero Gradient
|
|
```html
|
|
class="bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700"
|
|
```
|
|
|
|
### Glass Effect
|
|
```html
|
|
class="bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30" |