Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.

Administered by:

Server stats:

8.1K
active users

mastodon.world: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.3

#DesignTokens

0 posts0 participants0 posts today
Laura Kalbag<p>Version 2 of my design tokens starter kit is now downloadable from the Penpot Hub.</p><p><span class="h-card" translate="no"><a href="https://fosstodon.org/@penpot" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>penpot</span></a></span> introduced support for font size tokens in last week’s 2.9 release, so I’ve added some starter tokens and demos for those. </p><p>I’ve also made a load of improvements for modular and linear scales, and you can now use the golden ratio, minor second, major third, and so on.</p><p>All feedback and suggestions very welcome!</p><p><a href="https://penpot.app/penpothub/libraries-templates/desig-tokens-starter-kit" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">penpot.app/penpothub/libraries</span><span class="invisible">-templates/desig-tokens-starter-kit</span></a></p><p><a href="https://mastodon.laurakalbag.com/tags/designTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designTokens</span></a> <a href="https://mastodon.laurakalbag.com/tags/Penpot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Penpot</span></a> <a href="https://mastodon.laurakalbag.com/tags/openSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>openSource</span></a></p>
Frontend Dogma<p>Design Tokens for Links, by (not on Mastodon or Bluesky):</p><p><a href="https://designtokens.substack.com/p/design-tokes-for-links" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">designtokens.substack.com/p/de</span><span class="invisible">sign-tokes-for-links</span></a></p><p><a href="https://mas.to/tags/designtokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designtokens</span></a> <a href="https://mas.to/tags/links" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>links</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Tools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tools</span></a><br>CSS Design Tokens Analyzer · Uncover design tokens from your stylesheet <a href="https://ilo.im/1652ji" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/1652ji</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a> <a href="https://mastodon.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystems</span></a> <a href="https://mastodon.social/tags/Webpage" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Webpage</span></a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Egor Kloos<p>Created some tests for web components that retrieve a required design token value and check if the rendered elements have the equivalent computed value. For example, if the element is showing the correct values for a focus ring. </p><p><a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a> <a href="https://mastodon.social/tags/testing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>testing</span></a> <a href="https://mastodon.social/tags/playwrite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>playwrite</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/designtokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designtokens</span></a> <a href="https://mastodon.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designsystems</span></a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a></p>
Mike-麥-Mai-v1.618 😎<p>design like it's 1997. code like it's 2025. :catjam: </p><p><a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ui</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> <a href="https://mastodon.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a></p>
Frontend Dogma<p>Figma Variables and Design Tokens—Variable Architecture, by <span class="h-card" translate="no"><a href="https://tech.lgbt/@lurkmoophy" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>lurkmoophy</span></a></span> (<span class="h-card" translate="no"><a href="https://mastodon.social/@zeroheight" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>zeroheight</span></a></span>):</p><p><a href="https://zeroheight.com/blog/figma-variables-and-design-tokens-part-one-variable-architecture/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">zeroheight.com/blog/figma-vari</span><span class="invisible">ables-and-design-tokens-part-one-variable-architecture/</span></a></p><p><a href="https://mas.to/tags/figma" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>figma</span></a> <a href="https://mas.to/tags/variables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>variables</span></a> <a href="https://mas.to/tags/designtokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designtokens</span></a></p>
Benny Powers 🇮🇱🦁<p><a href="https://github.com/bennypowers/cem/releases/tag/v0.1.0" rel="nofollow noopener" target="_blank">github.com/bennypowers/cem/releases/tag/v0.1.0</a><span><br><br></span><a href="https://bennypowers.github.io/cem" rel="nofollow noopener" target="_blank">bennypowers.github.io/cem</a><span><br><br>New CLI tool to generate </span><a href="https://social.bennypowers.com/tags/CustomElements" rel="nofollow noopener" target="_blank">#CustomElements</a><span> manifests. It's 10x faster than the competition and can automatically document your parts and slots for you, as well as look up </span><a href="https://social.bennypowers.com/tags/designTokens" rel="nofollow noopener" target="_blank">#designTokens</a><span> in your </span><a href="https://social.bennypowers.com/tags/css" rel="nofollow noopener" target="_blank">#css</a><span> files.<br><br>Give it a try, </span>⭐<span> the repo, file an issue, let me know what you think.</span></p>
Penpot<p><strong>Practical UI Design with tokens | Penpot Hands-On Demo</strong></p> <p><a href="https://peertube.kaleidos.net/videos/watch/9a714b33-2bd4-4a95-8930-2646ab6343c0" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">peertube.kaleidos.net/videos/w</span><span class="invisible">atch/9a714b33-2bd4-4a95-8930-2646ab6343c0</span></a></p>
Stu Robson<p>🌟 This Week in Design Systems News!</p><p>Explore articles on design tokens, localisation, planning, and content. Check out resources from Penpot and Circle UI </p><p>Stay up–to–date: <a href="https://news.design.systems" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">news.design.systems</span><span class="invisible"></span></a><br> <br><a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystems</span></a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEnd</span></a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://front-end.social/tags/DesignOps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignOps</span></a> <a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a></p>
Stu Robson<p>I've almost got an issue of the Design Systems Newsletter without a single link to medium. Almost. </p><p>If you want a weekly slice of the best curated Design Systems resources - be sure to sign up - <a href="https://news.design.systems" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">news.design.systems</span><span class="invisible"></span></a></p><p><a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystems</span></a> <a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEnd</span></a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a></p><p>🙏🖤</p>
James Nash<p>Had to tackle a couple of niche, tricky things for our <a href="https://mstdn.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> at work recently. Would like to blog about them and the solutions we found.</p><p>Help me prioritise. Which one(s) would you be most interested in?</p><p><a href="https://mstdn.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a> <a href="https://mstdn.social/tags/ReactNative" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ReactNative</span></a> <a href="https://mstdn.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a></p>
Stu Robson<p>🌟 Need help with your design system?<br>🌟 Struggling with design tokens?<br>🌟 Looking for a front-end developer?</p><p>✅ Let’s tackle it together!</p><p>🌐 www.alwaystwisted.com</p><p>🙏🖤</p><p><a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEnd</span></a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystems</span></a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/Launches" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Launches</span></a><br>Design Tokens Name Generator · Design token naming conventions for your design system <a href="https://ilo.im/163l9d" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/163l9d</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Generator" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Generator</span></a> <a href="https://mastodon.social/tags/Naming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Naming</span></a> <a href="https://mastodon.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a> <a href="https://mastodon.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystems</span></a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a></p>
Stu Robson<p>Need a quick start to creating some design tokens with a ready-made naming convention? </p><p>Romina has made this pretty neat tool:</p><p><a href="https://namedesigntokens.guide" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">namedesigntokens.guide</span><span class="invisible"></span></a></p><p>🙏🖤</p><p><a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystems</span></a> <a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEnd</span></a></p>
Benny Powers 🇮🇱🦁<p><span>Check out Design Tokens Language Server, a tool to supercharge your DX with design tokens. Learn how it brings autocomplete, validation, and more to your favorite editor. Check it out! </span>👉<span> </span><a href="https://bennypowers.dev/posts/introducing-design-tokens-language-server/" rel="nofollow noopener" target="_blank">bennypowers.dev/posts/introducing-design-tokens-language-server/</a><span> </span><a href="https://social.bennypowers.com/tags/DesignTokens" rel="nofollow noopener" target="_blank">#DesignTokens</a><span> </span><a href="https://social.bennypowers.com/tags/WebDev" rel="nofollow noopener" target="_blank">#WebDev</a><span> </span><a href="https://social.bennypowers.com/tags/css" rel="nofollow noopener" target="_blank">#css</a><span> </span><a href="https://social.bennypowers.com/tags/neovim" rel="nofollow noopener" target="_blank">#neovim</a><span> </span><a href="https://social.bennypowers.com/tags/vscode" rel="nofollow noopener" target="_blank">#vscode</a><span> </span><a href="https://social.bennypowers.com/tags/zededitor" rel="nofollow noopener" target="_blank">#zededitor</a></p>
Factorial GmbH<p>Where do design tokens actually come from and why they matter in modern <a href="https://social.factorial.io/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdevelopment</span></a> 🚀 </p><p>During our last <a href="https://social.factorial.io/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> and Friends meetup, Nils Wiere, Freelance Design System Consultant) walked the audience through the evolution of <a href="https://social.factorial.io/tags/designtokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designtokens</span></a> - Watch the recording on our YouTube channel to see the full session: <a href="https://youtu.be/uMb4M7VCRCE?si=5tqcd94i0Dx2Aq7K" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">youtu.be/uMb4M7VCRCE?si=5tqcd9</span><span class="invisible">4i0Dx2Aq7K</span></a></p><p><a href="https://social.factorial.io/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://social.factorial.io/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://social.factorial.io/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a></p>
Laura Kalbag<p>London pals! Come hang out with me and cool Penpot folks in SE1 on the 13th of May.</p><p>We’ll be discussing all things design tokens and collaboration in a fab venue with lovely food and drinks.</p><p>And it’s free! Limited spots available: </p><p><a href="https://app.hi.events/event/370/penpot-after-hours-london" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">app.hi.events/event/370/penpot</span><span class="invisible">-after-hours-london</span></a> </p><p>(Non-Londoners also very welcome 😁)</p><p><a href="https://mastodon.laurakalbag.com/tags/penpot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>penpot</span></a> <a href="https://mastodon.laurakalbag.com/tags/london" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>london</span></a> <a href="https://mastodon.laurakalbag.com/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mastodon.laurakalbag.com/tags/designTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designTokens</span></a></p>
Frontend Dogma<p>Implementing Multi-Brand Theming With Style Dictionary, by <span class="h-card" translate="no"><a href="https://front-end.social/@sturobson" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>sturobson</span></a></span>:</p><p><a href="https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-9" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">alwaystwisted.com/articles/a-d</span><span class="invisible">esign-tokens-workflow-part-9</span></a></p><p><a href="https://mas.to/tags/theming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>theming</span></a> <a href="https://mas.to/tags/branding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>branding</span></a> <a href="https://mas.to/tags/designtokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designtokens</span></a> <a href="https://mas.to/tags/tooling" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tooling</span></a></p>
Stu Robson<p>✨ New Article Alert ✨ </p><p>After writing about @penpot.app's new Design Tokens panel I've added a new article for the Design Tokens Workflow Series:</p><p>Creating a Penpot Design Tokens Format with Style Dictionary</p><p><a href="https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-12" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">alwaystwisted.com/articles/a-d</span><span class="invisible">esign-tokens-workflow-part-12</span></a></p><p><a href="https://front-end.social/tags/DesignTokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignTokens</span></a> <a href="https://front-end.social/tags/Penpot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Penpot</span></a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://front-end.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://front-end.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEnd</span></a></p>
Penpot<p><strong>Design Tokens Themes | Penpot 2.6</strong></p> <p><a href="https://peertube.kaleidos.net/videos/watch/516f0695-d288-45e5-bd34-fb752bf21f8f" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">peertube.kaleidos.net/videos/w</span><span class="invisible">atch/516f0695-d288-45e5-bd34-fb752bf21f8f</span></a></p>
TrendingLive feeds
About