Meta tags:
description=An in-depth course on design tokens: concepts, Figma Variables, code, processes, best practices, and more.;
keywords=design tokens, design systems, Figma Variables, Style Dictionary, atomic design, product design, ux design, frontend development;
author=Brad Frost and Ian Frost;

Headings (most frequently used words):

design, token, tokens, frost, the, system, course, your, brad, ian, follow, david, chris, banks, luke, ben, subatomic, complete, guide, to, kickstart, master, art, of, content, about, teachers, testimonials, order, individual, license, designer, developer, teams, enterprises, thank, you, so, much, core, concepts, foundations, architecture, naming, conventions, building, publishing, adopting, maintaining, evolving, systems, advanced, participants, industry, leaders, atomic, jeroen, van, den, hoek, angie, badillo, anibal, santos, astrid, bin, paul, papagiannis, anthony, quinn, byrne, edgar, lechaudel, omar, dsooky, flores, kang, maurizio, vaggi, james, barber, noah, levin, jeffrey, zeldman, jennifer, robbins, coyier, sarah, drasner, dominic, nguyen, molly, hellmuth, danny, dave, rupert, christine, vallaure, matt, smith, geri, reid, jeremy, keith, sara, soueidan, murphy, strahl, scott, jenson, val, head, joey, jared, spool, callahan, amy, hupe, skip, shelly, dan, donald, adam, argyle, wroblewski, miriam, suzanne, vitaly, friedman, brian, muenzenmeyer, lea, verou, patrick, fulton, brignell, marc, thiele,

