@filigran/design-system
The Filigran Design System: accessible, token-driven React components shared by OpenCTI, OpenAEV, XTM CRQ, XTM One and XTM Hub.
This README is the package's registry page. Contributor documentation lives in the repository root.
Install
npm install @filigran/design-system
react and react-dom (v19) are peer dependencies and are not bundled.
Usage
import { Button } from "@filigran/design-system";
import "@filigran/design-system/dist/index.css";
export const Example = () => <Button>Save</Button>;
Styles
Import exactly one of the two CSS distributions:
| Entry | Use it when |
|---|---|
@filigran/design-system/dist/index.css | The host has no Tailwind v4 pipeline. Pre-compiled, ships no preflight, so it will not reset the host's own styles. |
@filigran/design-system/tokens/theme.css | The host compiles Tailwind v4 itself. Exposes the design tokens as an @theme source so host utilities and component styles share one token set. |
@filigran/design-system/styles/gradient-helpers.css is an optional add-on for
the gradient utilities.
Fonts are not shipped
The typography tokens reference Geologica and IBM Plex Sans. The host application must load both. Without them browsers fall back to system fonts silently: no error, but the typography diverges from the design language.
Documentation contract
@filigran/design-system/meta exposes machine-readable ComponentMeta objects
(props, examples, accessibility notes) for tooling and AI agents. It is a
separate entry point on purpose: documentation prose is never pulled into the
runtime bundle a product ships.
License
Apache-2.0.