Stella Nova · fundamentos
Tokens del sistema visual: color, tipografía, escala,
forma, movimiento. Cada valor proviene de
resources/tokens.css y se refleja aquí en vivo.
Para proponer cambios, redefiní variables en el bloque
<style id="overrides"> al inicio del documento — la página
entera los toma. Anotaciones libres en notes.md.
Primitiva · papel
--sn-papel-50
#fcfbf7
--sn-papel-75
#f4f2ed
fondo de página + pie (--sn-field claro)
--sn-papel-100
#f3f0e7
--sn-papel-200
#efece2
--sn-papel-300
#ece7da
--sn-papel-400
#e8e4da
--sn-papel-500
#e7e1d3
--sn-papel-600
#ddd6c7
--sn-papel-700
#a39a86
--sn-papel-800
#968c7c
Primitiva · tinta
--sn-tinta-300
#756d5d
--sn-tinta-400
#6b6357
--sn-tinta-500
#353123
--sn-tinta-600
#2c2410
--sn-tinta-650
#2a2719
--sn-tinta-700
#262318
--sn-tinta-750
#221f1a
la tinta canónica del cuerpo (claro)
--sn-tinta-800
#1e1c15
--sn-tinta-850
#1a0f0b
casi-negro para tinta sobre acento (oscuro)
--sn-tinta-900
#181610
--sn-tinta-950
#141209
Primitiva · rojo
--sn-rojo-500
#ae2d13
la nova y el link nacen del mismo carmín
--sn-rojo-600
#b21e3e
danger claro (vino más profundo, menos cálido)
--sn-rojo-700
#962c08
link-hover claro
--sn-rojo-900
#612403
link-visited claro
Primitiva · coral
--sn-coral-300
#c8a89a
(legacy)
--sn-coral-400
#ff6b7e
nova + danger oscuros (un coral, dos roles)
Primitiva · rosa
--sn-rosa-300
#e6acb7
link-new oscuro (rosa pálido sobre papel noche)
--sn-rosa-400
#c98592
link-new claro (rosa apagado, legible sobre crema)
Primitiva · azul
--sn-azul-200
#b3cef2
--sn-azul-300
#8fb4e8
Primitiva · malva
--sn-malva-400
#a99cae
Primitiva · verde
--sn-verde-400
#6cc18a
--sn-verde-500
#2f6f43
Primitiva · masking
--sn-masking-300
#f7db7e
--sn-masking-500
#d9a14b
--sn-masking-700
#8a5a12
--sn-masking-900
#5a4416
Primitiva · blanco
--sn-blanco
#ffffff
Semántica · campo y papel
--sn-field
light-dark(var(--sn-papel-75), var(--sn-tinta-950))
--sn-field-grain
0.035
opacidad del grano de papel; override por tema al final
--sn-paper
light-dark(var(--sn-papel-50), var(--sn-tinta-800))
--sn-paper-edge
light-dark(var(--sn-papel-100), var(--sn-tinta-700))
--sn-sunk
light-dark(var(--sn-papel-200), var(--sn-tinta-900))
Semántica · tinta
--sn-ink
light-dark(var(--sn-tinta-750), var(--sn-papel-300))
--sn-ink-soft
light-dark(var(--sn-tinta-400), var(--sn-papel-700))
--sn-ink-faint
light-dark(var(--sn-papel-800), var(--sn-tinta-300))
--sn-hairline
light-dark(var(--sn-papel-600), var(--sn-tinta-500))
--sn-hairline-soft
light-dark(var(--sn-papel-500), var(--sn-tinta-650))
Semántica · la nova
--sn-nova
light-dark(var(--sn-rojo-500), var(--sn-coral-400))
--sn-nova-ink
light-dark(var(--sn-blanco), var(--sn-tinta-850))
--sn-nova-wash
light-dark(#f7e9e6, #2b1c1d)
Semántica · enlaces
--sn-link
light-dark(var(--sn-rojo-500), var(--sn-coral-400))
--sn-link-hover
light-dark(var(--sn-rojo-700), color-mix(in oklab, var(--sn-coral-400) 80%, white))
--sn-link-visited
light-dark(var(--sn-rojo-900), color-mix(in oklab, var(--sn-coral-400) 75%, black))
--sn-link-new
light-dark(var(--sn-rosa-400), var(--sn-rosa-300))
--sn-icon
color-mix(in oklab, var(--sn-ink) 55%, transparent)
--sn-icon-active
var(--sn-ink)
Semántica · señales
--sn-ok
light-dark(var(--sn-verde-500), var(--sn-verde-400))
--sn-warn
light-dark(var(--sn-masking-700), var(--sn-masking-500))
--sn-warn-ink
light-dark(var(--sn-papel-50), var(--sn-tinta-850))
--sn-danger
light-dark(var(--sn-rojo-600), var(--sn-coral-400))
--sn-notice-bg
light-dark(var(--sn-masking-300), var(--sn-masking-900))
--sn-notice-ink
light-dark(var(--sn-tinta-600), var(--sn-masking-300))
--sn-ok-wash
color-mix(in oklab, var(--sn-ok) 14%, var(--sn-paper))
--sn-warn-wash
color-mix(in oklab, var(--sn-warn) 14%, var(--sn-paper))
--sn-danger-wash
color-mix(in oklab, var(--sn-danger) 12%, var(--sn-paper))
--sn-info-wash
color-mix(in oklab, var(--sn-warn) 8%, var(--sn-paper))
--sn-btn-bg
var(--sn-sunk)
--sn-btn-bg-hover
var(--sn-paper)
--sn-btn-fg
var(--sn-ink)
--sn-btn-border
var(--sn-hairline)
--sn-btn-border-hover
var(--sn-ink-faint)
--sn-btn-primary-bg
var(--sn-ink)
--sn-btn-primary-bg-hover
color-mix(in oklab, var(--sn-ink) 86%, var(--sn-paper))
--sn-btn-primary-fg
var(--sn-paper)
--sn-btn-danger-bg
var(--sn-danger)
--sn-btn-danger-fg
var(--sn-nova-ink)
--sn-field-bg
var(--sn-paper)
--sn-field-bg-disabled
var(--sn-sunk)
--sn-field-fg
var(--sn-ink)
--sn-field-border
var(--sn-hairline)
--sn-field-placeholder
var(--sn-ink-faint)
--sn-on-bg
var(--sn-ink)
--sn-on-fg
var(--sn-paper)
--sn-opt-hover-bg
var(--sn-sunk)
--sn-opt-sel-bg
var(--sn-nova-wash)
--sn-opt-fg
var(--sn-ink)
--sn-focus-border
var(--sn-nova)
--sn-focus-ring
0 0 0 2px var(--sn-nova-wash)
--sn-scrim
color-mix(in oklab, var(--sn-ink) 45%, transparent)
Tipografía
--sn-font-sans
'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif
--sn-font-serif
'Roboto Serif', 'Iowan Old Style', Palatino, 'Times New Roman', Georgia, serif
--sn-font-mono
'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace
--sn-font-text
var(--sn-font-sans)
--sn-font-display
var(--sn-font-text)
--sn-font-quote
var(--sn-font-serif)
--sn-serif-grade
70
--sn-text-width
80%
--sn-poem-width
77%
--sn-poem-size
85%
--sn-poem-weight
500
--sn-font-scale
1
--sn-leading
1.65
--sn-fs-root
calc(1rem * var(--sn-font-scale))
--sn-fs-xs
clamp(.72rem, .70rem + .10vw, .78rem)
--sn-fs-sm
clamp(.82rem, .79rem + .14vw, .90rem)
--sn-fs-base
calc(clamp(1rem, .97rem + .16vw, 1.05rem) * var(--sn-font-scale))
--sn-fs-md
calc(clamp(1.05rem, 1.01rem + .22vw, 1.18rem) * var(--sn-font-scale))
--sn-fs-lg
calc(clamp(1.2rem, 1.12rem + .40vw, 1.42rem) * var(--sn-font-scale))
--sn-fs-xl
calc(clamp(1.35rem, 1.22rem + .55vw, 1.62rem) * var(--sn-font-scale))
--sn-fs-display
calc(clamp(1.5rem, 1.32rem + .85vw, 2rem) * var(--sn-font-scale))
--sn-fs-page-title
calc(clamp(1.85rem, 1.55rem + 1.3vw, 2.5rem) * var(--sn-font-scale))
--sn-fs-table
calc(var(--sn-fs-base) * .8)
Baseline grid
--sn-baseline
calc(var(--sn-fs-base) * var(--sn-leading))
--sn-baseline-2
calc(var(--sn-baseline) * 2)
--sn-baseline-3
calc(var(--sn-baseline) * 3)
Ritmo espacial
--sn-s-1
.25rem
--sn-s-2
.5rem
--sn-s-3
.75rem
--sn-s-4
1rem
--sn-s-5
1.5rem
--sn-s-6
2.25rem
--sn-s-7
3.5rem
--sn-s-8
5.25rem
--sn-measure
64rem
(ex 46~50) medida de lectura: única restricción de ancho de la hoja (~75-80 car. en Plex Sans). Sustituye al viejo truco `width:80%` sobre los <p>. Súbelo/bájalo a gusto.
--sn-rail
15.5rem
(sin uso; reservado)
--sn-shell
81rem
ancho máximo del conjunto (header/pie)
--sn-ext-icon
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E")
--sn-ctl
2.4rem
Forma y materia
--sn-radius-s
2px
--sn-radius
4px
--sn-radius-l
8px
--sn-radius-paper
3px
la hoja: esquinas apenas redondeadas
--sn-radius-pill
999px
badges, chips, contadores
--sn-hair
1px solid var(--sn-hairline)
--sn-lift-paper
0 1px 1px rgba(40, 33, 20, .03), 0 3px 8px rgba(40, 33, 20, .04)
--sn-lift
0 1px 2px rgba(40, 33, 20, .05), 0 8px 24px rgba(40, 33, 20, .08)
--sn-lift-soft
0 2px 8px rgba(40, 33, 20, .05)
Movimiento
--sn-motion
1
--sn-dur-1
calc(120ms * var(--sn-motion))
--sn-dur-2
calc(220ms * var(--sn-motion))
--sn-dur-3
calc(420ms * var(--sn-motion))
--sn-ease
cubic-bezier(.22, 1, .36, 1)
--sn-z-rail
10
--sn-z-header
20
--sn-z-panel
40
--sn-z-skip
60