Text of the page (most frequently used words):
and (182), design (145), the (140), #systems (56), for (53), brad (50), you (48), tokens (45), course (44), #system (42), this (42), token (39), with (32), ian (31), your (31), multi (26), that (21), how (20), can (19), about (18), they (18), are (18), frost (17), have (17), way (17), their (16), work (16), all (16), web (15), over (15), get (13), years (13), his (13), experience (13), more (13), atomic (12), help (12), figma (12), code (12), architecture (12), people (12), into (12), brand (12), out (11), product (11), from (11), not (11), what (11), industry (11), creating (10), naming (10), but (10), world (10), founder (10), practical (10), them (10), designers (10), things (10), been (10), created (10), time (9), knowledge (9), know (9), platform (9), any (8), much (8), other (8), designer (8), experts (8), many (8), has (8), covered (8), section (8), email (7), learn (7), best (7), organization (7), working (7), deep (7), who (7), real (7), developers (7), creator (7), one (7), like (7), courses (6), products (6), everything (6), teams (6), only (6), also (6), just (6), same (6), really (6), will (6), author (6), make (6), end (6), consultant (6), organizations (6), ideas (6), our (6), was (6), teach (6), create (6), buy (5), concepts (5), build (5), need (5), save (5), between (5), developer (5), depth (5), resources (5), share (5), expert (5), new (5), long (5), thoughtful (5), css (5), stuff (5), core (5), when (5), than (5), anyone (5), through (5), there (5), makes (5), him (5), level (5), great (5), book (5), put (5), teachers (5), subatomic (5), use (5), follow (4), address (4), updates (4), including (4), find (4), free (4), development (4), license (4), collaboration (4), hours (4), now (4), tools (4), known (4), two (4), lead (4), looking (4), right (4), first (4), companies (4), think (4), complex (4), most (4), perfect (4), built (4), good (4), understanding (4), style (4), advice (4), tiered (4), amazing (4), building (4), projects (4), guide (4), generation (4), consulted (4), brands (4), using (4), conventions (4), publishing (4), linkedin (3), again (3), practices (3), every (3), understand (3), shared (3), expression (3), individual (3), videos (3), governance (3), workflows (3), life (3), money (3), team (3), order (3), field (3), friendly (3), see (3), insights (3), sharing (3), engineer (3), speaker (3), around (3), worked (3), experienced (3), challenges (3), folks (3), day (3), knows (3), open (3), dive (3), very (3), pragmatic (3), automation (3), along (3), highly (3), excited (3), helping (3), google (3), apply (3), designing (3), needs (3), content (3), learned (3), enterprise (3), yet (3), these (3), taking (3), approach (3), animation (3), easy (3), fun (3), doing (3), important (3), scale (3), accessibility (3), hundreds (3), learning (3), effective (3), literally (3), take (3), actionable (3), fortune (3), down (3), components (3), decade (3), three (3), would (3), apart (3), tier (3), white (3), both (3), playing (3), themes (3), helped (3), dozens (3), maintain (3), hard (3), cases (3), library (3), theme (3), color (3), typography (3), spacing (3), border (3), why (3), peace (2), success (2), bluesky (2), blog (2), don (2), after (2), few (2), thanks (2), bradfrost (2), com (2), spam (2), confirm (2), receive (2), promotions (2), thank (2), want (2), sign (2), online (2), introduces (2), methodology (2), honest (2), feel (2), power (2), parity (2), licenses (2), per (2), seat (2), part (2), process (2), strike (2), balance (2), enterprises (2), side (2), change (2), 300 (2), month (2), access (2), sample (2), pdf (2), slides (2), 150 (2), certificate (2), completion (2), organizer (2), joy (2), ben (2), sizes (2), seen (2), w3c (2), having (2), conferences (2), full (2), confidence (2), fantastic (2), principal (2), approachable (2), pattern (2), lab (2), say (2), stop (2), advocacy (2), cross (2), disciplinary (2), technologies (2), interface (2), patterns (2), shares (2), bring (2), recommended (2), musician (2), artist (2), run (2), wild (2), together (2), mobile (2), luke (2), sense (2), advocate (2), skip (2), high (2), able (2), some (2), teaching (2), systematic (2), words (2), serve (2), users (2), engineering (2), stakeholders (2), practice (2), tricky (2), instrumental (2), solid (2), investment (2), while (2), care (2), wide (2), problems (2), future (2), ability (2), simple (2), huge (2), training (2), banks (2), builds (2), even (2), topics (2), making (2), head (2), comes (2), gives (2), smart (2), chris (2), fundamentals (2), interfaces (2), deliver (2), value (2), since (2), hands (2), anything (2), unique (2), then (2), sure (2), guides (2), absolute (2), tech (2), project (2), company (2), better (2), scalable (2), space (2), quick (2), being (2), articles (2), workshops (2), shoptalk (2), show (2), past (2), complete (2), dictionary (2), architect (2), teacher (2), renowned (2), own (2), trusted (2), leaders (2), such (2), effort (2), david (2), structure (2), without (2), else (2), half (2), chapter (2), thorough (2), needed (2), support (2), break (2), history (2), before (2), which (2), package (2), npm (2), love (2), collaborate (2), were (2), 500 (2), thousands (2), digital (2), testimonials (2), professional (2), music (2), wife (2), others (2), successfully (2), establish (2), art (2), earned (2), lessons (2), front (2), chance (2), passionate (2), processes (2), styleguides (2), themeable (2), rebrands (2), labeling (2), dark (2), mode (2), advanced (2), releasing (2), versioning (2), pilot (2), applying (2), ecosystem (2), user (2), synchronization (2), shadow (2), mvp (2), platforms (2), modes (2), consistency (2), efficiency (2), look (2), 2025, wish, health, happiness, website, youtube, threads, mastodon, rss, minutes, contact, sorted, filters, legitimate, please, check, inbox, asking, once, ready, newsletter, folders, close, message, discounts, below, read, ebook, bucks, successful, goodness, sort, student, job, hunter, purchasing, questions, comments, jokes, ridicule, impact, entire, leverage, 1500, ftw, bringing, partner, fence, note, manually, quantity, checkout, sorry, weirdness, payment, plan, 900, private, slack, channel, resume, become, advance, beyond, tellerrand, marc, thiele, always, pure, because, enthusiastic, yourself, expertise, passion, positive, delivering, strategist, coder, brignell, admired, generous, funny, educators, patrick, fulton, watched, practitioners, face, font, awesome, tag, lea, verou, spoken, attest, personally, forward, source, maintainer, brian, muenzenmeyer, something, listen, iterative, rekindles, sustains, spirit, foundational, endures, hype, cycles, continues, inspire, generations, measure, smashing, magazine, vitaly, friedman, comprehensive, overview, avoid, troubles, hassles, syncing, handoff, valuable, group, oddbird, badass, miriam, suzanne, sometimes, conversations, minutia, management, foundation, pulls, sutter, hill, ventures, polar, bagcheck, wroblewski, spent, let, props, chrome, adam, argyle, quest, duo, combines, quality, dan, donald, got, here, shapes, organisation, actually, helps, nicest, meet, associate, professor, cmu, hcii, shelly, equipped, screen, based, interaction, cute, play, atoms, molecules, organisms, templates, pages, positioned, owners, shows, promise, elevating, addressing, presented, amy, hupe, consult, whenever, stuck, problem, contributions, colossal, doubt, upcoming, prove, sparkbox, question, callahan, continually, impressed, considerable, portfolio, qualified, kind, community, center, centre, uie, jared, spool, large, solving, tough, where, deal, complexity, politics, emerge, cohesive, magical, reduce, ones, overcome, baseline, joey, writing, redefined, scales, rare, gift, accessible, whether, beginner, trying, basics, practitioner, refining, pair, details, steps, adobe, val, place, smartest, keep, ton, strategy, frog, apple, scott, jenson, hell, pretty, map, works, wants, takes, healthy, chunk, earnings, charity, aren, ceo, knapsack, strahl, focuses, changed, thought, modular, reusable, pathway, toward, structured, immense, zeroheight, host, wtf, murphy, forefront, beginning, safer, pairs, sara, soueidan, partly, hand, largest, track, record, interested, might, _just_, clearleft, resilient, html, jeremy, keith, multitude, advantage, benefit, class, geri, reid, mastering, delivers, guidance, straight, away, shift, nudge, extraordinaire, matt, smith, powerhouses, shaped, approaches, had, opportunity, major, deepen, won, bound, goldmine, wanting, impactful, moonlearning, christine, vallaure, top, recommend, students, noise, promises, stands, grounded, clear, earth, clicks, microsoft, paravel, luro, dave, rupert, relied, countless, times, frame, discussions, move, forwards, quite, did, week, big, repeatedly, demonstrate, execute, empower, amazon, danny, advancing, concept, constantly, referring, talks, especially, article, writers, uiprep, bootcamp, molly, hellmuth, battle, perspective, communicating, resource, led, guaranteed, worth, storybook, chromatic, dominic, nguyen, luminary, intersection, frontend, thinking, production, director, android, ios, infrastructure, sarah, drasner, reason, deeply, varied, decades, durable, maintainable, architectures, accelerant, incorporate, bob, dylan, codepen, tricks, coyier, someone, lot, totally, different, abstract, theoretically, paid, exact, nutshell, jennifer, robbins, sophisticated, range, given, balancing, possible, standards, list, event, jeffrey, zeldman, original, creative, thinkers, ahead, curve, modern, far, done, less, enjoy, rising, opinion, colleagues, noah, levin, wrote, knowledgeable, paired, person, james, barber, loving, optimizing, methods, returns, tremendous, amount, gamechanger, maurizio, vaggi, available, days, putting, producing, flores, kang, enjoying, coworkers, omar, dsooky, loved, introduced, made, overcomplicating, edgar, lechaudel, seem, impressive, taken, topic, byrne, guys, imagine, four, exactly, anthony, quinn, marvelous, feast, could, ask, came, customers, configuring, labelled, offers, consume, cover, whole, come, back, paul, papagiannis, finished, hooked, roles, perspectives, finally, getting, nutrient, packed, meal, snacking, baked, astrid, bin, enrolled, today, describe, declench, doesn, assume, never, heard, carry, relief, palpable, triumph, anibal, santos, should, mandatory, graduating, college, entering, workforce, seasoned, finding, mind, updating, ways, include, angie, badillo, watch, implementation, plenty, talking, basic, managers, import, target, applications, yarn, etc, empowering, myself, engineers, jeroen, van, den, hoek, expectations, exceeded, hoping, gain, websites, remarkably, implementable, transformed, experiences, tackle, theming, challenge, participants, tool, makers, clients, professionals, influences, designs, meteorologist, slingin, forecasting, snow, sports, spending, son, developing, alongside, 2015, react, angular, vue, partnered, leads, implement, sturdy, equal, parts, science, easier, younger, brother, technical, loves, live, beautiful, pittsburgh, daughter, ella, french, bulldog, bootsy, neck, equally, trainings, seminars, running, avenues, taught, career, evolve, combining, collaborative, culture, slew, hosting, podcast, inventing, curating, writer, incredibly, creativity, ppg, logo, norwegian, cruise, line, cigna, marriott, conde, nast, nasdaq, united, pfizer, caterpillar, dotdash, meredith, fair, nearly, planet, redesigns, cms, integration, internationalization, localization, subbrands, extending, sub, multiple, families, self, service, model, semantic, powering, phases, lifecycle, czars, branching, governing, maintaining, evolving, software, contexts, recipes, native, non, environments, component, types, adoption, consumers, adopting, preparing, libraries, ilk, publish, coordinating, releases, additional, environment, setup, choosing, tour, variables, bad, ugly, category, algorithm, principles, matters, conquer, biggest, pain, ass, breakpoints, index, foundations, role, separation, concerns, business, case, solve, critical, orgs, supporting, video, comprehensively, covering, stories, robust, innovation, answer, supports, lovingly, unlocks, each, its, provide, benefits, forcing, sound, familiar, everytthing, master, novices, includes, proven, reference, start, tons, kickstart, table, contents,

