-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
372 lines (341 loc) · 22.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Design Tokens Pro Course | Unlock the full potential of design tokens</title>
<link rel="stylesheet" href="/node_modules/html5-boilerplate/dist/css/style.css">
<link rel="stylesheet" href="css/style.compiled.css">
<meta name="description" content="Design Tokens Pro is a digital course for designers and developers, providing a guide to mastering design tokens across platforms.">
<meta property="og:url" content="https://designtokens.pro">
<meta property="og:type" content="website">
<meta property="og:title" content="Design Tokens Pro Course | Unlock the full potential of design tokens">
<meta property="og:description" content="Design Tokens Pro is a digital course for designers and developers, providing a guide to mastering design tokens across platforms.">
<meta property="og:image" content="https://designtokens.pro/img/og-image.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="designtokens.pro">
<meta property="twitter:url" content="https://designtokens.pro">
<meta name="twitter:title" content="Design Tokens Pro Course | Unlock the full potential of design tokens">
<meta name="twitter:description" content="Design Tokens Pro is a digital course for designers and developers, providing a guide to mastering design tokens across platforms.">
<meta property="twitter:image" content="https://designtokens.pro/img/og-image.png">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icon.png">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content="#FFF5E9">
<script defer data-domain="designtokens.pro" src="https://plausible.io/js/script.js"></script>
<link rel="preload" href="/fonts/HubotSans-variable.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body class="bg-orange-50">
<header class="p-6">
<div class="max-w-screen-2xl mx-auto">
<nav class="flex flex-col md:flex-row items-center" aria-label="Global">
<div class="flex md:w-full mb-6 md:mb-0">
<a href="#" class="flex items-center justify-center">
<img class="w-auto h-12" src="/img/logo.webp" alt="Design Tokens Course logo" title="Design Tokens Pro is a digital course on mastering design tokens">
</a>
</div>
<div class="w-full flex justify-between md:justify-end text-md md:text-lg font-semibold">
<a href="#section-modules" class="text-slate-600 hover:text-slate-700 underline md:px-6">What's inside</a>
<a href="#section-faq" class="text-slate-600 hover:text-slate-700 underline md:px-6">FAQ</a>
<a data-formkit-toggle="b8a4c3bfea" href="https://francesco-improta.ck.page/b8a4c3bfea" class="text-emerald-600 hover:text-emerald-700 underline font-medium md:pl-6">Join the waitlist →</a>
</div>
</nav>
</div>
</header>
<!-- HERO -->
<section class="mb-10 lg:mb-20 px-6 pt-10 pb-20 md:pt-20 mx-auto relative z-0">
<div class="max-w-screen-2xl mx-auto grid lg:grid-cols-12 gap-6 items-end">
<div class="lg:col-start-1 lg:col-end-7 xl:col-start-2 mt-10 lg:mt-20">
<h1 class="text-5xl md:text-6xl lg:text-7xl mb-4 heading text-slate-800">Unlock the full potential of design
tokens</h1>
</div>
<div class="lg:col-start-7 lg:col-end-12">
<span class="inline-block mb-3 uppercase eyebrow text-xs text-slate-600">a digital course on design tokens</span>
<p class="text-2xl text-slate-800 font-semibold mb-8">Learn how to effectively create, manage, and adopt
design tokens in your digital products.</p>
<a class="inline-block bg-emerald-300 hover:bg-emerald-400 transition-colors text-xl font-medium text-zinc-900 px-12 py-4 rounded-full"
data-formkit-toggle="b8a4c3bfea" href="https://francesco-improta.ck.page/b8a4c3bfea">Join the waitlist →</a>
</div>
</div>
<!-- <img src="/img/hero-background.svg" class="absolute bottom-0 right-0 z-0" alt=""> -->
</section>
<!-- COURSE DETAILS -->
<section class="bg-slate-800 px-6 pb-20 md:pt-20 lg:pb-0">
<div class="max-w-screen-2xl mx-auto grid lg:grid-cols-12 z-10">
<div class="col-span-12 lg:col-span-8 offset z-20 md:mb-6 lg:mr-16 lg:mb-0">
<img class="slide w-full" src="/img/course-sneak-peak.webp" alt="A preview of the digital course on design tokens, showing course modules" title="A preview of the digital course">
</div>
<article class="col-span-12 lg:col-span-4 text-white/85">
<p class="text-xl mb-6 mt-12 md:mt-0">Design Tokens Pro is a digital course intended for designers and
developers involved in the product design process.
</p>
<p class="text-xl mb-6">It provides a reliable guide for creating effective design tokens for any platform or
technology.</p>
<p class="text-xl mb-6">
<a class="text-emerald-400 hover:text-emerald-300 transition-colors font-medium underline"
href="#section-modules">
What's inside the course ↓
</a>
</p>
</article>
</div>
</section>
<!-- WHAT YOU LEARN -->
<section class="bg-white px-6 py-14 md:py-20 border-b border-zinc-400">
<div class="max-w-screen-2xl mx-auto">
<div class="grid lg:grid-cols-12 mb-14 md:mb-20 lg:mb-36 items-end">
<div class="lg:col-start-1 lg:col-end-5 xl:col-start-2">
<span class="inline-block mb-3 uppercase eyebrow text-xs text-slate-600">Advance your skills</span>
<h2 class="text-5xl font-semibold heading text-slate-700 mb-6">What you'll learn</h2>
</div>
<div class="lg:col-start-6 lg:col-end-12">
<p class="text-2xl text-slate-700 font-semibold">If managing design tokens across various tools, technologies
and files seems like a challenge, this course is for you.</p>
</div>
</div>
<article class="grid lg:grid-cols-12 gap-10 mb-20 lg:mb-40 animate">
<header class="lg:col-span-6 xl:col-start-2 xl:col-end-6">
<p class="text-2xl text-slate-600"><span class="font-bold text-orange-500">Develop a shared vocabulary.</span>
Creating a shared taxonomy with clear naming conventions is vital. It organizes information, enhances
clarity, and promotes teamwork and efficiency.</p>
</header>
<img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-vocabulary.png" alt="A list of vocabulary terms used for design tokens naming" title="Design tokens taxonomy is made of a shared naming convention">
</article>
<article class="grid lg:grid-cols-12 gap-10 mb-20 lg:mb-40 animate">
<header class="lg:col-span-6 xl:col-start-2 xl:col-end-6">
<p class="text-2xl text-slate-600"><span class="font-bold text-orange-500">Translate values into design
decisions.</span> Every token you make is a careful choice, not just a random number. As you learn more,
you'll see how and when you make these important choices and use this understanding in real situations.</p>
</header>
<img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-decisions.png" alt="Example of design tokens application, using appropriate terms to make design decisions" title="Design tokens levels increase specificity, from a raw value to a design decision">
</article>
<article class="grid lg:grid-cols-12 gap-10 mb-20 lg:mb-40 animate">
<header class="lg:col-span-6 xl:col-start-2 xl:col-end-6">
<p class="text-2xl text-slate-600"><span class="font-bold text-orange-500">Use tokens with purpose.</span> Choosing the right token is vital for different use cases, as it ensures functionality. Make careful choices on specific use being flexible and aware of any potential implications.</p>
</header>
<img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-purpose.png" alt="Example of design tokens application, using appropriate terms to use design tokens with purpose" title="The do's and dont's in design tokens usage">
</article>
<article class="grid lg:grid-cols-12 gap-10 animate">
<header class="lg:col-span-6 xl:col-start-2 xl:col-end-6">
<p class="text-2xl text-slate-600"><span class="font-bold text-orange-500">Optimize management process.</span>
Understanding the tools for efficient design token updates is key. As products evolve, so must these tokens.
Developing skills to manage and update these tokens can greatly enhance the design process.</p>
</header>
<img class="block lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-process.png" alt="The design tokens lifecycle across different tools and technologies" title="The design tokens lifecycle is technologically agnostic">
</article>
</div>
</section>
<!-- WHAT'S IN THE COURSE -->
<section id="section-modules" class="bg-white px-6 py-14 md:py-20">
<div class="max-w-screen-2xl mx-auto">
<div class="grid lg:grid-cols-12 mb-14 md:mb-20 lg:mb-32 items-end">
<div class="lg:col-start-1 lg:col-end-5 xl:col-start-2">
<span class="inline-block mb-3 uppercase eyebrow text-xs text-slate-600">Topics & Modules</span>
<h2 class="text-5xl font-semibold heading text-slate-700 mb-6">What's inside</h2>
</div>
<div class="lg:col-start-6 lg:col-end-12">
<p class="text-2xl text-slate-700 font-semibold">From basics to advanced topics, this course covers all you need to know for creating and managing any kind of token set.</p>
</div>
</div>
<div class="grid lg:grid-cols-12 gap-6 mb-12">
<section class="col-span-12 lg:col-start-1 lg:col-end-8 xl:col-start-2 xl:col-end-9">
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">01</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Basics</h3>
<p class="text-md text-slate-700">Learn the design tokens foundations: what they are, their function,
their appearance, and the advantages they bring to a project or design system.</p>
</header>
</article>
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">02</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Elements of Token Name</h3>
<p class="text-md text-slate-700">What are the elements that make up the name of a token, being careful to
choose only those that are really needed.</p>
</header>
</article>
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">03</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Token Levels</h3>
<p class="text-md text-slate-700">Delve deeper into the structure of design tokens. This module discusses
the different types of tokens, their importance, and the correct way to use them.</p>
</header>
</article>
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">04</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Taxonomy & Naming Convention</h3>
<p class="text-md text-slate-700">Learn how to create a taxonomy, why it's important, and how to set up a
shared naming convention with your team and stakeholders.</p>
</header>
</article>
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">05</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Compound Tokens</h3>
<p class="text-md text-slate-700">Dive into the topic of compound tokens in this chapter. Understand what
they are, how they differ from single tokens, and their role in complex designs.</p>
</header>
</article>
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">06</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Themes and Color Modes</h3>
<p class="text-md text-slate-700">Learn the strategies for managing themes within either a single project
or across multiple projects. Gain insights into organizing these themes and implementing them
effectively in your designs..</p>
</header>
</article>
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">07</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Lifecycle of a Token</h3>
<p class="text-md text-slate-700">We'll explore the lifecycle, storage, and usage of design tokens across
tools, vital for their effective management and use, leading to a streamlined design process.</p>
</header>
</article>
<article class="flex mb-2 p-6 border border-slate-300">
<span class="text-orange-500 font-semibold font-mono text-lg">08</span>
<header class="ml-4">
<h3 class="text-xl lg:text-2xl font-semibold mb-2">Documenting Tokens</h3>
<p class="text-md text-slate-700">The course is articulated in 8 modules covering any aspects, from basics
to advanced topics. Ideal for novice and experts.</p>
</header>
</article>
</section>
<aside class="col-span-12 lg:col-start-8 lg:col-end-12 xl:col-start-9 lg:col-end-12">
<h4 class="text-lg font-semibold mb-6">Course Materials</h4>
<ul class="mb-8">
<li class="flex mb-2 text-slate-600"><svg class="mr-2 fill-green-600" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>check</title>
<path
d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z">
</path>
</svg>
Self-paced online course</li>
<li class="flex mb-2 text-slate-600"><svg class="mr-2 fill-green-600" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>check</title>
<path
d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z">
</path>
</svg>
Printable PDF</li>
<li class="flex mb-2 text-slate-600"><svg class="mr-2 fill-green-600" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>check</title>
<path
d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z">
</path>
</svg>
<a class="underline hover:text-slate-900 transition-colors" href="https://app.gumroad.com/products/qshab/edit">Design Tokens Manager</a></li>
<li class="flex mb-2 text-slate-600"><svg class="mr-2 fill-green-600" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>check</title>
<path
d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z">
</path>
</svg>
Workshop kit for teams</li>
<li class="flex mb-2 text-slate-600"><svg class="mr-2 fill-green-600" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>check</title>
<path
d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z">
</path>
</svg>
1:1 instructor support</li>
</ul>
<a class="inline-block bg-emerald-300 hover:bg-emerald-400 transition-colors text-xl font-medium text-zinc-900 px-12 py-4 rounded-full"
data-formkit-toggle="b8a4c3bfea" href="https://francesco-improta.ck.page/b8a4c3bfea">Join the waitlist →</a>
</aside>
</div>
</div>
</section>
<!-- WHO AM I -->
<section class="px-6 py-10 md:py-20 text-center">
<span class="inline-block mb-3 uppercase eyebrow text-xs text-slate-600">The Instructor</span>
<h2 class="text-5xl font-semibold heading mb-20 text-zinc-800">Who I am</h2>
<div class="max-w-screen-2xl mx-auto grid md:grid-cols-12 gap-6 items-top">
<div class="md:col-start-3 md:col-end-5 mx-auto">
<img class="w-full max-w-36 rounded-2xl" src="img/about.webp" alt="">
</div>
<div class="md:col-start-5 md:col-end-10 text-left">
<p class="mb-3 font-bold text-2xl">👋 I'm a Francesco, a designer with a love for coding and mountains.</p>
<p class="mb-3 text-xl">With a 15-year career in Product Design, I've had the opportunity to work with a variety
of Design Systems, whether they're being built from the ground up or improved upon.</p>
<p class="mb-3 text-xl">I enjoy guiding and enlightening teams about the use of design tokens, empowering them
to develop scalable designs across different platforms.</p>
<p class="text-xl">
<a class="text-green-500 hover:text-green-600 transition-colors font-medium underline" href="https://francescoimprota.com/about">More about me
<svg class="inline-block" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
class="a-icon--arrow-north-east400 a-icon--text a-icon--no-align top-[0.05em] relative f-ui-1 ml-2 -mr-4"
style="width:1em;height:1em;" data-new="" aria-hidden="true" data-v-e1bdab2c="">
<polygon fill="currentColor"
points="5 4.31 5 5.69 9.33 5.69 2.51 12.51 3.49 13.49 10.31 6.67 10.31 11 11.69 11 11.69 4.31 5 4.31"
data-v-e1bdab2c=""></polygon>
</svg>
</a>
</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="section-faq" class="bg-orange-400 px-6 py-10 md:py-20 text-slate-900">
<div class="max-w-screen-2xl grid md:grid-cols-12 gap-6 mx-auto pt-6 items-top">
<div class="col-span-12 text-center">
<h2 class="text-5xl heading mb-8">Questions <span class="text-white/70">+</span> Answers</h2>
</div>
<article class="pb-12 col-span-12 md:col-span-6">
<h3 class="text-2xl font-semibold mb-2">Is it suitable for beginners?</h3>
<p class="text-xl opacity-80">Yes, the guide is written in a clear and easy-to-understand manner for those
starting from scratch. Even experienced designers will find new insights and tips in the guide.</p>
</article>
<article class="pb-12 col-span-12 md:col-span-6">
<h3 class="text-2xl font-semibold mb-2">What problems will this course help me overcome?</h3>
<p class="text-xl opacity-80">This course makes it easier for you to use design tokens. It helps keep your
digital projects consistent, understand how to use design tokens, and simplify your design process. It also
offers tips for managing design tokens across different tools or files.</p>
</article>
<article class="pb-12 col-span-12 md:col-span-6">
<h3 class="text-2xl font-semibold mb-2">Can I do the lessons when I have time?</h3>
<p class="text-xl opacity-80">Yes, this is a digital and self-paced course, you can take as long as you want to
complete it.</p>
</article>
<article class=" pb-12 col-span-12 md:col-span-6">
<h3 class="text-2xl font-semibold mb-2">Should I know to code?</h3>
<p class="text-xl opacity-80">While knowing how to code can enhance your understanding of design tokens, it's
not a requirement for this course. The guide is designed to be accessible for both designers and developers,
with practical examples that don't require coding expertise.</p>
</article>
<p class="inline-block col-span-12 text-slate-900/70 border-t border-slate-700 pt-3">
If you still have questions, please feel free to <a class="hover:text-slate-900 transition-colors font-medium underline" href="mailto:designtokenspro@francescoimprota.com">contact me</a>. I'll be pleased to answer them
</p>
</div>
</section>
<!-- CTA -->
<div class="bg-slate-800 px-6 py-10 md:py-20">
<div class="max-w-screen-2xl mx-auto text-center px-4 items-center">
<h2 class="text-white heading text-6xl mb-12">Advance your skills in design token.</h2>
<a class="inline-block bg-green-400 hover:bg-green-300 transition-colors text-xl font-medium text-zinc-900 px-12
py-4 rounded-full" data-formkit-toggle="b8a4c3bfea" href="https://francesco-improta.ck.page/b8a4c3bfea">Join
the waitlist →</a>
</div>
</div>
<footer class="text-sm bg-slate-900 px-6 py-5 flex flex-col-reverse items-center md:flex-row md:justify-between text-white">
<p class="w-auto opacity-50 text-center">Design Tokens Pro © 2024 | A course by Francesco Improta</p>
<nav class="flex justify-between w-auto my-4 md:m-0 opacity-85">
<a href="/privacy">Privacy Policy</a> |
<a mailto="designtokenspro@francescoimprota.com">Contact</a>
</nav>
</footer>
<script async data-uid="b8a4c3bfea" src="https://francesco-improta.ck.page/b8a4c3bfea/index.js"></script>
<!-- Add your site or application content here -->
<script src="/js/app.js"></script>
</body>
</html>