Indian Festive

STYLEKIT_STYLE_REFERENCE
style_name: Indian Festive
style_slug: indian-festive
style_source: /styles/indian-festive

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are an Indian Festive design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Cold blue-gray tones (bg-gray-100, bg-slate-50)
- Pure black backgrounds (bg-black)
- Sharp corners (rounded-none)
- Low-saturation or muted colors
- Neon cyber colors (text-[#00ffff], text-[#ff00ff])
- Monochromatic schemes

## Must Follow

- Vermillion red #e63946 and saffron orange #ff9f1c as primary accents
- Warm ivory background bg-[#fff8e7]
- Gold decorations using border-[#d4af37] and shadow with gold rgba
- Royal purple #7b2d8e for text and headings
- Rounded corners rounded-xl
- Multi-color gradients for emphasis
- Bold typography with tracking-wide

## Color Palette

Primary:
- Vermillion: #e63946
- Warm White: #fff8e7
- Saffron: #ff9f1c
- Royal Purple: #7b2d8e
- Teal: #2a9d8f
- Gold: #d4af37

## Special Elements

- Mandala-inspired circular decorations
- Gold border and glow effects
- Multi-color gradient strips
- Warm layered backgrounds
- Festive light/lamp motifs

## Animation & Interaction Rules

### Grand Illumination (Button Glow)
- Resting: shadow-[0_0_16px_rgba(212,175,55,0.4)] -- always-on gold aura
- Hover: hover:shadow-[0_0_35px_rgba(212,175,55,0.8)] -- glow explodes to 35px (diya lamp igniting)
- NEVER use flat shadow on interactive elements

### Joyful Flourish (Button Motion)
- hover:-translate-y-1 hover:scale-[1.03] -- lift AND grow simultaneously (lamp rising + fireworks ascending)
- active:scale-95 active:translate-y-0 -- joyful bounce-back
- active:shadow-[0_0_16px_rgba(212,175,55,0.4)] -- glow settles back to resting

### Golden Touch (Focus)
- focus:ring-2 focus:ring-[#d4af37] focus:ring-offset-2 focus:ring-offset-[#fff8e7]
- ring-offset-[#fff8e7] mandatory -- gold ring must separate from ivory background

### Ceremonial Unfurling (Card Color Strip)
- Resting: w-12 h-1 bg-gradient-to-r from-[#e63946] via-[#ff9f1c] to-[#d4af37]
- On group-hover: group-hover:w-full -- ribbon unfurls across full card width (gift unwrapping)
- Transition: duration-500 ease-out
- Always use group class on card container

### Card Hover
- hover:-translate-y-2 hover:scale-[1.02] -- festive ascension
- hover:shadow-[0_15px_40px_rgba(230,57,70,0.2),0_0_30px_rgba(212,175,55,0.3)] -- dual jewel-tone glow
- Heading: group-hover:text-[#e63946] transition-colors duration-300 -- purple to vermillion shift

---

# Indian Festive Design System

> The dazzling aesthetics of Indian Diwali and Holi festivals, with rich gold ornamentation, jewel-tone palettes, and mandala motifs. Ideal for celebrations, events, and lifestyle brands.

## Design Philosophy

Indian Festive draws from the dazzling visual language of Diwali (Festival of Lights) and Holi (Festival of Colors), transforming thousands of years of South Asian color traditions into modern digital interfaces.

Core concepts:
- Dazzling exuberance: Bold use of high-saturation jewel tones -- vermillion, saffron orange, royal purple, peacock teal -- expressing the fervor and vitality of festivals
- Gold ornamentation: Gold lines, borders, and glows are the soul of Indian decorative arts, representing the sacred and prosperity
- Mandala motifs: Symmetrical geometric floral patterns serve as both meditative vehicles and visual hierarchy builders
- Light and hope: Diwali is the "festival of lights," with warm radiance permeating every interactive detail

In design expression, Indian Festive style does not hold back on layering and clashing colors. Unlike Western minimalism's restraint, it embraces richness, layering, and decorativeness, treating every interface element as a visual celebration.

Suitable for celebration event pages, lifestyle brands, cultural education platforms, and any digital product needing to convey passion, diversity, and abundance.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#d4af37]/50
Radius: rounded-xl
```

### Shadow
```
sm: shadow-[0_2px_8px_rgba(212,175,55,0.15)]
md: shadow-[0_4px_16px_rgba(212,175,55,0.2)]
lg: shadow-[0_8px_28px_rgba(212,175,55,0.3)]
hover: hover:shadow-[0_0_28px_rgba(212,175,55,0.5)]
focus: focus:shadow-[0_0_16px_rgba(212,175,55,0.4)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:scale-105
Hover opacity: (none)
Transition: transition-all duration-300 ease-in-out
Active: active:scale-95
```

### Typefaces
```
Heading: font-bold tracking-wide text-[#7b2d8e]
Body: font-sans
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-6xl lg:text-7xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-4xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-12 md:py-20 lg:py-28
Container: px-4 md:px-8 lg:px-12
Card: p-6 md:p-8
Gap sm: gap-3 md:gap-4
Gap md: gap-4 md:gap-6
Gap lg: gap-6 md:gap-10
```

### Color roles
```
Background primary: bg-[#fff8e7]
Background secondary: bg-[#fff8e7]/80
Background accent: bg-[#e63946], bg-[#ff9f1c], bg-[#7b2d8e], bg-[#2a9d8f], bg-[#d4af37]
Text primary: text-[#7b2d8e]
Text secondary: text-[#e63946]
Text muted: text-[#7b2d8e]/60
Button primary: bg-[#e63946] text-white border-2 border-[#d4af37]
Button secondary: bg-[#fff8e7] text-[#7b2d8e] border-2 border-[#d4af37]/50
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-none`
- `bg-black`
- `bg-[#000]`
- `bg-gray-100`
- `bg-gray-50`
- `bg-slate-50`
- `bg-slate-100`
- `text-[#00ffff]`
- `text-[#ff00ff]`
- `border-[#00ffff]`
- `shadow-[0_0_16px_rgba(0,255,255`

### Banned patterns
- matches `^rounded-none$`
- matches `^bg-(?:black|slate-[1-2]|gray-[1-2])`
- matches `^text-\[#(?:00ffff|ff00ff)\]`

### Why they are banned
- `rounded-none`: Indian Festive uses rounded corners (rounded-xl) for warmth
- `bg-black`: Indian Festive uses warm ivory backgrounds, not dark ones
- `bg-gray-100`: Indian Festive avoids cold gray tones in favor of warm whites
- `text-[#00ffff]`: Indian Festive uses jewel tones, not neon cyber colors

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-xl
border-2 border-[#d4af37]
shadow-[0_0_16px_rgba(212,175,55,0.4)]
font-bold tracking-wide
transition-all duration-300 ease-in-out
```

### Every card must include
```
rounded-xl
bg-[#fff8e7]
border-2 border-[#d4af37]/50
shadow-[0_4px_20px_rgba(212,175,55,0.2)]
```

### Every input must include
```
rounded-xl
border-2 border-[#d4af37]/30
bg-[#fff8e7]
text-[#7b2d8e]
focus:border-[#d4af37]
focus:shadow-[0_0_16px_rgba(212,175,55,0.4)]
focus:outline-none
```

---

## [COMPARE] Indian Festive wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-xl border-2 border-[#d4af37] shadow-[0_0_16px_rgba(212,175,55,0.4)] font-bold tracking-wide transition-all duration-300 ease-in-out bg-[#e63946] text-white border-2 border-[#d4af37]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-xl bg-[#fff8e7] border-2 border-[#d4af37]/50 shadow-[0_4px_20px_rgba(212,175,55,0.2)] p-6 md:p-8">
  <h3 class="font-bold tracking-wide text-[#7b2d8e] text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-xl border-2 border-[#d4af37]/30 bg-[#fff8e7] text-[#7b2d8e] focus:border-[#d4af37] focus:shadow-[0_0_16px_rgba(212,175,55,0.4)] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Indian Festive page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#fff8e7] text-[#7b2d8e] border-2 border-[#d4af37]/50 px-4 md:px-8 lg:px-12">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
    <a href="/" class="font-bold tracking-wide text-[#7b2d8e] text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-sans text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#e63946] text-[#7b2d8e] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold tracking-wide text-[#7b2d8e] text-4xl md:text-6xl lg:text-7xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-xl border-2 border-[#d4af37] shadow-[0_0_16px_rgba(212,175,55,0.4)] font-bold tracking-wide transition-all duration-300 ease-in-out bg-[#e63946] text-white border-2 border-[#d4af37]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#fff8e7] text-[#7b2d8e] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold tracking-wide text-[#7b2d8e] text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="rounded-xl bg-[#fff8e7] border-2 border-[#d4af37]/50 shadow-[0_4px_20px_rgba(212,175,55,0.2)] p-6 md:p-8">
        <h3 class="font-bold tracking-wide text-[#7b2d8e] text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#7b2d8e]/60">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-xl border-2 border-[#d4af37]/30 bg-[#fff8e7] text-[#7b2d8e] focus:border-[#d4af37] focus:shadow-[0_0_16px_rgba(212,175,55,0.4)] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#fff8e7]/80 text-[#e63946] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
      <div>
        <span class="font-bold tracking-wide text-[#7b2d8e] text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold tracking-wide text-[#7b2d8e] text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Indian Festive post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-xl border-2 border-[#d4af37] shadow-[0_0_16px_rgba(212,175,55,0.4)] font-bold tracking-wide transition-all duration-300 ease-in-out`
- [ ] Card includes: `rounded-xl bg-[#fff8e7] border-2 border-[#d4af37]/50 shadow-[0_4px_20px_rgba(212,175,55,0.2)]`
- [ ] Input includes: `rounded-xl border-2 border-[#d4af37]/30 bg-[#fff8e7] text-[#7b2d8e] focus:border-[#d4af37] focus:shadow-[0_0_16px_rgba(212,175,55,0.4)] focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-none`
- [ ] Not using `bg-black`
- [ ] Not using `bg-[#000]`
- [ ] Not using `bg-gray-100`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-slate-50`
- [ ] Not using `bg-slate-100`
- [ ] Not using `text-[#00ffff]`

### Style rule check
- [ ] Use vermillion bg-[#e63946] and saffron orange bg-[#ff9f1c] as primary accent colors
- [ ] Generously use gold text-[#d4af37] and border-[#d4af37] for decorative lines and glows
- [ ] Use warm ivory bg-[#fff8e7] as the base background
- [ ] Use royal purple text-[#7b2d8e] and peacock teal text-[#2a9d8f] as supporting colors
- [ ] Components use medium rounded corners rounded-xl for a soft festive atmosphere

### Style drift check
- [ ] Does not violate: Do not use cold blue-gray tones bg-gray-100, bg-slate-50
- [ ] Does not violate: Do not use pure black backgrounds bg-black, bg-[#000]
- [ ] Does not violate: Do not use sharp corners without rounding rounded-none
- [ ] Does not violate: Do not use low-saturation or dull colors
- [ ] Does not violate: Do not use overly tech-feel neon blue-green text-[#00ffff]

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Indian Festive

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use cold blue-gray tones bg-gray-100, bg-slate-50
- use pure black backgrounds bg-black, bg-[#000]
- use sharp corners without rounding rounded-none
- use low-saturation or dull colors
- use overly tech-feel neon blue-green text-[#00ffff]
- omit gold decorative elements
- use monochromatic schemes; colors should be layered
- omit active:scale-95 on buttons (festive buttons must have a jubilant bounce feel)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use cold blue-gray tones bg-gray-100, bg-slate-50
- [ ] do not use pure black backgrounds bg-black, bg-[#000]
- [ ] do not use sharp corners without rounding rounded-none
- [ ] do not use low-saturation or dull colors
- [ ] do not use overly tech-feel neon blue-green text-[#00ffff]