Text of the page (random words):
stency which is great but each product has its own unique design needs so how can we provide the benefits of shared systems without forcing everything to look the same the answer is design tokens for over a decade we ve helped dozens of organizations including many fortune 500 companies create design token systems to strike the balance between consistency efficiency and expression innovation it s tricky work we re so excited to teach you all of our hard earned lessons and share important concepts figma code architecture naming conventions and processes to help you successfully create maintain a robust design token system to serve your multi all the things organization course content over 13 hours of in depth video comprehensively covering core concepts best practices resources insights real world stories and actionable advice 1 design token core concepts why design tokens are critical for orgs supporting multi all the things products platforms brands modes more covered in this section the problems design tokens solve use cases the business case for design tokens separation of concerns the history of themeable user interfaces what are design tokens tokens in design and code the role of tokens in a design system ecosystem 2 token foundations architecture a 3 tiered design token architecture color systems typography systems border spacing and more covered in this section mvp token system the three tiered token architecture themes color systems typography systems spacing systems other border shadow animation breakpoints z index 3 naming conventions tools structure and pragmatic advice to help you conquer the biggest pain in the ass around creating a token system covered in this section why naming matters why naming is hard naming principles cross disciplinary collaboration naming parity between design and code the token naming algorithm token naming conventions by category 4 building a token system figma variables style dictionary and other tools the good bad and ugly of synchronization and automation covered in this section a tour of what we re creating choosing tools for figma and code environment setup creating an mvp token system build out a theme s color typography spacing border shadow animation creating an additional theme synchronization automation between design code 5 publishing a token system tokens as a product figma team libraries npm and it s ilk what to publish coordinating releases covered in this section design token systems as a product preparing for publishing publishing a token library in figma publishing a token library in code 6 adopting design tokens the user experience of design tokens how design system consumers use design tokens covered in this section understanding design token adoption understanding the many types of design token system users applying design tokens to the design system ecosystem using tokens in a design system component library working with token architecture conventions applying tokens to native mobile and other non web environments using design tokens in design system recipes using design tokens in smart components and other software contexts using tokens in product design development 7 maintaining evolving token systems pilot projects token czars branching versioning releasing and governing a token system covered in this section the phases of a design token system product lifecycle atomic design design tokens and powering real products creating pilot projects semantic versioning releasing updates new themes governance model for a token system use cases for a self service token system 8 advanced design tokens dark mode rebrands sub brands white labeling multiple product families and more covered in this section extending your token system to support advanced use cases dark mode subbrands white labeling internationalization localization cms integration redesigns rebrands ai and design token systems about your teachers hi we re your teachers for this course brad frost and ian frost with over 28 years of professional web design development experience there s a fair to good chance we ve built consulted on more enterprise level design systems than nearly anyone else on the planet over the past decade we ve co created consulted on themeable design systems for dozens of multi all the things organizations including dotdash meredith co created multi brand multi platform system caterpillar long co created multi brand multi platform multi generation system pfizer co created multi brand 300 brands multi platform system united co created multi generation multi platform system nasdaq co created multi platform multi generation multi brand system conde nast consulted on multi brand multi platform system marriott consulted on multi brand multi platform system cigna co created multi brand multi generation multi platform system norwegian cruise line co created multi brand multi platform system ppg logo co created multi brand system brad frost hi i m brad frost i m a design system consultant front end developer teacher speaker writer musician and artist i m so incredibly passionate about the web creativity and helping people collaborate to make great digital things together over the course of my career i ve helped teams establish and evolve design systems by combining solid architecture with more collaborative processes and culture i created atomic design and my book introduces a methodology to create and maintain effective design systems i ve been a part of a slew of design systems projects including co hosting the styleguides podcast inventing pattern lab curating styleguides io creating style guide guide and many others i love creating things and i m equally passionate about teaching through conferences workshops trainings seminars my long running blog my book and other avenues i ve taught design systems best practices to hundreds of thousands of designers and developers all over the world i live in beautiful pittsburgh pa with my wife my daughter ella and our french bulldog bootsy when i m not neck deep in design tokens you can find me playing music and creating things any chance i can get ian frost i m ian frost brad s younger brother i m a front end architect technical lead and consultant who loves to help level up developers i ve been developing design systems alongside brad since 2015 over the years i ve built design systems in many technologies web components react angular vue and others i ve partnered with tech leads developers and designers from dozens of organizations to help them successfully establish implement and maintain sturdy design system and token architecture this work is equal parts art and science and i m so excited to share our hard earned lessons to make your life easier before my life as a web designer i was a professional meteorologist when i m not slingin code or forecasting for snow you can find me playing music sports or spending time with my wife and son testimonials trusted by industry leaders tool makers fortune 500 clients and thousands of professionals brad and ian s work influences how the industry designs and builds digital products course participants my expectations for subatomic were high and yet they were exceeded i was hoping to gain knowledge that would help me apply themes to my websites but brad and ian s course helped me understand the fundamentals of design tokens on a remarkably deep level the way they break down token architecture into practical implementable systems transformed my approach to design i now have the confidence to build scalable multi brand experiences and can tackle any theming challenge that comes my way i feel i can do anything now jeroen van den hoek it s been amazing to watch you address the code implementation side of tokens there are plenty of resources out there talking about the basic concepts of design tokens which i get but having the words like code package managers package import to target applications npm yarn etc are the real important stuff to get the tokens working i love how you re empowering designers like myself to be on the same playing field with the engineers so we can collaborate angie badillo the course is fantastic and i would go on to say that this course should be a mandatory course for every designer graduating college and entering the workforce not only for them also for seasoned designers i m finding so much peace of mind updating my ways of working as i include design tokens in our company s design system anibal santos i enrolled today and the way i can describe this experience is declench this is what i need a guide that doesn t assume i ve never heard of design systems before and gives practical actionable advice that i can then carry out the relief is palpable this course is a triumph astrid bin from the very first finished chapter i was hooked the way you break down the history the roles and the perspectives of both designers and developers it s like finally getting a nutrient packed meal after years of snacking on half baked design systems content paul papagiannis the course has been a marvelous feast of insights from two of the best and most experienced teachers you could ask for it came at the perfect time for a project to support customers configuring a white labelled product the course offers quick and easy to consume videos that in the end are very thorough and cover the whole process end to end highly recommended this will be one i come back to again and again anthony quinn guys i can t imagine how many hours you have put into this course thank you so much for sharing your knowledge with all of us i m about half way through chapter four and it s so thorough exactly what i needed at just the right time david byrne the depth and effort you seem to have put into this course are impressive i m not sure anyone else has taken such a deep dive into this topic yet edgar lechaudel i really loved how simple and easy to follow the course was the way it introduced the three tiered token architecture tier 1 tier 2 and tier 3 made so much sense _ it was great to see how we can apply this structure in real world projects without overcomplicating things omar dsooky i am really enjoying subatomic me and a few coworkers are taking the course and it s been a huge help as we create a new design system david flores kang it is one of the best courses available online these days thanks for putting such a great effort into producing it maurizio vaggi i ve been loving the subatomic course optimizing methods workflows at the subatomic level returns a tremendous amount of value gamechanger james barber industry leaders brad is a long time trusted expert in design systems who literally wrote the book on atomic design he s one of the most knowledgeable people in this space and this paired with his depth and knowledge of figma makes him a perfect person to run a deep dive course on design tokens noah levin vp of product design figma brad frost is one of the most original creative thinkers i know and he has long been ahead of the curve on the collaboration between modern design and development take this course and you ll not only get far more done in less time you ll also enjoy your work more while rising in the opinion of your colleagues and stakeholders jeffrey zeldman designing with web standards a list apart a book apart an event apart i can t think of better people to teach design tokens than brad and ian their years of experience building sophisticated design systems for a wide range of organizations and products have given them a deep knowledge of all things design systems balancing what s possible with what s practical with this course you will learn everything you need to know and have fun doing it jennifer robbins author learning web design web design in a nutshell and more you want to learn about building design systems from someone who has built design systems like a lot of them for totally different organizations take this course and learn how to do it not in the abstract or theoretically but from people who get paid doing this exact work chris coyier the bob dylan of css co founder codepen css tricks shoptalk show brad and ian frost are renowned industry experts in design systems for a reason they have worked deeply with varied companies through the industry for decades building durable thoughtful and maintainable architectures taking a course with them is an accelerant to any developer being able to incorporate years of expert experience into your own practice sarah drasner sr director of engineering google core web android ios infrastructure author brad is a luminary at the intersection of design and frontend this course is a pragmatic and future thinking way to get design tokens into production dominic nguyen founder storybook chromatic i would follow brad into any design token battle his experience perspective and thoughtful way of communicating makes him an amazing resource and teacher any course led by him and ian is guaranteed to be worth the investment molly hellmuth creator uiprep design system bootcamp brad has been instrumental in advancing the concept of design tokens and design systems i am constantly referring to brad s talks and articles especially the article about a three tiered approach to design tokens brad and ian are amazing teachers and writers so i know this course will be amazing danny banks creator of style dictionary design systems architect at amazon over the past decade working in design systems i ve relied on brad s ideas advice and resources countless times to help frame discussions and move forwards quite literally i did it this week brad and ian are not only people with big ideas about design systems but also people who repeatedly demonstrate their ability to execute and deliver complete systems to empower teams all over the world dave rupert web components at microsoft shoptalk show co founder paravel luro brad is one of the top design systems experts i recommend to my students in a space full of noise and quick money promises his work stands out for being thoughtful practical and grounded in real experience i ve learned so much from his articles workshops and courses brad makes complex ideas clear and approachable and his fun down to earth style makes learning from him an absolute joy he really knows his stuff and shares it in a way that just clicks christine vallaure founder moonlearning ux ui figma expert brad frost and ian frost are absolute powerhouses in their field atomic design has shaped the way the tech industry approaches design and i had the opportunity to work with them on a major project for a fortune 10 company if you re looking to deepen your understanding of design systems you won t find better guides than brad and ian their new course is bound to be a goldmine for anyone wanting to create scalable and impactful work matt d smith founder shift nudge designer extraordinaire brad and ian bring years of hands on experience making them the perfect guides...