Coral vivo
Acción y energía
Botones principales, llamados a la acción y acentos cálidos.
#F55F3E · texto grafito
Identidad visual fundacional
En el barrio, ayudarnos nos hace más fuertes.
Barrio Solidario 2.0 es la plataforma comunitaria pensada para conectar a vecinos, comercios, comedores, merenderos, centros de jubilados y organizaciones de el barrio y zonas cercanas.
Muestra visual: los botones se conectan a las acciones reales en la próxima etapa.
Plaza del barrio: Intercambio de alimentos y ropa en un espacio público. Ilustración provisional, no es una fotografía de participantes reales.
Alimentos SolidariosRopero SolidarioAyuda al VecinoEventos Solidarios
Personalidad de marca
Cercana, argentina y clara
La marca invita a ayudar sin culpar a quien no puede hacerlo. Tres ideas sostienen cada mensaje: siempre existe una forma concreta de colaborar, las necesidades del barrio merecen visibilidad y respeto, y la solidaridad se fortalece cuando las acciones y sus resultados se pueden comprobar.
En el barrio, ayudarnos nos hace más fuertes.
Lo que a alguien le sobra, a otra persona puede ayudarla.
Cada gesto puede convertirse en una oportunidad.
Cuando nos organizamos, llegamos más lejos.
Estos textos son propuestas creativas de la identidad visual. No son testimonios, campañas, donaciones ni resultados reales.
Marca
Un símbolo de encuentro
Dos comunidades que se superponen, el punto exacto donde se encuentran, el sol que abre la jornada y una raíz que las sostiene. El símbolo se lee igual de bien a 20 px que a 200 px; el logotipo combina Recoleta en el nombre con el apellido en versalitas espaciadas.
BarrioSolidario
Símbolo
Monocromo
Sello
Avatar
Marca de agua
Reglas de uso
- Área de resguardo mínima: la altura del sol del símbolo.
- Tamaño mínimo del símbolo: 20 px. Por debajo, usar sólo el logotipo.
- Sobre fondos vivos, el símbolo va en la versión monocroma clara.
- Nunca deformar, rotar, recortar ni cambiar los colores por fuera de la paleta.
El símbolo y el logotipo son una propuesta inicial de trabajo: se pueden ajustar antes de publicar.
Paleta cromática
Color con intención
Cinco colores vivos ordenan la experiencia y una familia cálida de neutros sostiene la lectura. El color aparece en acentos, bloques y datos: nunca satura todas las superficies a la vez ni compite consigo mismo.
Amarillo cálido
Esperanza y oportunidades
Alimentos solidarios, avisos de atención y destacados luminosos.
#FBBD2A · texto grafito
Turquesa
Confianza y colaboración
Ropero solidario, vínculos entre organizaciones y datos de gestión.
#0C8479 · texto blanco
Azul intenso
Contraste y orientación
Pedidos de ayuda, enlaces, foco del teclado y jerarquía informativa.
#1E45C0 · texto blanco
Verde fresco
Crecimiento y recuperación
Donaciones de todo tipo, resultados verificados y estados de éxito.
#1B7C3B · texto blanco
Escalas por color
Cada color vive en una escala de 50 a 700: los tonos claros para fondos suaves de estado, el tono medio para superficies y el profundo para textos sobre crema.
coral
sol
mar
azul
verde
Neutros y lectura
- Crema luminoso#FFFBF4Fondo general de la aplicación.
- Crema suave#F8F2E7Bloques secundarios y secciones alternas.
- Línea cálida#EFE6D8Bordes, separadores y contornos de tarjetas.
- Superficie blanca#FFFFFFTarjetas, formularios y paneles.
- Grafito medio#6B717BTexto secundario y datos de contexto.
- Grafito profundo#16181CTitulares, textos principales y navegación.
Estados informativos
InformaciónÉxitoAtenciónError
Contraste verificado
- Grafito sobre crema17,2:1AAA
- Grafito sobre amarillo cálido10,5:1AAA
- Blanco sobre azul intenso7,9:1AAA
- Grafito sobre coral5,6:1AA
- Blanco sobre verde5,3:1AA
- Blanco sobre turquesa4,6:1AA
- Grafito medio sobre crema4,8:1AA
Acento por área del barrio
Las áreas que llegan en las próximas etapas comparten una misma identidad y se distinguen por su acento de color. Es una propuesta de asignación: todavía no existen páginas ni contenido de esas áreas.
Alimentos Solidarios
Alimentos y productos de primera necesidad.
#2457FF
Ropero Solidario
Ropa en buen estado para reutilizar.
#842BFF
Ayuda al Vecino
Pedidos y necesidades concretas del barrio.
#FF527D
Eventos Solidarios
Encuentros, actividades y campañas.
#842BFF
Donaciones de Todo Tipo
Objetos, servicios y aportes varios.
#2457FF
Comercios Solidarios
Comercios que suman productos o descuentos.
#3A3A5C
Comedores, merenderos y centros de jubilados
Espacios comunitarios que reciben y cocinan.
#842BFF
Historias que Inspiran
Relatos verificados de acciones concretas.
#FF527D
Regla de uso artístico: un color vivo por bloque, fondos crema dominantes y el color profundo reservado para textos y acciones. Evitar bloques saturados seguidos y degradados decorativos.
Tipografía y composición
Editorial y legible
Una tipografía expresiva para los titulares y otra muy legible para todo lo que hay que entender rápido: textos, formularios, navegación y datos. La jerarquía se sostiene igual en pantalla grande y en celular.
Recoleta · titulares
Aa
Titulares principales y nombres de sección.
Aporta personalidad editorial, cálida y reconocible. Se usa en pesos 700 y 900, con interlínea ajustada.
Plus Jakarta Sans · textos
Aa
Textos, formularios, navegación y datos.
Muy legible en pantallas chicas. Nunca por debajo de 14 px en información funcional.
Título 1
Recoleta 700 · 40–64 px · interlínea 1,02
Ayudarnos nos hace más fuertes
Título 2
Recoleta 700 · 30–44 px · interlínea 1,08
Alimentos Solidarios
Título 3
Recoleta 700 · 22–28 px
Cómo colaborar
Subtítulo
Jakarta 600 · 18–20 px
Comercios Solidarios
Cuerpo
Jakarta 400 · 16–18 px · interlínea 1,65
Texto de lectura claro, cálido y directo para explicar necesidades, acciones y resultados.
Etiqueta
Jakarta 600 · 12 px · mayúsculas · tracking 0,24em
Resultado verificado
Dato de contexto
Jakarta 500 · 14 px
Fecha, zona u organización responsable
- Nunca menos de 14 px en información funcional ni en etiquetas de formulario.
- Párrafos de lectura entre 65 y 75 caracteres por línea; en celular, una sola columna.
- Un titular expresivo por pantalla: el resto del texto va en la tipografía legible.
- Las etiquetas en mayúsculas se reservan para categorías y estados, nunca para párrafos.
Composición y recursos
Ritmo, formas y detalles
El aire es parte del diseño: mucho espacio en blanco, bloques amplios y muy pocos elementos por pantalla. Las formas orgánicas, los arcos y las tramas aportan personalidad sin competir con la información.
Espaciado
Una escala corta y múltiplos de 4 px. El espaciado se usa para agrupar, no para decorar.
- Base4 px
- Compacto8 px
- Interno16 px
- Bloque24 px
- Sección64 px
- Aire96 px
Formas
Radios generosos y recortes con curva: pastilla para botones, arco para imágenes.
Botón
Pastilla completa
Campo
16 px
Tarjeta
24 px
Arco
Ilustraciones y fotos
Orgánica
Recortes y manchas
Iconografía
Línea fina, trazo simple y siempre dentro de un contenedor circular con el color del área.
Tramas y manchas
Recursos gráficos de apoyo, siempre por detrás de la información y con contraste bajo.
Movimiento
Las microinteracciones se reservan para confirmar una acción: 200 a 300 ms, un desplazamiento corto y una sombra apenas más profunda. Nunca animaciones que distraigan de la lectura.
Alimentos
Pasá el cursor por encima
Ropero
Pasá el cursor por encima
Eventos
Pasá el cursor por encima
Con la preferencia de movimiento reducido activada en el sistema, las animaciones y transiciones se desactivan automáticamente.
Componentes base
Piezas que ya funcionan
Botones, etiquetas, tarjetas, campos y avisos comparten las mismas reglas de color, forma y tipografía. Así las áreas del barrio van a verse distintas entre sí, pero siempre parte de la misma identidad.
Botones
Altura cómoda para el celular (44 a 48 px) y texto en 16 px. El coral es la acción principal; el grafito y el azul acompañan sin competir.
Etiquetas de área
Alimentos SolidariosRopero SolidarioAyuda al VecinoEventos SolidariosDonaciones de Todo TipoComercios SolidariosComedores, merenderos y centros de jubiladosHistorias que Inspiran
Alimentos SolidariosRopero SolidarioAyuda al VecinoEventos SolidariosDonaciones de Todo TipoComercios SolidariosComedores, merenderos y centros de jubiladosHistorias que Inspiran
Avisos
Dato informativo para orientar a quien está leyendo.
La acción se registró correctamente.
Falta completar un dato para poder publicar.
No pudimos enviar el formulario. Probá de nuevo.
Tarjetas por área
Una misma estructura de tarjeta con el acento de cada área: etiqueta, título, descripción breve, dato de contexto y una sola acción.
[Título de la necesidad]
[Descripción breve de lo que hace falta, en una o dos líneas claras.]
[Zona · fecha]
[Prenda disponible]
[Talle, estado y punto de entrega, sin datos personales.]
[Zona · disponibilidad]
[Pedido del vecino]
[Qué necesita y desde cuándo, con la información justa para poder ayudar.]
[Zona · estado]
[Nombre del comercio]
[Qué ofrece a la comunidad y en qué condiciones.]
[Rubro · zona]
Formularios
Campos amplios, etiquetas siempre visibles y ayuda debajo del campo.
Este dato ayuda a acercar la ayuda al barrio correcto.
Resultados verificables
La estructura de un resultado: qué se entregó, a quién y quién lo confirma. Se completa únicamente con registros reales.
Verificado
- Entrega
- [dato pendiente de registro real]
- Destino
- [organización o comedor]
- Confirmado por
- [persona responsable]
Avance del pedido
Sin registros reales cargados, la barra permanece vacía.
Todo el contenido de esta sección es de muestra: los textos entre corchetes son marcadores y no hay registros, instituciones ni resultados reales cargados.
Universo fotográfico
Personas reales, miradas dignas
Criterios para las fotografías que se van a incorporar más adelante. Mientras no haya fotos propias del barrio, la muestra usa recursos ilustrativos y siempre lo dice.
Criterios de imagen
- Personas reales en actividades reales: colaborar, entregar, organizar, compartir.
- Dignidad y participación por encima del impacto visual del sufrimiento.
- Luz natural, encuadres cercanos y gestos cotidianos del barrio.
- Consentimiento previo de toda persona reconocible en la imagen.
- Nunca presentar imágenes de archivo o generadas como participantes reales.
- Espacios reconocibles: vereda, plaza, comercio, salón comunitario.
Ninguna ilustración de esta muestra representa a personas, comercios, comedores u organizaciones reales, ni anticipa resultados de campañas.
Ilustración provisional
Plaza del barrio
Intercambio de alimentos y ropa en un espacio público.
Ilustración provisional
Mano a mano
Entrega de una bolsa de alimentos y prendas en un comercio.
Ilustración provisional
Mesa común
Mesa compartida de un comedor o merendero del barrio.
Espacio reservado
Fotografía documental del barrio, a reemplazar en la Etapa 2.