Stylepack

Herramientas

Tokens de diseño de cualquier web como variables CSS

Escribe la dirección de una web y obtén sus tokens de diseño como propiedades personalizadas de CSS: colores, estilos de texto, espaciado, radios, sombras y ancho del contenido, medidos en la página tal como se renderiza.

Prueba constripe.comlinear.appairbnb.com

airbnb.com

Medido hace 4 días.

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff
tokens.css
/* Design tokens extracted from https://www.airbnb.com/ (2026-10-27) */
:root {
  --color-background: #ffffff; /* Page background */
  --color-surface: #dddddd; /* Cards, panels, raised or recessed surfaces */
  --color-surface-2: #f2f2f2; /* Secondary surface */
  --color-foreground: #222222; /* Primary text */
  --color-muted-foreground: #6c6c6c; /* Secondary text, captions */
  --color-primary: #da1249; /* Candidate accent (semantic role inferred) */
  --color-on-primary: #ffffff; /* Text on the accent */
  --color-border: #ffffff; /* Hairlines, dividers, input borders */
  --font-sans: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  /* observed; source h1 */
  --text-headline-display: 700 28px/40.04px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-headline-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-weight-headline-display: 700;
  --font-size-headline-display: 28px;
  --line-height-headline-display: 40.04px;
  --tracking-headline-display: normal;
  /* observed; source h2 */
  --text-headline-lg: 600 20px/24px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-headline-lg: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-weight-headline-lg: 600;
  --font-size-headline-lg: 20px;
  --line-height-headline-lg: 24px;
  --tracking-headline-lg: -0.18px;
  /* fallback; source h3; inferred: fontSize, fontFamily, fontWeight, lineHeight */
  --text-headline-md: 600 24px/1.4 "Airbnb Cereal VF", "Inter", sans-serif;
  --font-family-headline-md: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-weight-headline-md: 600;
  --font-size-headline-md: 24px;
  --line-height-headline-md: 1.4;
  --tracking-headline-md: normal;
  /* fallback; source body; inferred: fontSize, fontFamily, fontWeight, lineHeight */
  --text-body-md: 400 14px/1.4 "Airbnb Cereal VF", "Inter", sans-serif;
  --font-family-body-md: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-weight-body-md: 400;
  --font-size-body-md: 14px;
  --line-height-body-md: 1.4;
  --tracking-body-md: normal;
  /* observed; source label */
  --text-label-md: 400 12px/1.33 "Airbnb Cereal VF", "Inter", sans-serif;
  --font-family-label-md: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-weight-label-md: 400;
  --font-size-label-md: 12px;
  --line-height-label-md: 1.33;
  --tracking-label-md: normal;
  /* observed; source button */
  --text-button: 400 14px/18px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-button: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-weight-button: 400;
  --font-size-button: 14px;
  --line-height-button: 18px;
  --tracking-button: normal;
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 44px;
  --space-7: 48px;
  --radius-none: 0px;
  --radius-2xl: 100px;
  --radius-xl: 20px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --radius-button: 100px;
  --radius-input: 0px;
  --radius-card: 0px;
  --shadow-1: color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.04) 0px 2px 6px 0px, color(srgb 0 0 0 / 0.1) 0px 4px 8px 0px;
  --shadow-2: rgba(0, 0, 0, 0.5) 0px -6px 15px 0px, rgba(0, 0, 0, 0.08) 0px 4px 4px 0px, rgba(0, 0, 0, 0.18) 0px 12px 15px 0px;
  --shadow-3: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
  --shadow-4: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(255, 255, 255, 0.04) 1px 1.5px 3px 0px inset, rgba(255, 255, 255, 0.04) -1px 1.25px 3px 0px inset, rgba(255, 56, 92, 0.3) 0px -1px 3px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 2px 0px inset;
}
​
/* 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: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.sp-type-headline-lg {
  font: var(--text-headline-lg);
  letter-spacing: var(--tracking-headline-lg);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: "DRKM" 0;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.sp-type-headline-md {
  font: var(--text-headline-md);
  letter-spacing: var(--tracking-headline-md);
  font-style: normal;
  font-stretch: normal;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.sp-type-body-md {
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body-md);
  font-style: normal;
  font-stretch: normal;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.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: none;
}
Abrir la página con la respuesta completaAbrir el paquete de diseño

Cómo funciona

Stylepack abre el sitio en un navegador real, mide lo que se renderiza (no lo que dice la hoja de estilos) en cuatro anchos y en ambos temas, y guarda el resultado como un paquete de diseño. Un sitio ya medido responde al instante; uno nuevo tarda menos de un minuto. Cada valor de esta página sale de ese paquete.

Preguntas

¿Qué es un token de diseño?

Un valor de diseño con nombre (un color, un tamaño de fuente, un paso de espaciado) que se usa en todo un producto. Como variables CSS, los tokens te permiten cambiar el estilo de todo un sitio modificando una sola declaración.

¿De dónde salen los nombres?

Del rol que cada valor tiene en la página medida: --color-primary es el acento, --text-headline-lg un estilo de titular, --space-4 un paso de espaciado. El tokens.json del paquete lleva los mismos nombres en el formato del W3C.

¿Es esto el sistema de diseño completo?

Son los valores. El paquete de diseño añade el comportamiento (hover, focus, menús, animaciones, maquetación responsive, modo oscuro), las recetas de los componentes y las capturas, en la forma con la que construyen los agentes de programación con IA.