Skip to content
Bkper
app.header.homeapp.header.docsapp.header.apps
Sign In

Design Tokens

CSS design tokens from @bkper/web-design — typography, spacing, colors, and theming for Bkper web applications.

npm GitHub

@bkper/web-design

Bkper’s design system - CSS variables, tokens, and themes.

Installation

npm install @bkper/web-design

Usage

Import in your build system:

@import '@bkper/web-design';

Or link directly in HTML:

<link rel="stylesheet" href="node_modules/@bkper/web-design/src/bkper.css">

Alternatively, skip installation and link directly to a hosted version (CDN):

<link rel="stylesheet" href="https://bkper.app/design/v2/style.css">

Note: The CDN serves the most recent npm release.

What’s Included

  • CSS custom properties (variables)
  • Account type colors: blue (Assets), yellow (Liabilities), green (Incoming), red (Outgoing)
  • Light/dark theme support
  • Typography scale
  • Spacing scale
  • Border and color tokens

Web Awesome Integration

This package works standalone with sensible default values. If Web Awesome is loaded, Bkper tokens will automatically inherit from Web Awesome’s design system for seamless integration.