v0.1.0 · @polystaq/ui

Polystaq Design System

The single source of truth for Polystaq's visual language — shared via @polystaq/ui. This documents the actual product UI: the canvas app, not the marketing page.

Explore tokens View components

Product layout

Polystaq
Dashboard
Canvas
Start
Review
Done

Block page

Start

Block properties

Icon

Property

Color

Sidebar
Canvas · bg-white · dot grid 18px
Properties panel

Surface system

Canvas

White background, dot grid (18px). The primary workspace. colorMode="light".

Sidebar

bg-sidebar (oklch 0.985) with sidebar-* token family. Collapses from w-64 to w-16.

Properties panel

bg-background, max-w-[460px], border-l border-border. Slide-in from right.

Toolbar

bg-[#2f2f2f], floating at bottom-center. Only dark surface in the product.

Canvas block palette

Block elements use explicit sRGB hex values — not the OKLCH semantic tokens. These are the four colors available in the block color picker.

Yellow

Sage

Lime

Forest

Cyan

Lavender

Orchid

Violet

Stone

Obsidian

Coral

Rose

Blue

Documentation

Foundation

Semantic color tokens, sidebar token family, typography, spacing, border radius, and the canvas block palette.

Semantic colorsSidebar tokensCanvas paletteType scale

Components

Shared primitives from @polystaq/ui plus the product-specific patterns: canvas toolbar, block elements, properties panel.

ButtonCardInputToolbarCanvas Block