DESIGN.md

version	alpha
name	NeuroPrompt
description	Centro de control semántico offline para compilación de prompts. Híbrido entre utilidad de escritorio y compilador técnico.
colors	primary secondary tertiary neutral success warning error info bg-base bg-surface bg-card bg-elevated bg-input bg-sidebar text-primary text-secondary text-muted border-subtle border-input border-focus #2B8BC8 #A4A8AE #4CB8F5 #272B32 #30B87A #E5A51A #E04E65 #4CB8F5 #1A1D20 #21242A #272B32 #2F333B #1C1F22 #1E2126 #E8EAED #A4A8AE #6C717A #363A42 #4A5060 #2B8BC8
typography	h1 h2 body metric label mono fontFamily fontSize fontWeight lineHeight letterSpacing Inter 28px 800 1.1 -0.02em fontFamily fontSize fontWeight lineHeight Inter 13px 700 1.3 fontFamily fontSize fontWeight lineHeight Inter 12px 400 1.5 fontFamily fontSize fontWeight lineHeight Inter 20px 800 1 fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature Inter 10px 700 1 0.3px c2sc, smcp fontFamily fontSize fontWeight lineHeight JetBrains Mono 11px 400 1.5
rounded	sm md lg 4px 8px 12px
spacing	xs sm md lg xl xxl 4px 8px 12px 16px 24px 32px
components	button-primary button-primary-hover button-secondary button-danger card card-hover status-chip-ok status-chip-warn status-chip-error status-chip-info nav-item-active circle-ring circle-ring-active circle-ring-success backgroundColor textColor rounded padding {colors.primary} #FFFFFF {rounded.sm} 7px 18px backgroundColor #3CA4E0 backgroundColor textColor rounded padding {colors.bg-elevated} {colors.text-secondary} {rounded.sm} 5px 12px backgroundColor textColor rounded transparent {colors.error} {rounded.sm} backgroundColor borderColor rounded padding {colors.bg-card} {colors.border-subtle} {rounded.md} 14px borderColor {colors.tertiary} backgroundColor textColor rgba(48,184,122,0.12) {colors.success} backgroundColor textColor rgba(229,165,26,0.12) {colors.warning} backgroundColor textColor rgba(224,78,101,0.12) {colors.error} backgroundColor textColor rgba(76,184,245,0.12) {colors.info} backgroundColor textColor borderLeft rgba(43,139,200,0.1) {colors.tertiary} 2px solid {colors.tertiary} border size 4px solid {colors.border-subtle} 140px borderColor {colors.primary} borderColor {colors.success}

Overview

NeuroPrompt adopta el lenguaje visual de una utilidad de escritorio premium (tipo Driver Booster / Auslogics BoostSpeed) con identidad propia: azul profundo como acento, fondo oscuro elegante (no negro puro), y un híbrido entre indicador circular dominante y organización modular.

El diseño prioriza tres cosas simultáneamente: (1) la acción principal ("Mejorar prompt") siempre visible y prominente, (2) el prompt accesible sin navegar, y (3) resultados con colores semánticos inmediatos.

Colors

• Primary (#2B8BC8): Azul profundo para botones primarios, enlaces y acento de navegación. Distinto del azul Breeze KDE (#3DAEE9) para identidad propia.
• Tertiary (#4CB8F5): Azul brillante para métricas activas y highlights. Uso limitado a valores que merecen atención.
• Success (#30B87A): Verde para preservación OK, restricciones cumplidas, operaciones completadas sin errores.
• Warning (#E5A51A): Ámbar para advertencias, pérdidas parciales, estados que requieren atención.
• Error (#E04E65): Rojo para errores críticos, validación fallida, pérdida de restricciones. Nunca decorativo.
• Info (#4CB8F5): Azul brillante para estados de progreso e información neutral destacada.

Typography

Inter para toda la interfaz (coincide con la fuente del tema actual). JetBrains Mono para NSL y JSON en pestañas técnicas.

Jerarquía por peso y tamaño, no por color:

• h1 (28px/800): valor métrico principal del círculo
• h2 (13px/700): títulos de sección y tarjetas
• body (12px/400): texto general
• metric (20px/800): valores numéricos en tarjetas de resultado
• label (10px/700/sc): etiquetas uppercase compactas

Layout

Layout híbrido con tres zonas:

1. Sidebar izquierda (190px): Navegación agrupada en 3 secciones — Principal (Resumen, Compilar, Resultados, Validación), Herramientas (Perfiles, Glosario), Sistema (Configuración).
2. Contenido central: Hero = círculo de preservación (140px) + panel de prompt lado a lado. Debajo: 4 tarjetas de resultado semántico. Al final: 3 tarjetas de herramientas.
3. Barra de progreso minimalista (3px):strip horizontal en la parte inferior del contenido, no un QProgressBar tradicional.

Components

Los componentes clave se reutilizan entre vistas:

• StatusChip: pastilla con dot + texto, 4 variantes cromáticas (ok/warn/error/info). Aparece en el header y en resultados.
• CircleIndicator: anillo circular con valor numérico central. Estados: idle, active (azul), success (verde), error (rojo).
• ResultCard: tarjeta cuadrada con valor grande + label pequeña. Color del valor determinado por semántica.
• ToolCard: tarjeta rectangular con icono + título + descripción.
• PromptPanel: textarea con tabs internos (Original / Listo / Informe) y footer de selects.
• NavGroup: grupo de items de navegación con label uppercase.

Elevation

Sin sombras reales (GTX 660). Separación por:

• Diferencia de fondo (bg-base < bg-card < bg-elevated)
• Bordes de 1px border-subtle
• Border-color accent en hover

Components

button-primary es el único botón con color sólido. Todo lo demás es outline o ghost. Esto mantiene la jerarquía clara: si hay un botón azul en pantalla, es la acción principal.