Stylepack

Ferramentas

Design tokens de qualquer site como variáveis CSS

Digite o endereço de um site e receba os design tokens dele como propriedades customizadas CSS: cores, estilos de texto, espaçamento, raios, sombras e largura do conteúdo, medidos na página como ela é renderizada.

Experimentestripe.comlinear.appairbnb.com

linear.app

Medido há 4 dias.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111
tokens.css
/* Design tokens extracted from https://linear.app/ (2026-10-28) */
:root {
  --color-background: #08090a; /* Page background */
  --color-surface: #101112; /* Cards, panels, raised or recessed surfaces */
  --color-surface-2: #1c1d1e; /* Secondary surface */
  --color-surface-3: #07220a; /* Secondary surface */
  --color-foreground: #f7f8f8; /* Primary text */
  --color-muted-foreground: #8a8f98; /* Secondary text, captions */
  --color-primary: #e5e5e6; /* Candidate accent (semantic role inferred) */
  --color-on-primary: #111111; /* Text on the accent */
  --color-secondary: #5e6ad2; /* Secondary accent (violet) */
  --color-border: #1c1d1e; /* Hairlines, dividers, input borders */
  --font-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-display: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* observed; source h1 */
  --text-headline-display: 510 64px/64px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-headline-display: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-headline-display: 510;
  --font-size-headline-display: 64px;
  --line-height-headline-display: 64px;
  --tracking-headline-display: -1.408px;
  /* observed; source h2 */
  --text-headline-lg: 510 48px/48px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-headline-lg: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-headline-lg: 510;
  --font-size-headline-lg: 48px;
  --line-height-headline-lg: 48px;
  --tracking-headline-lg: -1.056px;
  /* observed; source h3 */
  --text-headline-md: 510 13px/19.5px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-headline-md: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-headline-md: 510;
  --font-size-headline-md: 13px;
  --line-height-headline-md: 19.5px;
  --tracking-headline-md: -0.13px;
  /* observed; source body */
  --text-body-md: 400 24px/31.92px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-body-md: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-body-md: 400;
  --font-size-body-md: 24px;
  --line-height-body-md: 31.92px;
  --tracking-body-md: -0.288px;
  /* observed; source label */
  --text-label-md: 400 12px/1.17 "Inter Variable", "Inter", sans-serif;
  --font-family-label-md: "Inter Variable", "Inter", sans-serif;
  --font-weight-label-md: 400;
  --font-size-label-md: 12px;
  --line-height-label-md: 1.17;
  --tracking-label-md: normal;
  /* observed; source button */
  --text-button: 400 15px/24px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-button: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-button: 400;
  --font-size-button: 15px;
  --line-height-button: 24px;
  --tracking-button: -0.165px;
  /* observed; source code */
  --text-code: 400 14px/24px "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-family-code: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-weight-code: 400;
  --font-size-code: 14px;
  --line-height-code: 24px;
  --tracking-code: normal;
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 48px;
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-lg: 12px;
  --radius-sm: 4px;
  --radius-button: 9999px;
  --radius-input: 0px;
  --radius-card: 12px;
  --shadow-1: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-2: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-3: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
  --shadow-4: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  --content-width: 1344px;
}
​
/* Load fonts.css first. Apply a complete role class, including non-shorthand font settings. */
.sp-type-headline-display {
  font: var(--text-headline-display);
  letter-spacing: var(--tracking-headline-display);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-feature-settings: "cv01", "ss03";
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
.sp-type-headline-lg {
  font: var(--text-headline-lg);
  letter-spacing: var(--tracking-headline-lg);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-feature-settings: "cv01", "ss03";
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
.sp-type-headline-md {
  font: var(--text-headline-md);
  letter-spacing: var(--tracking-headline-md);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-feature-settings: "cv01", "ss03";
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
.sp-type-body-md {
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body-md);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-feature-settings: "cv01", "ss03";
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
.sp-type-label-md {
  font: var(--text-label-md);
  letter-spacing: var(--tracking-label-md);
  font-style: normal;
  font-stretch: normal;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.sp-type-button {
  font: var(--text-button);
  letter-spacing: var(--tracking-button);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
.sp-type-code {
  font: var(--text-code);
  letter-spacing: var(--tracking-code);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
Abrir a página completa da respostaAbrir o pacote de design

Como funciona

O Stylepack abre o site em um navegador de verdade, mede o que é renderizado (não o que a folha de estilos diz) em quatro larguras e nos dois temas, e guarda o resultado como um pacote de design. Um site já medido responde na hora; um novo leva menos de um minuto. Todo valor nesta página vem desse pacote.

Perguntas

O que é um design token?

Um valor de design com nome (uma cor, um tamanho de fonte, um passo de espaçamento) usado em todo um produto. Como variáveis CSS, os tokens permitem reestilizar um site inteiro mudando uma única declaração.

De onde vêm os nomes?

Da função que cada valor exerce na página medida: --color-primary é o destaque, --text-headline-lg um estilo de título, --space-4 um passo de espaçamento. O tokens.json do pacote traz os mesmos nomes no formato W3C.

Isso é o design system inteiro?

São os valores. O pacote de design adiciona o comportamento (hover, focus, menus, movimento, layout responsivo, modo escuro), as receitas de componentes e as capturas de tela, no formato a partir do qual os agentes de código com IA constroem.