Compaytence
Guía de diseño
Cada token, componente y regla del sistema v2, mostrado a tamaño de trabajo. Haga clic en cualquier muestra para copiar su hexadecimal.
La hoja de estilos incorporada aquí es system.css literal, copiada durante la compilación. Cada relleno de muestra, relación de contraste y lectura OKLCH se calcula a partir de un valor hexadecimal mediante build.py, por lo que una etiqueta no puede desviarse del color situado encima. Si el sistema cambia, vuelva a ejecutar la compilación en lugar de editar este archivo.
Por qué existe el sistema
No para verse bien. Para que sea imposible que haya sido instalado.
Una auditoría de agosto de 2026 reveló que 13 de los 13 valores de acento y de texto del sistema anterior eran los valores predeterminados literales de Tailwind, y que nuestro propio sitio de producto se había inicializado con shadcn ("style": "new-york"). Un competidor de un sector sin relación compartía 9 de nuestros 12 recursos distintivos con valores casi idénticos, porque ambos sitios se habían ensamblado a partir del mismo registro.
Cada valor debe poder rastrearse hasta una fuente. Si la única respuesta a «¿por qué ese número?» es «parecía correcto», es una desviación.
Esa prueba sustituyó a la anterior, «¿podría haberse instalado esto?», porque las listas negras se deterioran en un ciclo aproximado de doce meses. La señal de 2024 era un degradado púrpura e Inter. La señal de 2026 es crema cálido y una tipografía serif de exhibición, que fue la vía de escape de la señal de 2024, adoptada con suficiente amplitud para convertirse en la nueva. La derivación no se deteriora.
Fuente: design-system.md §0, auditoría de agosto de 2026.
Nunca escriba una prohibición sin un reemplazo positivo. Si se le dice «no use crema», un modelo no produce variedad, se desplaza a otra paleta fija. La negación reubica un atractor en vez de disolverlo. Cada regla de esta guía nombra el token, número o tipografía que se usa en su lugar.
Una escalera azul, un tono
El azul PAY del logotipo es la semilla. Todos los demás azules son ese mismo color aclarado u oscurecido.
El paso 50 es el propio azul del logotipo, medido en un tono OKLCH de 245.56. En los trece pasos, el tono se mantiene dentro de 3.1 grados. El croma es otra historia: alcanza su máximo en la semilla y cae hacia ambos extremos, porque sRGB no puede sostener la saturación en el extremo pálido. La escalera es una escalera de luminosidad con el tono fijado, que es la propiedad que importa.
Contraste medido frente a --paper en cada tema. El verde supera 4.5:1, el gris supera 3:1, el rojo no supera ninguno. Calculado el 13 de agosto de 2026.
#33A9FF mide 2.24:1 sobre el fondo claro. Sobre una superficie clara es solo relleno. Nunca texto, nunca una línea fina que haya que leer. Sobre el fondo oscuro, el mismo hexadecimal alcanza 6.37:1 y puede componerse como texto. Esa asimetría es la razón entera de que exista una escalera en lugar de un único hexadecimal.
Este texto es #33A9FF sobre papel. Con 2.24:1 no supera ningún mínimo de accesibilidad que exista.
Nunca haga estoEl mismo hexadecimal como relleno detrás de blanco y como semilla de toda la escalera.
Este es su cometidoPor eso, nadie elige nunca un paso a mano. Seis tokens de rol se resuelven en el peldaño correcto para cada tema, y el marcado solo nombra el rol.
| Token | Función | Claro | Relación | Oscuro | Relación |
|---|---|---|---|---|---|
--mark |
enlaces, énfasis | paso 75 #106aa6 |
5.09 | paso 30 #81c5ff |
8.77 |
--mark-deep |
énfasis más intenso | paso 80 #005990 |
6.53 | paso 20 #b0daff |
11.05 |
--mark-solid |
RELLENO en claro, texto en oscuro | paso 50 #33a9ff |
2.24 | paso 50 #33a9ff |
6.37 |
--mark-tint |
superficies teñidas | paso 05 #edf6ff |
1.04 | paso 95 #002e4d |
1.16 |
--fig |
cifras a cualquier tamaño, el valor predeterminado seguro | paso 75 #106aa6 |
5.09 | paso 30 #81c5ff |
8.77 |
--fig-display |
cifras de exhibición a partir de 24px | paso 65 #017ec8 |
3.84 | paso 40 #5fb7ff |
7.49 |
--fig-inline |
cifras en texto corrido, un alias de --fig | paso 75 #106aa6 |
5.09 | paso 30 #81c5ff |
8.77 |
--fig-display mide 3.84:1 sobre el fondo claro, así que solo es admisible por encima de unos 24px. Mientras ese paso vivo llevó el nombre --fig, cada numeral de índice y cada estadística en línea que recurría al nombre obvio incumplía AA en silencio, que es exactamente lo que ocurrió una vez. Desde el 8 de septiembre de 2026 los nombres reflejan el riesgo: --fig es el paso seguro, 5.09:1 en claro y admisible a cualquier tamaño, y el paso de exhibición es opcional bajo un nombre que lleva consigo su propia restricción.
Nunca introduzca un segundo tono de acento. El latón se probó para las cifras y se rechazó; después sobrevivió inadvertido en un lavado atmosférico con un croma de 0.086 durante dos borradores. Si un color supera aproximadamente 0.02 de croma y no es este azul, es un error. Existen dos excepciones, y ambas deben ser auditables: las marcas de terceros conservan el color de su propietario, etiquetadas de modo que la auditoría autorice el atributo y nunca el hexadecimal; y una réplica de producto que muestra al usuario lo que realmente ve al iniciar sesión conserva los tokens propios del producto, verificados en ambos sentidos.
Papel cálido, acento frío
Ambos temas son cálidos. El acento es lo único frío de la página.
El azul se sitúa en el tono 245.56, por lo que su complemento exacto es 65.56. Los neutros se derivan de ese número, lo que significa que una medida origina ambas mitades del sistema y que la respuesta a «¿por qué ese tono?» es aritmética en lugar de gusto. El croma y la luminosidad determinan el rol de cada neutro.
Medidos, los doce neutros abarcan de 62.35 a 80.72 grados. Eso no es una deriva de los colores. Con un croma de 0.005 a 0.013, el sRGB de 8 bits no puede direccionar el tono: un paso en un solo canal desplaza el tono medido entre 3.5 y 15.8 grados, de modo que cada valor ya está a un paso de cuantización del objetivo, y volver a codificar exactamente en 65.56 devuelve el mismo hexadecimal o uno adyacente. La forma comprobable de la regla es croma igual o inferior a 0.013, tono entre 55 y 90. Ambas se cumplen en los doce, y ambas son falsables.
Haga pasar cada borde por rgba(var(--rule-c), a). El token no es un color sino un triplete RGB para composición: 31,27,22 en claro, 233,230,225 en oscuro, con un alfa de 0.09 a 0.45. Nunca codifique un gris de forma fija, ni una sombra negro neutro. El tinte de sombra claro es un cálido 44,32,21.
--paper-2 es la banda de nota, esta incluida, desde el 21 de septiembre de 2026. Lleva la línea de entrada en --mark, --risk o --good a 1rem, y las tres superan 4.5:1 sobre ella en ambos temas, la más ajustada con 4.57:1 para --risk en claro, medido durante la compilación a partir de la hoja de estilos analizada. --risk y --good se retocaron dos veces el 21 de septiembre de 2026 para llegar ahí, una por la banda y otra cuando el fondo se oscureció: en claro #ad4a40 y #357642, en oscuro #d87369 y #5e9e69, todos en 4.57:1 o más sobre la banda. El cuerpo sobre ella es --ink-soft. --wash es solo un tinte de superficie: --mark, --graphite, --risk y --good caen por debajo del mínimo sobre él, de 4.10 a 4.32:1 en claro, así que el texto sobre una banda de lavado sube a --ink-soft o más oscuro.
Semántica, dos de ellas
Deliberadamente no hay ninguna advertencia ámbar. El ámbar se sitúa cerca del tono 70 y choca con el fondo cálido, que es precisamente el error que cometió el acento de latón retirado. Todo lo que habría sido una advertencia es un riesgo o una nota de acento simple.
El más bajo de estos cuatro mide 4.83:1 sobre papel. Hasta el 21 de septiembre de 2026, tres de ellos superaban el mínimo por 0.04 o menos; los dos retoques de ese día, registrados en la nota anterior, compraron el margen que necesita la banda de nota.
Tres tipografías, funciones fijas
Las funciones no son una preferencia. Una tipografía haciendo el trabajo de otra es un defecto.
Display, títulos de sección, antetítulos, folio y todas las cifras. Nunca texto de cuerpo ni etiqueta de interfaz.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 y su cursiva
Texto de cuerpo, interfaz, títulos de tarjetas, encabezados de tabla, botones. Nunca display ni cifras.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Solo cadenas técnicas: código, ID, números de lote, etiquetas de muestras. Nunca una etiqueta, un antetítulo ni un encabezado corriente.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Geist y Geist Mono están retiradas: son las tipografías propias de Vercel, y vestir el uniforme de la plataforma era la mitad del problema. Inter, Roboto, Arial, Poppins, Montserrat, Space Grotesk y cualquier pila display de fuentes del sistema quedan descartadas por la misma razón, a mayor escala. Son a las que recurre un generador cuando nadie ha tomado una decisión.
Es una de las cuatro tipografías más señaladas como «tipografía de IA», y el crema cálido más una serif display es el estilo de marca documentado en 2026 de los modelos de frontera. La defensa no es la tipografía, sino el trabajo que le asignamos: las cifras. Una columna tabular de cifras serif en azul es un recurso con una población de uno. Una palabra serif en cursiva colocada en un titular para dar estilo es el atractor. Mantenga el centro de gravedad de la serif en los números.
La escala: 1.25 a partir de una base de 17px
Nueve pasos, y constituyen todo el vocabulario. La tipografía se juzga comparativamente, por lo que una proporción lenta funciona aquí. El espacio se juzga de forma aislada y recibe una más rápida.
Cursiva serif: un sistema o nada
Una serif sobredimensionada con una palabra en cursiva es el hero universal de las startups de IA, y es el único lugar donde esta tipografía display podría pasar de firma a floritura. Lo que la convierte en una señal es que suele ser un valor predeterminado, al que se recurre una vez, por darle sabor, sin ninguna razón detrás.
Una palabra serif en cursiva colocada en un titular porque quedaba bien ahí. Única, inexplicable, decorativa.
No es un sistemaUn recurso de acento que se puede vincular a una fuente declarada, aplicado sistemáticamente en toda una superficie y llevado en el modelo de contenido como datos en lugar de marcarse a mano en cada instancia.
Un sistemaEn los documentos no existe tal sistema, así que tres roles de cursiva autorizados son todo el vocabulario, y no hay un cuarto: .tag, .note-l y .quote. .doc-title em salió de la lista el 21 de septiembre de 2026. La segunda línea en cursiva tras la primera en redonda, en el H1 de cada documento, era el único recurso que se leía como el hero generado, así que la segunda parte de un título va ahora en redonda y en azul: el movimiento que hace el logotipo (un segmento en azul, nada más cambia). El énfasis dentro de un encabezado de documento proviene del tamaño, el peso, el color o la posición. El relleno con degradado en texto está prohibido en todas partes, incluido el segmento azul del título: el color ya lo marca, y la rampa solo añade una señal.
El antetítulo y lo que sustituyó a la etiqueta mono
Los documentos no llevan ningún antetítulo, desde el 21 de septiembre de 2026. Alrededor de un centenar en todo el conjunto del centro de documentos repetían el título que tenían debajo, y la leyenda de línea fina más cursiva sobre cada encabezado se había convertido en el marcador de sección generado. El numeral lleva la posición de una sección; el bloque de Contenido lleva su tipo. La clase se mantiene para el sitio web, donde las secciones son pocas: Instrument Serif cursiva, tipo oración, grafito, con un prefijo de línea fina de 26px. El antiguo antetítulo mono en mayúsculas con espaciado está muerto y no debe volver de ninguna forma.
.label — Archivo, --t-xs, peso 600, espaciado .09em, mayúsculas, grafito. Este es el tratamiento de table th promovido a clase, y es el único recurso autorizado restante en mayúsculas con espaciado. Úselo para un encabezado de columna.
.tag — serif en cursiva, mayúsculas y minúsculas, grafito, cuando el texto es una frase en lugar de un nombre de campo. Recurra primero a esta.
Las cifras son la marca
Un recurso con una población de uno. No puede identificarse por patrón, porque nadie más lo hace.
Cada número se compone en la serif display, en azul, con font-variant-numeric: tabular-nums lining-nums, alineado a la derecha dondequiera que esté en una columna. En texto continuo, .fig-inline se muestra ligeramente más grande que el Archivo circundante para llamar la atención sin usar negrita.
Sin el tratamiento: recuperamos 20 millones de dólares en 450 retenciones para 2,500 empresas, trabajando con 30 procesadores.
Con él: recuperamos $20M en 450 retenciones para 2,500 empresas, trabajando con 30 procesadores.
Las cifras tabulares son lo que hace legible una columna: cada dígito ocupa el mismo ancho, de modo que los números se alinean verticalmente sea cual sea su valor. La alineación a la derecha hace el resto, y el libro mayor de abajo es donde van las cifras de un documento, con la fuente de los datos debajo.
Cifras de Compaytence, actualizadas a agosto de 2026.
De la misma categoría que un logotipo ausente. Un número en un libro mayor o en una tarjeta de estadística es una afirmación, así que lleva un valor real, un denominador cuando existe, una fecha y su procedencia. Los números redondos sin fuente son la señal de contenido más citada que existe: “10,000+ merchants”, “99.9% uptime”, “3x faster”. Las cifras provisionales pueden existir en un andamiaje. Nunca pueden publicarse.
Todo se deriva de 30px
El cuerpo es de 17px sobre una línea base de 30px, por lo que una línea es una unidad.
Cada valor de espaciado es una fracción o un múltiplo de esa línea, y cada uno es un píxel entero. Se consideró y rechazó una proporción geométrica: 1.25 necesita catorce pasos para abarcar de 4 a 100px y coloca 24 junto a 30, lo que parece un accidente, y 1.5 se vuelve fraccionaria en el tercer paso.
Las líneas azules detrás de este párrafo están trazadas cada 30 píxeles. El texto se asienta sobre ellas porque --lh-body es 1.765, y 17 × 1.765 es 30.005. Una línea de texto de cuerpo es exactamente una unidad de la escala de espaciado, y por eso la escala se expresa como fracciones de una línea.
El espacio entre bloques de texto usa líneas base completas: 30, 60, 90. El relleno dentro de un componente usa las fracciones: de 6 a 24. La proximidad transmite significado, así que haga que los espacios difieran cuando la agrupación difiera. Un mismo valor de espaciado en todas partes es no agrupar.
Geometría y cristal
Una escala de formas de dos pasos, un peso de línea fina y, en un documento, un fondo plano sin nada detrás ni nada encima.
Esquinas: dos pasos, nunca un tercero
Un control que se sitúa un paso más ajustado que su contenedor parece deliberado en vez de predeterminado. Un único radio para todo es la señal reveladora de la burbuja blanda, y la solución no cuesta nada.
--r-lgtarjetas, tablas, notas, paneles
--r-ctlbotones, campos, interruptores
--r-xssolo código en línea
Las cuatro esquinas, siempre. Las esquinas elípticas, achaflanadas, de superelipse, escaladas y con asimetría codificada se construyeron y rechazaron individualmente, y siguen rechazadas. --r-sm está retirado. Nunca recurra a un valor px sin procesar: los dos tokens constituyen todo el vocabulario.
--hair es 1px en todas partes, con color rgba(var(--rule-c), .09 a .45). No hay un segundo grosor de borde en el sistema.
Una tarjeta translúcida sobre el fondo cálido, con backdrop-filter: blur(16px) saturate(1.25). Se conserva en lugar de eliminarse, porque en el sitio web los halos detrás y el grano encima la convierten en una pila de materiales, no en un desenfoque aplicado por brillo. Esa pila de halo, cristal y grano es exclusiva del sitio web. En un documento el fondo es plano y la misma tarjeta se asienta sobre él como un panel más claro con una línea fina, con su blanco escalado en claro por el mismo ×0.9653 que el papel.
Allí se sitúa por encima de todo, incluidas las tarjetas, en z-index 9. Por debajo, cada tarjeta lo borraría y los dos pelearían de forma visible. Por encima se comporta como el grano de película y unifica la superficie. Una superficie con grano por página, y nunca una caja con grano anidada dentro de otra. Los documentos se publican planos desde el 21 de septiembre de 2026: el grano era la última capa de una pila que ya no existe en un documento, y costaba nitidez en el texto, un repintado en cada desplazamiento y PDF que no se comprimían. El fondo pasó al color al que promediaba el grano, medido en Chrome headless, de modo que nada se aclaró: papel claro de #fcf9f5 a #f3f0ec, una multiplicación de ×0.9653 por canal; oscuro de #120f0c a #23201d, una elevación en modo trama (screen) del 7.07% del margen de cada canal.
Los documentos se publican sin halos desde el 21 de septiembre de 2026. El papel no brilla, y sobre papel el halo de esquina era el mismo resplandor en cada página del conjunto. El azul entra en un documento a través de los numerales y las cifras, los enlaces y el botón. El sitio web conserva exactamente dos halos, y ese es todo su presupuesto atmosférico: ni un tercer halo, ni un campo de aurora, ni un degradado de malla, ni un orbe luminoso con ningún tratamiento de borde. «Desenfocado» no lo blanquea.
Allí, el grano debe ir sobre la capa que pinta el tono, nunca sobre la caja de la sección. En un sistema de puente o de sangrado, el color de una banda continúa más allá de su propia sección, así que el grano limitado a la sección termina mientras su color sigue, y traza una línea dura en cada frontera: medida en Δ10/255 sobre papel y Δ22/255 sobre el fondo oscuro. La página se lee entonces como una pila de losas en lugar de una sola superficie.
La tarjeta y cuándo no usar una
La tarjeta es el contenedor de la casa. No es el valor predeterminado de la casa.
Una tarjeta dice «compárame con mis hermanas».
Utilice una cuando los elementos realmente sean un conjunto de pares que el lector sopesa entre sí: tres planes, tres enfoques, tres resultados. Todo lo que el lector simplemente lee en orden va sobre el fondo sin contenedor, como un título, una línea de texto y una línea fina entre filas. Una página en la que cada bloque es una cuadrícula de tarjetas se lee como ruido, por muy buenas que sean las tarjetas. En una sección de servicios con cuatro rutas, aplicar esto llevó la página de unas 24 superficies de tarjeta a 9.
Lo mismo aplica a las imágenes de prueba y las citas destacadas: una captura de pantalla que ya incluye su propio marco y sombra no necesita una tarjeta alrededor, y una cita se lee mejor como texto sobre una línea fina que encuadrada. Los cuatro bloques de la sección 07 anterior son filas sin tarjetas, precisamente por este motivo.
Los cuatro tipos de tarjeta
Etiqueta a la izquierda, cifra a la derecha. La fila de libro mayor, encuadrada.
64chUna etiqueta, un título, una línea de texto y un enlace cuya flecha se desplaza con la tarjeta.
Volver arriba →Pase el cursor sobre cualquier tarjeta de arriba. En reposo lleva una línea fina y ninguna sombra. La elevación llega solo con la interacción, y llega exactamente en dos capas.
La tarjeta se eleva 3px y gana --shadow-lift desde la nada. Se vuelve físicamente más cercana.
Un resaltado suave sigue el puntero por la superficie, con alfa .035. Los materiales caros captan la luz. Esta es la capa que vende el material.
Se publicó con .14 y se leía como un foco que seguía el cursor, en lugar de como un material que capta la luz. La señal de que está bien: se nota cuando el puntero se mueve y no se puede señalar con precisión cuando se detiene. Toda superficie comparte un bloque, así que este único número ajusta toda la página. Nunca lo reajuste por componente.
Se creó y eliminó una tercera capa, una línea azul que barría el borde superior. Como el brillo ya llevaba el acento, era una señal de más y hacía que la tarjeta se anunciara en vez de responder. Publicar una línea fina y una sombra difusa en reposo se descartó por el mismo tipo de motivo: ejecuta dos sistemas de elevación a la vez.
El libro mayor y la doble línea
Las cifras de un documento van en el libro mayor: .card-row para una, .card-total con filas .mini para varias, y una línea .ledger-src debajo que nombra la fuente de los datos y la fecha. El recuento es el que sea. Una fila de tres tarjetas de estadística queda fuera de los documentos desde el 21 de septiembre de 2026: tres cifras redondas en fila era la señal de contenido más citada, y el sistema la había publicado en cuatro documentos dirigidos a clientes. .card-stat sobrevive para una sola cifra destacada.
Un libro mayor nunca cierra una columna con una sola línea. .total-line traza dos líneas finas separadas por 4px encima de un total. Cuesta un pseudoelemento, no es de nadie más y significa algo. Úselo solo encima de un total genuino, nunca como decoración: un libro mayor cuyas filas no suman no lleva línea de total.
El resto del catálogo
- Lista de puntos: una línea de 6×1px marca cada elemento, nunca una viñeta.
- Tabla: las celdas numéricas llevan tanto
.npara alinear a la derecha como.numpara establecer la cifra en la serif. - Nota: una banda
--paper-2a toda columna con la línea de entrada en el color semántico y sin línea lateral, una por sección como máximo. Solo dos semánticas, riesgo y correcto. - Cita destacada: serif de exhibición, cursiva, limitada a 28ch, sobre una línea fina en lugar de dentro de un recuadro.
| Medida | Antes de v2 | Después |
|---|---|---|
| Valores predeterminados de Tailwind | 13 | 0 |
| Tipografías de Vercel | 2 | 0 |
| Tonos de acento | 2 | 1 |
| Pasos de radio | 1 | 2 |
| Duraciones de aparición | 1 | 2 |
Fuente: registro de cambios de design-system.md, 3 de agosto y 12 de agosto de 2026.
Una tarjeta dentro de otra es ruido visual. Si el contenido dentro de una tarjeta necesita un marco, necesita una línea fina o una banda teñida, no una segunda tarjeta.
Dos pesos, y nada por debajo
Todo lo que llega de forma idéntica es decoración. Variarlo según la importancia hace que el movimiento transmita significado.
| Clase | Desplazamiento | Duración | Usar en |
|---|---|---|---|
.rise | 18 | 0.7 | Encabezados de sección, cualquier elemento que abre un bloque |
.rise-sub | 10 | 0.5 | Tarjetas, cuadrículas, tablas dentro de una sección |
| ninguno | — | — | Puntos, etiquetas, elementos en línea, controles pequeños |
El elemento principal anuncia el bloque; el secundario se asienta debajo. No añada una tercera duración ni aplique una aparición a algo pequeño. Un elemento que llega por sí solo sin motivo es el mismo fallo que se comete cuando todo llega de forma idéntica.
Las dos curvas de aceleración
Un par, y ningún rebote ni efecto elástico en ningún lugar. Todas las curvas de aceleración elegidas manualmente en el corpus medido son ease-out, que es lo que son ambas.
cubic-bezier(.2,.7,.2,1)
Transiciones de color, fondo y borde.
cubic-bezier(.16,1,.3,1)
Apariciones, elevación de tarjeta, la flecha que se desplaza.
La norma del corpus medido para un hover es un cambio de color: fondo 33.8%, color 24.4%, borde 12.3%, transformación solo 6.6%. Nuestra elevación de dos capas es correcta en una tarjeta e incorrecta en un enlace o una fila de tabla, que requieren color en unos 200ms. La transición mediana por sitio es 250ms, por lo que --dur-lead a 0.7s y --dur-sub a 0.5s son valores del decil superior: correctos para apariciones, incorrectos cerca de un hover.
Fuente: motion-canon.md, CSS publicado de 1,199 sitios, 13 de agosto de 2026.
- Anime solo
transformyopacity. Nuncawidth,height,paddingnimargin. Las propiedades de maquetación son el 5.7% de todas las declaraciones de transición del corpus, lo que confirma esta regla. - Ningún elemento interactivo puede cambiar solo la opacidad al hacer hover.
- Sin puntos decorativos pulsantes, sin cursores parpadeantes falsos, sin marquesinas con desplazamiento automático. Anime solo lo que realmente está cambiando.
- Tres alternativas de aparición, todas obligatorias: movimiento reducido, ausencia de
IntersectionObservero una pestaña oculta revela todo de inmediato.
Ambos temas, medidos
4.5:1 para texto, 3:1 para cifras de exhibición de más de unos 24px. Cada valor siguiente se calculó a partir del hex publicado, no se copió de una nota.
| Token | Función | Claro | Oscuro | Mínimo |
|---|---|---|---|---|
--ink |
encabezados | 15.07 | 15.05 | 4.5 |
--ink-soft |
cuerpo | 7.33 | 13.05 | 4.5 |
--graphite |
texto atenuado, antetítulo | 5.08 | 5.88 | 4.5 |
--mark |
enlaces, énfasis | 5.09 | 8.77 | 4.5 |
--fig |
cifras, cualquier tamaño | 5.09 | 8.77 | 4.5 |
--fig-inline |
cifras en texto | 5.09 | 8.77 | 4.5 |
--fig-display |
cifras de exhibición >=24px | 3.84 | 7.49 | 3.0 |
--mark-solid solo relleno |
RELLENO en claro; texto en oscuro | 2.24 | 6.37 | 4.5 |
--risk |
estados de error | 4.83 | 5.07 | 4.5 |
--good |
confirmaciones | 4.84 | 5.07 | 4.5 |
Relaciones frente a --paper en cada tema. Luminancia relativa WCAG 2.1, calculada durante la compilación. Los mínimos publicados del sistema son 3.84:1 en claro (--fig-display) y 5.07:1 en oscuro (--good).
--fig-displaycon 3.84:1 solo es admisible por encima de unos 24px. Cada uso publicado cumple: la cifra estadística a 51.9px, el numeral de sección, la cifra de fila y la cifra de total a 33.2px.- Anillos
:focus-visiblevisibles, de 2px en--mark, con desplazamiento de 3px. Recorra esta página con Tab para verlos. - Los controles independientes tienen al menos 44px. Los enlaces en línea dentro de texto corrido están exentos; un
.card-linkno. - Se respeta
prefers-reduced-motiony el tema se aplica antes del primer renderizado. - El contenido nunca debe depender de un fotograma de animación. También es un requisito de búsqueda: un rastreador ve la página sin interacción del usuario, por lo que el contenido plegable se renderiza en el DOM y se contrae con CSS, nunca se monta al hacer clic.
El 78.6% de los sitios medidos escribe outline:none al menos una vez, y el 26.5% lo hace sin definir nunca :focus-visible. El 12.7% no tiene ningún estilo de foco. El movimiento reducido es peor: solo el 39.8% de los sitios incluye la consulta, y por plataforma cae al 14.4% en Webflow y al 2.3% en Framer, dos sitios de 87. Toda superficie de Compaytence creada en Framer o Webflow necesita esa consulta escrita a mano.
Fuente: motion-canon.md, 13 de agosto de 2026.
En una pestaña de vista previa oculta, getComputedStyle devuelve valores obsoletos para cualquier elemento en mitad de una transición, y forzar el reflow no ayuda. Antes de medir el contraste, inyecte *,*::before,*::after{transition:none!important}. De lo contrario, un cambio de tema informa los colores del tema anterior y todas las lecturas son erróneas.
Por qué esto se lee como nuestro
El 13 de agosto de 2026, se midieron automáticamente 1,290 sistemas de diseño publicados a partir de CSS aplicado. Lo siguiente es lo que devolvieron los datos.
Fuente: styles.refero.design, 1,290 sistemas medidos a partir de CSS aplicado; anti-patterns.md §9 y website-builder/references/design-canon.md, 13 de agosto de 2026.
Dos aspectos más que afinaron el sistema en vez de confirmarlo. La negrita es una señal mayor que el radio: el 46.2% de estos sitios nunca supera el peso 600 y el 36.6% establece una regla antinegrita. La jerarquía es tamaño, espacio y color, por lo que un encabezado de peso 700 es un indicador más fiable de un sistema no considerado que cualquier elección de paleta. Y el espaciado entre letras negativo no es higiene: aproximadamente la mitad del corpus no aplica ninguno, ni siquiera en texto de exhibición. Ajuste el espaciado entre letras por banda de tamaño con un motivo declarado, o no lo ajuste en absoluto.
Nunca permita un acento cálido sobre el papel cálido. Ni en una ilustración, ni en una serie de gráficos, ni en un tinte de hover, ni en un lavado atmosférico. Es el único movimiento que reduce una posición del 2.6% a una del 77.3%, y es exactamente el modo de fallo ya registrado: el latón sobrevivió inadvertido en un lavado con croma 0.086 durante dos borradores. --risk es la excepción autorizada, limitada únicamente a los estados de error.
La mayoría de estas señales fueron tendencias de diseño humano de 2022 a 2024, con ejemplos nombrados, antes de que los generadores fueran aceptables. Lo que cambió no es el vocabulario, sino que la producción promedio pasó a ser gratuita. El diagnóstico real es «nadie decidió», no «una máquina lo hizo»: un humano que publica shadcn estándar produce el artefacto idéntico. Aplique esta lista a nuestro propio trabajo.
La lista de eliminación
Permanentemente fuera. Si aparece uno, es una regresión, no una opción.
- K-01Valores de la paleta predeterminada de Tailwind y cualquier azul que no esté en la escalera
- K-02Geist, Geist Mono, Inter, Roboto, Arial, Poppins, Montserrat, Space Grotesk, tipografía de visualización con fuente del sistema
- K-03Antetítulos en mayúsculas con espaciado y fuente mono, y fuente mono para cualquier etiqueta o encabezado corriente
- K-04Un segundo tono de acento, incluido uno cálido y saturado oculto en la atmósfera
- K-05Superposiciones de cuadrícula, orbes luminosos de cualquier tratamiento de borde, campos de aurora y degradados de malla
- K-06Ámbar como semántica
- K-07Variantes de esquinas de tarjetas: elípticas, biseladas, superelípticas, asimétricas
- K-08El hover de línea superior azul
- K-09Grises codificados de forma fija en lugar de
rgba(var(--rule-c), a) - K-10
box-shadowcreado manualmente en lugar de--shadowo--shadow-lift - K-11Texto con degradado en un titular o una cifra
- K-12Una franja de acento de color en un borde de una tarjeta
- K-13Un glifo de icono dentro de un recuadro cuadrado redondeado y teñido sobre un encabezado
- K-14Una insignia o un antetítulo tipo píldora sobre un titular principal
- K-15Emoji en cualquier parte de la interfaz
- K-16Cuadrículas bento elegidas como estilo de diseño en lugar de justificadas por contenido desigual
- K-17Texto de cuerpo centrado y encabezados de sección centrados apilados a lo largo de una página
- K-18Tarjetas anidadas
- K-19Puntos decorativos pulsantes, cursores parpadeantes falsos, marquesinas de desplazamiento automático
- K-20Muros de logotipos en escala de grises de «confían en nosotros» y prueba social mediante filas de avatares
- K-21Estadísticas sin atribución y testimonios sin nombre completo, empresa y resultado
- K-22«Empezar» y «Más información» como etiquetas de CTA en la página
- K-23Imágenes de stock genéricas, manchas 3D abstractas, ilustraciones isométricas, cualquier marcador de posición o
srcroto - K-24Un estado hover que solo cambia la opacidad
- K-25Animar anchura, altura, relleno o margen, y una aceleración con rebote o elasticidad
- K-26Un
<div>con un controlador de clic donde corresponde un<button>
El sistema v1 retirado está archivado y nunca debe renderizarse: no lienzo crema #fafaf7, no Geist, no #3b82f6, no antetítulos mono, no orbes luminosos, no superposiciones de cuadrícula, no barra de navegación oscura.
La auditoría, antes de presentar
Seis preguntas. Cualquier «no» es un defecto, no una preferencia.
Sustituya el logotipo por el de un competidor. ¿Debe cambiar algo más?
Elija al azar cinco valores renderizados: un color, un radio, un espacio, un tamaño, una duración. ¿Se puede rastrear cada uno hasta un token o una derivación declarada sin decir «parecía correcto»?
¿La página muestra lo que más importa o todos los bloques tienen el mismo peso? Los recuentos de palabras idénticos en tarjetas hermanas indican que el texto se recortó para llenar los cuadros.
¿Cada cifra y cita incluye una fuente real, una fecha y una atribución?
¿Existen los estados vacío, de carga, de error y 404, y cada uno dice algo específico?
¿Se mantiene bien al desplazarse hasta el final a 375px y a 1440px, en ambos temas? Una página verificada solo desde su primera ventana gráfica se verifica como la verificaría un generador.
Si la creación se está comparando con un sitio de referencia, añada una séptima: coloque nuestra página, la referencia y la plantilla genérica más cercana una junto a otra. La diferenciación solo es visible en una comparación.
Esta página es para personas. La versión evaluable, con cada regla identificada, un valor medido, una prueba y una línea de fuente, está en .claude/skills/compaytence/references/design-system-spec.md. Es a lo que se resuelve el crítico de sistema de la skill design-loop, y su §15 es una lista de verificación predefinida de veinte líneas lista para bifurcarse en una ejecución.