Regla de uso: Usar siempre semantic tokens. Nunca hardcodear valores hex directamente en componentes. Los tokens de perspectiva (--shadow-iso, --shadow-btn) se aplican en capas para crear profundidad.
El rendimiento de la campaña de paid media mostró un incremento del 23% en CTR durante la semana 3, con una reducción del CPA de 18€ a 14€. Los canales orgánicos mantuvieron estabilidad.
/* Perspective shadow crea profundidad en todos los estados interactivos */
Primary · sm / md / lg
Secondary · Ghost · Danger · Disabled
Estado
Descripción
Token aplicado
Default
Background + shadow-btn-primary
--shadow-btn-primary
Hover
translate(-1px,-1px) + shadow amplificado
transform + box-shadow
Focus
Ring verde 3px, visible en keyboard
--shadow-focus
Disabled
opacity: 0.5, cursor: not-allowed
opacity + cursor
04. KPI Cards
/* Efecto isométrico en hover: translate(-2,-3) + shadow depth */
📊
▲ +23.4%
€42,180
Revenue MRR
🎯
▲ +8.1%
3.42%
CTR promedio
⚡
▼ -4.2%
€14.80
CPA medio
📉
▼ -12.3%
68.4%
Tasa de retención
Anatomía: icon (40×40px, border-radius-md) · trend badge (mono font) · value (Oswald 700, 36px) · label (Poppins 14px, muted) · progress bar (4px, color por variante)
Variantes: kpi-primary · kpi-success · kpi-warning · kpi-danger — heredan el color del border y del bar-fill
05. Badges de Estado
/* Siempre JetBrains Mono · dot animado en live · uppercase + letter-spacing */
LiveAtenciónErrorInactivoNuevo
Regla must: El dot de badge-live debe incluir animación pulse-green para comunicar estado en tiempo real. El texto debe ser ≤ 2 palabras. No usar emojis como sustituto de badges de estado.
06. Inputs de Formulario
/* Focus ring = --shadow-focus · Error state = border-color danger + ring */
🔍
Default state — hover: border-opacity 0.15
📅
Populated state — valor formateado legible
⚠ Introduce un valor numérico válido (ej: 5000)
✓ Nombre disponible
Estado
Border
Ring / Shadow
Default
--color-border (8% white)
none
Focus
--color-border-focus (#00BD7D)
--shadow-focus (3px green ring)
Error
--color-danger (#DC2626)
ring rgba(220,38,38,0.2)
07. Navegación Lateral
/* Active indicator: 3px left border + subtle background */
DepthSaaS
Principal
📊
Dashboard
📈
Campañas
12
🎯
Segmentos
📋
Informes
Sistema
⚙️
Ajustes
❓
Ayuda
Reglas de componente: • Active: left-border 3px + background primary-subtle + color primary
• Hover: background rgba(255,255,255,0.04) + color surface
• Nav badges: Poppins 700, 10px, bg primary, color black
• Section labels: Mono 10px, uppercase, letter-spacing 0.1em
• Items: 9px vertical padding, height natural (no forzar 48px)
Responsive: • Mobile (<768px): sidebar colapsa a bottom nav o hamburger
• Solo iconos en ancho <64px (modo colapsado)
• Tooltip en hover sobre iconos cuando colapsado
08. Elementos de Perspectiva
/* Técnicas de profundidad visual propias del Perspective Design */
📦
Hover para ver efecto perspectiva
perspective(800px) rotateX(-4deg)
Depth layers — box-shadow stack
--shadow-iso · --shadow-card
Spacing scale — 4px base grid
--space-14px
--space-28px
--space-416px
--space-624px
--space-832px
09. Accesibilidad — WCAG 2.2 AA
/* Ratio mínimo: 4.5:1 texto normal · 3:1 texto grande · 3:1 componentes UI */
#Aa
Primary (#00BD7D) sobre Background (#0F1923)
7.3:1
AAA
#Aa
Texto blanco (#FFF) sobre Surface Card (#162030)
15.1:1
AAA
#Aa
Warning (#D97706) sobre Background — texto grande
4.8:1
AA
#Aa
Muted text (#6B7280) sobre Background — solo decorativo, no info
3.1:1
DECORATIVO
Criterios testables: [ ] Todos los botones accesibles por teclado (Tab, Enter, Space)
[ ] Focus ring visible en todos los elementos interactivos (--shadow-focus)
[ ] Los badges no transmiten info solo por color → siempre incluir texto o dot
[ ] Inputs de error tienen aria-invalid="true" y aria-describedby apuntando al mensaje
[ ] Sidebar tiene role="navigation" y aria-label="Navegación principal"
10. Anti-Patrones
/* Prohibiciones concretas para mantener coherencia del sistema */
✗ Dont
color: #009B67 — Hardcoded hex en componente
Botón con padding inconsistente: padding: 11px 22px (fuera del scale)