---
name: Cyber-Tropicalismo
colors:
  surface: '#1f0e13'
  surface-dim: '#1f0e13'
  surface-bright: '#493338'
  surface-container-lowest: '#19090d'
  surface-container-low: '#28161b'
  surface-container: '#2d1a1f'
  surface-container-high: '#382529'
  surface-container-highest: '#442f34'
  on-surface: '#fbdae0'
  on-surface-variant: '#e5bcc4'
  inverse-surface: '#fbdae0'
  inverse-on-surface: '#3f2b2f'
  outline: '#ac878f'
  outline-variant: '#5c3f45'
  surface-tint: '#ffb1c3'
  primary: '#ffb1c3'
  on-primary: '#66002c'
  primary-container: '#ff4b89'
  on-primary-container: '#590026'
  inverse-primary: '#bb0058'
  secondary: '#ffffff'
  on-secondary: '#003733'
  secondary-container: '#00fdee'
  on-secondary-container: '#00716a'
  tertiary: '#c9c6c5'
  on-tertiary: '#313030'
  tertiary-container: '#929090'
  on-tertiary-container: '#2a2a29'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#ffd9e0'
  primary-fixed-dim: '#ffb1c3'
  on-primary-fixed: '#3f0019'
  on-primary-fixed-variant: '#8f0041'
  secondary-fixed: '#00fdee'
  secondary-fixed-dim: '#00ded1'
  on-secondary-fixed: '#00201d'
  on-secondary-fixed-variant: '#00504b'
  tertiary-fixed: '#e5e2e1'
  tertiary-fixed-dim: '#c9c6c5'
  on-tertiary-fixed: '#1c1b1b'
  on-tertiary-fixed-variant: '#474646'
  background: '#1f0e13'
  on-background: '#fbdae0'
  surface-variant: '#442f34'
typography:
  display-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: '800'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '700'
    lineHeight: '1.2'
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '500'
    lineHeight: '1.6'
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-bold:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: '700'
    lineHeight: '1.0'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  container-margin: 20px
  gutter: 16px
---

## Brand & Style
The design system embodies a "Cyber-Tropicalismo" aesthetic—a high-octane fusion of synthetic neon futurism and organic energy. It is designed for mobile-first experiences that demand immediate attention and high engagement, such as social entertainment or modern nightlife platforms.

The style leverages **Glassmorphism** and **High-Contrast** visuals. Backgrounds are deep and immersive, allowing vibrant, translucent layers to float atop fluid, moving gradients. The emotional response is one of nocturnal excitement, digital luxury, and rhythmic energy. Visuals should feel "wet" and "glowing," utilizing heavy background blurs (30px+) to maintain readability while preserving the color intensity of the underlying environment.

## Colors
The palette is anchored in **Deep Midnight (#050505)** to provide an infinite canvas for neon accents. **Neon Pink** serves as the primary action color, driving conversions and highlighting interactive elements. **Electric Teal** is used for secondary information, success states, and cooling high-energy layouts.

To maintain accessibility in this high-contrast environment, text is primarily rendered in pure white or high-brightness variants of the teal. Gradients should be used sparingly but boldly, specifically for "Hero" states and primary buttons, creating a sense of chromatic aberration where pink and teal collide.

## Typography
The design system utilizes **Plus Jakarta Sans** for its friendly yet technical personality. The rounded terminals of the typeface mirror the fluid, organic nature of tropical motifs, while the geometric structure keeps the UI feeling modern and cybernetic.

Typography follows a fluid scaling model optimized for mobile handsets. Headlines should be set with tight line-heights and slightly negative letter spacing to create "blocks" of color. Labels use uppercase styling and wider tracking to ensure legibility against vibrant, blurred backgrounds.

## Layout & Spacing
This design system utilizes a **fluid grid** optimized for mobile viewports. The layout relies on a 4-column system for small screens and an 8-column system for tablets. 

The spacing rhythm is built on a 4px baseline, but emphasizes large, "breathable" safe zones (20px margins) to prevent the high-energy colors from feeling cluttered. Content modules should be separated by significant vertical gaps (40px+) to allow the background gradients and blurs to peak through, creating a sense of environmental depth.

## Elevation & Depth
Depth is not communicated through traditional grey shadows, but through **Backdrop Blurs** and **Outer Glows**. 

- **Level 1 (Base):** Deep Midnight background with soft, wandering gradients.
- **Level 2 (Cards):** Glassmorphic surfaces with a 40px backdrop blur, 5% white opacity, and a 1px solid border at 10% opacity.
- **Level 3 (Modals/Popovers):** Higher opacity glass (10%) with a vibrant 15px outer glow matching the primary or secondary color of the element.

The goal is to make elements appear as if they are floating in a neon-lit mist rather than sitting on a flat surface.

## Shapes
Shapes in this design system are generously **rounded**, avoiding sharp corners to maintain the "Tropical" softness. Standard components use a 0.5rem (8px) radius, while larger containers and cards utilize 1.5rem (24px) to create a friendly, approachable container for the aggressive color palette. Buttons and interactive chips should always be fully pill-shaped to maximize their "tapability" on mobile devices.

## Components
- **Buttons:** Primary buttons use the Pink-to-Teal gradient with a subtle 10px outer glow on hover/active. Text is bold and white.
- **Glass Cards:** Containers for content must have `backdrop-filter: blur(30px)` and a thin, high-contrast top-border to catch "light" from above.
- **Chips:** Small, pill-shaped elements with Electric Teal strokes and semi-transparent fills.
- **Inputs:** Darker than the background with a 1px Neon Pink border that glows when focused. Placeholder text should be high-contrast to remain visible over blurs.
- **Lists:** Borderless items separated by wide vertical spacing and subtle horizontal glass dividers.
- **Selection Controls:** Checkboxes and radios use the Electric Teal for the "on" state, featuring a small glow to indicate activation.
- **Progress Bars:** Use a "moving" gradient effect (Pink to Teal) to suggest constant kinetic energy.