Stylepack

Boutons

Les boutons de headspace.com

Le bouton principal de headspace.com est #0061ef avec du texte #ffffff, des coins de 32px et 48px de haut. Ci-dessous : chaque variante de bouton du site, ses états de survol et de focus, et le CSS pour que les vôtres aient la même allure.

Mesuré sur headspace.com il y a 4 jours.

Ouvrir le pack de design completTélécharger le pack

Bouton primary

Try for free
Survol
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

Bouton secondary

Try for $0
Survol
background #2d2c2b → #141313
Transition
color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

Le CSS

Une classe par variante, avec les valeurs mesurées. La police est celle que headspace.com applique à ses boutons.

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14.3px 24px;
  background: #0061ef;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Headspace Apercu", sans-serif;
  box-shadow: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 20px;
  background: #2d2c2b;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: "Headspace Apercu", sans-serif;
  cursor: pointer;
}

Pour les agents IA

Le pack est du texte brut, sans clé : récupérez DESIGN.md, ou confiez tout le pack à Claude Code, Cursor ou Copilot via le serveur MCP.

curl -s https://stylepack.ai/packs/headspace.com/DESIGN.md

Questions

Comment faire des boutons comme headspace.com ?

Utilisez le CSS de cette page : le bouton principal est #0061ef avec du texte #ffffff, des coins de 32px, 48px de haut. Ajoutez les règles de survol et de focus listées sous chaque variante et donnez au bouton la police que headspace.com utilise.

De quelle couleur sont les boutons de headspace.com ?

Le bouton principal de headspace.com est #0061ef avec du texte #ffffff. Le site utilise 2 variantes de bouton au total ; chacune est listée sur cette page avec son fond, sa bordure, son arrondi et sa taille.

Un agent de code IA peut-il copier les boutons de headspace.com ?

Oui. Le pack de design de headspace.com sur Stylepack contient chaque variante de bouton avec ses états, les polices, les couleurs et les captures, pour que Claude Code, Cursor ou Copilot puissent créer des boutons identiques.