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

1/* Design tokens extracted from https://www.airbnb.com/ (2026-10-27) */
2:root {
3  --color-background: #ffffff; /* Page background */
4  --color-surface: #dddddd; /* Cards, panels, raised or recessed surfaces */
5  --color-surface-2: #f2f2f2; /* Secondary surface */
6  --color-foreground: #222222; /* Primary text */
7  --color-muted-foreground: #6c6c6c; /* Secondary text, captions */
8  --color-primary: #da1249; /* Candidate accent (semantic role inferred) */
9  --color-on-primary: #ffffff; /* Text on the accent */
10  --color-border: #ffffff; /* Hairlines, dividers, input borders */
11  --font-sans: "Airbnb Cereal VF", "Inter", sans-serif;
12  --font-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
13  /* observed; source h1 */
14  --text-headline-display: 700 28px/40.04px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
15  --font-family-headline-display: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
16  --font-weight-headline-display: 700;
17  --font-size-headline-display: 28px;
18  --line-height-headline-display: 40.04px;
19  --tracking-headline-display: normal;
20  /* observed; source h2 */
21  --text-headline-lg: 600 20px/24px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
22  --font-family-headline-lg: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
23  --font-weight-headline-lg: 600;
24  --font-size-headline-lg: 20px;
25  --line-height-headline-lg: 24px;
26  --tracking-headline-lg: -0.18px;
27  /* fallback; source h3; inferred: fontSize, fontFamily, fontWeight, lineHeight */
28  --text-headline-md: 600 24px/1.4 "Airbnb Cereal VF", "Inter", sans-serif;
29  --font-family-headline-md: "Airbnb Cereal VF", "Inter", sans-serif;
30  --font-weight-headline-md: 600;
31  --font-size-headline-md: 24px;
32  --line-height-headline-md: 1.4;
33  --tracking-headline-md: normal;
34  /* fallback; source body; inferred: fontSize, fontFamily, fontWeight, lineHeight */
35  --text-body-md: 400 14px/1.4 "Airbnb Cereal VF", "Inter", sans-serif;
36  --font-family-body-md: "Airbnb Cereal VF", "Inter", sans-serif;
37  --font-weight-body-md: 400;
38  --font-size-body-md: 14px;
39  --line-height-body-md: 1.4;
40  --tracking-body-md: normal;
41  /* observed; source label */
42  --text-label-md: 400 12px/1.33 "Airbnb Cereal VF", "Inter", sans-serif;
43  --font-family-label-md: "Airbnb Cereal VF", "Inter", sans-serif;
44  --font-weight-label-md: 400;
45  --font-size-label-md: 12px;
46  --line-height-label-md: 1.33;
47  --tracking-label-md: normal;
48  /* observed; source button */
49  --text-button: 400 14px/18px "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
50  --font-family-button: "Airbnb Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
51  --font-weight-button: 400;
52  --font-size-button: 14px;
53  --line-height-button: 18px;
54  --tracking-button: normal;
55  --space-unit: 4px;
56  --space-1: 4px;
57  --space-2: 8px;
58  --space-3: 12px;
59  --space-4: 16px;
60  --space-5: 24px;
61  --space-6: 44px;
62  --space-7: 48px;
63  --radius-none: 0px;
64  --radius-2xl: 100px;
65  --radius-xl: 20px;
66  --radius-md: 8px;
67  --radius-lg: 14px;
68  --radius-full: 9999px;
69  --radius-button: 100px;
70  --radius-input: 0px;
71  --radius-card: 0px;
72  --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;
73  --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;
74  --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;
75  --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;
76}
77​
78/* Load fonts.css first. Apply a complete role class, including non-shorthand font settings. */
79.sp-type-headline-display {
80  font: var(--text-headline-display);
81  letter-spacing: var(--tracking-headline-display);
82  font-style: normal;
83  font-stretch: 100%;
84  font-variation-settings: normal;
85  font-feature-settings: normal;
86  font-optical-sizing: auto;
87  font-synthesis: none;
88}
89.sp-type-headline-lg {
90  font: var(--text-headline-lg);
91  letter-spacing: var(--tracking-headline-lg);
92  font-style: normal;
93  font-stretch: 100%;
94  font-variation-settings: "DRKM" 0;
95  font-feature-settings: normal;
96  font-optical-sizing: auto;
97  font-synthesis: none;
98}
99.sp-type-headline-md {
100  font: var(--text-headline-md);
101  letter-spacing: var(--tracking-headline-md);
102  font-style: normal;
103  font-stretch: normal;
104  font-variation-settings: normal;
105  font-feature-settings: normal;
106  font-optical-sizing: auto;
107  font-synthesis: none;
108}
109.sp-type-body-md {
110  font: var(--text-body-md);
111  letter-spacing: var(--tracking-body-md);
112  font-style: normal;
113  font-stretch: normal;
114  font-variation-settings: normal;
115  font-feature-settings: normal;
116  font-optical-sizing: auto;
117  font-synthesis: none;
118}
119.sp-type-label-md {
120  font: var(--text-label-md);
121  letter-spacing: var(--tracking-label-md);
122  font-style: normal;
123  font-stretch: normal;
124  font-variation-settings: normal;
125  font-feature-settings: normal;
126  font-optical-sizing: auto;
127  font-synthesis: none;
128}
129.sp-type-button {
130  font: var(--text-button);
131  letter-spacing: var(--tracking-button);
132  font-style: normal;
133  font-stretch: 100%;
134  font-variation-settings: normal;
135  font-feature-settings: normal;
136  font-optical-sizing: auto;
137  font-synthesis: none;
138}