Import design tokens from real product brands (Stripe, Linear, Notion, Supabase, Vercel, Anthropic, and 44 more) into the active editor.
Usage
- Open the command palette (
Cmd+Shift+P/Ctrl+Shift+P) - Run One Page: Import design tokens…
- Pick a brand → pick a format → tokens are inserted at the cursor.
Formats
| Format | Output |
|---|---|
| CSS Variables | :root { --color-brand-primary: #635BFF; ... } |
| Tailwind v4 | @theme { --color-primary: #635BFF; ... } |
| Design Tokens | W3C $value / $type JSON for Style Dictionary / Theo |
| Full brand JSON | Everything — colors, typography, components, code patterns |
| DESIGN.md | Long-form design reference (markdown) |
If no editor is open, the result is shown in a new untitled buffer.
Configuration
onePage.baseUrl— override the API base (defaulthttps://one-page-orpin.vercel.app).
Build
npm install
npm run build # tsc → dist/extension.js
npm run package # produces a .vsix you can side-load
Source
Tokens are served by the public One Page API — same endpoints used by the CLI (@one-page/cli), npm package (@one-page/tokens), and Figma plugin.
License
MIT. Tokens are derived from publicly available product screenshots — brand names and visual identities remain trademarks of their respective owners.