Marryme

CSS Styling Guidelines - Wedding RSVP App

Comprehensive styling guide emphasizing Tailwind CSS utility-first approach with wedding-themed design system.

Reference: CONST-P7 (Design System & UI Excellence), CONST-P14 (User Experience Excellence), CONST-P15 (Wedding Theme Integration)

This guide establishes how to manage styling in our wedding RSVP project, ensuring consistency, maintainability, and performance while creating a beautiful, celebratory user experience.

1. Tailwind CSS Foundation

Version & Installation ✅ IMPLEMENTED

Configuration ✅ IMPLEMENTED

Our tailwind.config.js defines the wedding design system:

// Wedding Theme Configuration
theme: {
  extend: {
    colors: {
      // Wedding Color Palette
      primary: {
        50: '#fdf7f0',   // Champagne light
        100: '#f7e6d1',  // Champagne
        500: '#d4af37',  // Gold
        600: '#b8941f',  // Dark gold
        900: '#8b6914'   // Deep gold
      },
      blush: {
        50: '#fef7f7',   // Soft blush
        100: '#fce8e6',  // Light blush
        200: '#f7cdc8',  // Blush
        300: '#f1a7a0'   // Deep blush
      },
      sage: {
        50: '#f7f9f7',   // Light sage
        100: '#e8f2e8',  // Sage green
        200: '#c8dcc8',  // Medium sage
        300: '#a3c4a3'   // Deep sage
      }
    },
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],      // Body text
      serif: ['Playfair Display', 'Georgia', 'serif']   // Headings
    }
  }
}

2. Wedding Design System

Color Philosophy

Semantic Color Usage:

Color Application Rules:

Typography System

Font Hierarchy:

/* Headings - Playfair Display (serif) */
.heading-display    /* text-5xl font-serif font-bold */
.heading-1          /* text-4xl font-serif font-bold */
.heading-2          /* text-3xl font-serif font-semibold */
.heading-3          /* text-2xl font-serif font-semibold */

/* Body - Inter (sans) */
.body-large         /* text-lg font-sans */
.body-base          /* text-base font-sans */
.body-small         /* text-sm font-sans */
.caption           /* text-xs font-sans text-gray-600 */

Usage Guidelines:

Spacing & Layout

Spacing Scale (multiples of 4px):

Layout Patterns:

/* Card Container */
.wedding-card {
  @apply bg-white rounded-xl shadow-lg p-6 border border-blush-100;
}

/* Section Spacing */
.section-spacing {
  @apply py-12 px-4;
}

/* Container Widths */
.container-sm { @apply max-w-2xl mx-auto; }
.container-md { @apply max-w-4xl mx-auto; }
.container-lg { @apply max-w-6xl mx-auto; }

3. Responsive Design Excellence

Mobile-First Approach ✅ IMPLEMENTED

Breakpoint Strategy:

Implementation Pattern:

// Mobile-first responsive design
<div className="
  grid grid-cols-1 gap-4    // Mobile: single column
  sm:grid-cols-2           // Small screens: 2 columns  
  lg:grid-cols-3           // Large screens: 3 columns
  xl:gap-6                 // Extra large: bigger gaps
">

Wedding-Specific Responsive Rules

4. Component-Level Styling

Tailwind Utility Classes ✅ PRIMARY METHOD

Class Grouping Pattern:

// Group by concern for readability
<button className="
  // Layout & Sizing
  px-6 py-3 rounded-lg
  // Typography  
  font-medium text-base
  // Colors & States
  bg-primary-500 text-white
  hover:bg-primary-600 focus:bg-primary-700
  // Transitions
  transition-colors duration-200
">
  RSVP Now
</button>

Class Ordering (via ESLint plugin):

  1. Layout (display, position, grid, flex)
  2. Sizing (width, height, padding, margin)
  3. Typography (font, text, leading)
  4. Colors (background, text, border)
  5. Effects (shadow, opacity, transform)
  6. Interactions (hover, focus, active)
  7. Transitions (transition, duration, ease)

CSS Modules for Complex Components

When to Use CSS Modules:

File Structure:

src/
├── shared/
│   ├── components/
│   │   ├── WeddingCard/
│   │   │   ├── WeddingCard.tsx
│   │   │   ├── WeddingCard.module.css  // Only when needed
│   │   │   └── index.ts

Wedding Theme Components

Standardized Component Styles:

// Wedding Button Variants
const buttonVariants = {
  primary: "bg-primary-500 hover:bg-primary-600 text-white",
  secondary: "bg-blush-100 hover:bg-blush-200 text-primary-700",
  ghost: "bg-transparent hover:bg-blush-50 text-primary-600"
}

// Wedding Card Styles  
const cardVariants = {
  elegant: "bg-white border border-blush-100 shadow-lg rounded-xl",
  romantic: "bg-gradient-to-br from-blush-50 to-white border border-blush-200",
  modern: "bg-white shadow-xl rounded-2xl border-0"
}

5. Accessibility & Inclusive Design

Color Contrast ✅ WCAG 2.1 AA

Keyboard Navigation

// Proper focus management
<button className="
  focus:outline-none 
  focus-visible:ring-2 
  focus-visible:ring-primary-500 
  focus-visible:ring-offset-2
">
  {children}
</button>

Screen Reader Support

6. Performance & Optimization

Bundle Size Optimization ✅ IMPLEMENTED

Loading Performance

// Optimized image loading
import Image from 'next/image'

<Image
  src="/wedding-hero.jpg"
  alt="Beautiful wedding ceremony"
  width={800}
  height={600}
  priority={true}        // For hero images
  placeholder="blur"     // Show blur while loading
  className="rounded-lg object-cover"
/>

7. Error Prevention & Quality

ESLint Tailwind Plugin ✅ CONFIGURED

{
  "extends": ["plugin:@tailwindcss/recommended"],
  "rules": {
    "@tailwindcss/classnames-order": "error",
    "@tailwindcss/no-contradicting-classname": "error",
    "@tailwindcss/no-unnecessary-arbitrary-value": "error"
  }
}

Styling Conventions

8. Wedding-Specific Guidelines

Emotional Design Principles

Animation & Interactions

// Subtle, celebratory animations
<div className="
  transform transition-all duration-300 ease-in-out
  hover:scale-105 hover:shadow-xl
  hover:-translate-y-1
">
  {/* Wedding content */}
</div>

Photo & Media Styling

9. Implementation Checklist

Before Styling a Component

Code Review Checklist

These styling guidelines ensure our wedding RSVP app delivers a beautiful, accessible, and performant user experience that celebrates love and creates joy for every guest.