Stylepack

Tools

Design tokens from any website as CSS variables

Enter a website address and get its design tokens as CSS custom properties: colors, type styles, spacing, radii, shadows and content width, measured from the page as it renders.

Trystripe.comlinear.appairbnb.com

linear.app

Measured 4 days ago.

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;
}
Open the full answer pageOpen the design pack

How it works

Stylepack opens the site in a real browser, measures what renders (not what the stylesheet says) at four widths and in both themes, and stores the result as a design pack. A site already measured answers at once; a new one takes under a minute. Every value on this page comes from that pack.

Questions

What is a design token?

A named design value (a color, a font size, a spacing step) used across a product. As CSS variables, tokens let you restyle a whole site by changing one declaration.

Where do the names come from?

From the role each value plays on the measured page: --color-primary is the accent, --text-headline-lg a heading style, --space-4 a spacing step. The pack's tokens.json carries the same names in the W3C format.

Is this the whole design system?

It is the values. The design pack adds the behavior (hover, focus, menus, motion, responsive layout, dark mode), the component recipes and screenshots, in the form AI coding agents build from.