Sistema de diseño · v1
El cielo dejó de ser inmutable.
Stella Nova es un lenguaje visual editorial, sobrio y cálido. Una hoja de papel flota sobre el campo gris del atelier; un único punto de luz carmín —la nova— es el acento. Lo que sigue lo destila del skin de MediaWiki y lo generaliza para cualquier software, sin tocar su contrato de tokens.
Metáfora
Página de papel sobre el campo del taller. Materia antes que cromo.
Acento
La nova carmín, usada con avaricia: foco, identidad, selección.
Voz
Humanista-científica. Lectura primero; densidad cuando hace falta.
Usa la barra superior para conmutar trío tipográfico, tema, familia del cuerpo, tamaño y la grilla de línea base. Cada elección recorre todo el documento en vivo y persiste entre recargas.
01 · Principios
Doctrina
Cinco reglas gobiernan el sistema. No son estéticas: son operativas. Resuelven discusiones antes de que ocurran.
Toca la capa más alta que resuelva tu problema
El color y los componentes viven en tres capas (primitiva → semántica → componente). Cambiar una primitiva afecta todo; reasignar una semántica mueve un rol sin tocar la paleta; ajustar un componente toca un widget y nada más. Siempre la capa más alta posible.
El conjunto se mantiene pequeño a propósito
Bootstrap enseñó qué pasa cuando un set de tokens crece sin freno. Antes de añadir un token o una clase: ¿lo cubre algo existente? Si la respuesta es no, se conversa — no por burocracia, sino por coherencia.
La nova se usa con avaricia
Un solo acento agudo: el carmín. Reservado para foco de controles, identidad, título de página y selección. Los íconos nunca son carmín — tinta al 55 % en reposo, plena al hover. El color que grita pierde su poder si grita siempre.
Accesibilidad de primera clase
Objetivo WCAG 2.1 AA en ambos temas: contraste suficiente, foco visible siempre, navegación por teclado completa, prefers-reduced-motion y prefers-color-scheme respetados, landmarks y jerarquía de encabezados correctas. No depender solo del color para comunicar estado.
Materia antes que cromo
Sombras sutilísimas, esquinas apenas redondeadas, un grano de papel casi imperceptible. La interfaz se siente asentada sobre una superficie, no flotando en un degradado. Editorial, no app-store.
No tenía la menor duda; no había error de observación. Era una estrella genuina, en el lugar donde jamás se había visto estrella alguna.— Tycho Brahe, De nova stella (1573)
02 · Color
Tres capas
El sistema cromático sigue el orden de Material 3: reference → system → component. Cada capa consume solo la de abajo.
Primitivas — la paleta
Nombradas por qué es el color (papel, tinta, rojo, coral…), con stops 50–950. Agnósticas del tema, definidas una sola vez. Tocas esto solo para cambiar la paleta entera.
Semántica — los roles
Cada rol (--sn-paper, --sn-ink, --sn-nova…) apunta a una primitiva por tema (un override por rol bajo [data-sn-theme]; en producción light-dark() lo colapsa a una línea). El flip claro/oscuro vive en esta capa.
Componente — los controles
Tokens de botón, campo, foco. Consumen solo semántica, nunca primitivas. Heredan el flip de tema automáticamente.
Capa 1 · Primitivas
La paleta completa. El número crece con la oscuridad. La familia papel es el reino de los neutros cálidos claros; tinta, los oscuros; el rojo es la sangre del carmín.
Capa 2 · Roles semánticos
De qué primitiva nace cada rol, en claro / oscuro. Conmuta el tema arriba para verlos voltear.
Señales y washes
Las señales (--sn-ok, --sn-warn, --sn-danger) y sus washes —fondos suaves derivados con color-mix() sobre el papel— para que el modo oscuro se voltee solo.
03 · Tipografía
Once tríos, un ritmo
El sistema es agnóstico de la familia: un trío (serif · sans · mono) se conmuta vía [data-trio] sin tocar color, grilla ni medida. Elige uno — la página entera responde. La familia del cuerpo alterna sans↔serif aparte, con [data-sn-family].
Escala fluida
Sobria, sin titulares exagerados. Cada escalón usa clamp() y se modula con la preferencia de tamaño del lector.
Voz serif vs. sans
El cuerpo es sans por defecto; la voz serif se reserva para citas y verso. El lector puede invertirlo. La x-height se normaliza para que la medida se sienta idéntica entre familias.
Sans · cuerpo y UI
Serif · voz editorial
La hoja flota sobre el campo gris del atelier; un único punto de luz carmín es la nova.
Mono · código
/* el ritmo nace de la interlínea del cuerpo */
const baseline = fsBase * 1.61;
=> != >= <= 0Oo 1Il| --sn-baseline #&@$04 · Espacio y ritmo
Una grilla de línea base
El ritmo vertical se mide en una unidad: --sn-baseline = tamaño del cuerpo × interlínea. Todo line-height de bloque y todo margen vertical es un múltiplo entero. Activa la grilla arriba para verla.
Escala espacial
Ocho pasos en progresión 1.5, de --sn-s-1 (.25rem) a --sn-s-8 (5.25rem). Para gaps, padding y márgenes que no son verticales-de-bloque.
Anchos
La hoja tiene una medida de lectura (--sn-measure, 64rem) — la única restricción de ancho. El conjunto va a --sn-shell. Los controles comparten altura (--sn-ctl, 2.4rem).
05 · Forma y materia
Esquinas, sombra, grano, movimiento
La materia es discreta. Radios pequeños, sombras que apenas asientan la hoja sobre el campo, un grano sutil y un movimiento corto con una sola curva de easing.
Radios
Sombras — «lift»
Movimiento
Tres duraciones (--sn-dur-1/2/3) y una curva (--sn-ease, cubic-bezier(.22,1,.36,1)). Todo se multiplica por --sn-motion, que prefers-reduced-motion pone a cero.
06 · Iconografía
Feather, como sprite
Un único set de líneas (Feather), inyectado como sprite SVG inline y usado con <use href="#sn-i-…">. Color por política: tinta al 55 % en reposo, plena al hover. Nunca carmín.
<!-- uso -->
<svg class="sn-i"><use href="#sn-i-search"/></svg>07 · Componentes
La librería
Generalizada y software-agnóstica. Todo consume tokens; nada inventa color ni medida. Clases con prefijo .sn-.
Controles base
Navegación
Contenedores
Casiopea
Constelación · 5 estrellas notables
Propiedades
- Tipo
- Ia
- Distancia
- 8–13 kal
- Fuente
- IAU
Filtrar por tipo
Mostrar solo entidades de la clase seleccionada en el grafo activo.
¿Descartar la relación?
«SN 1572 → detonó → Revolución científica» se eliminará del grafo.
Detalle
- Entidad
- SN 1572
- Relaciones
- 7
- Editado
- hoy
Feedback
Sin relaciones aún
Esta entidad no tiene relaciones semánticas. Creá la primera para conectarla al grafo.
Datos
| Designación | Tipo | Constelación | Magnitud |
|---|---|---|---|
| SN 1572 | Ia | Cassiopeia | −4,0 |
| SN 1604 | Ia | Ophiuchus | −2,5 |
| SN 1054 | II | Taurus | −6,0 |
08 · Aplicación
Visualización de conocimiento
La superficie no convencional para la que se generaliza el sistema: grafos semánticos y mapas conceptuales con paneles de información y gestión de relaciones. Una misma data, tres variaciones del mismo lenguaje. Cambia entre ellas — y prueba cualquier trío o el modo oscuro.
Clic en cualquier nodo o relación para enfocar la entidad y poblar el panel. La misma estructura de tokens sostiene un grafo de fondo oscuro, una hoja de lectura y una tabla de tripletas sin un solo color nuevo.
09 · Guías de uso
Antes de añadir nada
El sistema crece por sustracción. Tres preguntas antes de tocar un token o una clase, y la regla de la capa correcta.
Reasigna un rol en la capa semántica cuando cambie el significado. Una línea, sin tocar la paleta ni los componentes.
Hardcodear un hex en un componente. Si el color no existe como token, casi siempre ya hay un rol que lo cubre.
Usar la nova para foco, identidad y selección. Que su escasez la mantenga con voz.
Teñir íconos de carmín o repartir el acento por la interfaz. El color que grita siempre deja de comunicar.
Componer el ritmo vertical en múltiplos de --sn-baseline y los espacios con la escala --sn-s-*.
Píxeles mágicos sueltos. Rompen la grilla y el sistema deja de auto-coordinarse.
El contrato
Los nombres --sn-* semánticos y de componente son un contrato externo: no se renombran ni se eliminan. La capa primitiva es puramente aditiva por debajo. Así, generalizar a un software nuevo nunca rompe a los que ya consumen el sistema.
Stella Nova · sistema de diseño. Destilado del skin homónimo para MediaWiki (Wiki Casiopea, e[ad] PUCV) y generalizado para visualización de conocimiento y cualquier otra superficie. Tipografías OFL · íconos Feather · color en tres capas, claro/oscuro por tema.