BeyDesign Storybook

A React component library implementing the Beyond Presence Design System. This package provides a collection of reusable components that follow the design specifications from our Figma Design System.

Installation

# First install the required design tokens package
npm install @beydesign/tokens

# Then install the component library
npm install @beydesign/storybook

Prerequisites

This package depends on @beydesign/tokens which provides the design tokens (colors, typography, spacing, etc.) used across the components. Make sure to install and configure it first.

After installing the tokens package, you will need to install the figtree font. Link to the font is provided in the Links section.

Usage

1. Import the components you need:

import {
  MainButton,
  ButtonHierarchy,
  ButtonShape,
  ButtonSize,
} from '@beydesign/storybook';

function App() {
  return (
    <MainButton
      size={ButtonSize.lg}
      shape={ButtonShape.Square}
      onClick={rejoin}
      disabled={buttonsDisabled}
      hierarchy={ButtonHierarchy.Primary}
      showLeadingIcon={false}
      showTrailingIcon={false}
      text="Rejoin"
    />
  );
}

Color pairing

Color tokens come in three families, and they are not interchangeable. Pick the text token by the surface it sits on:

| Surface | Example | Text token | | ------------ | ------------------------------------------------ | ------------------------------------------------------------ | | Solid fill | bg-success, bg-error | text-success-on-color, text-red-on-color | | Subtle tint | bg-badge-accent-success, bg-badge-accent-red | text-success, text-error | | Page or card | bg-page, bg-page-contrast | text-success, text-error, text-title, text-paragraph |

The trap: a solid fill and its accent text resolve to the same primitive. bg-success and text-success are both Primary.Success.500, so pairing them renders invisible text. That is what the -on-color family is for — it is the darker step (Primary.Success.800) meant to sit on the solid fill.

There is an -on-color token per accent: text-success-on-color, text-red-on-color, text-yellow-on-color, text-violet-on-color, text-lemon-on-color, text-blue-on-color, text-cyan-on-color and text-pink-on-color.

Two related notes:

• Some tokens are relative to the page rather than absolute. bg-error-subtle is a near-white Red.25 in light but a solid Red.700 in dark — subtle against its own page, not subtle in isolation. Check both themes.
• bg-component is pure white in light, so it disappears on a card (bg-page-contrast). Use bg-element for insets on a card.

Development

To run the Storybook development environment locally:

npm install
npm run storybook

Links

• Design System (Figma)
• NPM Package
• Hosted Storybook
• Design Tokens Package
• Figtree Font

Support

For issues and feature requests, please use our GitHub issues page.