Prebuilt workflow · Design systems & tokens

Design System Starter

Build a starter system from a brand reference: tokens, globals.css, a Tailwind config, base components, and a preview board.

· You bring Brand assets· tokens.json· globals.css· tailwind.config.ts· components.tsx· preview

Build with it Open the canvas

A real run, unedited2 generations · $1.19 of walletBrand and inputs are fictional, made in Vmotif · 2026-09-24

What came back

Straight off the canvas.

Everything below is what this run returned, untouched.

design-tokens.jsonjson

{
  "meta": {
    "generator": "vmotif-design-system-starter",
    "format": "tailwind-v4"
  },
  "colors": {
    "core": {
      "primary": "oklch(0.66 0.18 40)",
      "secondary": "oklch(0.33 0.045 162)",
      "accent": "oklch(0.59 0.07 132)",
      "background": "oklch(0.965 0.008 85)",
      "foreground": "oklch(0.25 0.012 245)",
      "muted": "oklch(0.93 0.012 90)",
      "mutedForeground": "oklch(0.5 0.03 140)",

globals.csscss

@import "tailwindcss";

@theme {
  /* Colors (light) */
  --color-primary: oklch(0.66 0.18 40);
  --color-secondary: oklch(0.33 0.045 162);
  --color-accent: oklch(0.59 0.07 132);
  --color-background: oklch(0.965 0.008 85);
  --color-foreground: oklch(0.25 0.012 245);
  --color-muted: oklch(0.93 0.012 90);
  --color-muted-foreground: oklch(0.5 0.03 140);
  --color-card: oklch(0.985 0.005 85);
  --color-card-foreground: oklch(0.25 0.012 245);
  --color-border: oklch(0.87 0.012 90);

tailwind.config.tstypescript

import type { Config } from "tailwindcss"

// globals.css remains the source of truth for @theme tokens.
const config: Config = {
  "content": [
    "./app/**/*.{ts,tsx,mdx}",
    "./components/**/*.{ts,tsx}",
    "./lib/**/*.{ts,tsx}"
  ],
  "theme": {
    "extend": {
      "colors": {
        "primary": "var(--color-primary)",
        "secondary": "var(--color-secondary)",

How it runs

Two stages, in order.

What each stage reads, what it makes and what it cost on this run. Each stage starts once the one before it finishes.

01
Theme System
Reads your inputsMakes 3 files, DESIGN.md and 1 image
1 stepClaude Opus 5.5$0.41
02
Base Components
Reads your inputs and stage 01Makes 7 files
1 stepClaude Opus 5.5$0.78

Where it fits

Part of a bigger job.

Rebrand a page Paste a URL. Get three brand directions, then every page regenerated in the one you pick.

More in Design systems & tokens

Extract a coherent, on-brand system — colors, type, tokens, and theme files ready to drop into a codebase.

Color PaletteExtract a full color scale from any image as oklch CSS variables and Figma-ready design tokens.In — ImageOut — variables.css · tokens.json Typography MatcherIdentify the typefaces in a design, find the closest Google Fonts, and generate a fluid CSS type system.In — DesignOut — analysis.md · type-system.css Logo Icon GeneratorTurn a brand name and brief into three deliberately different logo icon concepts — a monogram, an abstracted category metaphor, and a personality mark — each as a production-ready SVG.In — Brand name + briefOut — 3 concept SVGs · lockup.svg Brand KitFeed in a logo and a short brief and get a written style guide, an OG image drawn from it, and a Tailwind v4 theme, all on-brand.In — Logo + brand briefOut — style-guide.md · og-image · theme.css Press KitTurn a logo and a short brief into an on-brand press kit — cover, story, logo usage, colors, and type — as landscape pages you export to one PDF.In — Logo + briefOut — 6 landscape pages · DESIGN.md · press-kit.pdf

What will you create?

Start building

Workflow reference →

Design System Starter

Straight off the canvas.

Two stages, in order.

Theme System

Base Components

Part of a bigger job.

What will you create?