01
Contraste sobre decoración
Fondo papel, tipo ink. La marca vive en la tipografía y en un bloque decisivo de naranja — no en sombras ni gradientes.
Tokens, componentes y plantillas reales — destilados del sitio de Growth Summit Guadalajara y de la marca Black & Orange. Pensado para que diseño, desarrollo y stakeholders hablen el mismo idioma.
El sitio del Growth Summit funciona porque obedece a estas cuatro decisiones. Todo lo demás (tokens, componentes, plantillas) las hace operativas.
Fondo papel, tipo ink. La marca vive en la tipografía y en un bloque decisivo de naranja — no en sombras ni gradientes.
El naranja signature de B&O aparece máximo dos veces por pantalla: el CTA principal y un acento editorial. Nunca como fondo de página.
El rosa es señalización: flecha de "siguiente paso", upgrade, VIP. Una sola intervención por pantalla. Nunca como color base.
Botones primarios sin radio. Bordes 2px ink. Postura de consultoría, no de agencia de campañas. Honesto, no decorado.
Recorre cada capa en su propia página. Cada token, componente y patrón está copiable y documentado.
Paleta OKLch, escala tipográfica fluida, espaciado en base-4, radios, sombras y motion. Todo copiable.
→ 02 · ComponentsBotones, cards, forms, navegación, badges, alerts y agenda. Estados, hover, focus y accesibilidad incluidos.
→ 03 · PatternsHero, stat-strip, feature-grid, testimonial, pricing, footer. Composiciones probadas con tokens y componentes.
→ 04 · TemplatesDos plantillas completas: landing de evento + agenda & speakers. Listas para personalizar por edición.
→Tomamos prestada esta línea de la marca madre, Black & Orange, y la hicimos operativa. Estas son las reglas que aplican a cada decisión visual.
El sistema lee igual de bien en blanco y negro que con la paleta completa. Si el mensaje depende del naranja para entenderse, el mensaje todavía no está bien escrito.
Un bloque editorial. Una foto decisiva. Un naranja en el CTA. Nunca tres ornamentos compitiendo — eso devuelve la pieza al boceto.
Fechas, sedes, precios, contadores y IDs van en monospace con letter-spacing. Body y headlines siempre en sans. El mono es la firma editorial del sistema.
Si no hay un dato real, no se inventa. Un guion, un bloque gris o un "—" valen más que un número falso. La marca habla de estrategia: no podemos mentir con la decoración.