How do I make buttons like headspace.com?

Use the CSS on this page: the primary button is #0061ef with #ffffff text, 32px corners, 48px tall. Add the hover and focus rules listed under each variant and set the button font to the one headspace.com uses.

What color are the headspace.com buttons?

The primary button on headspace.com is #0061ef with #ffffff text. The site uses 2 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 headspace.com buttons?

Yes. The headspace.com 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.

headspace.com button CSS: make buttons like theirs

primary button

Try for free

Hover: background #0061ef → #0040ea
Focus: outline 2px solid rgb(0, 64, 234), offset 1px
Transition: color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

secondary button

Try for $0

Hover: background #2d2c2b → #141313
Transition: color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

The CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 48px;
6  padding: 14.3px 24px;
7  background: #0061ef;
8  color: #ffffff;
9  border: 2px solid transparent;
10  border-radius: 32px;
11  font-size: 14px;
12  font-weight: 700;
13  font-family: "Headspace Apercu", sans-serif;
14  box-shadow: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 48px;
23  padding: 14px 20px;
24  background: #2d2c2b;
25  color: #ffffff;
26  border: 2px solid transparent;
27  border-radius: 32px;
28  font-size: 16px;
29  font-weight: 700;
30  font-family: "Headspace Apercu", sans-serif;
31  cursor: pointer;
32}

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/headspace.com/DESIGN.md

The buttons on headspace.com