🚀 Welcome to ion design! 🚀

The following is a detailed resource library for effective usage of ion, both the design system and code generation.

We’re so excited to help you out and speed up your engineering workflow. If you have absolutely any issues, reach out to me at [email protected] or just schedule some time on my calendar.

We’re also happy to open a slack connect channel for better direct support, just message me and we’ll get something figured out for you.

Please keep in mind that at our base tier, we’re limited to generating on top of our own design system and into an opinionated stack (nextjs, tailwindcss). You can ensure good generations by using the dsLint plugin and by following the usage guide. If you would like to generate code from your own design system, please schedule some time with me to discuss moving to a higher tier.

Onboarding

Use the following guides to self-onboard onto our product and learn how to effectively design and generate code.

Start with onboarding to the design system, then understand how to use the linter to ensure your designs are “generation ready”.

Finally, go through the codegen onboarding guide and generate the examples before moving on to your own designs.

ion design - Design System onboarding guide

ion design - dsLint onboarding

ion design - codegen onboarding guide

Best Practices

The following guides go over the general best-practices of using ion effectively as a designer or engineer.