Stylepack

Araçlar

Herhangi bir web sitesinden tasarım token’ları, CSS değişkenleri olarak

Bir web sitesi adresi girin ve tasarım token’larını CSS özel özellikleri (custom property) olarak alın: renkler, metin stilleri, boşluklar, köşe yarıçapları, gölgeler ve içerik genişliği, sayfanın render edilmiş halinden ölçülmüş.

Deneyinstripe.comlinear.appairbnb.com

stripe.com

4 gün önce ölçüldü.

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;
}
Tam cevap sayfasını açTasarım paketini aç

Nasıl çalışır

Stylepack siteyi gerçek bir tarayıcıda açar, dört genişlikte ve iki temada ekranda ne render edildiğini ölçer (stil dosyasının ne dediğini değil) ve sonucu bir tasarım paketi olarak saklar. Daha önce ölçülmüş bir site anında cevap verir; yeni bir site bir dakikadan kısa sürer. Bu sayfadaki her değer o paketten gelir.

Sorular

Tasarım token’ı nedir?

Bir üründe baştan sona kullanılan, adlandırılmış bir tasarım değeri (bir renk, bir font boyutu, bir boşluk adımı). CSS değişkenleri olarak token’lar, tek bir tanımı değiştirerek tüm siteyi yeniden stillendirmenizi sağlar.

İsimler nereden geliyor?

Her değerin ölçülen sayfada oynadığı rolden: --color-primary vurgu rengi, --text-headline-lg bir başlık stili, --space-4 bir boşluk adımı. Paketin tokens.json dosyası aynı isimleri W3C formatında taşır.

Bu, tasarım sisteminin tamamı mı?

Bu, değerler. Tasarım paketi buna davranışı (hover, focus, menüler, animasyon, responsive yerleşim, koyu mod), bileşen tariflerini ve ekran görüntülerini, yapay zeka kodlama ajanlarının üzerine inşa ettiği biçimde ekler.