01 — Tokens de color
Primary
--color-primary
#2DB58A
Surface Base
--surface-base
#0B0C14
Surface Raised
--surface-raised
#111320
Border
--surface-border
#1E2136
Success
--color-success
#16A34A
Warning
--color-warning
#D97706
Danger
--color-danger
#DC2626
Text Secondary
--text-secondary
#8892A4
02 — Escala tipográfica · Space Mono
La estrategia ejecutó 342 órdenes en las últimas 24h.
Última sincronización: hace 3 segundos
PRECIO · VOLUMEN · P&L NETO
04 — Componentes · Botones
05 — Componentes · Badges de estado
ACTIVO
PENDIENTE
LIQUIDADO
EN VIVO
PAUSADO
LARGO
CORTO
BACKTEST
06 — Componentes · Inputs
07 — Componentes · Tarjetas de métricas
P&L Total
€24.380
▲ +8.4% esta semana
desde 01/06/2026
Drawdown máx.
-3.2%
▼ -0.8% vs mes ant.
Límite: 5.0%
Sharpe Ratio
2.14
→ estable
media 30d: 2.09
Órdenes 24h
342
▲ +12% vs ayer
Win rate: 67.8%
08 — Componentes · Tabla de datos + Libro de órdenes
| Estrategia |
Par |
Entrada |
P&L |
Estado |
| GridBot_v3 |
BTCUSDT |
42.350 |
+3.2% |
ACTIVO |
| MeanRev_ETH |
ETHUSDT |
2.180 |
+1.8% |
ACTIVO |
| TrendFollow |
SOLUSDT |
145.20 |
-0.6% |
PENDIENTE |
| Arb_MATIC |
MATICUSDT |
0.892 |
+0.0% |
PAUSADO |
BTC/USDT · Libro de Órdenes
Spread: 10 USDT (0.023%)
09 — Tokens CSS / TailwindCSS config
tailwind.config.ts · NeuralTrade
export default {
theme: {
extend: {
colors: {
primary: '#2DB58A',
surface: {
base: '#0B0C14',
raised: '#111320',
border: '#1E2136',
},
success: '#16A34A',
warning: '#D97706',
danger: '#DC2626',
},
fontFamily: { mono: ['Space Mono', 'monospace'] },
borderRadius: { sm: '2px', md: '4px' },
}
},
darkMode: 'class',
}
10 — Accesibilidad · WCAG 2.2 AA
| Par de colores | Ratio | AA Normal | AA Large | Preview |
|---|
| Primary (#2DB58A) sobre Surface Base (#0B0C14) |
7.2:1 |
PASS |
PASS |
|
| Text Primary (#E8ECF0) sobre Surface Base (#0B0C14) |
14.3:1 |
PASS |
PASS |
|
| Text Secondary (#8892A4) sobre Surface Base (#0B0C14) |
4.6:1 |
PASS |
PASS |
|
| Text Muted (#4A5568) sobre Surface Base (#0B0C14) |
3.1:1 |
FAIL |
PASS |
|
| Danger (#DC2626) sobre Surface Raised (#111320) |
4.9:1 |
PASS |
PASS |
|
| Btn Primary: Inverse (#0B0C14) sobre Primary (#2DB58A) |
7.2:1 |
PASS |
PASS |
|
⚠ Text Muted solo debe usarse en labels decorativos (≥14px bold) o textos no interactivos. Nunca en acciones o mensajes de error.
11 — Anti-patrones y migraciones
✓ Correcto
/* Token semántico */
color: var(--color-primary);
border: 1px solid var(--surface-border);
font-size: var(--fs-12);
padding: var(--sp-8) var(--sp-16);
✗ Prohibido
/* Valor raw sin token */
color: #2DB58A;
border: 1px solid #333;
font-size: 12px;
padding: 8px 16px;
✓ Correcto
/* Focus visible explícito */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
✗ Prohibido
/* Eliminar focus */
:focus { outline: none; }
/* o modo claro */
background: #FFFFFF;
color: #111827;
12 — Checklist QA para code review
- □Tokens: Todos los colores, tamaños de fuente y espaciados usan variables CSS / tokens Tailwind. Sin valores raw.
- □Dark-only: No existe ningún bloque de estilos
light mode. La clase dark está en <html> permanentemente.
- □Contraste: Todos los textos interactivos o de contenido superan 4.5:1 sobre su fondo (verificar con axe DevTools).
- □Focus visible: Todos los elementos interactivos tienen
:focus-visible con outline de 2px en --color-primary.
- □Tipografía: Solo Space Mono. Sin serif ni sans-serif excepto fallback de sistema.
- □Bordes:
border-radius solo 2px (sm) o 4px (md). Sin valores mayores.
- □Estados vacíos: Tablas y listas tienen estado "sin datos" con mensaje en
--text-muted.
- □Estados de carga: Botones con acción async muestran spinner mientras
loading=true.
- □Números: Todos los valores numéricos usan
font-variant-numeric: tabular-nums para alineación consistente.
- □Labels en mayúsculas: Solo
text-transform: uppercase con letter-spacing ≥ 0.08em para legibilidad.
- □Responsive: En mobile (<640px) las grids colapsan a 1 columna y los valores numéricos no se truncan.
- □Sin CDN externo: Todos los assets y fuentes están incluidos en el bundle o servidos desde el propio dominio.
NeuralTrade Matrix Design System · v1.0.0 · CULTIVA IA
WCAG 2.2 AA · Space Mono · Dark-only · MIT