Hero navy — variantes con sidebar dark

Navy se queda. 4 variantes que atacan la "L de masa oscura" desde ángulos distintos: rail accent, elevación, sweep, baseline. Todas mantienen bg-ink-primary + texto blanco. Cambia solo el accent/decoración.

A1

Actual — flat navy + glow corner brand-purple

ProCero código nuevo. Es lo que está en producción ahora.
ConSidebar y hero se fusionan visualmente — ambos son flat navy del mismo tono. La hero pierde "presence" como elemento.
background: var(--color-ink-primary); + radial gradient corner glow brand-primary 0.35 alpha + grid pattern 32px white 0.025
🔍 Quick search…
🔔
SA
Partners › BCPOS Group
B05516BA

BCPOS Group

House PartnerActivoRegistered Apr 14, 2026
5
Merchants
1
Partner Users
0
Total Devices
Overview
Merchants 5
Users 1
Audit

Overview

Partner NameBCPOS Group
CodeBCPOS
TypeHouse Partner

Quick Stats

Active Merchants5
Partner Users1
A2

Brand-light rail vertical — eco del sidebar active-rail

ProEl rail lavanda izquierdo le da identidad a la hero como "elemento" — ya no es solo un bloque navy más. Echa al sidebar's active rail (mismo color), hay cohesión visual cross-component. Mínimo: agrega 1 pseudo-element y 4px de padding-left.
ConEs sutil — desde lejos puede no leer. Si el sidebar collapsa la hero gana protagonismo (puede no ser problema).
background: ink-primary; ::before = 4px linear-gradient(brand-light → brand-primary) en left edge
🔍 Quick search…
🔔
SA
Partners › BCPOS Group
B05516BA

BCPOS Group

House PartnerActivoRegistered Apr 14, 2026
5
Merchants
1
Partner Users
0
Total Devices
Overview
Merchants 5
Users 1
Audit

Overview

Partner NameBCPOS Group
CodeBCPOS
TypeHouse Partner

Quick Stats

Active Merchants5
Partner Users1
A3

Elevated — sombra brand-purple + inner highlight (mi recomendación)

ProLa hero "flota" sobre la página — la sombra brand-tinted bajo el bottom edge crea separación física vs el sidebar flat. El inner highlight (1px white 0.08 al top) le da bevel sutil tipo "tarjeta premium". Lee como elemento elevado, no como otra zona.
ConSombra grande puede llamar la atención más de la cuenta en pantallas low-DPI. La diferencia se aprecia mejor con espacio alrededor (margin-bottom suficiente entre hero y tabs).
box-shadow: 0 12px 32px -8px rgba(147,14,165,0.45), 0 4px 12px rgba(26,16,64,0.35), inset 0 1px 0 rgba(255,255,255,0.08)
🔍 Quick search…
🔔
SA
Partners › BCPOS Group
B05516BA

BCPOS Group

House PartnerActivoRegistered Apr 14, 2026
5
Merchants
1
Partner Users
0
Total Devices
Overview
Merchants 5
Users 1
Audit

Overview

Partner NameBCPOS Group
CodeBCPOS
TypeHouse Partner

Quick Stats

Active Merchants5
Partner Users1
A4

Diagonal brand sweep — energía, navy-anchored

ProEl gradiente diagonal añade dirección y dinamismo — el ojo "viaja" del navy izquierdo al brand purple derecho. Diferencia de la sidebar (que es flat navy) por composición de color, no por pieza decorativa. Las stats numéricos terminan sobre el lado purple, lo que las hace pop.
ConGradients pueden sentirse "graphic" (más marketing que tool). Si el ancho del contenedor cambia, el punto de transición se mueve raro. Lado brand purple intenso puede bajar contraste de las labels minúsculas si no cuidas el alfa.
background: linear-gradient(110deg, ink-primary 0% → 45%, brand-dark 0.85 alpha 75%, brand-primary 0.7 alpha 100%)
🔍 Quick search…
🔔
SA
Partners › BCPOS Group
B05516BA

BCPOS Group

House PartnerActivoRegistered Apr 14, 2026
5
Merchants
1
Partner Users
0
Total Devices
Overview
Merchants 5
Users 1
Audit

Overview

Partner NameBCPOS Group
CodeBCPOS
TypeHouse Partner

Quick Stats

Active Merchants5
Partner Users1