¿Cómo hago botones como los de linear.app?

Usa el CSS de esta página: el botón principal es #e5e5e6 con texto #08090a, esquinas de 9999px y 32px de alto. Añade las reglas de hover y foco que aparecen bajo cada variante y pon en el botón la fuente que usa linear.app.

¿De qué color son los botones de linear.app?

El botón principal de linear.app es #e5e5e6 con texto #08090a. El sitio usa 3 variantes de botón en total; cada una está en esta página con su fondo, borde, radio y tamaño.

¿Puede un agente de programación con IA copiar los botones de linear.app?

Sí. El paquete de diseño de linear.app de Stylepack contiene cada variante de botón con sus estados, las fuentes, los colores y las capturas, así que Claude Code, Cursor o Copilot pueden construir botones que coincidan.

CSS de los botones de linear.app: haz botones iguales

Botón primary

Hover: sin cambio visible
Foco: outline 1px solid rgb(94, 105, 209), offset 2px
Transición: border, background-color, color, box-shadow, opacity, filter, transform, 0.16s

Botón secondary

Performance

Hover: sin cambio visible
Transición: all, 0s

Botón ghost

Product

Hover: sin cambio visible

El CSS

Una clase por variante, con los valores medidos. La fuente es la que linear.app usa en sus botones.

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 32px;
6  padding: 0px 12px;
7  background: #e5e5e6;
8  color: #08090a;
9  border: 1px solid #e5e5e6;
10  border-radius: 9999px;
11  font-size: 13px;
12  font-weight: 510;
13  font-family: "Inter Variable", sans-serif;
14  box-shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 24px;
23  padding: 0px 11px;
24  background: transparent;
25  color: #d0d6e0;
26  border: 1px solid #2e2e32;
27  border-radius: 16px;
28  font-size: 12px;
29  font-weight: 400;
30  font-family: "Inter Variable", sans-serif;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 32px;
39  padding: 0px 12px;
40  background: transparent;
41  color: #8a8f98;
42  border: none;
43  border-radius: 9999px;
44  font-size: 13px;
45  font-weight: 400;
46  font-family: "Inter Variable", sans-serif;
47  cursor: pointer;
48}

Para agentes de IA

El paquete es texto plano, sin clave: descarga DESIGN.md o entrega el paquete completo a Claude Code, Cursor o Copilot con el servidor MCP.

curl -s https://stylepack.ai/packs/linear.app/DESIGN.md

Los botones de linear.app