Φ Design Token Styler

Generate Golden Ratio (Φ ≈ 1.618) spacing scales, design tokens, CSS variables, and Tailwind-ready utilities directly in VS Code.

Built for designers, front-end engineers, and design-system teams who want a faster way to generate harmonized spacing and token values. This extension is optimized to show up in searches for terms including: "design tokens", "golden ratio", "spacing scale", "CSS variables", "Tailwind", and "UI scaling".

Why Golden Ratio spacing works

Golden Ratio spacing is valuable because it gives layouts a mathematically grounded rhythm that feels natural and composed.

• Inherent visual harmony: proportions based on Φ (≈ 1.618) mirror patterns found in nature and feel balanced to the human eye.
• Harmonic scaling rhythm: spacing steps scale proportionally instead of arbitrarily, creating a stronger sense of continuity across screens and components.
• Elimination of arbitrary guesswork: padding, margins, type sizes, and container widths can all follow a shared geometric system instead of subjective tuning.
• Cohesive component hierarchies: micro-spacing and macro-spacing share the same underlying logic, helping design tokens feel unified across an entire product.

Why developers find it in the Marketplace

Users discover VS Code extensions through the Extensions view, marketplace search, and direct links shared in dev communities. This extension is written to be easy to find by keyword and easy to understand at a glance:

• Golden Ratio spacing and harmonic scales
• Design tokens, CSS variables, and utilities for consistent UI systems
• Tailwind config generation for product and front-end workflows
• Rapid design-system productivity for spacing, scale, and token generation

Features

• Generate a Tailwind spacing configuration from a base pixel value
• Generate CSS custom properties for a harmonic spacing scale
• Create design-token-friendly spacing and scale values for apps and interfaces
• Activate Pro access with a license key
• Persist Pro state locally after activation

Commands

• Φ: Generate Tailwind Config Scale
• Φ: Generate CSS Custom Properties
• Φ: Activate Pro License
• Φ: Upgrade to Pro

Usage

1. Open the Command Palette.
2. Run one of the Φ commands.
3. Enter a base spacing value.
4. If prompted, activate Pro with your license key to unlock the Tailwind generator.

Marketplace / packaging

This extension is ready to package with:

npm install -g @vscode/vsce
npm run package

Then publish with your Marketplace publisher credentials:

vsce publish

Monetization

Pro access is handled externally through a checkout flow such as Lemon Squeezy or Gumroad. After purchase, the user pastes their license key into the activation command.