FinStack design kit

@finstack-com-public/design gives FinStack's products one look: design tokens, the Lucide icon set, a component library and a chart theme. It is used by Grizzbi, BI App and the calculation engine.

It is framework-neutral:

• The look is CSS custom properties plus class-based CSS.
• Behaviour comes from small plain-DOM functions.
• Thin React wrappers render the same markup and call the same functions.

There are no runtime dependencies (React is an optional peer), and every file loads as it is, with no build step.

Install

The kit is published, public, on npmjs.com. It needs no token and no .npmrc entry:

npm install @finstack-com-public/design

Use

import '@finstack-com-public/design/kit.css'; // layers, tokens, every block and the utilities
import '@finstack-com-public/design/fonts.css'; // Inter and Plus Jakarta Sans, self-hosted

A page printed to PDF loads fonts-print.css instead of fonts.css: static Inter and Plus Jakarta Sans, which Chromium embeds as TrueType. The print recipe, page footer included, is css/print.md.

<body class="fs-theme fs-light fs-compact">
  <button class="fs-button fs-button--primary">Apply</button>
</body>

• Schemes: .fs-light, .fs-dark or .fs-auto. Densities: .fs-dense, .fs-compact or .fs-comfortable. Each goes on the root or on any .fs-theme island.
• Per-block CSS: import css/layers.css first, then css/tokens.css and the blocks you use (css/button.css, …).
• Behaviour: @finstack-com-public/design/dom (createMenu, createTabs, createDialog, …).
• React: @finstack-com-public/design/react.
• Icons: @finstack-com-public/design/icons.
• Chart theme: @finstack-com-public/design/charts (with toEChartsTheme).
• Tokens as data: @finstack-com-public/design/tokens, tokens.json and grid.json.

Each block's markup, variants and states are in its usage note beside the CSS (dist/css/<block>.md). The full contract is the design spec:

• the export paths;
• the components;
• the tokens.

Versioning: token names, class names, file paths and exports are the public API. While the kit is 0.x, a minor version may break them, and CHANGELOG.md says so.

Develop

Prerequisites, commands and the gallery (every block in every state, light and dark, three densities) are in docs/dev-environment-setup.md. Agents start from AGENTS.md.

Licence

MIT, see LICENSE. The licence doesn't cover product names, logos or mascots: see TRADEMARKS.md. Inter and the Lucide icon data keep their own licences: see THIRD_PARTY_NOTICES.md.