Brandbook

Identidad visual, voz y tono — fuente única de verdad
Sistema operativo
Identidad

Fuego Social — Más que un asado

Fuego Social es el marketplace global de asados. Conectamos personas que tienen parrilla y sillas vacías con personas que quieren sumarse a una mesa argentina, en cualquier parte del mundo. Construimos infraestructura digital para un ritual cultural que mueve más de USD 2.500M anuales solo en Argentina y otros USD 4.000M en eventos privados internacionales.

Misión

Democratizar el ritual del asado para que cualquiera, en cualquier ciudad, pueda sentarse a una mesa argentina.

Visión

Ser el espacio digital donde el asado argentino se traduce en relaciones humanas reales, en 38 países y contando.

Valores

El fuego antes que el reloj
El asado no se apura. La plataforma respeta el ritmo del ritual, no lo distorsiona.
Honestidad sin filtro
Reviews bidireccionales, precios transparentes, sin trampas. La cultura argentina no soporta el chamuyo y la plataforma tampoco.
Reciprocidad
El que sirve también se sienta. El que reserva también puede recibir. Ambos lados son iguales en valor.
Cultura por sobre transacción
Cada decisión de producto pregunta primero qué hace bien al ritual, después qué hace bien al GMV.
Origen sin nostalgia
Somos argentinos en el mundo. No vendemos folklore, vendemos infraestructura para una cultura viva.

Personalidad

Cálido pero directoArgentino pero globalCultural pero técnicoConfiable pero divertidoProfesional pero sin acartonarse
Voz y tono

Principios

Español argentino siempre
Sí: "Reservá. Publicá. Cobrá. Andá. Vení. Sumate."
No: "Reserva. Publica. Cobra. Ve. Ven. Únete."
Frases cortas, mucho aire
Sí: "El fuego no se apura. La parrilla tampoco."
No: "El fuego no se apura, así como la parrilla tampoco se apura, ya que ambos son procesos que requieren tiempo."
Sin emojis en ninguna parte
Sí: "Más que un asado."
No: "Más que un asado 🔥🥩"
Ñ correcta, acentos completos
Sí: "Anfitrión, mañana, año, español, niño."
No: "Anfitrion, manana, ano, espanol, nino."
Hablamos como gente, no como marca corporativa
Sí: "Si tenés sillas de sobra, publicalas."
No: "Aprovechá nuestra innovadora plataforma para monetizar tus capacidades de hosting."
Datos antes que adjetivos
Sí: "12% de comisión. Sin costos de publicación."
No: "Una comisión competitiva con grandes ventajas."
Cero clichés del rubro
Sí: "Reservá tu próxima mesa."
No: "Vivencias gastronómicas únicas. Experiencias inolvidables. Disrupción del sector."

Vocabulario prohibido

Palabras del rubro que matan la voz. Si las ves en el copy, reescribir.

experiencia gastronómica
→ asado
vivencia única
→ una buena tarde
lifestyle
→ forma de vivir
disrupción
→ cambio
innovador
→ nuevo
revolucionario
→ distinto
ecosistema
→ plataforma o comunidad
sinergia
→ trabajar juntos
world-class
→ muy bueno
best-in-class
→ el mejor
leverage
→ usar
stakeholder
→ interesado / parte

Ejemplos de copy

hero "El asado sin compañía no es un asado."
subhero "Siempre hay lugar para uno más. Reservá una silla, alquilá un quincho o vendé entradas para tu próximo evento."
ctaPrimario "Buscar asados"
ctaSecundario "Publicar el mío"
fundadorBio "Soy argentino. Vivo en Luxemburgo hace años. Construí Fuego Social para que el asado no se quede en pocas manos."
errorPagina "Esta página no existe. Quizás se quemó. Volvé al inicio."
vacioReservas "Todavía no reservaste ningún asado. Buscá uno cerca tuyo."
footerTagline "Más que un asado."
newsletterCta "Recibí los próximos asados de tu ciudad."
Colores

Sistema de color

El sistema de colores nace del fuego: del carbón apagado (negro cálido), pasando por la brasa (naranja), hasta la chispa (dorado). Sin azules, sin verdes neón. Todo ancla al ritual.

Paleta primaria

Fuego
#E8511A
Color principal de marca. CTAs, links activos, badges de marca. Usar con moderación — el rojo es para acciones primarias, no para decoración.
Fuego oscuro
#C43E12
Hover de botones primarios, énfasis sobre fuego principal.
Chispa
#FF6B35
Variante clara, gradientes, glow effects.
Dorado
#D4A847
Estrellas, badges Pro, premium status, valoraciones.
Dorado oscuro
#B8922E
Hover de elementos dorados, énfasis.

Paleta neutra

Carbón apagado
#0C0A08
Background principal. Casi negro pero cálido, no azulado.
Brasa apagada
#0F0D0B
Background alternativo, secciones.
Madera quemada
#161210
Surface — cards, navegación, modales.
Carbón vivo
#1E1912
Cards interactivos, áreas elevadas.
Brasa
#241E17
Hover de cards.
Borde tenue
#2A2318
Bordes default, separadores.
Borde elevado
#3A3028
Bordes en hover.

Paleta de texto

Crema
#F2EDE4
Texto principal sobre fondo oscuro. Cálido, no blanco puro.
Crema apagada
#C0B5A8
Texto de párrafos largos, lecturable sin saturar.
Crema sutil
#8A7D6E
Texto secundario, captions, metadata.
Crema desvanecida
#5A5048
Texto terciario, deshabilitado, labels técnicos.

Estado

Éxito
#4CAF50
Confirmaciones, verificado, status positivo.
Advertencia
#F5A623
Pending, draft, atención requerida.
Error
#E53935
Errores, rechazos, peligro.

