veect design-system-native canvas

Connect your repository.

Veect reads your components and tokens straight from the source — then composes production React on a branch you can publish. Nothing to paste, nothing to upload.

Authorize Veect on GitHub

Enter this code at github.com to grant access. Veect requests the narrowest scope that still lets it read components and open pull requests.

DEVICE CODE Approve in browser →

waiting for approval…

Your org hasn't authorized Veect yet

Sign-in worked, but solstice/web is behind an organization policy. An owner needs to approve Veect once — then every seat can connect.

You can Open the org's third-party access settings and approve Veect, or send the request to an admin.

Open approval settings →

Confirm the host key

First connection to git.solstice.dev over SSH. Check this fingerprint matches what your host published before trusting it.

ED25519 FINGERPRINT SHA256:kR8Hq3vL0pR2mNbXcZ1wY7tSh6dKfJ4aQeUoIgP5s

Trust this repository?

Veect will run {{ cxRepoName }}'s install scripts and dev server on your machine to render real components. Only connect repositories you trust.

the “without scripts” choice is remembered per repository

Connecting {{ cxRepoName }}

This runs on your machine and can take a few minutes on first connect. You can leave it running.

Point Veect at your components

No veect.config.json yet — pick the folders to read. This config rides your first published branch.

COMPONENT FOLDERS

APP DIRECTORY (MONOREPO)

DETECTED

✓ {{ item.k }} {{ item.v }}

Environment

Your preview needs a few keys. They stay on this machine, encrypted — Veect never sends them anywhere.

Reading your repository…

Your system is live.

Get started

Secondary

NEW

Filter · 3

you@company.com

Maya Kade Product designer

Overview Members Billing

Notifications

volume — 62

Ag {{ revealFontNote }}

⌘K anywhere · ✦ to compose

veect

◆

Solstice workspace · solstice/web · main

PROJECTS · EACH ON ITS BRANCH

BASE KIT — MAPPED TO YOUR CODE

PATTERNS — YOURS

▦ {{ item.name }}

Save a selection as a pattern — it lives here, in your system.

CUSTOM — YOUR CODE

◈

COLOR — BRAND

edits ripple across canvas + code

COLOR — NEUTRAL

TYPE

NEUTRALS

RADIUS

radius-md {{ radiusChip }}

SPACING

4 · 8 · 12 · 16 · 24 · 32 · 48

HISTORY — EVERY CHANGE, LABELLED

No steps yet — every edit lands here with a label. Click one to travel back.

ISOLATION {{ isoName }} {{ isoMap }} real runtime · variants × states

scroll — pan · ⌘ scroll — zoom · drag board — pan

✦ COMPOSE — CONSTRAINED TO YOUR SYSTEM

✦ Describe a section — Veect composes it from your mapped components and tokens only.

◎ pick — scope an edit to one element
✎ draw — scribble a note on the board

▧ {{ att.name }}

staged as a ghost — nothing applied

composing from your system…

✦

▧ {{ att.name }}

⏎ send · esc dismiss

Select a component on the canvas.

click — select · drag — move
⌘K — commands · ✦ — compose
⌘Z — undo · ⌫ — delete

FRAME

width

active view {{ frameViewInfo }}

CONTENT

VARIANT

SIZE

WEIGHT

TONE

LAYOUT

gap

padding

TOKENS BOUND

✧ Critique this screen against your craft standard. Spacing, hierarchy, contrast, alignment, states — every fix lands in your tokens and components, with the why. standard: Impeccable

Scanning spacing, hierarchy, contrast…

✦ Impeccable. Nothing to fix. Every check passed against your standard.

{{ codeDraftEl }}

            prettier ✓tsc --noEmit ✓imports @solstice/ui
          

veect

Sign in.

Your system is waiting — everything you compose exports as real React.

design-partner MVP — accounts are provisioned manually

veect

WORKSPACE · ONE REPO EACH

Solstice {{ connAccess }}

workspace · one repo · solstice/web · {{ connMeta }}

Projects

Design systems

Solstice {{ homeSysMeta }}

Settings

CONNECTION

solstice/web {{ connAccess }}

Tokens & components discovered from this repo — no paste, no upload. {{ setSysMeta }}

ENVIRONMENT

stays on this machine, encrypted · Veect never transmits your keys

DOCTOR — CONNECTION HEALTH

COMPONENT MAPPINGS — THE MERGE BAR

unmapped components fall back to the Veect base kit at export — the warning follows them

CRAFT STANDARD — POLISH RULESET

EXPORT DEFAULTS

PLAN — DESIGN PARTNER

$0 during the MVP billing starts at GA · seats 2 of 5 used · no card on file

Profile

Maya Kade maya@solstice.team · Product designer

DESIGN PARTNER

PREFERENCES

App theme

WORKSPACE — SOLSTICE

KEYBOARD

              ⌘K — commands · ✦ — compose · ⌘Z — undo
              ⌘0 — zoom to fit · ⌘1 — 100% · scroll — pan · ⌘scroll — zoom
              ⌫ — delete selection · esc — dismiss anything
            

System update re-import tokens · diff · apply with undo

Devon updated the tokens. Paste the new file — Veect diffs it against the live system and shows the impact before anything changes.

{{ item.tag }} {{ item.tok }} {{ item.from }} → {{ item.to }}

i {{ sysImpact }}

✓ System updated. radius-md 12 → 10 rippled across every bound component on the canvas and in the code. Bindings preserved — nothing broke silently.

preview — real components, real states

{{ exportTitle }} PRODUCTION-GRADE

Real components, real tokens — nothing inlined, nothing to translate.

! Badge isn't mapped to your library — export falls back to the Veect default for it.

Ready to ship.

npm i && npm run dev

              · {{ exportImportsLine }}
              · tokens as CSS variables — tokens.css
              · deterministic — same tree, same code
            

⌘

⏎ run · ↑↓ navigate · esc close · ✦ routes to compose