How do I make buttons like linear.app?

Use the CSS on this page: the primary button is #e5e5e6 with #08090a text, 9999px corners, 32px tall. Add the hover and focus rules listed under each variant and set the button font to the one linear.app uses.

What color are the linear.app buttons?

The primary button on linear.app is #e5e5e6 with #08090a text. The site uses 3 button variants in total; each one is listed on this page with its background, border, radius and size.

Can an AI coding agent copy the linear.app buttons?

Yes. The linear.app design pack from Stylepack holds every button variant with its states, the fonts, the colors and screenshots, so Claude Code, Cursor or Copilot can build buttons that match.

linear.app button CSS: make buttons like theirs

primary button

Hover: no visible change
Focus: outline 1px solid rgb(94, 105, 209), offset 2px
Transition: border, background-color, color, box-shadow, opacity, filter, transform, 0.16s

secondary button

Performance

Hover: no visible change
Transition: all, 0s

ghost button

Product

Hover: no visible change

The CSS

One class per variant, with the measured values. The font is the one linear.app sets on its buttons.

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}

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

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

The buttons on linear.app