Reglas

  • Ningún componente puede hardcodear hex. Siempre var(--color-*).
  • Para texto sobre Fuego (#E8511A): usar #FFFFFF, no Crema.
  • Para Crema sobre Fuego: prohibido — bajo contraste (4.1:1, no AA).
  • Para acentos y notificaciones, usar Dorado (#D4A847) en vez de Fuego cuando ya hay un CTA Fuego cerca.
Tipografía

Plus Jakarta Sans

Geométrica con pequeños toques humanísticos. Letras cerradas pero respirables. La negrita 800 es muy sólida — perfecta para CTAs y headlines de marca.

Demostración

HeroMás que un asado
H1El asado sin compañía no es un asado
H2Cómo funciona
BodyReservá una silla, alquilá un quincho o vendé entradas para tu próximo evento. Publicar es gratis. Solo cobramos cuando vendés.
CaptionAnfitrión verificado · 4.97 ★ · 89 reviews
Monobrand.config.ts — commission: 0.12

Escala de tamaños

--text-xs11pxCaptions, labels técnicos
--text-sm13pxMetadata, footnotes, etiquetas
--text-base15pxBody por defecto
--text-md17pxBody destacado, intros
--text-lg20pxSubtítulos pequeños
--text-xl24pxH3
--text-2xl32pxH2 secciones
--text-3xl44pxH1 páginas internas
--text-4xl60pxHero alterno
--text-heroclamp(40px, 6vw, 80px)Hero principal home
Espaciado · Radios · Sombras · Movimiento

Espaciado (base 4px)

--space-14pxGaps mínimos en metadata
--space-28pxGaps entre elementos relacionados
--space-312pxPadding de inputs, gaps
--space-416pxPadding cards, margins texto
--space-520pxPadding interno medio
--space-624pxMargenes secciones internas
--space-832pxSeparación entre subsecciones
--space-1040pxPadding horizontal contenedor
--space-1248pxMargin secciones (mobile)
--space-1664pxAire entre secciones medias
--space-2080pxPadding vertical sección estándar
--space-2496pxPadding vertical sección hero

Radios

--radius-sm8pxBotones pequeños, badges, inputs delgados
--radius-md12pxBotones default, inputs
--radius-lg18pxCards, contenedores principales
--radius-xl24pxModales, hero sections
--radius-pill100pxFiltros, tags, chips
--radius-full50%Avatares circulares

Sombras

--shadow-sm0 2px 8px rgba(0,0,0,0.3)Cards en hover sutil
--shadow-md0 8px 24px rgba(0,0,0,0.4)Cards elevados, popovers
--shadow-lg0 20px 60px rgba(0,0,0,0.5)Modales, elementos destacados
--shadow-fire0 0 40px rgba(232,81,26,0.15)Glow naranja sutil — CTAs hero, brand emphasis

Movimiento

--transition-fast150ms easeHover de links, color changes
--transition-base200ms easeBotones, cards default
--transition-slow350ms easeModales, transiciones de página
Logo · Iconografía · Componentes

Logo (estado: DEFINITIVO)

Isotipo: llama naranja #FF5A00 con siluetas de personas, sobre fondo oscuro. Fuente: icon-512.png (1254px source de lista.fuegosocial.com). Nav: icon 36×36 radius 8px + FUEGO (800, crema) + SOCIAL (900, naranja), inline.

Isotipo — fuente de verdad

Isotipo Fuego Social Isotipo sobre Noche
Isotipo Fuego Social Isotipo sobre Crema

Logo completo (Nav)

Icono 36×36 con radius 8px + texto "FUEGO" (Plus Jakarta Sans 800, crema) + "SOCIAL" (Plus Jakarta Sans 900, naranja #FF5A00). Todo en línea.

FUEGO SOCIAL
FUEGO SOCIAL

Tamaños disponibles

16
32
48
96
180

Reglas

  • No interpretar ni recrear el isotipo — usar siempre el PNG exacto
  • No estirar ni desproporcionar
  • No cambiar colores fuera de #FF5A00
  • No usar sobre fondos que no contrasten
  • No usar wordmark sin Plus Jakarta Sans

Iconografía

28 iconos SVG custom. Stroke 2px, esquinas redondeadas, lineales (no rellenos). Sin emojis en toda la plataforma. Usamos íconos asado-específicos como diferenciador visual: fire (llama estilizada), grill (parrilla con barras), meat (cortes de carne), wine (copa con vino), cheers (dos copas chocando). Estos iconos son brand assets, no se reemplazan por Material Icons.

Tamaños

xs14pxInline en metadata
sm18pxBotones pequeños
md24pxDefault UI
lg32pxHeaders de sección
xl48pxEmpty states, hero icons

Componentes — botones

Aplicaciones

Redes sociales

perfilCuadrado1024x1024 — Mark Fuego sobre Carbón apagado, claraZone amplia
portadaTwitter1500x500 — Wordmark + tagline 'Más que un asado' centrados
portadaLinkedIn1584x396 — Wordmark + URL fuegosocial.com en esquina inferior
portadaFacebook820x312 — Wordmark + scene de asado de fondo desaturado

Emails

headerWordmark + tagline alineados al inicio. Background Carbón apagado.
footerIconos sociales (Instagram, Twitter, LinkedIn) + dirección + unsubscribe link.
ctaButtonBackground Fuego, color blanco, padding 12px 32px, radius 12px
Rebrand

Cambiar el logo, paleta o nombre completo: < 5 minutos. Todo nace de brand.config.ts. El script generate:tokens lo convierte en CSS variables. Ningún componente hardcodea valores.

Lo que NO se rebrandea: La voz argentina, el tono, los valores, la honestidad — eso no se rebrandea sin matar la marca.