El sistema de diseño de Linear, leído como un conjunto de restricciones

Empiece por aquí, ya que la mayor parte de la confusión posterior proviene de omitir este punto. Linear no publica un sistema de diseño. No existe un @linear/tokens en npm, ni Storybook, ni un sitio de documentación equivalente a design.linear.app, ni una librería de Figma publicada por la empresa. Compare esto con Carbon de IBM, Polaris de Shopify o Salesforce Lightning, todos los cuales distribuyen paquetes instalables y documentación pública como una decisión de producto deliberada.

En su lugar, existen tres tipos de material secundario, y conviene saber cuál está leyendo:

La distinción es importante porque una extracción puede decirle que una superficie es #0f1011, pero no puede decirle si es un paso deliberado por encima del lienzo o un accidente. Todo lo siguiente se expone al nivel en que puede sustentarse: patrones observables, dejando visible el razonamiento para que usted pueda discrepar de él.

Si se queda con una sola cosa, que sea esta: la tipografía de Linear se mantiene en una banda de pesos estrecha, aproximadamente de 400 a 510, en prácticamente todo el producto. Un encabezado de 72px y una etiqueta de 15px se diferencian por tamaño y color, no por peso. El negrita, en el sentido de 700 que utilizan la mayoría de las interfaces, está funcionalmente ausente.

Esa única restricción aporta más valor visual que la paleta. Una banda de pesos amplia —400 para cuerpo, 600 para etiquetas, 700 para encabezados, 800 para hero— es el estándar con el que viene cualquier framework de UI y que reproduce cualquier interfaz generada por IA. Se percibe como estridente y genérica, porque la jerarquía se grita en lugar de componerse. Una banda estrecha obliga a que la jerarquía recaiga en el tamaño, el espaciado y el color, algo que requiere más tiempo para lograrse y es mucho más difícil de imitar por accidente.

El detalle de las fuentes variables es lo que hace posible el valor 510. Un peso de 510 no es un corte estático; existe porque la interfaz utiliza una tipografía variable donde cualquier valor del eje está disponible. Intentar reproducir esto con pesos estáticos le dará un 500, que es cercano, y esa ligera diferencia es parte de por qué las replicaciones se sienten "casi" correctas.

Este es el detalle que la mayoría de las reproducciones pasan por alto por completo, y es algo medible más que una cuestión de gusto. El espaciado entre letras en Linear se vuelve negativo a medida que aumenta el tamaño: el tipo de display en el rango de 48–72px se sitúa alrededor de -0.022em, los encabezados de rango medio alrededor de -0.012em y el tipo de escala de cuerpo alrededor de -0.010em. La relación es monotónica: a mayor tamaño de tipo, tracking más cerrado.

La razón es óptica, no decorativa. Las formas de las letras diseñadas para ser legibles a 16px llevan sidebearings dimensionados para 16px. Si se escalan a 64px, esos huecos también se escalan, por lo que la palabra visualmente se descompone en letras. El diseño tipográfico profesional compensa esto con tamaños ópticos; el trabajo de interfaz lo compensa con una rampa de tracking. La mayoría de los sistemas de diseño establecen un único valor de letter-spacing, o ninguno, y sus encabezados se ven sueltos de una manera que nadie sabe definir.

/* The ramp, expressed as tokens. Values shown are the pattern,
   not Linear's — pick your own by eye at each step. */
:root {
  --tracking-display: -0.022em;  /* 48px and up */
  --tracking-heading: -0.012em;  /* 20-32px */
  --tracking-body:    -0.010em;  /* 13-17px */
  --tracking-label:    0.02em;   /* small caps, 11-12px: loosens */
}

Nótese la inversión en la parte inferior. Las etiquetas pequeñas en mayúsculas requieren un tracking positivo por la misma razón óptica por la que el tipo de display grande requiere uno negativo. Una rampa que solo va en una dirección es solo la mitad de la regla.

