Stylepack

الأدوات

Design tokens من أي موقع كمتغيرات CSS

أدخل عنوان موقع واحصل على design tokens الخاصة به كخصائص CSS مخصصة: الألوان وأنماط النص والمسافات والاستدارات والظلال وعرض المحتوى، مقاسة من الصفحة كما تُعرض.

جرّبstripe.comlinear.appairbnb.com

linear.app

تم القياس قبل 4 أيام.

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;
}
افتح صفحة الإجابة الكاملةافتح حزمة التصميم

كيف يعمل

يفتح Stylepack الموقع في متصفح حقيقي، ويقيس ما يُعرض فعلًا (لا ما يقوله ملف الأنماط) بأربعة عروض وفي كلا الوضعين، ويحفظ النتيجة كحزمة تصميم. الموقع المقاس سابقًا يجيب فورًا؛ والجديد يستغرق أقل من دقيقة. كل قيمة في هذه الصفحة تأتي من تلك الحزمة.

أسئلة

ما هو الـ design token؟

قيمة تصميم مسماة (لون، أو حجم خط، أو درجة مسافة) تُستخدم في المنتج كله. وبصيغة متغيرات CSS، تتيح لك الـ tokens إعادة تنسيق موقع كامل بتغيير تصريح واحد.

من أين تأتي الأسماء؟

من الدور الذي تؤديه كل قيمة في الصفحة المقاسة: --color-primary هو اللون المميز، و--text-headline-lg نمط عنوان، و--space-4 درجة مسافة. ويحمل ملف tokens.json في الحزمة الأسماء نفسها بصيغة W3C.

هل هذا هو نظام التصميم كاملًا؟

هذه هي القيم. وتضيف حزمة التصميم السلوك (hover وfocus والقوائم والحركة والتخطيط المتجاوب والوضع الداكن) ووصفات المكونات ولقطات الشاشة، بالصيغة التي يبني منها وكلاء البرمجة بالذكاء الاصطناعي.