BIMBIM Brand Style Guide
← Color Fonts

BIMBIM Brand System

Identidad light-mode construida sobre una paleta multicolor vibrante: hot pink #FF3D87 como lider, violet #7B3BBD como apoyo, amber #FFB400 y teal #0DC4B4 como acentos. Fredoka 700 como display playful; Poppins como voz funcional. Radios maximos: pill CTAs, cards 20px+.

FUENTE: BIMBIM-Back-to-the-Present-2026-06-21-11_45_36.png (screenshot - colores aproximados)

Typography

Fredoka + Poppins
Display system
Fredoka
Specimen · 700 · 48px · ls -0.01em
Body system
Poppins
16px / 26px · weight 400
This is how body text reads at 18px in the BIMBIM system. Clean and versatile, designed to complement the playful display.
Labels · Poppins 600 · 11px · ls 0.1em · uppercase. Fredoka lidera, Poppins ancla.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 100%

Colors

Light · multicolor
Primary#FF3D87
Secondary#7B3BBD
Tertiary#FFB400
Quaternary#0DC4B4

Background #FFFFFF · Surface #FEF0F7 · Text #1A0B30 / #7B5FA0 · Border #F0D5E8 · Accent #FF3D87

El sistema multicolor es la identidad: los cuatro colores se usan activamente. No se reduce a monocromatico.

Overview

Poster Grid
LayoutPoster Grid
Content widthEditorial
FramingWhite Canvas
GridModular

Components

Pill · colorful
Explorar Personajes Info Nuevo
Poster card · gradient signature
Back to the Present
El gradiente multicolor es el tratamiento signature de los poster cards.

Buttons

Pill · multicolor
Primary Secondary Ghost
Primary#FF3D87 · text #FFF · pill
Border / pad2px solid · 12px 24px

Spacing

8px base
Eyebrow label
Title block
La copy de descripcion refleja la medida de linea, el offset del icono y el espaciado del CTA sobre el ritmo de 8px del sistema BIMBIM.
CTA
Scale
4px8px12px16px24px32px40px64px
Card padding
12px16pxcard 28px

Elevation & Depth

Colorful shadow

La profundidad se comunica con sombras de color tintadas con el pink y violet de la marca. Sin glass blur ni canvas oscuro: las cards flotan sobre blanco con sombras soft y vibrantes.

Tecnica - Colorful shadow box-shadow: 0 12px 40px -12px rgba(255,61,135,0.2), 0 4px 16px rgba(123,59,189,0.1). El color de la sombra refuerza la paleta sin usar glass ni fondos oscuros.
Surface#FFFFFF / #FEF0F7
Border1px #F0D5E8
Shadow0 12px 40px -12px rgba(255,61,135,.2)
Blur0px (sin glass)

Shapes

Maximum rounded

Todos los elementos son maximos en redondez: pills para CTAs y badges, 20px para cards y modulos, 28px para containers grandes. No se usan esquinas afiladas en ningun elemento del sistema.

12px20px28px9999px
Button radius9999px (pill)
Card radius20px

Do's and Don'ts

Guardrails

Do

Usa los cuatro colores activamente: el sistema multicolor es la identidad, no los reduzcas a uno.
Mantiene todos los shapes maximos en redondez: pill CTAs y 20px+ en cards.
Usa el gradiente pink-to-violet para poster cards: es el tratamiento signature.
Combina Fredoka como display con Poppins como cuerpo para jerarquia clara.

Don't

No uses fondos oscuros: la marca vive en superficies blancas y claras.
No introduzcas colores apagados o desaturados: todos los acentos deben ser vividos.
No uses esquinas afiladas (0-4px): rompen el DNA playful del sistema.
No reduzcas la paleta a un solo color: el multicolor es el mensaje.

Motion

Bouncy / expresivo

Motion bouncy y expresivo que refleja la personalidad retro-cartoon. Spring easing en interactivos. Hover escala arriba ligeramente. Reveals usan staggered pop-in desde escala 0.95. La marca es energetica, no solemne.

