11ty Design System

Folders

• All design tokens can be found in src/_data/designTokens. This includes all baseline fonts, colors, sizes, and spacing in a format generated via https://utopia.fyi/
• All components and their documentation should be in folders under src/_includes/components. As long as there's an accompanying *.config.js file it'll get picked up and auto generated in the design system.
• All design system layouts can be found in src/_includes/layouts and are prefixed with ds-.
• To document atomic elements of your design system that aren't components, you can add pages under src/design-system/ just as you would any standard Eleventy page. There are several already started for you under Atoms that itemize block, form, inline, and preformatted HTML tags.

Notes

• There are examples of just documentation in the Card and Quote folders
• There are examples of WebC components and their documentation under _Compositions/sidebar and _Compositions/stack
• For components that you do not want to document, leave out the *.config.js file. Utils/ds-menu.webc is one existing example of this.
• The design tokens are automatically documented by the src/design-system/Atoms/tokens.njk page. This will source the tokens directly from the data files so it updates as the tokens themselves are updated.