Stylepack

Tools

Design-Tokens einer Website als CSS-Variablen

Gib eine Website-Adresse ein und erhalte ihre Design-Tokens als CSS Custom Properties: Farben, Textstile, Abstände, Radien, Schatten und Inhaltsbreite, gemessen an der Seite, wie sie gerendert wird.

Probierstripe.comlinear.appairbnb.com

stripe.com

vor 4 Tagen gemessen.

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;
}
Ganze Antwortseite öffnenDesignpaket öffnen

So funktioniert es

Stylepack öffnet die Website in einem echten Browser, misst, was gerendert wird (nicht, was im Stylesheet steht), in vier Breiten und in beiden Themes, und speichert das Ergebnis als Designpaket. Eine bereits gemessene Website antwortet sofort; eine neue braucht unter einer Minute. Jeder Wert auf dieser Seite stammt aus diesem Paket.

Fragen

Was ist ein Design-Token?

Ein benannter Designwert (eine Farbe, eine Schriftgröße, ein Abstandsschritt), der im ganzen Produkt verwendet wird. Als CSS-Variablen lassen dich Tokens eine ganze Website umgestalten, indem du eine einzige Deklaration änderst.

Woher kommen die Namen?

Aus der Rolle, die jeder Wert auf der gemessenen Seite spielt: --color-primary ist der Akzent, --text-headline-lg ein Überschriftenstil, --space-4 ein Abstandsschritt. Die tokens.json des Pakets trägt dieselben Namen im W3C-Format.

Ist das das ganze Designsystem?

Es sind die Werte. Das Designpaket ergänzt das Verhalten (hover, focus, Menüs, Motion, responsives Layout, Dark Mode), die Komponentenrezepte und Screenshots, in der Form, aus der KI-Coding-Agenten bauen.