---
version: "alpha"
name: "BIMBIM - Back to the Present"
description: "BIMBIM es una marca de cultura pop retro-moderna construida sobre una paleta multicolor vibrante: hot pink como lider, violet como apoyo, amber y teal como acentos expresivos. Tipografia redonda y playful, radios maximos y un universo de personajes ilustrados estilo cartoon."
colors:
  primary: "#FF3D87"
  secondary: "#7B3BBD"
  tertiary: "#FFB400"
  quaternary: "#0DC4B4"
  neutral: "#1A0B30"
  background: "#FFFFFF"
  surface: "#FEF0F7"
  text-primary: "#1A0B30"
  text-secondary: "#7B5FA0"
  border: "#F0D5E8"
  accent: "#FF3D87"
typography:
  display-lg:
    fontFamily: "Fredoka"
    fontSize: "96px"
    fontWeight: 700
    lineHeight: "96px"
    letterSpacing: "-0.01em"
    textTransform: "uppercase"
  body-md:
    fontFamily: "Poppins"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
    letterSpacing: "0em"
  label-md:
    fontFamily: "Poppins"
    fontSize: "11px"
    fontWeight: 600
    lineHeight: "16px"
    letterSpacing: "0.1em"
    textTransform: "uppercase"
rounded:
  sm: "12px"
  md: "20px"
  lg: "28px"
  pill: "9999px"
spacing:
  base: "8px"
  sm: "4px"
  md: "12px"
  lg: "20px"
  xl: "32px"
  gap: "16px"
  card-padding: "28px"
  section-padding: "40px"
components:
  button-primary:
    backgroundColor: "#FF3D87"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    rounded: "9999px"
    padding: "12px 24px"
  card:
    rounded: "20px"
    padding: "28px"
    background: "#FFFFFF"
    border: "1px solid #F0D5E8"
---

## Overview

- **Composition cues:**
  - Layout: Poster Grid
  - Content Width: Editorial / Card-based
  - Framing: White canvas con acentos de color vibrante
  - Grid: Modular / asimetrico

## Colors

The color system is light-mode-first with hot pink #FF3D87 as the primary action color and white #FFFFFF as the base canvas. The palette is deliberately multicolor: four vivid hues of equal importance.

- **Primary (#FF3D87):** Hot pink. CTA, badges, hero accent, brand signature.
- **Secondary (#7B3BBD):** Violet. Supporting emphasis, hover states, secondary buttons.
- **Tertiary (#FFB400):** Amber. Warm accent, highlights, illustration fills.
- **Quaternary (#0DC4B4):** Teal. Cool accent, complementary to pink, supporting illustrations.
- **Neutral (#1A0B30):** Dark violet-black. All text, outlines, high-contrast elements.

- **Usage:** Background: #FFFFFF; Surface: #FEF0F7; Text Primary: #1A0B30; Text Secondary: #7B5FA0; Border: #F0D5E8; Accent: #FF3D87

- **Gradients:** linear-gradient(135deg, #FF3D87, #7B3BBD) for hero/poster cards; subtle radial glows in pink and violet over white canvas

## Typography

Typography uses Fredoka for display (rounded, playful, geometric - weight 700) and Poppins for body and labels (clean, versatile, professional).

- **Display (`display-lg`):** Fredoka, 96px, weight 700, line-height 96px, letter-spacing -0.01em, uppercase.
- **Body (`body-md`):** Poppins, 16px, weight 400, line-height 26px, letter-spacing 0em.
- **Labels (`label-md`):** Poppins, 11px, weight 600, line-height 16px, letter-spacing 0.1em, uppercase.

## Layout

Layout follows a poster grid composition. Cards and posters are the primary layout unit; white canvas provides breathing room for vibrant color to land without fighting.

- **Layout type:** Poster Grid
- **Content width:** Editorial / Card-based
- **Base unit:** 8px
- **Scale:** 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px
- **Section padding:** 40px, 60px, 80px
- **Card padding:** 24px, 28px
- **Gaps:** 8px, 12px, 16px, 24px

## Elevation & Depth

Depth is communicated through soft shadows and card layering over the white canvas. No glass blur, no dark surfaces. Elevation reads as floating colorful cards over a clean background.

- **Surface style:** White card with soft pink/purple shadow
- **Borders:** 1px solid #F0D5E8; 1px solid rgba(255,61,135,0.15)
- **Shadows:** 0 12px 40px -12px rgba(255, 61, 135, 0.2); 0 4px 16px rgba(123, 59, 189, 0.1)
- **Blur:** 0px (no glass; elevation by shadow color)

### Techniques
- **Colorful shadow:** Cards use box-shadow with hot pink or violet at low opacity to tint the shadow and reinforce the brand palette even in subtle UI chrome.

## Shapes

Shapes lean maximum-rounded. Pill buttons for all primary CTAs, large radius (20-28px) for cards and containers. No sharp corners anywhere in the system.

- **Corner radii:** 12px, 20px, 28px, 9999px
- **Icon sets:** Phosphor / custom illustrated icons matching the cartoon aesthetic

## Components

### Buttons
- **Primary:** background #FF3D87, text #FFFFFF, radius 9999px (pill), padding 12px 24px, font Poppins 600 uppercase 11px ls 0.1em.
- **Secondary:** background #7B3BBD, text #FFFFFF, same radius and padding.
- **Ghost:** background transparent, text #1A0B30, border 2px solid #1A0B30, same radius.

### Cards and Surfaces
- **Poster card:** gradient background linear-gradient(135deg, primary-color, secondary-color), border-radius 20px, padding 28px, white text.
- **Content card:** background #FFFFFF, border 1px solid #F0D5E8, border-radius 20px, padding 28px, shadow 0 12px 40px -12px rgba(255,61,135,0.15).

### Iconography
- **Treatment:** Rounded/filled icon style matching cartoon brand aesthetic. Custom illustrated elements preferred.
- **Sets:** Phosphor or custom.

## Do's and Don'ts

### Do
- Do use all four brand colors actively; the multicolor system IS the identity - do not reduce to single-color.
- Do keep all shapes maximum-rounded; pill CTAs and 20px+ card radii are non-negotiable.
- Do use colorful gradients (pink to violet) for hero poster cards - it is the signature poster treatment.
- Do pair Fredoka display type with Poppins body for clear typographic hierarchy.

### Don't
- Don't use dark backgrounds; the brand lives on white and light surfaces.
- Don't introduce muted or desaturated colors; all accents must be vivid.
- Don't use sharp corners (0px or 4px radii) anywhere in the system.
- Don't reduce the color system to a single hue; the multicolor palette is the point.

## Motion

Motion is bouncy and expressive, matching the retro-cartoon personality. Spring-style easing on interactive elements. Hover states scale up slightly. Character reveals use staggered pop-in animation.

**Motion Level:** expressive / bouncy

**Durations:** 200ms, 300ms, 500ms

**Easings:** cubic-bezier(0.34, 1.56, 0.64, 1) (spring), ease-out

**Hover Patterns:** scale(1.04), brightness up, box-shadow intensify

**Scroll Patterns:** staggered pop-in, scale from 0.95 to 1