accelint-design-foundation

Apply semantic design tokens to React components by using prescribed bg-*, fg-*, and outline-* classes for automatic theming. This enforces correct token selection and consistent styling without manual CSS overrides.

The semantic spacing scale in Tailwind CSS modules replaces numeric spacing values with a meaningful, seven-step scale. This provides consistent layout dimensions across UI components instead of arbitrary pixel or rem values.

Use data-attribute driven styling with the @variant system to apply conditional styles without arbitrary Tailwind variants. This enables component state styling directly through HTML data attributes for cleaner CSS modules.

Yes, this styling approach requires Tailwind CSS configured with the @accelint/postcss-tailwind-css-modules plugin. It also requires CSS modules adhering to the prescribed layer hierarchy and import of @accelint/design-foundation or @accelint/design-toolkit.

CSS module best practices enforce a single @apply per rule, strict layer hierarchy, and required @reference directives. This structure prevents styling conflicts and maintains predictable cascade behavior across React components.

Manual token selection causes inconsistencies in Tailwind UI design by allowing arbitrary spacing, color, and variant choices. Using an opinionated design foundation solves this by standardizing semantic tokens and spacing scales.