Stylepack

टूल

किसी भी वेबसाइट के design tokens, CSS variables के रूप में

वेबसाइट का पता डालें और उसके design tokens CSS custom properties के रूप में पाएँ: रंग, टेक्स्ट स्टाइल, spacing, radius, shadows और कंटेंट की चौड़ाई, पेज के रेंडर होने पर मापे गए।

आज़माएँstripe.comlinear.appairbnb.com

airbnb.com

4 दिन पहले मापा गया।

background#ffffffsurface#ddddddsurface-2#f2f2f2foreground#222222muted-foreground#6c6c6cprimary#da1249on-primary#ffffffborder#ffffff
tokens.css
/* Design tokens extracted from https://www.airbnb.com/ (2026-10-27) */
:root {
  --color-background: #ffffff; /* Page background */
  --color-surface: #dddddd; /* Cards, panels, raised or recessed surfaces */
  --color-surface-2: #f2f2f2; /* Secondary surface */
  --color-foreground: #222222; /* Primary text */
  --color-muted-foreground: #6c6c6c; /* Secondary text, captions */
  --color-primary: #da1249; /* Candidate accent (semantic role inferred) */
  --color-on-primary: #ffffff; /* Text on the accent */
  --color-border: #ffffff; /* Hairlines, dividers, input borders */
  --font-sans: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  /* observed; source h1 */
  --text-headline-display: 700 28px/40.04px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-headline-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-weight-headline-display: 700;
  --font-size-headline-display: 28px;
  --line-height-headline-display: 40.04px;
  --tracking-headline-display: normal;
  /* observed; source h2 */
  --text-headline-lg: 600 20px/24px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-headline-lg: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-weight-headline-lg: 600;
  --font-size-headline-lg: 20px;
  --line-height-headline-lg: 24px;
  --tracking-headline-lg: -0.18px;
  /* fallback; source h3; inferred: fontSize, fontFamily, fontWeight, lineHeight */
  --text-headline-md: 600 24px/1.4 "Airbnb Cereal VF", "Inter", sans-serif;
  --font-family-headline-md: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-weight-headline-md: 600;
  --font-size-headline-md: 24px;
  --line-height-headline-md: 1.4;
  --tracking-headline-md: normal;
  /* fallback; source body; inferred: fontSize, fontFamily, fontWeight, lineHeight */
  --text-body-md: 400 14px/1.4 "Airbnb Cereal VF", "Inter", sans-serif;
  --font-family-body-md: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-weight-body-md: 400;
  --font-size-body-md: 14px;
  --line-height-body-md: 1.4;
  --tracking-body-md: normal;
  /* observed; source label */
  --text-label-md: 400 12px/1.33 "Airbnb Cereal VF", "Inter", sans-serif;
  --font-family-label-md: "Airbnb Cereal VF", "Inter", sans-serif;
  --font-weight-label-md: 400;
  --font-size-label-md: 12px;
  --line-height-label-md: 1.33;
  --tracking-label-md: normal;
  /* observed; source button */
  --text-button: 400 14px/18px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-button: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-weight-button: 400;
  --font-size-button: 14px;
  --line-height-button: 18px;
  --tracking-button: normal;
  --space-unit: 4px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 44px;
  --space-7: 48px;
  --radius-none: 0px;
  --radius-2xl: 100px;
  --radius-xl: 20px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --radius-button: 100px;
  --radius-input: 0px;
  --radius-card: 0px;
  --shadow-1: color(srgb 0 0 0 / 0.02) 0px 0px 0px 1px, color(srgb 0 0 0 / 0.04) 0px 2px 6px 0px, color(srgb 0 0 0 / 0.1) 0px 4px 8px 0px;
  --shadow-2: rgba(0, 0, 0, 0.5) 0px -6px 15px 0px, rgba(0, 0, 0, 0.08) 0px 4px 4px 0px, rgba(0, 0, 0, 0.18) 0px 12px 15px 0px;
  --shadow-3: rgba(218, 218, 218, 0.6) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.12) 0px -0.502px 1.004px 0px, rgba(0, 0, 0, 0.04) 0px -1.5px 3.5px 0px, rgba(0, 0, 0, 0.05) 0px 3px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0.75px 1px 0px inset, rgba(34, 34, 34, 0.6) 0px -0.5px 5px 1px inset, rgba(0, 0, 0, 0.16) 0.502px 0.5px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px -3px 7px 0px inset, rgba(0, 0, 0, 0.05) 0.502px 2px 4px 0px inset, rgba(0, 0, 0, 0.04) 1.004px 4px 4px 0px inset, rgba(184, 72, 155, 0.2) 0px -3px 7px 0px inset;
  --shadow-4: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px, rgba(255, 255, 255, 0.04) 1px 1.5px 3px 0px inset, rgba(255, 255, 255, 0.04) -1px 1.25px 3px 0px inset, rgba(255, 56, 92, 0.3) 0px -1px 3px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 2px 0px inset;
}
​
/* 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: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.sp-type-headline-lg {
  font: var(--text-headline-lg);
  letter-spacing: var(--tracking-headline-lg);
  font-style: normal;
  font-stretch: 100%;
  font-variation-settings: "DRKM" 0;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.sp-type-headline-md {
  font: var(--text-headline-md);
  letter-spacing: var(--tracking-headline-md);
  font-style: normal;
  font-stretch: normal;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.sp-type-body-md {
  font: var(--text-body-md);
  letter-spacing: var(--tracking-body-md);
  font-style: normal;
  font-stretch: normal;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}
.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: none;
}
पूरा जवाब वाला पेज खोलेंडिज़ाइन पैक खोलें

यह कैसे काम करता है

Stylepack साइट को असली ब्राउज़र में खोलता है, चार चौड़ाइयों पर और दोनों थीम में वह मापता है जो रेंडर होता है (न कि जो stylesheet कहती है), और नतीजे को डिज़ाइन पैक के रूप में रखता है। पहले से मापी गई साइट तुरंत जवाब देती है; नई साइट में एक मिनट से कम लगता है। इस पेज का हर मान उसी पैक से आता है।

सवाल

design token क्या है?

एक नाम वाला डिज़ाइन मान (एक रंग, एक फ़ॉन्ट साइज़, एक spacing step) जो पूरे प्रोडक्ट में इस्तेमाल होता है। CSS variables के रूप में tokens आपको एक declaration बदलकर पूरी साइट का रूप बदलने देते हैं।

नाम कहाँ से आते हैं?

मापे गए पेज पर हर मान की भूमिका से: --color-primary एक्सेंट है, --text-headline-lg एक शीर्षक स्टाइल, --space-4 एक spacing step। पैक की tokens.json में वही नाम W3C format में हैं।

क्या यही पूरा design system है?

यह उसके मान हैं। डिज़ाइन पैक में व्यवहार (hover, focus, मेन्यू, motion, responsive लेआउट, डार्क मोड), कंपोनेंट की रेसिपी और स्क्रीनशॉट भी जुड़ते हैं, उस रूप में जिससे AI कोडिंग एजेंट बनाते हैं।