Stylepack

Narzędzia

Tokeny designu z dowolnej strony jako zmienne CSS

Wpisz adres strony i pobierz jej tokeny designu jako custom properties CSS: kolory, style tekstu, odstępy, zaokrąglenia, cienie i szerokość treści, zmierzone na stronie tak, jak się renderuje.

Wypróbujstripe.comlinear.appairbnb.com

airbnb.com

Zmierzono 4 dni temu.

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;
}
Otwórz pełną stronę z odpowiedziąOtwórz pakiet designu

Jak to działa

Stylepack otwiera stronę w prawdziwej przeglądarce, mierzy to, co się renderuje (a nie to, co mówi arkusz stylów) w czterech szerokościach i w obu motywach, a wynik zapisuje jako pakiet designu. Strona już zmierzona odpowiada od razu; nowa zajmuje mniej niż minutę. Każda wartość na tej stronie pochodzi z tego pakietu.

Pytania

Czym jest token designu?

Nazwana wartość designu (kolor, rozmiar czcionki, krok odstępu) używana w całym produkcie. Jako zmienne CSS tokeny pozwalają przestylować całą stronę, zmieniając jedną deklarację.

Skąd biorą się nazwy?

Z roli, jaką każda wartość pełni na zmierzonej stronie: --color-primary to akcent, --text-headline-lg styl nagłówka, --space-4 krok odstępu. tokens.json w pakiecie zawiera te same nazwy w formacie W3C.

Czy to cały design system?

To wartości. Pakiet designu dodaje zachowanie (hover, focus, menu, animacje, responsywność, tryb ciemny), przepisy na komponenty i zrzuty ekranu, w formie, z której budują agenty AI do kodowania.