Stylepack

Buttons

The buttons on figma.com

The primary button on figma.com is #000000 with #ffffff text, 8px corners and 46px tall. Below: every button variant the site uses, its hover and focus states, and the CSS to make yours look the same.

Measured from figma.com 4 days ago.

Open the full design packDownload the pack

primary button

Get started for free
Hover
background #000000 → oklch(0 0 none / 0.85)
Focus
outline 2px dashed rgb(0, 0, 0), offset 4px
Transition
background, box-shadow, 0.18s, 0.18s

ghost button

Contact sales
Hover
no visible change

The CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 330;
  font-family: "figmaSans", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  font-family: "figmaSans", sans-serif;
  box-shadow: oklch(0 0 none / 0.16) 0px 0px 0px 1px inset;
  cursor: pointer;
}

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

Questions

How do I make buttons like figma.com?

Use the CSS on this page: the primary button is #000000 with #ffffff text, 8px corners, 46px tall. Add the hover and focus rules listed under each variant and set the button font to the one figma.com uses.

What color are the figma.com buttons?

The primary button on figma.com is #000000 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 figma.com buttons?

Yes. The figma.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.