Paryatech Design System

The approved ParyatechOS design specification rebuilt as reusable React + TypeScript components in Storybook 10.6.

Run Storybook

npm install
npm run storybook

Open http://localhost:6006.

Build and verify

npm run lint
npm run build
npm run build-storybook

Story-based browser tests are configured through the official Storybook Vitest integration:

npx playwright install chromium
npm run test-storybook

The Chromium installation is a one-time machine setup.

Structure

.storybook/               Storybook configuration and Paryatech theme
src/components/           Reusable React components and TypeScript props
src/styles/tokens.css     Primitive → semantic → mapped token chain
src/styles/components.css Component implementation styles
src/stories/              Foundations, components, patterns, and product rules

Import components from the barrel:

import { Button, DataTable, StatusBadge } from './components';

System rules

• Components consume mapped Tier 3 tokens.
• Filled teal is reserved for the required next action.
• Rose expresses identity or the current location, never an action.
• Data rows have a 56px minimum height.
• Table header tint and row-rule colour remain consistent across modules.
• Money, IDs, dates, and counts use JetBrains Mono with tabular numerals.