Customization

AuroraMC's visual design is fully customizable through Tailwind CSS configuration and CSS custom properties. This guide covers how to change colors, typography, animations, and visual effects.

Color System

AuroraMC uses CSS custom properties (HSL values) for its core color palette. This means you can change the entire color scheme by editing a few variables.

Editing CSS Variables

Open src/index.css and find the :root section. The main variables to customize are:

:root {
    --background: 222 47% 5%;
    --foreground: 210 40% 98%;
    --primary: 263 70% 50%;
    --primary-foreground: 210 40% 98%;
    --primary-glow: 263 100% 60%;
    --secondary: 186 94% 42%;
    --secondary-glow: 186 100% 50%;
    --accent: 217 33% 15%;
    --border: 217 33% 17%;
    --card: 222 47% 8%;
    /* ... */
}

Each variable is an HSL value (hue, saturation, lightness) without the hsl() wrapper. For example, 263 70% 50% is a purple shade.

[!TIP] Use a tool like HSL Color Picker to find your desired colors and extract the HSL values.

Tailwind Color Tokens

These CSS variables map to Tailwind utility classes through tailwind.config.ts:

colors: {
    primary: {
        DEFAULT: 'hsl(var(--primary))',
        foreground: 'hsl(var(--primary-foreground))',
        glow: 'hsl(var(--primary-glow))',
    },
    secondary: {
        DEFAULT: 'hsl(var(--secondary))',
        foreground: 'hsl(var(--secondary-foreground))',
        glow: 'hsl(var(--secondary-glow))',
    },
    // ...
}

This allows you to use classes like bg-primary, text-secondary, shadow-glow-primary throughout the components.

Gradients

The config includes several pre-defined gradients in tailwind.config.ts:

To change them, edit the backgroundImage section in tailwind.config.ts:

backgroundImage: {
    'gradient-primary': 'linear-gradient(135deg, hsl(263 70% 50%), hsl(186 94% 42%))',
    'gradient-card': 'linear-gradient(145deg, hsl(222 47% 10% / 0.8), hsl(222 47% 6% / 0.9))',
},

Typography

AuroraMC uses two font families loaded from Google Fonts:

To change fonts, update the fontFamily section in tailwind.config.ts:

fontFamily: {
    display: ['Outfit', 'sans-serif'],
    body: ['Inter', 'sans-serif'],
},

Make sure to also update the Google Fonts link in index.html to load your new fonts.

Animations

AuroraMC includes several custom animations defined in tailwind.config.ts:

Available Animations

Framer Motion

For more complex animations (page transitions, staggered reveals, interactive gestures), AuroraMC uses Framer Motion. You'll find motion.div and animation props throughout the components — particularly in Hero.tsx, ProductCard.tsx, and StoreContent.tsx.

Glow & Shadow Effects

Custom box shadows are defined for hover and ambient glow effects:

boxShadow: {
    'glow-primary': '0 0 30px hsl(263 70% 50% / 0.4)',
    'glow-secondary': '0 0 30px hsl(186 94% 42% / 0.4)',
    'card': '0 4px 24px hsl(0 0% 0% / 0.3)',
    'card-hover': '0 8px 40px hsl(263 70% 50% / 0.2)',
},

Use these with Tailwind classes like shadow-glow-primary or hover:shadow-card-hover.

Branding Assets

Replace the following files in the public/ directory with your own assets:

[!TIP] Use transparent PNG files for logos and product images. The dark background of the store makes transparent images look significantly better than images with solid backgrounds.