Linear separa las superficies con bordes de anchos sub-píxel — 0.5px en pantallas que pueden renderizarlos — y un conjunto escalonado de grises casi negros, en lugar de sombras paralelas. El lienzo se sitúa aproximadamente en #08090a, las superficies de las tarjetas un paso arriba alrededor de #0f1011, y los paneles elevados por encima de eso. Los bordes provienen de un gris de bajo contraste alrededor de #23252a para los bordes estructurales, con un paso ligeramente más brillante para los separadores de sección.

Se trata de un compromiso real, no de una elección estrictamente mejor, y conviene ser honestos sobre el coste. Las sombras comunican la profundidad de forma preatentiva; el lector sabe que una tarjeta está sobre la página sin tener que mirarla. Las hairlines no lo hacen. Lo que se gana es una superficie plana, densa y precisa donde mucha información puede convivir estrechamente sin ruido visual, que es exactamente lo que necesita un rastreador de incidencias y exactamente lo que no necesita un sitio de marketing.

Esa última fila es la clave para actuar. La razón por la que un tratamiento al estilo Linear suele fallar en una landing page no es que se haya ejecutado mal; es que la estrategia de elevación se eligió para la densidad de información y luego se aplicó a una superficie con cuatro tarjetas.

La observación sobre el color que la gente repite es que "Linear es púrpura". Al momento de escribir esto, la interfaz observable se lee más como un casi monocromo con un único acento de alta croma utilizado para la acción primaria y el estado activo, además de un pequeño conjunto de rellenos cromáticos reservados para etiquetas y tags. El tono específico del acento ha cambiado en los rediseños; el hecho estructural no.

El hecho estructural es una proporción. El acento aparece en un pequeño porcentaje de píxeles — un botón primario, un indicador de navegación activo — y todo lo demás es gris. Copiar el tono y aplicarlo con la densidad típica de un SaaS (encabezados, iconos, enlaces, bordes y hero con degradados, todo en el color de acento) produce algo que comparte la paleta de Linear, pero nada de su carácter.

Vale la pena separar los colores de los tags porque son un sistema diferente. Un puñado de rellenos cromáticos — un violeta, un teal, un coral, un verde — existen para que las etiquetas sean distinguibles de un vistazo, de la misma manera que funcionan las series categóricas en una paleta de dashboard. No son colores de marca ni colores de estado, y un sistema que confunde los tres acaba siendo incapaz de mostrar un error en rojo porque el rojo ya significa "marketing" en alguna etiqueta.

Los radios se agrupan estrechamente — aproximadamente 6px en controles y 12px en contenedores más grandes — frente al hábito predeterminado del ecosistema de usar rounded-lg o más en todo. El padding es compacto, en la banda de 8–12px para controles, en lugar de los 16–24px que incluyen la mayoría de las librerías de componentes.

Ambos derivan de la misma fuente que las hairlines: la densidad. Una herramienta densa no puede gastar 24px de padding por control, y los radios grandes en elementos pequeños empiezan a devorar el elemento. La regla subyacente no es "usa 6px", sino que el radio debe escalar con el elemento; la mayoría de los sistemas aplican un mismo token de radio tanto a un botón de 28px como a un panel de 400px.

Copiar esto es el resultado incorrecto, y no solo por razones de marca registrada. Un sistema de diseño es la consecuencia de una decisión de producto. La densidad de Linear sirve a personas que viven en un rastreador de incidencias seis horas al día; ese usuario tiene necesidades diferentes a alguien que llega a una página de precios durante cuarenta segundos. Trasladar el tratamiento de superficie a través de esa brecha le dará una interfaz optimizada para un trabajo que su producto no realiza.

Lo transferible es el método. Cada observación anterior tiene la misma estructura: notar un patrón, deducir la restricción que lo produce y luego escribir esa restricción como una regla. Este es un ejercicio repetible que puede aplicar a cualquier producto que admire, y es lo que convierte un mood board en algo que un agente puede ejecutar.

1. 1

   Capture tres pantallas, no una

   Una sola pantalla le indica la paleta. Tres le indican qué decisiones son consistentes, y la consistencia es lo que distingue un sistema de una página.

2. 2

   Mida, no calcule a ojo

   Abra las herramientas de desarrollo y lea los valores computados: font-weight, letter-spacing, border-width, border-radius, padding. Anote los números reales. El "interletrado ajustado" no es una regla; -0.022em por encima de 48px sí lo es.

