Tropical Paradise

STYLEKIT_STYLE_REFERENCE
style_name: Tropical Paradise
style_slug: tropical-paradise
style_source: /styles/tropical-paradise

# 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 a Tropical Paradise design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Dark/black backgrounds
- Gray-dominant color schemes
- rounded-none sharp corners
- Dull dark tones
- Cool-toned shadows
- Serif fonts

## Must Follow

- Teal primary #00897b, warm yellow base #fffde7
- Accent colors: coral red #ff6f61, mango yellow #ffc107, palm green #4caf50
- Use rounded-2xl or rounded-full for soft rounded corners
- Warm colored shadows shadow-[0_4px_20px_rgba(0,137,123,0.15)]
- Generous whitespace and transparency
- Hover effects use -translate-y float up

## Color Palette

Primary:
- Teal: #00897b
- Sunshine white: #fffde7
- Coral red: #ff6f61
- Mango yellow: #ffc107
- Palm green: #4caf50

## Special Elements

- Circular decorative blur orbs (blur-3xl)
- Colorful small dot decorations
- Gradient backgrounds from-[#fffde7] to-[#fff8e1]
- Bright hover float-up animations

## Animation & Interaction Rules

- Wave Drift: Hover uses gentle rotation + float up + micro scale (e.g., -translate-y-2 rotate-1 scale-[1.02]), paired with duration-500 ease-in-out.
- Tropical Sun Glow: Hover shadow spread should use tropical colors like teal/coral, not dark gray shadows.
- Breeze Response: Colored decoration dots produce brief micro-bounces on hover, simulating a sea breeze.
- Fluid Clicks: Active uses soft scale-95 with shadow convergence, creating a sand-stepping press-down feel.

---

# Tropical Paradise Design System

> Tropical resort-inspired design with palm leaves, vivid floral colors, and a bright sun-and-sand tone. Ideal for travel, resorts, lifestyle, and food-and-beverage brands.

## Design Philosophy

Tropical Paradise draws from the natural colors and resort atmosphere of tropical islands, infusing the vibrant energy of sunshine, ocean, palm leaves, and tropical flowers into digital interfaces.

Core concepts:
- Bright colors: Bold combinations of coral red, mango yellow, palm green, and teal convey tropical vitality and passion
- Sunny tone: A warm pale-yellow base color like sunlight on a sandy beach, evoking relaxation and joy
- Natural inspiration: The organic forms of palm leaves and the colorful blooms of tropical flowers are woven into design elements
- Resort experience: The overall atmosphere conveys a relaxed, carefree, and anticipation-filled vacation feeling

This style is ideal for travel resorts, tropical dining, surf brands, tropical fruit beverages, island wedding planning, and outdoor lifestyle brands.

When designing, use vivid colors boldly while maintaining harmony. Rounded shapes and generous whitespace keep the composition airy and transparent. Tropical style is not a chaotic pile of colors but rather like a tropical garden -- colorful yet orderly, passionate yet elegant.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#00897b]/20
Radius: rounded-2xl
```

### Shadow
```
sm: shadow-[0_2px_8px_rgba(0,137,123,0.08)]
md: shadow-[0_4px_20px_rgba(0,137,123,0.12)]
lg: shadow-[0_8px_30px_rgba(0,137,123,0.18)]
hover: hover:shadow-[0_8px_30px_rgba(0,137,123,0.15)]
focus: focus:shadow-[0_0_0_3px_rgba(0,137,123,0.15)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:-translate-y-1
Hover opacity: hover:bg-[#00796b]
Transition: transition-all duration-300
Active: active:translate-y-0
```

### Typefaces
```
Heading: font-bold tracking-tight
Body: font-sans text-gray-600
Mono: font-mono text-sm
```

### Type scale
```
Hero: text-5xl md:text-6xl lg:text-7xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-3xl
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-5 md:p-6
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-[#fffde7]
Background secondary: bg-white
Background accent: bg-[#00897b], bg-[#ff6f61], bg-[#ffc107], bg-[#4caf50]
Text primary: text-[#00897b]
Text secondary: text-gray-700
Text muted: text-gray-500
Button primary: bg-[#00897b] text-white
Button secondary: bg-white text-[#00897b] border-2 border-[#00897b]/20
```

---

## [FORBIDDEN]

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

### Banned classes
- `bg-black`
- `bg-gray-900`
- `bg-gray-800`
- `rounded-none`
- `text-gray-900`
- `shadow-[0_0_16px_rgba(0,0,0`
- `font-serif`

### Banned patterns
- matches `^bg-(?:black|gray-[89])`
- matches `^rounded-none$`

### Why they are banned
- `bg-black`: Tropical Paradise uses warm, sunny backgrounds; dark themes are forbidden
- `bg-gray-900`: Tropical Paradise uses warm, sunny backgrounds; dark themes are forbidden
- `rounded-none`: Tropical Paradise uses rounded shapes (rounded-2xl or rounded-full)
- `font-serif`: Tropical Paradise uses clean sans-serif fonts for a modern, casual feel

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

---

## [REQUIRED]

### Every button must include
```
rounded-full
font-bold
shadow-[0_4px_16px_rgba(0,137,123,0.3)]
transition-all duration-300
```

### Every card must include
```
bg-white
rounded-2xl
shadow-[0_4px_20px_rgba(0,137,123,0.1)]
```

### Every input must include
```
bg-white
border-2 border-[#00897b]/20
rounded-full
focus:border-[#00897b]
focus:outline-none
transition-all duration-300
```

---

## [COMPARE] Tropical Paradise 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-full font-bold shadow-[0_4px_16px_rgba(0,137,123,0.3)] transition-all duration-300 bg-[#00897b] text-white">
  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="bg-white rounded-2xl shadow-[0_4px_20px_rgba(0,137,123,0.1)] p-5 md:p-6">
  <h3 class="font-bold tracking-tight 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="bg-white border-2 border-[#00897b]/20 rounded-full focus:border-[#00897b] focus:outline-none transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Tropical Paradise page skeletons

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

### Navigation
```html
<nav class="bg-[#fffde7] text-[#00897b] border-2 border-[#00897b]/20 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-tight text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-sans text-gray-600 text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#00897b] text-[#00897b] 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-tight text-5xl md:text-6xl lg:text-7xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-gray-600 text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-full font-bold shadow-[0_4px_16px_rgba(0,137,123,0.3)] transition-all duration-300 bg-[#00897b] text-white">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#fffde7] text-[#00897b] 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-tight text-2xl md:text-3xl">{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="bg-white rounded-2xl shadow-[0_4px_20px_rgba(0,137,123,0.1)] p-5 md:p-6">
        <h3 class="font-bold tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-gray-600 text-sm md:text-base text-gray-500">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-white border-2 border-[#00897b]/20 rounded-full focus:border-[#00897b] focus:outline-none transition-all duration-300" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-white text-gray-700 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-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-gray-600 text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-gray-600 text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Tropical Paradise post-generation self check

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

### Token check
- [ ] Button includes: `rounded-full font-bold shadow-[0_4px_16px_rgba(0,137,123,0.3)] transition-all duration-300`
- [ ] Card includes: `bg-white rounded-2xl shadow-[0_4px_20px_rgba(0,137,123,0.1)]`
- [ ] Input includes: `bg-white border-2 border-[#00897b]/20 rounded-full focus:border-[#00897b] focus:outline-none transition-all duration-300`

### Forbidden check
- [ ] Not using `bg-black`
- [ ] Not using `bg-gray-900`
- [ ] Not using `bg-gray-800`
- [ ] Not using `rounded-none`
- [ ] Not using `text-gray-900`
- [ ] Not using `shadow-[0_0_16px_rgba(0,0,0`
- [ ] Not using `font-serif`

### Style rule check
- [ ] Use teal primary #00897b paired with warm yellow base #fffde7
- [ ] Use coral red #ff6f61 and mango yellow #ffc107 as accent colors
- [ ] Use rounded-2xl or rounded-full for rounded corners conveying a soft resort feel
- [ ] Use warm colored shadows like shadow-[0_4px_20px_rgba(0,137,123,0.2)]
- [ ] Use large rounded fonts; headings can pair font-bold with tracking-tight

### Style drift check
- [ ] Does not violate: Do not use dark/black background themes
- [ ] Does not violate: Do not use gray-dominant color schemes
- [ ] Does not violate: Do not use sharp right angles and hard edges rounded-none
- [ ] Does not violate: Do not use dull dark tones
- [ ] Does not violate: Do not use overly dense layouts

### 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 Tropical Paradise

## Absolute Bans (Match and Refuse)

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

- use dark/black background themes
- use gray-dominant color schemes
- use sharp right angles and hard edges rounded-none
- use dull dark tones
- use overly dense layouts
- use cool-toned shadows
- use overly formal serif fonts
- use stiff, short linear animations that break the resort relaxation 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 dark/black background themes
- [ ] do not use gray-dominant color schemes
- [ ] do not use sharp right angles and hard edges rounded-none
- [ ] do not use dull dark tones
- [ ] do not use overly dense layouts