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

stripe.com

Zmierzono 4 dni temu.

background#ffffffsurface#e5edf5surface-2#ffe0efsurface-3#ffe0d1foreground#061b31muted-foreground#64748dprimary#533afdon-primary#ffffff
tokens.css
/* Design tokens extracted from https://stripe.com/ (2026-10-28) */
:root {
  --color-background: #ffffff; /* Page background */
  --color-surface: #e5edf5; /* Cards, panels, raised or recessed surfaces */
  --color-surface-2: #ffe0ef; /* Secondary surface */
  --color-surface-3: #ffe0d1; /* Secondary surface */
  --color-foreground: #061b31; /* Primary text */
  --color-muted-foreground: #64748d; /* Secondary text, captions */
  --color-primary: #533afd; /* Candidate accent (semantic role inferred) */
  --color-on-primary: #ffffff; /* Text on the accent */
  --color-secondary: #0f4d29; /* Secondary accent (green) */
  --color-border: #e5edf5; /* Hairlines, dividers, input borders */
  --font-sans: sohne-var, "SF Pro Display", sans-serif;
  --font-display: sohne-var, "SF Pro Display", sans-serif;
  /* observed; source h1 */
  --text-headline-display: 300 48px/55.2px sohne-var, "SF Pro Display", sans-serif;
  --font-family-headline-display: sohne-var, "SF Pro Display", sans-serif;
  --font-weight-headline-display: 300;
  --font-size-headline-display: 48px;
  --line-height-headline-display: 55.2px;
  --tracking-headline-display: -0.96px;
  /* observed; source h2 */
  --text-headline-lg: 300 32px/35.2px sohne-var, "SF Pro Display", sans-serif;
  --font-family-headline-lg: sohne-var, "SF Pro Display", sans-serif;
  --font-weight-headline-lg: 300;
  --font-size-headline-lg: 32px;
  --line-height-headline-lg: 35.2px;
  --tracking-headline-lg: -0.64px;
  /* observed; source h3 */
  --text-headline-md: 300 26px/29.12px sohne-var, "SF Pro Display", sans-serif;
  --font-family-headline-md: sohne-var, "SF Pro Display", sans-serif;
  --font-weight-headline-md: 300;
  --font-size-headline-md: 26px;
  --line-height-headline-md: 29.12px;
  --tracking-headline-md: -0.26px;
  /* observed; source body */
  --text-body-md: 300 16px/22.4px sohne-var, "SF Pro Display", sans-serif;
  --font-family-body-md: sohne-var, "SF Pro Display", sans-serif;
  --font-weight-body-md: 300;
  --font-size-body-md: 16px;
  --line-height-body-md: 22.4px;
  --tracking-body-md: normal;
  /* observed; source label; inferred: lineHeight */
  --text-label-md: 400 16px/1.4 sohne-var, "SF Pro Display", sans-serif;
  --font-family-label-md: sohne-var, "SF Pro Display", sans-serif;
  --font-weight-label-md: 400;
  --font-size-label-md: 16px;
  --line-height-label-md: 1.4;
  --tracking-label-md: normal;
  /* observed; source button */
  --text-button: 400 10px/11.5px sohne-var, "SF Pro Display", sans-serif;
  --font-family-button: sohne-var, "SF Pro Display", sans-serif;
  --font-weight-button: 400;
  --font-size-button: 10px;
  --line-height-button: 11.5px;
  --tracking-button: 0.1px;
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-full: 9999px;
  --radius-button: 4px;
  --radius-input: 0px;
  --radius-card: 6px;
  --shadow-1: rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px;
  --shadow-2: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-3: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --shadow-4: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
  --content-width: 1232px;
}
​
/* 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: "ss01";
  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: "ss01";
  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: "ss01";
  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: "ss01";
  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: 100%;
  font-variation-settings: normal;
  font-feature-settings: "ss01";
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
.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: "ss01";
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
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.