3. 3

   Busque el rango, no el valor

   La clave rara vez es un único número. Es que todos los pesos oscilan entre 400 y 510, o que cada radio es 6 o 12 y nada más. Los rangos son reglas; los valores únicos son muestras.

4. 4

   Anote lo que está ausente

   Sin sombras. Sin pesos superiores a 510. Sin un segundo color de acento. Sin degradados. Las ausencias son la parte más valiosa de un análisis técnico y la parte que nunca sobrevive en una exportación de paleta.

5. 5

   Convierta cada observación en una instrucción

   "La elevación utiliza un borde de 1px y un paso de superficie, nunca un box-shadow" es ejecutable. "Minimalista y preciso" no lo es. Este es el paso donde un análisis técnico se convierte en un sistema de diseño.

Analizamos 299 archivos DESIGN.md publicados en repositorios y directorios públicos para ver qué contiene realmente una guía de diseño cuando se escribe para que la lea un agente de código. Los resultados explican por qué los sistemas derivados de análisis técnicos se degradan.

Tres cuartas partes de estos archivos no contienen prohibiciones. Pero como muestra el análisis anterior, las prohibiciones son donde reside la identidad: sin negritas, sin sombras, sin un segundo color de acento. Un archivo que enumera los valores hex de Linear y omite sus restricciones ha capturado la parte menos distintiva del sistema y ha descartado el resto.

La cifra de los adjetivos vagos lo agrava. "Limpio" aparece en el 39% de estos archivos y "moderno" en el 36%. Ambas son palabras que un modelo satisfará alegremente con el promedio de sus datos de entrenamiento, que es la razón por la que las interfaces generadas por IA convergen en la misma apariencia. Ninguna de las dos palabras impone restricciones.

Si el resultado de un análisis técnico va dirigido a un agente de código, debe sobrevivir a una lectura única y aplicarse en docenas de archivos. Eso requiere tokens nombrados con propósitos definidos y una lista de prohibiciones explícita. Esta es la estructura:

## Type

Weights: 400 and 510 only. Never use 600 or above; hierarchy is
carried by size and colour, not weight.

Tracking ramps with size:
- 48px and up: -0.022em
- 20-32px:     -0.012em
- 13-17px:     -0.010em
- 11-12px uppercase labels: +0.02em

## Elevation

Never use box-shadow. Elevation is a surface step plus a 1px border:
- canvas   -> surface   -> elevated
- Border: --border-subtle for structure, --border-strong for sections

## Accent

One accent. It appears on primary buttons and active nav state only.
Do NOT use the accent for headings, links, icons, borders or gradients.
Tag fills are a separate categorical set and are not brand colour.

## Never

- No gradients
- No drop shadows
- No second accent colour
- No font-weight above 510
- No border-radius above 12px

Observe cuánto de ese archivo ocupa la sección Never y las prohibiciones integradas en cada regla. Esa proporción es la clave. Si le entrega a un agente una paleta y el nombre de una fuente, le ha dado permiso para hacer todo lo demás como quiera, y todo lo demás es la mayor parte de la interfaz.

Existe una versión de este ejercicio que produce algo peor de lo que tenía al principio. Sucede cuando el análisis técnico se convierte en el objetivo: usted ensambla un conjunto riguroso de reglas que describen el producto de otra persona, se lo entrega a un agente y obtiene una imitación competente pero sin razón de existir.

Los sistemas de diseño que realmente son buenos son el resultado de un argumento sobre el usuario. El de Linear es el argumento de que un usuario avanzado que pasa todo el día en una herramienta desea densidad y sobriedad. Un producto educativo podría abogar por un espaciado generoso y calidez. Un panel financiero podría abogar por colores de estado reservados y una escala neutra que sobreviva a una tabla densa. Las reglas se derivan del argumento; no lo sustituyen.

Por lo tanto, utilice el análisis técnico para calibrar, no para obtener contenido. Le indica cómo es un sistema riguroso: qué tan específicos son los números, cuántas cosas se prohíben, qué tan estrechos son los rangos. Luego, construya ese argumento para su propio producto.