00 Design System · v1.0
Cada decisión de esta página tiene un motivo escrito. Los valores viven en
tokens.css;
el criterio, en DESIGN-SYSTEM.md.
01 Marca
Dos arcos con la boca enfrentada: el lazo. De esa geometría salen el motivo del
hero, los divisores y el gesto de la marca al pasar el puntero. El mark hereda
currentColor, así que funciona en cualquier superficie sin duplicar archivos.
Lockup horizontal
Archivo original del cliente, sin recomponer. Mínimo 104 px de ancho.
Sobre tinta
Papel sobre tinta. Nunca ámbar.
Marca sola
Mínimo 20 px de alto. Área de respeto: la altura de un arco.
Sí
Tinta sobre papel o papel sobre tinta. Sobre imagen, dentro de una caja sólida.
No
Rotarlo, deformarlo, recolorearlo, aplicarle sombra o degradado, o dejarlo suelto sobre una foto.
No
Reescribir el logotipo con otra tipografía. El lockup es un archivo, no texto.
02 Color
La rampa neutra es cálida (matiz 40–55°). El gris frío tipo slate está prohibido: es el delator más rápido de una paleta por defecto. El ámbar representa la luz del nombre y ocupa menos del 3% de cualquier pantalla.
La marca es monocroma, así que el acento no aporta color: marca jerarquía y nada más. Sobre papel la única variante válida como texto es mark-700 (7.32:1); sobre tinta, mark-300 (9:1). El botón primario es tinta, nunca acento.
Fue el acento del sistema hasta que se cerró la decisión en el panel. Ya no lo
usa ningún token semántico. Se conserva porque volver a él es cambiar cuatro
líneas del bloque semántico de tokens.css, no reconstruir nada.
Los 26 pares de contraste se verifican por script:
pwsh design-system/tools/check-contrast.ps1. Cero fallos es requisito
para dar por buena cualquier iteración.
03 Tipografía
Las dos self-hosted en woff2. Ni Inter ni system-ui. El tracking está
escalonado por tamaño óptico —un valor global sería el error— y el interlineado se
fija por rol, no por tamaño.
t-display-1 52 → 136 px peso 500 tracking −0.038em lh 0.93
Webs que
t-display-2 40 → 88 px peso 500 tracking −0.032em lh 0.93
venden solas
t-h1 32 → 56 px tracking −0.026em lh 1.06
Diseño que aguanta el zoom
t-h2 26 → 40 px tracking −0.022em lh 1.06
Diseño que aguanta el zoom
t-h3 20 → 26 px tracking −0.016em lh 1.22
Diseño que aguanta el zoom
t-lead 17 → 19 px medida 46ch lh 1.62
Una entradilla ocupa entre dos y tres líneas. Si necesita cuatro, el titular no estaba diciendo lo suficiente.
t-body 16 px medida 68ch lh 1.62
El cuerpo se mide en caracteres, no en píxeles: entre 60 y 78. Es el rango en el que el ojo encuentra el principio de la línea siguiente sin esfuerzo, y no depende del tamaño de pantalla sino del tamaño de la letra.
t-micro 13 px Switzer caja baja retirada la versión mono
Etiqueta de apoyo — ya no va en versalitas (listón A15)
t-num cifras tabulares precios y métricas
1.500 € · 1.100 € · 8.900 € · 11.000 €
Los titulares se quedan en Switzer y la interfaz también: botones, etiquetas y campos no cambian. Lo que está en juego es el texto corrido. Mismo tamaño óptico, misma medida, mismo interlineado: sólo cambia la letra.
A Switzer + Newsreader
Newsreader es una serif de lectura con eje óptico: la letra ajusta su grosor y su espaciado según el tamaño al que se compone. Debajo de un titular en grotesca hace lo que hacen los estudios caros — contraste, no repetición. Nadie la produce por defecto.
400–600 · cursiva real · variable, un solo archivo
B Switzer + Author
Author es una grotesca pensada para leer, no para rotular: aperturas amplias, una g con carácter y terminaciones que se notan sin gritar. Mantiene la web en un solo registro y aun así no suena a plantilla.
400 · 500 · 600 — Fontshare
A · Newsreader
Trabajo con un número corto de clientes a la vez. Cada web se entrega en tres semanas, con los textos escritos y las métricas puestas. Si el proyecto no encaja lo digo el primer día, y no cobro por decirlo. El precio está en esta página porque preguntarlo no debería costar una llamada.
B · Author
Trabajo con un número corto de clientes a la vez. Cada web se entrega en tres semanas, con los textos escritos y las métricas puestas. Si el proyecto no encaja lo digo el primer día, y no cobro por decirlo. El precio está en esta página porque preguntarlo no debería costar una llamada.
Referencia · Switzer (lo que hay ahora)
Trabajo con un número corto de clientes a la vez. Cada web se entrega en tres semanas, con los textos escritos y las métricas puestas. Si el proyecto no encaja lo digo el primer día, y no cobro por decirlo. El precio está en esta página porque preguntarlo no debería costar una llamada.
Máximo dos pesos conviviendo en un mismo bloque visual.
04 Espaciado
El paso de 4 px es para ajuste óptico; el ritmo real va en 8. Hay tres ritmos de sección distintos, no uno: alternarlos es lo que evita la página que respira igual de principio a fin.
| Token | Móvil | Escritorio | Cuándo |
|---|---|---|---|
| --section-pad-sm | 56 | 88 | Bloques encadenados, listas, FAQ |
| --section-pad | 80 | 144 | Sección estándar |
| --section-pad-lg | 104 | 192 | Hero, cierre, cambio de tono |
05 Forma
El radio único en todo es el segundo delator más común. Aquí cada nivel tiene un uso asignado y un componente nunca usa el radio de otro nivel. La píldora está reservada a la acción y a los badges.
Sombras cortas, de baja opacidad y teñidas con el matiz cálido de la tinta —nunca negro puro. En reposo la página es plana; la elevación se reserva al hover y a los overlays.
06 Movimiento
Duraciones por tipo de cambio, no una global. Nada de fade-in-up uniforme: el reveal se escalona por rol de contenido y se desplaza como mucho 12 px. Pasa el puntero por las barras para ver cada curva.
--ease-out · 520ms · reveals
--ease-in-out · 280ms · estado
--ease-snap · 170ms · táctil
| Token | ms | Para |
|---|---|---|
| --dur-instant | 90 | Color en hover |
| --dur-fast | 170 | Botones, foco, inputs |
| --dur-base | 280 | Tarjetas, acordeón, flechas |
| --dur-slow | 520 | Reveal de entrada |
| --dur-scene | 900 | Transición de sección |
07 Componentes
Tarjeta · --r-md
Estructura, diseño, texto y puesta en producción. Dos semanas.
Tile · sólo hairline superior
Evita el bloque de N tarjetas idénticas. Se usa cuando el contenido ya tiene jerarquía propia.
Lista de características
Ejemplo de mensaje de error.
Porque Inter es el tipo por defecto de casi toda herramienta que genera interfaces, y eso hace que una web se reconozca como genérica en dos segundos. Switzer es un neo-grotesco de fundición, gratuito, y deja que la personalidad la lleve el logo mientras la tipografía aporta precisión.
Los funcionales de formulario ya están. Añadir un segundo color de marca rompe la premisa: el sistema es monocromo cálido con un acento que representa luz. Si hiciera falta diferenciar categorías, se hace con peso tipográfico y posición, no con color.
Se sube la escala tipográfica y se alterna papel y tinta por secciones. Ese es el recurso de contraste del sistema. Lo que no se hace es meter color de fondo ni degradados: es exactamente lo que separa una web cara de una plantilla.
08 Motivo
La única "ilustración" del sistema, y está generada por código. Cada anillo es la figura del logo: una circunferencia con la boca abierta. Las bocas giran anillo a anillo y de ahí sale la espiral. Sustituye a stock y a ilustración generada, que están prohibidos.
Trazo de 1 px. Un solo arco iluminado por composición. Se pausa fuera del viewport y
con la pestaña oculta. Con prefers-reduced-motion
dibuja un fotograma y para.