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 en agosto de 2026 descubrió que 13 de los 13 valores de acento y texto del sistema anterior eran 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 no relacionado compartía 9 de nuestros 12 recursos distintivos con valores casi idénticos, porque ambos sitios se ensamblaron 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 el tono OKLCH 245.56. En los once pasos, el tono se mantiene dentro de 1.6 grados. El croma es otra historia: alcanza su máximo en la semilla y disminuye hacia ambos extremos, porque sRGB no puede mantener la saturación en el extremo pálido. La escalera es una escalera de luminosidad con el tono fijado, que es la propiedad importante.
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.42:1 sobre el fondo claro. En una superficie clara es solo un relleno. Nunca texto, nunca una línea fina que necesite leerse. Sobre el fondo oscuro el mismo hexadecimal alcanza 7.51:1 y puede usarse como texto. Esa asimetría es la razón completa por la que existe una escalera en lugar de un único hexadecimal.
Este texto es #33A9FF sobre papel. Con 2.42:1 no supera ningún umbral de accesibilidad.
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 70 #0077bd |
4.57 | paso 30 #81c5ff |
10.34 |
--mark-deep |
énfasis más intenso | paso 80 #005990 |
7.07 | paso 20 #b0daff |
13.02 |
--mark-solid |
RELLENO en claro, texto en oscuro | paso 50 #33a9ff |
2.42 | paso 50 #33a9ff |
7.51 |
--mark-tint |
superficies teñidas | paso 05 #edf6ff |
1.04 | paso 95 #002e4d |
1.36 |
--fig |
cifras de exhibición, solo >=24px | paso 60 #0089d9 |
3.59 | paso 40 #5fb7ff |
8.83 |
--fig-inline |
cifras en texto corrido | paso 70 #0077bd |
4.57 | paso 30 #81c5ff |
10.34 |
--fig tiene 3.59:1 sobre el fondo claro, por lo que solo es válido por encima de unos 24px. Convertirlo en el color predeterminado de una clase de cifras de uso general hace que cada numeral de índice y estadística integrada incumpla silenciosamente AA, que es exactamente lo que ocurrió una vez. Un sistema de cifras de dos pasos debe usar por defecto el paso seguro y hacer que el paso de exhibición sea opcional.
Nunca introduzca un segundo tono de acento. Se probó el latón para las cifras y se rechazó, pero sobrevivió inadvertido en un lavado atmosférico con croma 0.086 durante dos borradores. Si un color tiene un croma superior a aproximadamente 0.02 y no es este azul, es un error. Existen dos excepciones y ambas deben hacerse auditables en lugar de dejarlas implícitas: las marcas de terceros conservan el color de su propietario, etiquetadas para que la auditoría incluya en la lista blanca el atributo y nunca el hexadecimal; y una réplica de producto que muestra a un usuario lo que realmente ve al iniciar sesión conserva los propios tokens del producto, comprobados en ambas direcciones.
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 75.41 grados. Eso no es una desviación en los colores. Con un croma de 0.005 a 0.013, sRGB de 8 bits no puede representar el tono: un paso en un solo canal desplaza el tono medido de 3.5 a 15.8 grados, por lo que cada valor ya está dentro de un paso de cuantización del objetivo, y recodificar exactamente en 65.56 devuelve el mismo hexadecimal o uno adyacente. La forma verificable de la regla es croma igual o inferior a 0.013, tono entre 55 y 90. Ambas se cumplen para los doce, y ambas son refutables.
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 y --wash son solo tintes de superficie. --graphite, --mark, --risk y --good bajan a aproximadamente 4.3:1 en la primera y 3.9:1 en la segunda, lo que está por debajo del umbral. Si pinta una banda con cualquiera de ellas, el texto sobre ella pasa 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.
Tres de estos cuatro superan el mínimo de 4.5:1 por 0.04 o menos. Ya no tienen margen. No los ajuste.
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 la sección principal universal de las startups de IA, y es el único lugar donde esta tipografía display podría pasar de firma a adorno. Lo que la convierte en una señal reveladora es que suele ser un valor predeterminado, al que se recurre una vez, para dar estilo, 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, por lo que cuatro funciones de cursiva autorizadas constituyen todo el vocabulario, y no hay una quinta: .doc-title em (una línea completa de título, nunca una palabra extraída), .tag, .note-l y .quote. El énfasis dentro de un encabezado de documento procede del tamaño, peso, color o posición. El relleno con degradado en texto está prohibido en todas partes, incluso en una palabra de acento autorizada: la cursiva ya la distingue y el degradado solo añade una señal reveladora.
El antetítulo y lo que sustituyó a la etiqueta mono
El antetítulo es Instrument Serif en cursiva, en mayúsculas y minúsculas, grafito, con un prefijo de línea fina de 26px. Indica el tipo de la sección; el numeral indica su posición. Si un antetítulo solo repite el título, omítalo. El antiguo antetítulo mono en mayúsculas con espaciado está muerto y no debe volver en 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 hacen legible una columna: cada dígito ocupa el mismo ancho, por lo que los números se alinean verticalmente sea cual sea su valor. La alineación a la derecha hace el resto.
Misma categoría que un logotipo ausente. Un número en una tarjeta estadística es una afirmación, por lo que incluye un valor real, un denominador cuando existe, una fecha y su procedencia. Las cifras redondas sin fuente — «10,000+ comerciantes», «99.9% de tiempo de actividad», «3x más rápido» — son la señal de contenido más citada que existe. Las cifras de marcador de posición pueden existir en una estructura. 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 se dibujan 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 equivale exactamente a una unidad de la escala de espaciado, por lo que la escala puede expresarse como fracciones de una línea en lugar de un conjunto arbitrario de números que le gustaban a alguien.
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, cristal, grano, halos
Una escala de formas de dos pasos, un peso de línea fina y exactamente dos elementos atmosféricos.
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 sostiene en lugar de proyectarse, porque el grano encima y los halos detrás la convierten en una pila de materiales, no en un desenfoque aplicado para dar brillo.
Incluido sobre las tarjetas, en z-index 9. Debajo, cada tarjeta lo borraría y ambos se enfrentarían visiblemente. Por encima se comporta como grano de película y unifica la superficie. Una superficie granulada por página plana, y nunca una caja granulada anidada dentro de otra.
Ese es todo el presupuesto atmosférico. Ni un tercer halo, ni un campo de auroras, ni un degradado de malla, ni una esfera luminosa de ningún tratamiento de bordes. «Desenfocado» no convierte uno en aceptable.
El grano debe ir sobre la capa que pinta el tono, nunca sobre la caja de sección. En un sistema de puentes o sangrado, el color de una banda continúa más allá de su propia sección, por lo que el grano limitado a la sección termina mientras su color continúa y dibuja una línea dura en cada límite: medido en Δ10/255 sobre papel y Δ22/255 sobre el fondo oscuro. La página pasa entonces a leerse 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.
La doble línea
Un libro mayor nunca cierra una columna con una sola línea. .total-line dibuja dos líneas finas separadas por 4px sobre un total. Cuesta un pseudoelemento, no pertenece a nadie más y significa algo. Úsela solo sobre un total real, nunca como decoración.
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: 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 diseño representan el 5.7% de todas las declaraciones de transición del corpus, así que esta regla está confirmada, no simplemente afirmada. - 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 | 16.31 | 17.74 | 4.5 |
--ink-soft |
cuerpo | 7.93 | 15.38 | 4.5 |
--graphite |
texto atenuado, antetítulo | 4.66 | 6.12 | 4.5 |
--mark |
enlaces, énfasis | 4.57 | 10.34 | 4.5 |
--fig-inline |
cifras en texto | 4.57 | 10.34 | 4.5 |
--fig |
cifras de exhibición >=24px | 3.59 | 8.83 | 3.0 |
--mark-solid solo relleno |
RELLENO en claro; texto en oscuro | 2.42 | 7.51 | 4.5 |
--risk |
estados de error | 4.54 | 4.53 | 4.5 |
--good |
confirmaciones | 4.54 | 5.16 | 4.5 |
Relaciones frente a --paper en cada tema. Luminancia relativa WCAG 2.1, calculada el 13 de agosto de 2026. Los mínimos publicados del sistema son 3.59:1 en claro y 4.53:1 en oscuro.
--figa 3.59:1 es legal solo por encima de unos 24px. Todos los usos publicados cumplen: la cifra estadística a 51.9px, el numeral de sección, la cifra de fila y la cifra 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.