Stylepack

Alat

Design token dari situs web mana pun sebagai variabel CSS

Masukkan alamat situs web dan dapatkan design token-nya sebagai CSS custom property: warna, gaya teks, jarak, radius, bayangan, dan lebar konten, diukur dari halaman saat dirender.

Cobastripe.comlinear.appairbnb.com

linear.app

Diukur 4 hari yang lalu.

background#08090asurface#101112surface-2#1c1d1esurface-3#07220aforeground#f7f8f8muted-foreground#8a8f98primary#e5e5e6on-primary#111111
tokens.css
/* Design tokens extracted from https://linear.app/ (2026-10-28) */
:root {
  --color-background: #08090a; /* Page background */
  --color-surface: #101112; /* Cards, panels, raised or recessed surfaces */
  --color-surface-2: #1c1d1e; /* Secondary surface */
  --color-surface-3: #07220a; /* Secondary surface */
  --color-foreground: #f7f8f8; /* Primary text */
  --color-muted-foreground: #8a8f98; /* Secondary text, captions */
  --color-primary: #e5e5e6; /* Candidate accent (semantic role inferred) */
  --color-on-primary: #111111; /* Text on the accent */
  --color-secondary: #5e6ad2; /* Secondary accent (violet) */
  --color-border: #1c1d1e; /* Hairlines, dividers, input borders */
  --font-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-display: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* observed; source h1 */
  --text-headline-display: 510 64px/64px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-headline-display: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-headline-display: 510;
  --font-size-headline-display: 64px;
  --line-height-headline-display: 64px;
  --tracking-headline-display: -1.408px;
  /* observed; source h2 */
  --text-headline-lg: 510 48px/48px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-headline-lg: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-headline-lg: 510;
  --font-size-headline-lg: 48px;
  --line-height-headline-lg: 48px;
  --tracking-headline-lg: -1.056px;
  /* observed; source h3 */
  --text-headline-md: 510 13px/19.5px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-headline-md: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-headline-md: 510;
  --font-size-headline-md: 13px;
  --line-height-headline-md: 19.5px;
  --tracking-headline-md: -0.13px;
  /* observed; source body */
  --text-body-md: 400 24px/31.92px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-body-md: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-body-md: 400;
  --font-size-body-md: 24px;
  --line-height-body-md: 31.92px;
  --tracking-body-md: -0.288px;
  /* observed; source label */
  --text-label-md: 400 12px/1.17 "Inter Variable", "Inter", sans-serif;
  --font-family-label-md: "Inter Variable", "Inter", sans-serif;
  --font-weight-label-md: 400;
  --font-size-label-md: 12px;
  --line-height-label-md: 1.17;
  --tracking-label-md: normal;
  /* observed; source button */
  --text-button: 400 15px/24px "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-family-button: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-weight-button: 400;
  --font-size-button: 15px;
  --line-height-button: 24px;
  --tracking-button: -0.165px;
  /* observed; source code */
  --text-code: 400 14px/24px "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-family-code: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-weight-code: 400;
  --font-size-code: 14px;
  --line-height-code: 24px;
  --tracking-code: normal;
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 48px;
  --radius-none: 0px;
  --radius-full: 9999px;
  --radius-lg: 12px;
  --radius-sm: 4px;
  --radius-button: 9999px;
  --radius-input: 0px;
  --radius-card: 12px;
  --shadow-1: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-2: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset;
  --shadow-3: rgba(0, 0, 0, 0.25) 0px 2px 32px 0px;
  --shadow-4: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  --content-width: 1344px;
}
​
/* 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: "cv01", "ss03";
  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: "cv01", "ss03";
  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: "cv01", "ss03";
  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: "cv01", "ss03";
  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: 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: weight style small-caps;
}
.sp-type-code {
  font: var(--text-code);
  letter-spacing: var(--tracking-code);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: weight style small-caps;
}
Buka halaman jawaban lengkapBuka paket desain

Cara kerjanya

Stylepack membuka situs di browser sungguhan, mengukur apa yang tampil (bukan apa yang tertulis di stylesheet) pada empat lebar layar dan di kedua tema, lalu menyimpan hasilnya sebagai paket desain. Situs yang sudah diukur langsung terjawab; situs baru butuh kurang dari semenit. Setiap nilai di halaman ini berasal dari paket itu.

Pertanyaan

Apa itu design token?

Nilai desain bernama (warna, ukuran font, langkah jarak) yang dipakai di seluruh produk. Sebagai variabel CSS, token memungkinkan Anda mengubah gaya seluruh situs dengan mengganti satu deklarasi.

Dari mana nama-namanya berasal?

Dari peran tiap nilai di halaman yang diukur: --color-primary adalah aksen, --text-headline-lg sebuah gaya judul, --space-4 sebuah langkah jarak. tokens.json di paketnya memuat nama yang sama dalam format W3C.

Apakah ini seluruh design system-nya?

Ini nilainya. Paket desainnya menambahkan perilaku (hover, focus, menu, animasi, tata letak responsif, mode gelap), resep komponen, dan screenshot, dalam bentuk yang bisa dijadikan acuan AI coding agent.