A design system of its own

The problem it solves

The Starter has four front ends — the application, the landing page, the documentation site, the playground — plus the identity host's sign-in pages. A product's look has to hold across all of them, and change in one place.

@blouppy/ui (front/libs/ui/) is that place: the design tokens (colours, type, spacing, radii, shadows, in light and dark), the theme primitives and the components, built on Angular and the Angular CDK. Every app consumes it as source from the working tree, and the identity host's stylesheet imports the same tokens. DESIGN.md is its specification.

Owning the components means owning their behaviour: their accessibility, their translations (English and French ship with the library), their API documentation.

What it costs

• Components to maintain. A primitive the library lacks is added to it, not pulled from a package.
• A playground to keep current. Every primitive has an entry in front/playground/, and its build fails on an input or output without documentation.
• Visual review. The galleries (npm run gallery) are the only thing that looks at layout, so a change to a token or a component is followed by a gallery run.

What you can relax

• Rebrand through the tokens. Colours, fonts and radii are CSS custom properties in front/libs/ui/src/tokens/tokens.css; changing them re-themes every app at once.
• Add a library for one specialised need — a data grid, a calendar — inside a @blouppy/ui component that wraps it, so the apps keep importing from one place.