- Tokens live in
tokens/— one file per concern (colors, glass, spacing). - All tokens use Tailwind v4
@themeblocks for automatic utility generation. - Every token must work in both light and dark mode. Glass tokens have explicit
-dark-*counterparts. - Token names must be neutral — no project-specific semantics. Projects define aliases in their local styles.
- After changes, verify both consuming projects build successfully.
- Primitives live in
primitives/— one file per component family. - All primitives use
@layer componentsand reference only shared tokens. - Every class must include full dark mode support (
.darkparent selector). - A class belongs here only if it is used in both consuming projects.
- Project-specific variants stay in each project's local CSS.
# In horde-model-reference-frontend
cd src/shared/design-system && git checkout <your-branch>
cd ../.. && npm start # verify dev server + visual check
npm test # verify tests
# In AiHordeFrontpage
cd src/shared/design-system && git checkout <your-branch>
cd ../.. && npm start
npm testWhen adding a new file, add its @import to the corresponding index.css barrel.