Identidad y sistema de interfaz de Bolea®: el personaje Strike, la paleta real de la app, la escala tipográfica, cada nivel de botón con sus estados y el lenguaje de movimiento. Todo verificado contra lo que hoy sirve dev.bolea.la.
Strike
Strike es el destello del momento en que la pelota golpea bien.
No es un logo con cara: es un personaje con reglas de construcción, un repertorio de expresiones y una manera propia de moverse. Es el activo más reconocible de Bolea® y el que más rápido se degrada si cada pieza lo vuelve a dibujar a ojo.
Construcción
Geometría
Oficial · sobre verde
Positivo · sobre claro
Negativo · sólo sobre oscuro
Strike nunca se enseña flotando. Siempre va sobre una superficie sólida — la teja verde, un claro o un oscuro—, también en las láminas de construcción. Y el negativo existe sólo para fondo oscuro: sobre cualquier otro fondo va en positivo. No es una variante estilística que se elija por gusto, es la que hace que el contorno siga contrastando.
Especificación
La fuente de verdad es strike-rig.js: estos valores son sus DEFAULTS (radio 62) escalados al lienzo de 200 (radio 84, factor 84/62). Si el rig cambia, cambia este manual.
| Atributo | Valor | Por qué |
|---|---|---|
| Puntas | 9 | Lee como destello, no como sol ni como estrella de premio. |
| Radio exterior | 84 / 200 | Deja 16 u de aire para que ninguna punta toque el borde del lienzo. |
| Radio interior | 65,5 / 200 | Proporción 0,78 (innerRatio del rig). Más bajo se vuelve punzante; más alto pierde la onda. |
| Redondeo | 0,200 · 0,200 | Puntas y valles con curvas cuadráticas (tipRound / valleyRound × R). Romo por geometría, no solo por el trazo. |
| Grosor de contorno | 8,1 / 200 · 4,05 % | Escala con el personaje. Nunca es un grosor fijo en px. |
| Unión de trazo | round | Remata las uniones de las cuadráticas. Es lo que lo hace personaje y no ícono. |
| Ojos | 16,9 × 31,8, radio 8,45 | Cápsulas verticales separadas 19,7 u de borde a borde, centradas al 47 % de altura. En el rig: eyeW 12.5 · eyeH 23.5 · eyeGap 13.5. |
| Tamaño mínimo | 24 px | Por debajo de 24 px se usa sin ojos: solo la silueta. |
| Área de respeto | 1 punta | El largo de una punta (25 u) libre por los cuatro lados. |
| Sobre fondo negro | verde #05E26B | Strike se vuelve verde bolea: contorno, ojos y sombra en #05E26B con cuerpo #1A1A17. En el rig: rig.setDark(true). |
De 3 a 15 púas
La silueta oficial tiene 9 púas — es la única que firma como logo. Pero Strike sale del Strike Studio y el motor lo genera con cualquier número de púas entre 3 y 15: menos púas para tamaños diminutos o momentos ilustrados, más púas para texturas y fondos. Mismo cuerpo, misma onda orgánica, mismos ojos — sólo cambia points. Nunca se dibuja a mano.
3 púasEl mínimo. Casi una hélice.
5 púasEstrella suave.
7 púasPara tamaños chicos.
9 púas · OFICIALEl único que firma.
11 púasUn paso del oficial.
13 púasMás textura.
15 púasEl máximo. Casi un sol.
Versiones
Strike aparece con o sin la ficha verde detrás — el lockup usa la ficha; el personaje suelto no la necesita. En todos los casos va siempre con su sombra: la sombra soldada es parte del dibujo y nunca se quita. Tres versiones según uso:
| Versión | Colores | Cuándo |
|---|---|---|
| Positivo | Interior blanco puro #FFFFFF; contorno, ojos y sombra en tinta #202020 | La versión por defecto sobre fondos claros. |
| Negativo | Una sola tinta para contorno, ojos y sombra — en blanco, en negro o en verde bolea #05E26B — con el interior tomando el fondo | Cuando el positivo no contrasta: se elige la tinta que mejor lea sobre el fondo. Sobre negro, la tinta es el verde bolea (rig.setDark(true)). |
| Sobre verde bolea | SIEMPRE contorno, sombra y ojos negros con interior blanco | Sobre el verde de marca (ficha del lockup, hero, botones) no existe otra combinación. |
Expresiones
Strike cambia de ánimo solo con los ojos. La silueta no se deforma para expresar: no hay Strike triste con las puntas caídas ni Strike enojado con las puntas afiladas. Un solo cuerpo, catorce miradas. Son los eyeType del rig, y esto es el repertorio completo — no hay más, y no se dibujan a mano los que faltan.
NeutralEl de por defecto. El único del logo.
SorprendidoAlgo acaba de pasar.
PlanoSin opinión. Estados de espera.
ContentoConfirmación pequeña.
SonriendoMás cálido que contento.
DormidoSesión inactiva.
EnfadadoNunca hacia el usuario.
TristeAlgo salió mal, sin culpar.
MareadoCargando algo pesado.
AspasError duro. Úsalo poquísimo.
EnamoradoSe llenó la bolea.
RoncandoDormido de verdad.
EstrellasLogro, racha, premio.
AlertaPide atención.
Morfos de forma
El cuerpo sí se transforma, pero solo en movimiento y siempre volviendo a Strike. Son estados de tránsito de una animación —setShape(), o el movimiento morph—, nunca un logo alternativo: ninguna de estas doce formas se congela y se usa como marca. Sirven para que un icono se convierta en Strike, o para que Strike diga algo sin texto.
StrikeLa oficial. Once puntas.
CírculoLa pelota.
CuadradoLa cancha.
TriánguloAviso.
RomboPremio.
HexágonoPanal, grupo.
EstrellaFavorito.
BocadilloMensaje.
CorazónMe gusta.
NubeSin conexión.
FlorCelebración.
ManchaReposo, forma libre.
Animaciones y estados
El repertorio completo del rig: doce estados, emocionales y de sistema. Cada celda es el motor en vivo ejecutando su animación en bucle — los estados de un solo disparo se relanzan solos. Son los mismos del Strike Studio y son los únicos: no se inventan estados fuera del motor.
idleReposo. Respira y parpadea.
hiSaludo con ondas. Al entrar.
lookMira alrededor.
thinkingPensando. Ojos abiertos, balanceo.
hopUn saltito.
excitedOjos de corazón y ondas en bucle.
successCelebración: giro y ondas.
errorSacudida con ojos en cruz.
pokeReacción al toque.
loadingEsperando. Gira paciente.
orbitÓrbita: triángulo → pelota, con anillos.
sleepDormido, con la Z de peso 7.
Reglas de uso
Sí
Sobre fondo plano: blanco, #05E26B, #E5E3DA o #1A1A17. El contorno siempre contrasta con el fondo.
No
Sobre foto o degradado sin un fondo sólido detrás. El contorno se pierde y deja de leerse como personaje.
Sí
Rotarlo hasta ±20°, escalarlo, recortarlo por el borde del lienzo.
No
Estirarlo en un solo eje, cambiarle el número de puntas, o añadirle brazos, piernas, boca o cejas.
Sí
Un solo Strike por pieza, como sujeto. Es un personaje, no un patrón de fondo.
Sí
Con el logotipo al lado, el símbolo va siempre dentro de la teja verde de esquinas redondeadas. Es lo que le da borde al bloqueo.
No
El símbolo suelto, sin teja, junto al logotipo. Sin fondo el bloqueo se deshilacha y Strike deja de leerse como marca.
No
Rellenarlo con un acento (#8E5FE0, #EF913F…). El cuerpo de Strike es blanco o tinta. Siempre.
Logotipo
Dos piezas, tres bloqueos, ninguna versión con eslogan.
El logo ES Strike: el símbolo sobre el verde es la marca principal, y así vive como ícono de app y avatar. El logotipo «bolea» lo acompaña cuando hace falta nombre. El logotipo es bolea — todo en caja baja — y no es tipografía que se teclea: es un maestro vectorial dibujado, de contornos rellenos, que se coloca como SVG. Geométrico y muy pesado: contadores circulares, la o es una pelota, y las letras llevan 11 de aire entre sí y las esquinas van redondeadas 3, los dos valores de marca fijados en el estudio. La ® va aparte, nunca dentro del dibujo.
Las medidas del maestro están en Técnica. Una merece explicación aquí: las formas redondas rebasan la línea de base y la altura de x unas unidades. No es un descuadre — es lo que hace que la o no se vea más pequeña que la l. Si alguien «corrige» ese rebase, el logotipo se desarma.
®
Horizontal · por defecto
®
Vertical · perfiles
Versiones
Cinco versiones y ninguna más. Cada combinación existe una sola vez — si una pieza pide otra, la pieza está mal planteada.
Positivo · tinta #1A1A17 sobre claro. Impresión y fondos claros.
Negativo · blanco sobre tinta. Sólo para fondo oscuro.
Blanco sobre verde · #05E26B. La versión digital por defecto — la del bloqueo con Strike.
Tinta sobre verde · alternativa sobre verde cuando la pieza ya lleva mucho blanco.
Verde sobre tinta · versión de acento. Sólo en piezas de marca (Momentos Strike, cierres), nunca en UI.
No
Verde #05E26B sobre claro — no contrasta. Ni gris, ni acentos de evento, ni degradados: el logotipo sólo vive en tinta, blanco y verde.
Técnica
Lo que hace falta para reproducir el logotipo sin abrirlo en un editor. Estos valores se pueden mover en vivo en el Logo Studio, que exporta el SVG ya resuelto.
| Medida | Valor | Qué gobierna |
|---|---|---|
| Lienzo | 644 × 176 | viewBox="44 86 644 176". El maestro (594 × 170) más la separación y el redondeo de marca. |
| Altura de x | 131 | La altura de o, e y a. Manda en todas las proporciones, incluida la relación con el símbolo. |
| Ascendentes | 166 | La b y la l. La ® se alinea con esta cota, no con la altura de x. |
| Línea de base | 255 | Donde apoyan las letras planas. |
| Rebase | 4 · 3 | Lo que las redondas pasan bajo la base y sobre la altura de x. |
| Separación | 11 | El aire entre letras. Es un valor de marca fijado en el estudio — no se improvisa por pieza. |
| Redondeo | 3 | El maestro tiene esquinas vivas; el logotipo se dibuja con este redondeo encima. Como se traza con un contorno, también engorda un punto la letra — por eso el valor es bajo y no se sube por pieza. |
| Área de respeto | = altura de x | Alrededor del bloque, y entre logotipo y símbolo cuando van juntos. |
| Símbolo · logotipo | 1,6 × | El alto de Strike es 1,6 veces la altura de x del logotipo. |
| Mínimo | 96 px | Ancho mínimo del logotipo. Por debajo va el símbolo solo. |
Los cuatro formatos
Los cuatro salen del mismo trazado y viven en brand/logo/. Se elige por contexto:
| Archivo | Cuándo |
|---|---|
bolea-logo.svg | El maestro. Para pegar en una pieza, mandar a imprenta o abrir en un editor vectorial. |
bolea-paths.json | Los cinco trazados sueltos, uno por letra. La fuente de verdad cuando el logotipo se incrusta en código (web, React, Remotion). |
bolea-logo.js | Web component <bolea-logo> con color, width, spacing y color por letra. Producto y prototipos. |
fonts/…otf | La fuente, con «bolea» como ligadura. Sólo para maquetar en herramientas de diseño — nunca para escribir texto corriente. |
Reglas
| Regla | Valor |
|---|---|
| Mínimo horizontal | 96 px de ancho |
| Mínimo símbolo | 24 px · sin ojos por debajo de 24 px |
| Área de respeto | El largo de una punta · 18 % del alto del símbolo |
| Logotipo | NO se teclea nunca: es un maestro vectorial de contornos rellenos que se pega como SVG. Vive en brand/logo/ — bolea-logo.svg (el maestro), bolea-paths.json (los cinco trazados sueltos, uno por letra), bolea-logo.js (web component con separación regulable) y fonts/bolea-logo-regular.otf, que trae «bolea» como ligadura. Cualquiera de los cuatro sirve; los cuatro salen del mismo trazado. |
| Marca registrada | La ® va fuera del dibujo: el maestro sólo contiene las cinco letras. Se compone al lado, como texto (<span class="rmark">®</span>) a 0.34em, alineada arriba con la altura de ascendentes y con 0.08em de aire. Nunca se dibuja dentro del SVG ni se escala con las letras por separado. |
| Caja tipográfica | El logotipo es bolea, todo en caja baja — compacto, pesado, geométrico. En TEXTO corrido, «Bolea®» se escribe con B mayúscula, en Roboto normal. |
| Marca registrada | Toda aparición de Bolea, Boleas y Bolear en texto visible lleva ® en superíndice (.rmark). Sin excepciones — sólo se omite dentro de atributos (aria-label, title). |
| Espaciado del texto | El tracking negativo era exclusivo del logotipo, y el logotipo ya no es texto: HOY NINGÚN texto lleva tracking negativo. Todo va con separación normal (letter-spacing: normal). |
| Relación símbolo · texto | Alto del símbolo = 1,6 × la altura de x del logotipo |
| Prohibido | Contornearlo, aplicarle sombra o degradado, o encerrarlo en una caja de color |
Tono de voz
Hablamos como el amigo que ya reservó la cancha.
Directo, en confianza y sin floro. Bolea® resuelve un problema logístico aburrido —juntar cuatro personas y una cancha— así que el copy nunca infla el momento: informa rápido y sale del camino.
Somos
Concretos. Decimos la hora, el lugar y cuántos cupos quedan. El dato es el mensaje.
No somos
Épicos. Nada de «vive la pasión del pádel». Es un partido de un jueves a las 7:30.
Somos
De tú. Segunda persona, español peruano neutro. «Únete», «tu bolea», «te avisamos».
No somos
Corporativos. Nada de «el usuario podrá gestionar sus reservas».
Somos
Breves. Un botón dice qué pasa al tocarlo: «Unirme», y después el toast dice «Listo, estás dentro».
No somos
Graciosos a la fuerza. Strike ya pone la simpatía. El texto no compite con él.
Antes y después
| Situación | No | Sí |
|---|---|---|
| Cupo lleno | Lo sentimos, esta actividad ha alcanzado su capacidad máxima. | Esta bolea ya se llenó. Te avisamos si se libera un cupo. |
| Error de reserva | Error: la operación no pudo completarse. | Esa cancha ya está reservada a las 7:30. Elige otra hora. |
| Estado vacío | No se encontraron resultados para su búsqueda. | No hay boleas cerca todavía. Crea la primera. |
| Confirmación | Su inscripción ha sido registrada exitosamente. | Listo, estás dentro. Nos vemos el jueves. |
Color
El lima #05E26B es la acción. Todo lo demás es neutro.
La acción principal —Unirme, Crear bolea— es una píldora lima con texto tinta. No hay ningún otro color de acción en el sistema: el resto de la paleta es neutro, y el color solo aparece en el contenido (el degradado de cada bolea y los avatares). Todos los valores salen de la hoja de estilos y del DOM de dev.bolea.la; la app entrega oklch y el hex es el equivalente resuelto para diseño, export y video. Toca un swatch para copiar el hex.
Corrección respecto al primer borrador de esta v6.
Los tokens --primary: #1A1A17 y --primary-foreground: #C6E96B existen en el CSS y hacen pensar que el botón primario es tinta con label lima. No lo es. Auditando el DOM de la app: ningún elemento usa tinta como fondo, y #C6E96B no se aplica como color de texto en ninguna parte. --primary se usa solo como color de texto (text-primary). El botón real es bg-[#05E26B] con text-primary y rounded-full. Esta sección y la de botones ya reflejan lo que la app hace, no lo que los nombres de los tokens sugieren.
Neutros cálidos
Esta familia es lo que separa a Bolea® de un shadcn/ui de fábrica. Los grises puros hacen el chrome; los cálidos hacen el contenido — bordes de campo, fondos de tarjeta, separadores y chips informativos.
Warm#ECE9DD · borde de campo
E5E3DA
E0DED3
D8D3C2
Warm ink#8A8A7A · texto terciario
45453F
383B37
1F1D19
Grises de chrome#FFFFFF · superficie
F5F5F5
EDEDED
E5E5E5
Tintes de estado
Éxito#E7F6D6 · texto #3F6B1F
3F6B1F
Alerta#FBE4E4 · texto #B5524F
B5524F
Acentos de categoría
Trece tonos que hoy viven en la app como pares de degradado en tarjetas y como glow de íconos (drop-shadow 0 0 3–5px). Son color de contenido, no de interfaz: identifican un deporte o una categoría. Regla dura: nunca en un botón, un borde, un texto de UI ni en el cuerpo de Strike.
Estos acentos no son el degradado de las boleas. Son una paleta aparte que vive en el CSS como pares de degradado y glow de íconos. El degradado que ves en cada tarjeta se genera en oklch por evento y no sale de esta lista — está documentado en La cancha. Antes de dar la v6 por cerrada hay que confirmar dónde se siguen usando estos trece tonos, porque puede que sean residuo de una versión anterior.
Modo oscuro
El modo oscuro de la app invierte a gris neutro puro y pierde el lima del botón primario: en oscuro el primario es claro #EBEBEB con label #171717. El verde de estado sobrevive sin cambios y se vuelve el único color de marca visible.
Fondo#0A0A0A
171717
262626
404040
La tarjeta
Una bolea entera cabe en 203 × 279 px.
Es la unidad de contenido de Bolea® y lo que la gente ve el 90 % del tiempo. Se compone de dos bloques que no se mezclan: la lámina —la cancha, con su degradado propio y el texto en blanco encima— y el pie, que vive fuera de la lámina, sobre el fondo de la pantalla, en tinta. Todo el color está dentro de la lámina; todo el dato duro está fuera.
Anatomía
🏆 recontra competitivo
Centro Español, Jesús María
Nivel 1
1
Chip de deporteBlanco al 50 % de opacidad sobre el degradado. Radio 6. Nunca lleva color propio.
2
Chip de cuposGris sólido
#F5F5F5. Es el dato que decide si tocas la tarjeta, por eso es el único opaco.3
La canchaFoto de la sede a
object-cover sobre el degradado de la bolea. Ver la sección siguiente.4
Velo de legibilidadSin él el texto blanco se pierde sobre una cancha clara. Es obligatorio, no decorativo.
5
Avatares apilados28 px, solapados
-8px, con anillo blanco de 2 px. Quiénes ya están dentro.6
Hora + UnirmeLa única acción de la tarjeta. Aquí el botón es compacto (28 px, radio 12), no la píldora de 40.
7
El pie, fuera de la láminaNombre de la bolea en negrita, sede y nivel con ícono de 12 px. Sobre el fondo de pantalla, en tinta — nunca dentro del degradado.
Especificación
| Elemento | Tipografía | Color | Caja |
|---|---|---|---|
| Lámina | — | Degradado de la bolea | Radio 16 · alto mín. 218 · sombra 0 6px 16px rgb(0 0 0/.08) |
| Chip de deporte | 12/16 · 500 | Texto tinta sobre rgba(255,255,255,.5) | Radio 6 · pad 0 6 · alto 16 |
| Chip de cupos | 12/18 · 500 | Texto tinta sobre #F5F5F5 | Radio 6 · pad 0 6 · alto 18 |
| Avatares | — | Degradado del usuario · anillo blanco 2 | 28 × 28 · solape −8 |
| Subtítulo | 12/16 · 500 | Blanco | Máx. 2 líneas (line-clamp-2) |
| Hora | 14/20 · 600 | Blanco | — |
| Botón Unirme | 12,8 · 500 | #05E26B / #1A1A17 | Radio 12 · alto 28 · pad 0 10 |
| Nombre de la bolea | 13/17 · 700 | #1A1A17 | Una línea, truncate |
| Sede y nivel | 12/18 · 400 | #1A1A17 al 80 % | Ícono 12 px en #807B82, desplazado 2,5 px |
Inconsistencia detectada. El botón Unirme de la tarjeta usa radio 12 y 28 px de alto; el de la pantalla de detalle es una píldora de 40 px a ancho completo. Son el mismo botón conceptual con dos formas distintas. Hay que decidir: o la tarjeta adopta la píldora, o se documenta formalmente como una variante «compacta». Recomiendo la píldora en ambos — es lo que hace reconocible la acción.
Cómo se arma el texto
El subtítulo blanco no se escribe a mano: se genera a partir de quién ya está dentro. Es lo que hace que la tarjeta se sienta poblada aunque la bolea esté vacía.
| Participantes | Subtítulo |
|---|---|
| 0 | Alguien quiere jugar pádel |
| 1 | Miguel quiere jugar pádel |
| 2 | Alejandro y Miguel quieren jugar pádel |
Las tarjetas se agrupan por día bajo un separador en píldora que usa lenguaje relativo cuando puede —Mañana— y fecha corta cuando no —Jueves 20 ago.. Nunca una fecha absoluta si existe una palabra para ese día.
La cancha
Cuatro huecos y una red. Se entiende sin leer nada.
La cancha es el componente más propio de Bolea®: en vez de una lista de nombres, muestra el partido como lo verías desde arriba. Un hueco vacío no es un dato que falta — es un sitio libre, y se lee como una invitación. Vive completa en la pantalla de detalle y recortada como fondo de la tarjeta.
Anatomía
SuperficieEl degradado de la bolea, en vertical. En la tarjeta el mismo par de colores va a 45°.
Foto de la sedeVa encima del degradado a
object-cover, sin eventos de puntero. Si no hay foto, queda el degradado solo — y sigue funcionando.MarcoLas líneas de la cancha, en blanco. 383 × 388 dentro de un lienzo de 416 × 425.
RedUna malla CSS a 45°, franjas de 3 px:
repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 3px, rgba(40,60,40,.18) 3px 6px). Alto 14 px, cruza toda la cancha.SlotsCuatro, de 70 × 70, en posiciones fijas
p1 a p4.Los cuatro slots
| Estado | Aspecto | Regla |
|---|---|---|
| Vacío | Círculo #A4D3B8 de 70 px | Verde apagado, sin borde ni ícono. Es un hueco, no un error: nunca se marca en rojo ni con línea punteada. |
| Ocupado | Avatar de 67 px sobre el degradado del usuario | El avatar llena el hueco por completo. Si la persona no tiene foto, queda su degradado de identidad. |
| Etiqueta | Píldora blanca, 12/16 · 500, radio 12 | A 28 px por debajo del avatar, centrada. Solo en slots ocupados. |
| Posición | 12 px · 600 · #7A7A7A | Texto aparte, fuera de la cancha: «Cancha 1 · Equipo A izquierda». |
La nomenclatura de posición es siempre cancha · equipo · lado, en ese orden y separada por ·. Es lo que permite que dos personas se pongan de acuerdo sin hablar.
El degradado de cada bolea
Aquí se cierra la pregunta que quedó abierta en Color. Auditando cinco boleas de la app: las cinco son de pádel y las cinco tienen un degradado distinto. El degradado no identifica al deporte — identifica a esa bolea. Es el color de identidad del evento, igual que cada usuario tiene el suyo.
| Uso | Fórmula | Rangos observados |
|---|---|---|
| Bolea® · tarjeta | linear-gradient(45deg in oklch, A, B) | A: L .68–.75 · C .15–.19B: L .84–.89 · C .10–.15B siempre más claro que A (Δ L ≈ +0,11 a +0,16) y nunca más saturado. |
| Bolea® · cancha | linear-gradient(to bottom, A, B) | |
| Avatar de usuario | linear-gradient(135deg, A, B) | A: L ≈ .73–.76 · C ≈ .14 · B: L ≈ .92 · C ≈ .11 |
Tres reglas que hacen que el sistema no se rompa: el degradado se interpola en oklch, no en sRGB, para que no aparezcan grises muertos a medio camino; el ángulo cambia según el soporte (45° en tarjeta, vertical en cancha, 135° en avatar) y no es libre; y el degradado nunca se usa fuera del contenido — no hay botones, chips ni fondos de pantalla con degradado.
Sí
Dejar que dos boleas del mismo deporte tengan colores muy distintos. Ese es el punto: el color dice «esta bolea», no «este deporte».
No
Asignar un color fijo por deporte. Rompería la identidad por evento y dejaría la grilla de Explorar monocroma.
Sí
Poner texto blanco sobre la cancha, siempre con el velo de legibilidad debajo.
No
Poner texto en tinta sobre la cancha. Los degradados son claros y saturados: la tinta no aguanta el contraste en el extremo claro.
Tipografía
Roboto para todo el texto. El logotipo va aparte: es dibujo, no tipografía.
La interfaz es de una sola familia: toda la jerarquía se construye con tamaño, peso y tracking, nunca con una segunda tipografía. El logotipo es la única excepción, y no es una excepción tipográfica: es un dibujo con su propio maestro vectorial. Si estás escribiendo, es Roboto; si estás colocando la marca, es el archivo del logotipo. Nunca se teclea «bolea» apretado dentro de un párrafo para imitarlo.
Hallazgo: Fraunces se descarga y no se usa.
La app le pide a Google Fonts la variable completa de Fraunces —itálicas incluidas, opsz 9..144, wght 100..900— junto con Inter, pero ninguna regla CSS la referencia. Es una descarga pagada sin nada a cambio. Hay que decidir una de dos; este manual asume la primera hasta que digas lo contrario:
1. Quitarla del <link> y quedarse con una sola familia, como está documentado aquí. · 2. Adoptarla como cara de display solo para títulos de pantalla y piezas de marketing, nunca en UI de producto — y entonces añadir aquí una escala de display en Fraunces limitada a opsz 60..144.
Escala
La escala es la de Tailwind y la app usa siete pasos. 3xl (30 px) no aparece: el salto de 24 a 36 es intencional y no debe rellenarse.
Crear bolea
4xl · 36/40 · 800
título de pantalla
título de pantalla
Participantes
2xl · 24/32 · 700
sección
sección
Privada número 1
xl · 20/28 · 600
título de tarjeta
título de tarjeta
Bohemia Padel Club
lg · 18/28 · 600
subtítulo
subtítulo
Quedan 2 cupos para completar la bolea. Nivel 3 a 4.
base · 16/24 · 400
cuerpo
cuerpo
Unirme a la bolea
sm · 14/20 · 600
label de botón
label de botón
Jueves 7 de agosto · 7:30 a. m. · San Borja
xs · 12/16 · 500
metadatos
metadatos
Pesos y tracking
| Peso | Valor | Dónde | Tracking |
|---|---|---|---|
| Regular | 400 | Cuerpo, descripciones, texto largo | 0 |
| Medium | 500 | Metadatos, fechas, captions | 0 |
| Semibold | 600 | Labels de botón, títulos de tarjeta, chips | -0.4px |
| Bold | 700 | Títulos de sección | -0.03em |
| Extrabold | 800 | Títulos de pantalla | -0.04em |
| Logotipo | — | No tiene peso: es dibujo, no texto. Ver la sección Logotipo. | — |
No se usan 100, 200, 300 ni 900 en ningún caso: la variable se carga completa pero el sistema vive entre 400 y 800. Los labels en versalita van a 11 px, peso 700 y tracking +0.16em — es el único tracking positivo del sistema.
Espaciado y radios
Base de 4 px. Si una medida no es múltiplo de 4, es un error, no una excepción.
Altura de header fija en 64px. Área táctil mínima 44 × 44px, aunque el control se vea más chico.
1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px
Radios
sm 4
md 6
lg 8
xl 12
2xl 16
3xl 24
4xl 32
full
Asignación: botones y campos xl; tarjetas 2xl; hojas y drawers 3xl solo arriba; chips y avatares full. En pantallas chicas la app limita el radio con min(--radius-4xl, 24px) para que la esquina no se coma el contenido.
Botones
Siete niveles con un presupuesto fijo por pantalla.
El color sólido es escaso a propósito. Lo que no entra en el presupuesto baja de nivel — nunca se le inventa un color propio. Todos los botones son píldora (rounded-full), no rectángulos redondeados.
Primario#05E26B / #1A1A17
Máximo 1 por pantalla. La acción que cierra el flujo: unirse, crear, confirmar, aplicar. Píldora lima, texto tinta, 14px peso 500, alto 40. En pantalla de detalle va a ancho completo.
Secundario#FFF · borde #E5E5E5
Máximo 1 por pantalla, siempre junto al primario en la misma zona ancla.
Activo#05E26B / #1A1A17
Mismo lima que el primario. Lo que los separa no es el color sino la forma y el sitio: el estado es un chip chico dentro del contenido; la acción es una píldora de 40 px en la zona ancla. No cuenta contra el presupuesto.
Ghosttransparente / #45453F
Sin límite. Absorbe todo lo que exceda el presupuesto: editar, ver todo, limpiar.
Destructivotransparente / #E7000B
Contextual: vive dentro de la fila o tarjeta que afecta, nunca en la zona de acción global. Por eso no cuenta contra el presupuesto.
Ícono40 × 40 · radio 12
Sin límite. Sin fondo, sin borde, sin círculo. Requiere significado universal o posición predecible — la X siempre arriba a la derecha.
Deshabilitado#F5F5F5 / #A1A1A1
Conserva el copy y la forma de su nivel activo. Nunca se oculta un botón que volverá a habilitarse.
Presupuesto por pantalla
| Nivel | Máximo | ¿Cuenta? | Si sobra |
|---|---|---|---|
| Primario | 1 | Sí | El segundo baja a secundario |
| Secundario | 1 | Sí | El segundo se fusiona con el primero o baja a ghost |
| Ghost | ∞ | Sí | — |
| Ícono | ∞ | No | — |
| Activo | ∞ | No | Es estado, no acción |
| Destructivo | 1 por fila | No | — |
Estados
Hover: el lima baja a #05E26B/80 — la app lo hace con opacidad, no con un segundo tono. 200 ms con ease-standard. Activo: scale(0.97) a 100 ms. Foco: anillo tinta de 2 px con 2 px de offset — sobre lima, el anillo verde no se vería. Cargando: opacidad 0,6 más spinner, con el ancho bloqueado para que no salte.
Formularios
El campo es el único componente con borde cálido.
Usa #ECE9DD en vez del gris #E5E5E5. Es deliberado: separa lo que se escribe de lo que solo se lee.
Lo verán todos los invitados.
Placeholder en #565D59, no en gris claro.
Anillo #05E26B de 2 px.
Esa cancha ya está reservada a las 7:30. Elige otra hora.
Tamaño de fuente 16 px, sin excepción. Cualquier valor menor hace que iOS Safari haga zoom al enfocar el campo. El label va a 14/600; la ayuda y el error a 12/500. El mensaje de error dice qué pasó y qué hacer — nunca solo «campo inválido».
Etiquetas
El color de una etiqueta es información, no decoración.
Seis tipos, cada uno con un color fijo. Si dos etiquetas del mismo color dicen cosas distintas, el sistema está roto.
Nivel 3
Informativa fría. Dato objetivo sin juicio: nivel, deporte, duración.
Organizador
Informativa cálida. Rol o pertenencia dentro de una lista.
Filtro aplicado
Estado activo. Refleja una elección del usuario que puede deshacer.
Confirmado
Éxito. Reservado, pagado, cupo asegurado.
2 sin leer
Alerta puntual. Tinte rosa, nunca rojo sólido en superficies grandes.
Bolea® llena
Énfasis máximo. Un solo uso por pantalla, para el hecho más importante.
Selectores
Un selector indica una elección; no ejecuta una acción.
Por eso puede usar el verde de estado sin competir con el botón primario, y por eso no cuenta en el presupuesto de botones.
Segmented control
Sin reserva
Ya reservado
Chips de filtro
Pádel
Tenis
Siguiendo
Cerca de mí
Selector de nivel
1
2
3
4
5
El nivel es un rango, no un punto: siempre se pueden encender celdas contiguas.
Iconografía
Dos familias: la propia y Phosphor.
Inventario verificado contra dev.bolea.la. La barra de navegación y las señales de marca usan sprites propios (/sprites.svg); todo lo demás sale de Phosphor — peso regular por defecto, fill o bold cuando el tamaño lo pide — siempre relleno con currentColor. Ningún ícono se dibuja a mano por pieza.
Familia propia
Los de la barra de navegación y las señales que solo existen en Bolea®. Las parejas stroke/fill son el mismo dibujo en dos pesos. Strike es uno más del sistema: strike-fill es la pestaña Mis Boleas® — el único sitio donde el personaje trabaja de ícono.
home-stroke · Explorar
home-fill
bell-stroke · Notificaciones
bell-fill
strike-fill · Mis Boleas®
plus-fill · Crear
direction · Cómo llegar
title-input · Nombre
add-users · Invitar
Sistema · Phosphor
Para todo lo demás, Phosphor tal cual viene — no se redibuja ni se mezcla con otras librerías. Cada ícono aparece aquí con su uso real en la app.
caret-left · Volver
clock · Fecha y hora
map-pin · Sede
trophy · Nivel
plus · Sumar a una posición
chat-circle · Mensajes
dots-three · Opciones
user-plus · Se unió
user-minus · Salió
check-circle · Aceptó
check · Confirmar
pencil-simple · Editar
camera · Foto y avatar
gear · Ajustes
Estados
Reposo
Tinta sobre la superficie, sin contenedor.
Activo
Píldora de tinta e ícono en blanco. El dibujo no cambia.
En notificaciones
Blanco sobre un círculo con el degradado del evento.
Tamaños reales: 24 px en la barra de navegación, 16–20 px junto a texto y en filas de acción, 12–14 px en los metadatos de una tarjeta — siempre heredando el color con currentColor. El área táctil es siempre 44 × 44 px aunque el ícono mida 16.
Movimiento
Lo que entra desacelera. Lo que sale acelera.
Siete curvas y siete duraciones, todas extraídas de la app. Nada en Bolea® se mueve a velocidad constante.
| Token | ms | Para qué |
|---|---|---|
instant | 100 | Feedback de presión: scale(0.97) al tocar |
fast | 150 | Hover, cambio de color, aparición de un chip |
base | 200 | Por defecto. Todo lo que no tenga otra razón. |
slow | 300 | Acordeones, expandir una tarjeta, toasts |
panel | 350 | Hojas y drawers que suben desde abajo |
enter | 400 | Entrada de pantalla completa |
hero | 450 | Momentos de marca: Strike apareciendo, éxito de una reserva |
Curvas
Standard
cubic-bezier(.4, 0, .2, 1)
Cambios dentro de la pantalla. El caballo de batalla.
Out
cubic-bezier(0, 0, .2, 1)
Algo que entra desde fuera y se asienta.
Expo
cubic-bezier(.22, 1, .36, 1)
Salidas rápidas y decididas. Cerrar una hoja.
Drawer
cubic-bezier(.32, .72, 0, 1)
Exclusiva de hojas y drawers. No usar en otra cosa.
Overshoot
cubic-bezier(.45, 1.005, 0, 1.005)
La curva de Strike. Pasa el objetivo y vuelve.
In expo
cubic-bezier(.7, 0, .84, 0)
Solo para salidas: algo que se va y no vuelve.
Cómo se anima Strike — el rig
Strike ya no es una imagen: es un títere paramétrico (strike-rig.js + laboratorio en rig.html). Silueta, ojos y chispas se generan por parámetros y se mueven con resortes físicos — rigidez y amortiguación, no curvas fijas. Geometría oficial: 9 puntas, innerRatio 0.78, tipRound 0.20, trazo 6, ojos 12,5×23,5 en gap 13.5. Todos los tipos de ojo comparten estas métricas: misma separación, mismo grosor y mismo largo — sólo cambia el dibujo. La sombra va soldada al contorno (mismo trazado, trazo más pesado, desplazamiento acotado): contrapeso, nunca sombra despegada.
Para recrear a Strike exactamente, estos son los DEFAULTS del rig (radio base 62). Cualquier valor que no aparezca aquí se deja como viene en strike-rig.js.
| Grupo | Parámetro | Valor | Qué controla |
|---|---|---|---|
| Silueta | points | 11 | Puntas del destello. |
innerRatio | 0.78 | Profundidad de los valles. | |
tipRound · valleyRound | 0.20 · 0.20 | Redondeo de puntas y valles (× radio). | |
strokeWidth | 6 | Contorno; escala con el personaje. | |
rotation | −90° | Una punta apunta exactamente hacia arriba. | |
| Ojos | eyeGap · eyeY | 13.5 · −4 | Media separación y altura sobre el centro. |
eyeW · eyeH | 12.5 · 23.5 | Grosor de trazo y alto de la cápsula neutral. | |
eyeCurve · lookRange | 0.39 · 11.5 | Curvatura de la esfera facial y recorrido de la mirada. | |
eyeTilt · eyePitchTilt · eyePerspective | 0 · 0 · 0.07 | Giro lateral, giro vertical y perspectiva ojo cercano/lejano. Casi neutros: la mirada de Strike es serena. | |
restSquint | 0.15 | Los ojos SIEMPRE van un poco entrecerrados en reposo. Nunca completamente abiertos. | |
| Vida | wobble · breathe | 0.020 · 0.022 | Temblor orgánico de las puntas y pulso de respiración. |
tiltRange · pitchRange | 9 · 8 | Inclinación lateral y cabeceo 3D siguiendo el cursor. | |
shadowX · shadowY · shadowWeight | −4 · 3 · +2 | Sombra soldada: desplazamiento acotado y trazo extra. | |
| Ondas de color | wavesEnabled | true | Cuando Strike está feliz emana ondas: copias de su silueta expandiéndose detrás del cuerpo en la paleta de acentos — el verde de la paleta es el OSCURO #04B455, porque el verde bolea no se ve sobre fondo bolea. Sólidas, sin transparencia. Las chispas fueron retiradas. pulseCount 3 · pulseLife 0.9 · pulseSpread 0.8. |
Sí
Squash & stretch con volumen conservado. El hueso squash aplasta al aterrizar y recupera con el overshoot del resorte. Escala X·Y constante: nunca pierde masa.
No
Girar los ojos. La silueta puede rotar (estado loading), pero los ojos siempre miran al frente.
Sí
Ojos por estado, sobre una esfera. hi/success felices ˆˆ, error en cruz ><, thinking abiertos, sleep dormidos ⌣. La mirada viaja en arco: cerca del borde el ojo se acorta y rueda. Trazo de ojo constante (11) en todos los tipos.
No
Chispas ni partículas: ese sistema se retiró. La celebración es la onda de color, nada más.
Sí
Tiene carácter. Si lo ignoras 30 segundos se enoja (error); a los pocos segundos se queda dormido (sleep) hasta que vuelvas a interactuar — despierta con un hi. Las ondas se funden entre sí (lava lamp: blend multiply/screen).
Sí
Ondas de color al celebrar. En hi, success y excited, Strike emana ondas: su propia silueta expandiéndose detrás del cuerpo en la paleta de acentos (verde oscuro #04B455, lila, naranja, celeste, rosa, amarillo), en escalera, nunca simultáneas.
No
Movimiento lineal ni rebote repetido. Todo sale de un resorte: un asentamiento y quieto. Parpadeo cada 2–7 s con intervalo irregular.
Superficies interactivas del rig. Botones, píldoras de estado y controles activos usan siempre --active #05E26B — el mismo verde de «Filtro aplicado» en la app. Estados disponibles: idle, hi, look, thinking, hop, excited, success, error, poke, loading, orbit (gira en órbita morfando triángulo→pelota, con anillos de color — el estado del avatar de referencia), sleep.
Accesibilidad. Todo lo anterior se cancela bajo prefers-reduced-motion: reduce. Las animaciones decorativas —el latido, el parpadeo, el shimmer de carga— se apagan por completo; las transiciones funcionales se reducen a instantáneas. Nunca se usa movimiento como único indicador de un cambio de estado.
Siete temas, una sola cuadrícula. El feed no se piensa por posts sueltos: se piensa por filas de tres.
Como el sistema de Uber: los temas definen QUÉ se cuenta, la fotografía define CÓMO se ve, y las transiciones definen cómo se pasa de una cosa a la otra — dentro de un reel y entre tiles del feed. Todo sale de piezas que ya existen en este manual: el verde, Strike del rig, la tarjeta y la cancha.
Los siete temas
| Tema | Qué cuenta | Cómo se ve |
|---|---|---|
| Cómo se juega | Tutoriales de la app: crear una bolea, invitar, unirse. Paso a paso, sin rodeos. | Carrusel sobre verde con UI real de la app. Un paso por tile. |
| Caso de uso | Narrativa: la historia real de una bolea que se llenó — de la idea al partido. | Reel o carrusel de fotos con texto corto. La persona es la protagonista, no la app. |
| Celebrar el hacer | Anuncios que celebran jugar: el golpe, el punto, la risa después. | Foto grande de acción + titular de una línea. El logo cierra, no abre. |
| Dolores resueltos | El caos que Bolea® elimina: las 87 notificaciones del grupo, el «¿quién falta?», la cancha a medias. | Gráfico comparativo sobre crema, con humor. El dolor a la izquierda, Bolea® a la derecha. |
| Novedades | Features nuevos y mejoras, contados por lo que permiten hacer. | Tile verde con la UI del feature y una línea de beneficio. |
| Eventos | Convocatorias antes, cobertura después. | Antes: fecha grande sobre tinta. Después: fotos de la gente. |
| Momentos Strike | Strike reaccionando a la vida del jugador: la espera, el triunfo, la derrota digna. | Strike del rig sobre verde o sobre negro (versión verde), una línea de texto. Sin foto. |
El ritmo del feed
La cuadrícula inicial — los primeros doce posts, en el orden en que se publican (el 12 primero, el 1 al final). Tres reglas la gobiernan:
Sí
Cada fila de tres respira. Máximo un tile verde sólido y al menos una fotografía por fila. La foto es el oxígeno del feed.
No
Dos tiles del mismo tema adyacentes — ni en fila ni en columna.
Sí
Strike aparece una vez por pantalla. Un momento Strike cada ~6 posts. Más, y deja de ser un momento.
12
Cómo se juegaCrea tu bolea en 20 segundos
11Celebrar el hacerEl punto que gritaron los cuatro
10Momento StrikeEsperando que confirme el cuarto…
9Caso de usoMiguel llegó solo. Salió con equipo.
8Dolores resueltos87 mensajes en el grupo. O una Bolea®.
7EventosAmericano de sábado — así se vivió
6
NovedadesAhora invitas por WhatsApp con un link
5Celebrar el hacerMartes 9pm. Cancha llena.
4Cómo se juegaUnirse a una bolea: dale «Unirme»
3Caso de usoLa bolea de las chicas del club
2Momento StrikeSe llenó la bolea
1EventosKickoff Bolea® — Lima, 7 sep
Los tiles con Strike usan el rig en vivo: sobre negro va la versión verde; sobre verde, la oficial. Las «fotos» de esta maqueta son placeholders de tratamiento — el color y el encuadre que deben tener las reales: jugadores sociales, no profesionales, con las reglas de Fotografía. Las piezas de campaña del feed siguen la estructura del anuncio de los 90: foto grande, una línea que remata, lockup que cierra.
Transiciones
Tres movimientos conectan escenas en reels y tiles en carruseles. Usan las duraciones y curvas del sistema — nada nuevo que aprender.
| Transición | Cómo funciona | Timing |
|---|---|---|
| La cortina verde | Un plano de verde #05E26B barre el frame y revela la siguiente escena. Es la transición por defecto entre secciones de un reel. | panel 350 ms · curva drawer |
| El pop de Strike | Strike entra con su pop (escala 0,55 → 1, rotación −24° → 0°), tapa el corte y sale. Reservado para el momento de marca: apertura, cierre o el punto ganador. | hero 450 ms · curva overshoot |
| Corte en acción | El golpe de la escena A conecta con el efecto en la escena B: la pelota sale de un plano y entra al siguiente. En carruseles, el elemento cruza el borde del tile — la pelota que sale del tile 2 aterriza en el 3. | Corte seco en el frame del impacto |
Regla de cierre. Todo reel termina igual: cortina verde + lockup con Strike del rig haciendo hi. Es la firma — la única parte no negociable del montaje.
Aplicaciones
Dónde aparece la marca fuera de la app.
Todo lo de aquí sale de dos reglas que ya están escritas antes: el símbolo va siempre sobre la teja verde cuando lleva el logotipo al lado, y el negativo existe sólo para fondo oscuro. Esta sección no inventa reglas nuevas, dice dónde se aplican.
Pieza por pieza
| Pieza | Qué se usa | La trampa |
|---|---|---|
| Ícono de app | Strike sobre la teja verde, sin logotipo. El radio de la teja es 0.29 del lado — 28 sobre 96, 16 sobre 56. | Meter el logotipo dentro del ícono. A 48 px no se lee y ensucia la silueta. |
| Avatar y foto de perfil | La misma teja. Es la marca principal: Strike sobre verde funciona recortado en círculo porque el símbolo no llega a los bordes. | Recortar un bloqueo horizontal en círculo. Se come el logotipo. |
| Firma de correo | Bloqueo horizontal: teja + logotipo. Sobre blanco, en positivo. | Pegar el símbolo suelto junto al nombre, sin teja. |
| Notificación push | Sólo la teja, que es lo que el sistema operativo enseña. El texto hace el trabajo. | Abreviar el nombre a «B». El logotipo no se recorta nunca. |
| Sticker y GIF | Strike con expresión, con la teja o recortado con su contorno. Aquí sí puede ir sin fondo, porque va solo y no acompaña al logotipo. | Sticker sin contorno sobre fondo de chat oscuro: desaparece. |
| Camiseta y merch | Un solo Strike, grande, como sujeto. Bordado o serigrafía a dos tintas: cuerpo y contorno. | Repetirlo como estampado. Es un personaje, no un patrón. |
| Cartelería y valla | Bloqueo vertical sobre plano de color. A distancia manda la teja verde, no el nombre. | Ponerlo sobre foto sin un plano sólido detrás. |
Sobre fotografía
La marca no se apoya nunca directamente sobre la imagen. Si una pieza necesita las dos cosas, hay dos salidas legales y ninguna tercera:
Sí
La teja verde encima de la foto. Es un plano sólido, así que el contorno de Strike sigue teniendo contra qué contrastar.
Sí
Una banda o un tile de color aparte, fuera de la imagen, con la marca dentro. La foto se queda limpia.
No
Strike calado sobre la foto, con o sin sombra añadida. Sin fondo sólido el contorno se pierde contra el fondo.
No
Velar la foto para que la marca se lea. Si hace falta velarla, la marca está en el sitio equivocado.
Fotografía
La foto de Bolea® es documental, no publicitaria: gente real jugando de verdad, con la luz que había. Si parece banco de imágenes, no se publica.
Sí
Acción real. Sudor, risa, el instante del golpe. Movimiento congelado a 1/1000 o estela intencional — nunca poses mirando a cámara.
No
Stock, modelos, choques de puños fingidos, raquetas nuevas sin usar.
Sí
Luz de hora de juego. Atardecer, focos nocturnos, mañana de sábado. Cálida, con contraste medio y sombras vivas.
No
HDR, filtros de saturación, cielos reventados. El tratamiento es cálido y honesto.
Sí
Sujeto fuera de centro, con aire hacia donde viaja la pelota. El texto vive en el aire, nunca sobre una cara.
No
Verde bolea sobre la foto: ni overlays, ni duotonos, ni marcos verdes. El verde vive en los tiles gráficos; la foto se defiende sola.
Sí
Jugadores sociales, no profesionales. Gente común que quedó para jugar: la cancha de barrio, la silla de plástico, la jersey colgada del arco. El bodegón de barrio — objetos que cuentan el partido sin gente — es una foto legal y de las mejores.
No
Estética de élite: estadios, patrocinio, cuerpos de atleta, técnica perfecta. Bolea® es el partido del martes, no la final del domingo.
El anuncio de los 90
La pieza de campaña tiene UNA estructura, heredada del anuncio deportivo de los 90 (Umbro, adidas de barrio): una foto documental grande, una línea que remata, y el lockup que cierra en una esquina. La foto hace el trabajo emocional; el texto es corto, seguro de sí mismo y con guiño — nunca explica la foto, la remata. Nada de claims largos, badges, ni starbursts: la nostalgia está en la estructura y el tono, no en decorar.
Sí
«El grupo tiene 87 mensajes. La cancha, cuatro jugadores.» — foto del arco vacío al atardecer, lockup abajo a la derecha.
No
«¡Descarga la app y organiza tu pichanga fácil y rápido!» — eso es un banner, no un anuncio.
Ilustración
La ilustración de Bolea® habla el idioma de Strike y del logotipo: siluetas orgánicas de contorno grueso, ojos sin boca, geometría redondeada. Una a dos tintas por pieza, con textura de imprenta permitida — semitono, riso, la tinta que respira. Nunca compite con la foto: una pieza es foto O ilustración.
Sí
Strike es el único personaje con cara. Sus expresiones salen del rig, nunca dibujadas a mano. Los demás elementos — pelota, raqueta, red — son objetos, sin ojos.
No
Mascotas nuevas, blobs con cara que no son Strike, personas ilustradas con cara. Si necesita expresión, es Strike; si no, es un objeto.
Sí
La cancha cenital como gráfico. Canchas planas vistas desde arriba, en planos de color del sistema — funcionan como patrón, como fondo de tile y como póster.
No
Perspectiva 3D, sombras largas, degradados en la ilustración. Todo es plano; la profundidad la da el recorte, no la luz.
Sí
Textura de imprenta con intención. Semitono y grano tipo riso en piezas de campaña y merch — una o dos tintas sobre plano de color. La textura vive en la ilustración, jamás en la UI.
No
Trazo fino, línea temblorosa de libreta, estilo «doodle» genérico. El trazo de Bolea® es gordo, seguro y de remate redondo — como el logotipo.
Descargar assets
Un solo ZIP con todo lo necesario para producir una pieza de Bolea® sin volver a preguntar.
bolea-brand-kit.zip
Logotipos, Strike en todas sus variantes, tipografía, tokens y plantillas. El enlace se activa en cuanto subas los archivos maestros.
Contenido del kit
- /logoSVG y PNG @1× @2× @3×, positivo, negativo y sobre color
- /strikeSVG por expresión, Lottie del pop y del latido
- /app-iconiOS 1024, Android adaptive, favicon SVG e ICO
- /fuentesInter variable (OFL), woff2 y ttf
- /tokenstokens.css, tokens.json y tokens.ts
- /plantillasInstagram 1080×1350 y 1080×1920
- /motionProyecto Remotion listo para renderizar
- /manualEste documento en PDF
Cuando me pases los archivos maestros armo el ZIP con esta estructura, lo publico y cambio el botón de arriba por el enlace real. Lo que ya está listo hoy: los tokens, las plantillas de Instagram y el proyecto de Remotion.
Qué cambió
El manual anterior describía una marca que la app no implementa.
Esta versión documenta lo que dev.bolea.la sirve hoy. Estas son las diferencias que hay que conocer antes de usar cualquier pieza vieja.
Cambia
El botón primario es lima con texto tintaLa v5 decía verde sólido
#3FBF5E con label blanco. La app usa #05E26B con texto #1A1A17, en píldora. El tono cambió y el label pasó de blanco a tinta, pero el verde sigue siendo la acción.Cambia
Todos los botones son píldoraLa v5 mezclaba radios. Auditando la app: la acción principal es
rounded-full, 40 px de alto, ancho completo en detalle.Corregido
Los tokens
--primary engañanEl primer borrador de esta v6 dedujo del nombre de los tokens que el botón era tinta con label lima. Auditando el DOM: ningún elemento usa tinta como fondo y #C6E96B no se aplica nunca como texto. --primary se usa solo vía text-primary. Documentado ya como lo que la app hace.Cambia
El rojo
#E63946 → #E7000B. Más saturado y más puro. Se mantiene la disciplina de tres usos.Cambia
El fondo de pantalla
#F2F1F5 (frío, violáceo) → #EDEDED neutro, con la familia cálida encima para el contenido.Cambia
El morado deja de estar prohibidoLa v5 lo prohibía explícitamente. La app usa
#8E5FE0 y #8958C5. Se admite, acotado a acento de categoría.Cambia
El logotipo es «bolea» en caja baja, grotesca pesadaReferencia Helvetica Now Display ExtraBold; instancia digital Roboto var 850, tracking
−50, interlínea 0.9. Sustituye al Google Sans 500 grade 59 de la v6. El texto sigue siendo Roboto normal, y «Bolea®» en texto corrido va con B mayúscula.Nuevo
La tarjeta y la cancha documentadasLos dos componentes propios de Bolea®, con su anatomía completa, medidas y reglas de copy. Antes no existían en el manual.
Nuevo
Trece acentos de categoríaLa v5 no los mencionaba. Existen en la app como degradados de tarjeta y glow de íconos. Aquí quedan acotados a color de contenido.
Nuevo
Los neutros cálidos
#ECE9DD, #E5E3DA, #E0DED3, #D8D3C2 y sus tintas. Es la capa que le da carácter propio al sistema.Nuevo
Strike documentado como personajeGeometría, proporciones, expresiones y reglas de animación. Antes no existía en el manual.
Nuevo
Modo oscuro y tono de vozAmbos estaban en la app o en el producto sin estar documentados.
Abierto
FrauncesSe descarga y no se usa. Hay que quitarla o adoptarla formalmente. Ver Tipografía.
Resuelto
Mapa deporte → degradado: no existeSe auditaron cinco boleas de la app, las cinco de pádel, y las cinco tienen degradado distinto. El degradado identifica al evento, no al deporte. La fórmula está documentada en La cancha.
Abierto
Dos formas para el mismo botónUnirme es radio 12 y 28 px en la tarjeta, y píldora de 40 px en el detalle. Hay que unificar. Ver La tarjeta.