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

1/* Design tokens extracted from https://stripe.com/ (2026-10-28) */
2:root {
3  --color-background: #ffffff; /* Page background */
4  --color-surface: #e5edf5; /* Cards, panels, raised or recessed surfaces */
5  --color-surface-2: #ffe0ef; /* Secondary surface */
6  --color-surface-3: #ffe0d1; /* Secondary surface */
7  --color-foreground: #061b31; /* Primary text */
8  --color-muted-foreground: #64748d; /* Secondary text, captions */
9  --color-primary: #533afd; /* Candidate accent (semantic role inferred) */
10  --color-on-primary: #ffffff; /* Text on the accent */
11  --color-secondary: #0f4d29; /* Secondary accent (green) */
12  --color-border: #e5edf5; /* Hairlines, dividers, input borders */
13  --font-sans: sohne-var, "SF Pro Display", sans-serif;
14  --font-display: sohne-var, "SF Pro Display", sans-serif;
15  /* observed; source h1 */
16  --text-headline-display: 300 48px/55.2px sohne-var, "SF Pro Display", sans-serif;
17  --font-family-headline-display: sohne-var, "SF Pro Display", sans-serif;
18  --font-weight-headline-display: 300;
19  --font-size-headline-display: 48px;
20  --line-height-headline-display: 55.2px;
21  --tracking-headline-display: -0.96px;
22  /* observed; source h2 */
23  --text-headline-lg: 300 32px/35.2px sohne-var, "SF Pro Display", sans-serif;
24  --font-family-headline-lg: sohne-var, "SF Pro Display", sans-serif;
25  --font-weight-headline-lg: 300;
26  --font-size-headline-lg: 32px;
27  --line-height-headline-lg: 35.2px;
28  --tracking-headline-lg: -0.64px;
29  /* observed; source h3 */
30  --text-headline-md: 300 26px/29.12px sohne-var, "SF Pro Display", sans-serif;
31  --font-family-headline-md: sohne-var, "SF Pro Display", sans-serif;
32  --font-weight-headline-md: 300;
33  --font-size-headline-md: 26px;
34  --line-height-headline-md: 29.12px;
35  --tracking-headline-md: -0.26px;
36  /* observed; source body */
37  --text-body-md: 300 16px/22.4px sohne-var, "SF Pro Display", sans-serif;
38  --font-family-body-md: sohne-var, "SF Pro Display", sans-serif;
39  --font-weight-body-md: 300;
40  --font-size-body-md: 16px;
41  --line-height-body-md: 22.4px;
42  --tracking-body-md: normal;
43  /* observed; source label; inferred: lineHeight */
44  --text-label-md: 400 16px/1.4 sohne-var, "SF Pro Display", sans-serif;
45  --font-family-label-md: sohne-var, "SF Pro Display", sans-serif;
46  --font-weight-label-md: 400;
47  --font-size-label-md: 16px;
48  --line-height-label-md: 1.4;
49  --tracking-label-md: normal;
50  /* observed; source button */
51  --text-button: 400 10px/11.5px sohne-var, "SF Pro Display", sans-serif;
52  --font-family-button: sohne-var, "SF Pro Display", sans-serif;
53  --font-weight-button: 400;
54  --font-size-button: 10px;
55  --line-height-button: 11.5px;
56  --tracking-button: 0.1px;
57  --space-unit: 4px;
58  --space-1: 4px;
59  --space-2: 8px;
60  --space-3: 12px;
61  --space-4: 16px;
62  --space-5: 20px;
63  --space-6: 24px;
64  --space-7: 32px;
65  --space-8: 40px;
66  --radius-none: 0px;
67  --radius-sm: 4px;
68  --radius-md: 6px;
69  --radius-full: 9999px;
70  --radius-button: 4px;
71  --radius-input: 0px;
72  --radius-card: 6px;
73  --shadow-1: rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px;
74  --shadow-2: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
75  --shadow-3: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
76  --shadow-4: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
77  --content-width: 1232px;
78}
79​
80/* Load fonts.css first. Apply a complete role class, including non-shorthand font settings. */
81.sp-type-headline-display {
82  font: var(--text-headline-display);
83  letter-spacing: var(--tracking-headline-display);
84  font-style: normal;
85  font-stretch: 100%;
86  font-variation-settings: normal;
87  font-feature-settings: "ss01";
88  font-optical-sizing: auto;
89  font-synthesis: weight style small-caps;
90}
91.sp-type-headline-lg {
92  font: var(--text-headline-lg);
93  letter-spacing: var(--tracking-headline-lg);
94  font-style: normal;
95  font-stretch: 100%;
96  font-variation-settings: normal;
97  font-feature-settings: "ss01";
98  font-optical-sizing: auto;
99  font-synthesis: weight style small-caps;
100}
101.sp-type-headline-md {
102  font: var(--text-headline-md);
103  letter-spacing: var(--tracking-headline-md);
104  font-style: normal;
105  font-stretch: 100%;
106  font-variation-settings: normal;
107  font-feature-settings: "ss01";
108  font-optical-sizing: auto;
109  font-synthesis: weight style small-caps;
110}
111.sp-type-body-md {
112  font: var(--text-body-md);
113  letter-spacing: var(--tracking-body-md);
114  font-style: normal;
115  font-stretch: 100%;
116  font-variation-settings: normal;
117  font-feature-settings: "ss01";
118  font-optical-sizing: auto;
119  font-synthesis: weight style small-caps;
120}
121.sp-type-label-md {
122  font: var(--text-label-md);
123  letter-spacing: var(--tracking-label-md);
124  font-style: normal;
125  font-stretch: 100%;
126  font-variation-settings: normal;
127  font-feature-settings: "ss01";
128  font-optical-sizing: auto;
129  font-synthesis: weight style small-caps;
130}
131.sp-type-button {
132  font: var(--text-button);
133  letter-spacing: var(--tracking-button);
134  font-style: normal;
135  font-stretch: 100%;
136  font-variation-settings: normal;
137  font-feature-settings: "ss01";
138  font-optical-sizing: auto;
139  font-synthesis: weight style small-caps;
140}