Inicio · Components
Capa 02 · Biblioteca

Components

Las piezas que se ensamblan en patrones. Cada una tiene estado por defecto, hover, focus, disabled y notas de accesibilidad. Hechas sobre los tokens — cámbialos y todo el sistema se mueve con ellos.

01 · Buttons

Botones

Borde 2px ink, radio 0, hover desplaza la pieza 1px e introduce sombra brutal de naranja. Filosofía: la acción se siente decisiva, no decorada.

Primary & orange & outline

Tres variantes principales. Una sola por sección.
.btn .btn-primary · .btn-orange · .btn-outline · .btn-ghost 48px height

Tamaños

sm 36 · default 48 · lg 56
.btn-sm · .btn-lg

Sobre fondo ink

En secciones inversas el outline ajusta su color.
.surface-ink .btn-outline
03 · Cards

Cards genéricas

Tres flavors: default (border 1px), brutal (border 2px ink, radio 0) y hoverable (con la firma brutal).

Default

Card estándar

Border hairline, radio 8px, padding 24. La opción más usada del sistema.

Brutal

Card brutal

Border 2px ink, radio 0. Para cuando el contenido pide presencia.

Hoverable

Card interactiva

Pasa el cursor — la firma brutal de naranja aparece al elevar.

.card · .card-brutal · .card.hoverable
04 · Speaker

Speaker card

Foto 4:5 (mismo ratio del sitio actual), nombre, rol, organización en mono. Usable para hosts, panelistas o mentores.

Alan Valderrábano
CEO & Founder
Black & Orange
Daniel Marcos
Founder
Growth Institute
Maca Riva
Marketing Lead
HARDI LATAM
Luis Javier Álvarez
Director
Cordon Bleu MX
.speaker-card > .speaker-photo + .speaker-bodyaspect-ratio 4/5
05 · Pricing

Tier card

Tres variantes — outline default + featured ink + opcional flag rosa para upgrades. El precio en display 44px tabular.

General Admission
28 · sep · 2026
$500 USD
  • Acceso al evento completo (8am–5pm)
  • Materiales descargables
  • Coffee break y comida
Comprar boleto
HubSpot / BnO Clients
tier de partners
$350 USD
  • Todo lo del General Admission
  • Sesión privada con CEO de B&O
  • Reporte post-evento personalizado
Solicitar acceso
.tier-card · .tier-card.featured · .tier-flag
06 · Badges

Badges & pills

Mono 11px, uppercase, letter-spacing 0.12em. Para estado, etiquetas de track, status del sistema.

Default Outline Live Marketing VIP ● Confirmado ● Sold out
.badge .solid · .outline · .orange · .pink
07 · Forms

Formularios

Label en mono uppercase. Input 44px. Focus = halo soft orange (sin desplazar la pieza). Para el form de registro del evento.

Te enviaremos el QR del evento.
.field · .field-label · .field-input · .field-select · .field-textarea · .field-check
08 · Callouts

Callouts

Borde lateral 3px del color del callout. Usa naranja para regla de marca, rosa para llamadas a upgrade, status para alertas.

Información
El registro cierra el 21 de septiembre. Boletos sin asignar pasan a lista de espera.
Regla de marca
El naranja aparece máximo dos veces por pantalla. Una en el CTA principal, otra como acento editorial.
Upgrade disponible
Cambia de General Admission a VIP por solo $150 USD adicionales hasta el 14 de septiembre.
Confirmado
Tu lugar está reservado. Recibirás el QR del evento en tu correo en los próximos 10 minutos.
Sold out
El tier HARDI VIP está agotado. Únete a la lista de espera para próximas ediciones.
.callout · .orange · .pink · .success · .warn · .danger
10 · Tabs

Tabs

Indicador naranja debajo del tab activo. Para alternar tracks de agenda, formato de speakers, etc.

Sesiones enfocadas en demand generation, contenido y atribución multicanal.

[data-tabs] > .tabs[role="tablist"] + [role="tabpanel"]
11 · Agenda

Agenda row

Hora en mono · sesión + speaker · tag de track. La pieza atómica de la página de agenda completa.

08:30
Registro y desayuno de bienvenida
Hotel Presidente · Salón principal
Networking
09:15
Deja de improvisar tu crecimiento
Alan Valderrábano · CEO Black & Orange
Keynote
10:30
Cómo escalar sistemas de venta sin perder al cliente
Daniel Marcos · Growth Institute
Ventas
11:45
IA en marketing — qué automatizar y qué no
Maca Riva · HARDI LATAM
Marketing
.agenda > .agenda-row > .agenda-time + .agenda-body + .badge
12 · Stats

Stat block

Cifras grandes en display tabular. El sufijo (%, +, x) en naranja para marcar la marca cuando hay datos reales.

300+
Asistentes esperados
12
Speakers confirmados
8h
De contenido continuo
3
Tracks paralelos
.stat > .stat-value + .stat-label · .unit (naranja)