Overview // Getting Started

VectorSticker Design System

One source of truth for color, type, spacing and components — shared by vectorsticker.com and reports.vectorsticker.com. Change a token or a component here once; both products pick it up.

Three layers

Layer	What it is	Lives in
Tokens	Color, typography, spacing, radius, shadow, icon-size values — framework-agnostic	`tokens/tokens.json` + `tokens/tokens.css`
React components	Button, Badge, and the shared reporting widgets, built on the tokens	`react/src/components/`
Blade components	Button, Badge, Card, and 9 form elements, wrapping the main site's own CSS classes	`blade/components/`

Tokens are consumed directly by both stacks. Components are built separately per stack — PHP/Blade can't run React code — but both reference the same tokens, so a color or radius change propagates everywhere. A structural change (new variant, new component) means editing both implementations.

Using it in reports.vectorsticker.com

// package.json "@vectorsticker/design-system": "github:kyawmoo/vs-designsystem#main"

// any view import { Button, Badge, SummaryCard } from '@vectorsticker/design-system';

Tokens and component styles are auto-imported the first time you import anything from the package — no separate CSS import needed. Tailwind v4 doesn't scan node_modules by default, so add one @source line in index.css pointing at the package's react/src folder.

Using it in vectorsticker.com

<x-vs-button variant="primary">Save changes</x-vs-button> <x-vs-badge item-status="pending">Pending</x-vs-badge>

Blade components wrap classes the main site's CSS already defines (.btn-primary, bg-orange, …) — no separate stylesheet needed for most of them. See each component page for the one exception (icon-only buttons) and the current public/admin CSS gap.

Start with Foundations if you're new here — Colors and Spacing & Radius explain the values everything else is built from. Then check a Component page for the variant you need.