@filigran/design-system

The Filigran Design System: accessible, token-driven React components shared by OpenCTI, OpenAEV, OpenGRC, 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.