Logotype

Design system built on pbstyles and pbcomponents

Style and React component libraries this site is built on. Each comes with a Figma file that has the same colors, fonts and components as the code.

Try it yourself

Install both packages, import the pbstyles theme in globals.css — and the components are ready to use. The Figma files with the same tokens are public.

npm i @prosazhin/pbcomponents @prosazhin/pbstyles
pbcomponents docspbstyles docs

The path of one color

The primary-300 token keeps its name at every stage — from a Figma style to a component. When the theme changes, it changes everywhere.

  1. 01Figma style
    primary/300
  2. 02JSON token
    color.primary.300
  3. 03CSS variable
    --color-primary-300
  4. 04Tailwind class
    bg-primary-300
  5. 05Component

Why a small team needs a design system

The smaller the team, the more each component rebuilt from scratch costs.

  • A button is designed, built and tested once

    In a small team, every new project starts with buttons, inputs and modals that have to be built again and checked across browsers. A design system solves this once — after that, you assemble screens.

  • What if AI builds everything?

    An AI model will build a button in a minute, but it still has to be checked: states, focus, dark theme, rendering across browsers — and so on for every component. Generation also costs money. Here all of that is already done, tested and free, so the AI can go straight to pages and the product.

  • Less testing

    Focus, keyboard navigation, disabled and loading states are tested in the library. In the project, only the screen logic remains to be checked.

  • A consistent interface

    Spacing, colors and radii come from tokens, so the interface does not drift apart in the details over time.

  • The mockup matches the code

    A Figma color and a code class follow one naming scheme: primary/300 and bg-primary-300. There is no need to compare values by hand.

  • Dark theme is ready

    Both themes are defined in tokens and switch with a data-theme attribute. No separate work on dark versions of components is needed.

  • Quick start

    Two packages and one line of CSS — and the project already has typography, a palette and components.

  • Easier onboarding

    A new team member only needs the docs: they describe every component, its props and how it looks.

Four libraries

I develop all four myself — from Figma mockups to npm releases. The main ones are pbstyles and pbcomponents; the other two generate styles from tokens and work for other design systems too.

  • Foundation

    pbstyles

    Tokens and ready-made styles: palette, typography, radii, shadows, breakpoints and animations. Light and dark themes are already set up.

    • Tailwind CSS 4 theme
    • CSS variables, LESS and SCSS
    • Tokens in the DTCG format
    • Style file in Figma Community
  • Components

    pbcomponents

    React components built on pbstyles: buttons, inputs, selects, tabs, dialogs, notifications, popovers and their hooks.

    • React 19 and TypeScript
    • Components, providers and hooks
    • Tests with Vitest and Testing Library
    • The same components in Figma Community
  • Tool

    tailwind-dictionary

    Builds a Tailwind CSS 3 or 4 theme from JSON tokens, so you don't write it by hand: utilities, light and dark themes.

    • Reads Figma variables export, DTCG and Style Dictionary
    • Any number of themes
    • CLI, programmatic API and an in-browser playground
  • Tool

    mixin-dictionary

    The same for projects without Tailwind: builds CSS variables plus LESS and SCSS variables and mixins from tokens.

    • Reads Figma variables export, DTCG and Style Dictionary
    • Mixins for typography, breakpoints and animations
    • CLI, programmatic API and an in-browser playground

How it works

Colors, sizes and fonts are stored in one place, as JSON tokens. Everything else is generated from them.

  1. 01

    Figma

    Two files are published in Figma Community: pbstyles styles and pbcomponents components with every state. New screens are designed from them.

  2. 02

    Tokens

    The same values are stored in JSON. Light and dark themes are two files that reference a shared palette.

    tokens/themes/dark.json
    {
  "color": {
    "$type": "color",
    "primary": {
      "50":  { "$value": "{color.blue.950}" },
      "300": { "$value": "{color.blue.400}" },
      "400": { "$value": "{color.blue.300}" }
    }
  }
}
  3. 03

    Generation

    tailwind-dictionary builds a Tailwind 4 theme from the tokens, mixin-dictionary builds CSS variables, LESS and SCSS. Styles are not written by hand, so the code stays in sync with the mockup.

    config-tailwind-dictionary.json
    {
  "version": 4,
  "source": ["tokens/*.json"],
  "themes": {
    "light": ["tokens/themes/light.json"],
    "dark": ["tokens/themes/dark.json"]
  },
  "output": "./styles"
}
  4. 04

    pbstyles on npm

    The generated styles are published as a package. Once installed, the project gets classes such as bg-primary-300, text-h48 and rounded-16.

    globals.css
    @import 'tailwindcss';
@import '@prosazhin/pbstyles/styles/tailwind/theme.css';
  5. 05

    pbcomponents

    Components are built on the same classes: they look the same as in Figma and switch theme together with the page.

    page.tsx
    import { Button } from '@prosazhin/pbcomponents';

<Button size='m' color='primary' theme='filled'>
  Save
</Button>
  6. 06

    The project

    What remains is building the interface. This site and the library docs are made this way — the theme can be switched in the header.

Who it is for

A good fit if

  • the product is built by one person or a small team
  • you need a prototype, MVP or side project fast
  • the team has no dedicated designer or layout developer
  • you need light and dark themes

Not a fit if

  • the company has a large team and its own brand — a custom system is better then
  • you need the flexibility of headless libraries such as Radix or shadcn/ui
  • the project is not React — although pbstyles works without it

Found this interesting?

If you need help with a design system, interface design or frontend, or have questions about the libraries — get in touch.