aperonight/docs/theme-rules.md

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

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

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

class="bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700"

Glass Effect

class="bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30"