open-index/open-npm huggingface dataset:
npm package: @piksel-design-system/core
Description: Piksel Design System - React components, tokens, and utilities
Latest version: 0.1.0

# Piksel Design System

A production-grade design system for portfolio use: React + TypeScript, token-driven styling, and Storybook documentation. Built to demonstrate how design and engineering collaborate through **tokens**, **components**, and **documentation**.

## Status

**Steps 1–7 done.** Stack, tokens, layout, core UI, shell, and LineChart — all with Storybook stories. `npm run storybook` starts the Storybook dev server.

- **[Design System Proposal](./docs/DESIGN_SYSTEM_PROPOSAL.md)** — Philosophy, audience, minimal component set, CSS approach, and intentional tradeoffs.
- **[Stack](./docs/STACK.md)** — Locked stack (Tailwind v4, no JS config; Storybook 10).
- **[Token naming & structure](./docs/TOKEN_NAMING_AND_STRUCTURE.md)** — Conventions, example TS/JSON, scaling rationale, and common mistakes.
- **[Deploy to Vercel](./docs/DEPLOYMENT.md)** — Deploy Storybook to Vercel.

## Goals

- Demonstrate strong design taste and frontend engineering judgment
- Prioritize accessibility, composability, and real-world ergonomics
- Show design × engineering collaboration via tokens, components, and Storybook

## Constraints

- **React + TypeScript**
- **Modern CSS:** Tailwind with design-token–driven config (see proposal)
- **Storybook** for documentation
- **Scope:** Small and intentional, not exhaustive

## Intended audience

- **Primary:** Engineers implementing product UI
- **Secondary:** Designers aligning on tokens and component capabilities via Storybook

---

*Next step: implement per the proposal’s “Suggested Next Steps” once the direction is approved.*