Motion levelBouncy
Durations200ms · 300ms · 500ms
Easingcubic-bezier(.34,1.56,.64,1)
Hover / revealscale(1.04) · pop-in
Reconstruido desde screenshot · BIMBIM Back to the Present · design-md-styleguide
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #FF3D87;
  --color-secondary: #7B3BBD;
  --color-tertiary: #FFB400;
  --color-quaternary: #0DC4B4;
  --color-neutral: #1A0B30;
  --color-background: #FFFFFF;
  --color-surface: #FEF0F7;
  --color-text-primary: #1A0B30;
  --color-text-secondary: #7B5FA0;
  --color-border: #F0D5E8;
  --color-accent: #FF3D87;
  --font-display: "Fredoka";
  --font-body: "Poppins";
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 9999px;
  --space-base: 8px;
  --space-sm: 4px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;
  --space-gap: 16px;
  --space-card-padding: 28px;
  --space-section-padding: 40px;
}
@theme {
  --color-primary: #FF3D87;
  --color-secondary: #7B3BBD;
  --color-tertiary: #FFB400;
  --color-quaternary: #0DC4B4;
  --color-neutral: #1A0B30;
  --color-background: #FFFFFF;
  --color-surface: #FEF0F7;
  --color-text-primary: #1A0B30;
  --color-text-secondary: #7B5FA0;
  --color-border: #F0D5E8;
  --color-accent: #FF3D87;
  --font-display: "Fredoka";
  --font-body: "Poppins";
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 9999px;
  --spacing-base: 8px;
  --spacing-sm: 4px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 32px;
  --spacing-gap: 16px;
  --spacing-card-padding: 28px;
  --spacing-section-padding: 40px;
}
{
  "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"
  }
}
---
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."
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"
    rounded: "9999px"
    padding: "12px 24px"
  card:
    rounded: "20px"
    padding: "28px"
    background: "#FFFFFF"
    border: "1px solid #F0D5E8"
---

## Overview

- Layout: Poster Grid
- Content Width: Editorial / Card-based
- Framing: White canvas con acentos multicolor vibrantes
- Grid: Modular / asimetrico

## Colors

Light-mode-first. Hot pink #FF3D87 como acento lider; blanco #FFFFFF como canvas.
Paleta deliberadamente multicolor: cuatro tonos vividos de igual importancia.

- Primary (#FF3D87): Hot pink. CTA, badges, hero accent, firma de marca.
- Secondary (#7B3BBD): Violet. Apoyo, hover states, botones secundarios.
- Tertiary (#FFB400): Amber. Acento calido, highlights, fills de ilustracion.
- Quaternary (#0DC4B4): Teal. Acento frio, complementario al pink.
- Neutral (#1A0B30): Dark violet-black. Todo el texto y contornos.

## Typography

- Display: Fredoka, 96px, weight 700, ls -0.01em, uppercase.
- Body: Poppins, 16px, weight 400, lh 26px.
- Labels: Poppins, 11px, weight 600, ls 0.1em, uppercase.

## Layout

Poster Grid. Base 8px. Section padding 40-80px. Card padding 28px.

## Elevation and Depth

Colorful shadow depth. Sin glass, sin dark surfaces.
- Borders: 1px solid #F0D5E8
- Shadows: 0 12px 40px -12px rgba(255,61,135,0.2); 0 4px 16px rgba(123,59,189,0.1)

## Shapes

Maximum rounded: 12px, 20px, 28px, 9999px (pill). Sin esquinas afiladas.

## Components

Buttons: Primary #FF3D87 / pill 9999px / padding 12px 24px.
Poster card: gradient linear-gradient(135deg, #FF3D87, #7B3BBD) / radius 20px.

## Motion

Bouncy: 200ms spring cubic-bezier(.34,1.56,.64,1). Hover scale(1.04). Pop-in reveal.