{"enrichment":{"faq":[{"a":"design-tokens creates a complete token foundation by generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format\u2014whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy, ensuring consistency from the start.","q":"How does design-tokens generate design tokens for my project?"},{"a":"Yes. design-tokens generates CSS custom properties organized as a complete design system, including semantic color tokens, spacing scales, and typography systems. The skill structures these variables for both light and dark modes, making it easy to implement theme switching and maintain visual consistency across your entire project.","q":"Can design-tokens create a design system with CSS variables?"},{"a":"design-tokens outputs tokens in multiple formats to fit your workflow: Tailwind config files, CSS custom properties, JSON token files, and theme files. This flexibility lets you integrate the generated tokens directly into your existing build process and component architecture without reformatting.","q":"What formats does design-tokens support for output?"},{"a":"design-tokens automatically generates intentional light and dark mode palettes as part of its token creation process. The skill derives these palettes from your chosen design philosophy, creating semantic color tokens that work across both modes. You can then reference these tokens in your CSS or Tailwind config for instant theme switching.","q":"How do I set up design tokens for light and dark mode?"},{"a":"Absolutely. design-tokens sets up spacing, typography, and color scales based on your design philosophy. It generates a complete visual system including semantic color tokens, proportional spacing scales, and font hierarchies\u2014all structured so you can standardize component-level token references across your project.","q":"Can design-tokens help establish a spacing scale and color palette?"},{"a":"Yes. design-tokens can extend or establish tokens directly in your Tailwind config, generating color palettes, spacing scales, and typography tokens that integrate seamlessly. The skill creates a token system before you build components, ensuring your design foundation is intentional and consistent from day one.","q":"Is design-tokens suitable for projects using Tailwind?"}],"shadow_tags":["design-system-foundation","token-generation","css-variables","theme-configuration","visual-consistency","semantic-tokens","multi-mode-theming","design-philosophy","component-abstraction","style-standardization"],"summary_rewrite":"This skill creates a complete token foundation for new projects, generating semantic color tokens, spacing scales, typography systems, and motion parameters in your project's native format\u2014whether Tailwind, CSS custom properties, or theme files. It always includes intentional light and dark mode palettes derived from your chosen design philosophy."},"files":[{"bytes":7067,"path":"design-tokens/SKILL.md","sha256":"951eb7680b1c096ebdff7cb9f1a3906ea08890afd01865512a2526b95b15da94","url":"https://skillfed.io/files/julianoczkowski/designer-skills/design-tokens/8b619ebb/SKILL.md"}],"id":"julianoczkowski/designer-skills/design-tokens","links":{"html":"https://skillfed.io/julianoczkowski/designer-skills/design-tokens","md":"https://skillfed.io/julianoczkowski/designer-skills/design-tokens.md","repo":"https://github.com/julianoczkowski/designer-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":35,"language":null,"last_updated":"2026-07-06","license":"Apache-2.0","name":"design-tokens","publisher":"julianoczkowski","stars":461},"relations":{"similar":[{"id":"julianoczkowski/designer-skills/frontend-design"},{"id":"julianoczkowski/designer-skills/design-brief"},{"id":"julianoczkowski/designer-skills/brief-to-tasks"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems"},{"id":"julianoczkowski/designer-skills/design-flow"},{"id":"educlopez/ui-craft/tokens"},{"id":"EnderPuentes/ai-agent-skills/tailwind-css"},{"id":"giuseppe-trisciuoglio/developer-kit/tailwind-design-system"},{"id":"Community-Access/accessibility-agents/design-system-auditor"},{"id":"julianoczkowski/designer-skills/design-review"}]},"slug":{"owner":"julianoczkowski","repo":"designer-skills","skill":"design-tokens"},"version":"8b619ebb"}