Tokens

Design decisions as CSS custom properties. All tokens live in packages/ui/src/styles.css — one change propagates to every app in the monorepo.

Colors

Semantic tokens

Used for all surfaces, text, and borders. These are the tokens consumed by @polystaq/ui components.

Background

Page canvas, properties panel

--background

Foreground

Primary text

--foreground

Card

Elevated surfaces

--card

Primary

CTA backgrounds

--primary

Secondary

Secondary fills

--secondary

Muted

Subtle fills, code bg

--muted

Muted Foreground

Supporting text

--muted-foreground

Accent

Hover fills

--accent

Destructive

Error, delete actions

--destructive

Border

Dividers, panel borders

--border

Input

Form control borders

--input

Ring

Focus ring

--ring

Sidebar token family

The sidebar uses a dedicated set of tokens prefixed with --sidebar-*. This lets the sidebar theme independently from the main background without hacks.

Sidebar

--sidebar

Sidebar background (near-white)

oklch(0.985 0 0)

Sidebar Foreground

--sidebar-foreground

Nav text

oklch(0.145 0 0)

Sidebar Primary

--sidebar-primary

Logo mark background

oklch(0.205 0 0)

Sidebar Primary FG

--sidebar-primary-foreground

Logo mark icon

oklch(0.985 0 0)

Sidebar Accent

--sidebar-accent

Hover and active fills

oklch(0.97 0 0)

Sidebar Accent FG

--sidebar-accent-foreground

Hover and active text

oklch(0.205 0 0)

Sidebar Border

--sidebar-border

Section dividers, right border

oklch(0.922 0 0)

Canvas block palette

13 colors exported from @polystaq/ui as CANVAS_BLOCK_COLORS. These are the full set of block element colors available in the canvas color picker. All values are sRGB hex — not CSS variables.

Yellow

Sage

Lime

Forest

Cyan

Lavender

Orchid

Violet

Stone

Obsidian

Coral

Rose

Blue

Yellow

#F9C74FCANVAS_BLOCK_COLORS.yellow

Sage

#90C47ACANVAS_BLOCK_COLORS.sage

Lime

#58E87CCANVAS_BLOCK_COLORS.lime

Forest

#3A7D44CANVAS_BLOCK_COLORS.forest

Cyan

#00F0FFCANVAS_BLOCK_COLORS.cyan

Lavender

#A8A0E8CANVAS_BLOCK_COLORS.lavender

Orchid

#C97AD8CANVAS_BLOCK_COLORS.orchid

Violet

#6B68D4CANVAS_BLOCK_COLORS.violet

Stone

#EFEFEFCANVAS_BLOCK_COLORS.stone

Obsidian

#111111CANVAS_BLOCK_COLORS.obsidian

Coral

#E07060CANVAS_BLOCK_COLORS.coral

Rose

#E84070CANVAS_BLOCK_COLORS.rose

Blue

#3B70E8CANVAS_BLOCK_COLORS.blue

The inset shadow inset 0 3px 4px rgba(255,255,255,0.22) gives blocks their glass-like depth on the canvas.

Canvas toolbar palette

The floating toolbar is the only dark surface in the product. Also hardcoded — not CSS variables.

Toolbar BG

Canvas floating toolbar background

#2f2f2f

Active tool

Selected tool highlight

#0c8ce9

Separator

Divider between tool groups

rgba(255,255,255,0.15)

Inactive icon

Unselected tool icons

rgba(255,255,255,0.80)

Shadows

All box-shadows are hardcoded at point of use. No shadow tokens yet — use these values directly.

Context menu

Right-click menus, context menus

shadow-[0_14px_36px_rgba(0,0,0,0.22)]

Properties panel

Right-side panel slide-in

shadow-[-18px_0_50px_rgba(0,0,0,0.18)]

Dropdown

Icon picker, color picker dropdowns

shadow-[0_12px_30px_rgba(0,0,0,0.18)]

Canvas block

Block elements on canvas

shadow-[0_3px_4px_rgba(0,0,0,0.22),inset_0_3px_4px_rgba(255,255,255,0.22)]

Drag preview

Item being dragged in sidebar tree

shadow-[0_14px_30px_rgba(0,0,0,0.25)]

Typography

Font families

Geist everywhere. Set via CSS font tokens.

Sans

Geist

--font-sans

UI, body, headings

Heading

Geist

--font-heading

Display, section titles

Mono

Geist Mono

--font-mono

Code, tokens, labels

Type scale

Note the two product-specific styles: tracking-[0.16em] section labels in the properties panel, and text-[18px] font-bold for canvas block text.

Display

Ship faster.

Process to app.

Operational workflows.

Canvas components.

Design tokens.

Body

The quick brown fox jumps over the lazy dog.

Small

Caption and supporting text.

XSmall

Timestamps, labels, overlines.

Section label

Block page

Block label

Start event

Mono

const x = cn('px-4', 'py-2');

Spacing

4px base grid. Never use arbitrary spacing values.

p-14px

p-28px

p-312px

p-416px

p-520px

p-624px

p-832px

p-1040px

p-1248px

p-1664px

Border Radius

Radii scale from --radius (0.625rem). Exception: canvas blocks use a fixed rounded-[5px].

Buttons, inputs

10px — interactive controls

rounded-lg

Cards

~14px — elevated surfaces

rounded-xl

Canvas blocks

5px — tight, product-specific

rounded-[5px]

Avatars

Always circular

rounded-full

Popover / dropdown

10px — matches controls

rounded-lg

Modals

~18px — large overlays

rounded-2xl