Quick Start

From zero to Stripe-flavored UI in 5 minutes.

What you’ll do

Pull Stripe’s tokens into a fresh project, translate them to Tailwind v4, and render a Stripe-flavored card.

5 minutes start-to-finish. No accounts needed.

1. Pull the tokens

In any project directory:

npx @webdesignhot/design-md add stripe

That writes stripe.design.md into the current directory with the full token bundle. Open it — the YAML frontmatter is what you’ll use next.

2. Switch tokens to swap the design system

npx @webdesignhot/design-md add linear
npx @webdesignhot/design-md add notion
npx @webdesignhot/design-md add anthropic

Each command writes a separate <slug>.design.md. Switch which one your code imports to swap the brand. The rest of this guide uses Stripe; the pattern is identical for any of the 300 catalog entries.

3. Export to Tailwind v4

Translate the YAML token bundle to a CSS @theme {} block:

npx @webdesignhot/design-md export stripe.design.md --to tailwind

Output looks like this:

@theme {
  --color-bg: #ffffff;
  --color-text: #0a2540;
  --color-brand: #635bff;
  --color-brand-alt: #0055de;
  --color-text-dim: #425466;
  --color-border: #e6ebf1;
  --color-surface: #f6f9fc;
  --color-on-brand: #ffffff;

  --font-body: "Sohne Buch", -apple-system, sans-serif;
  --font-display: "Sohne Kraftig", -apple-system, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Drop this into your globals.css. Tailwind v4 reads @theme natively — your bg-bg, text-text, bg-brand, rounded-md utilities now resolve to Stripe’s exact tokens.

4. Diff two brands

npx @webdesignhot/design-md diff stripe linear

Shows token-level deltas: colors, typography, spacing, radii, shadows, components. Useful when picking between two reference brands or when hand-tuning tokens after export.

Example output:

  colors.brand:
-   #635bff  (stripe)
+   #5e6ad2  (linear)

  typography.body.family:
-   "Sohne Buch", -apple-system, sans-serif  (stripe)
+   "Inter", -apple-system, sans-serif  (linear)

  radii.md:
-   8px  (stripe)
+   6px  (linear)

5. Render a card

Drop this into a React component — it uses the Tailwind utilities backed by the exported @theme:

export function BrandCard({ title, body }: { title: string; body: string }) {
  return (
    <div className="bg-surface border border-border rounded-md p-6 max-w-md">
      <h2 className="text-2xl font-display text-text mb-2">{title}</h2>
      <p className="text-text-dim leading-relaxed">{body}</p>
      <button className="mt-4 bg-brand text-on-brand rounded-md px-4 py-2 font-medium">
        Continue
      </button>
    </div>
  )
}

That card uses Stripe’s #635bff brand purple, #0a2540 text, 8px radius, and Sohne type — not Tailwind defaults. Swap stripe.design.md for linear.design.md and re-run the export, and the same component renders in Linear’s palette.

What just happened

  • The CLI fetched stripe.design.md from the catalog and wrote it locally
  • You translated the YAML frontmatter to a Tailwind v4 @theme block
  • Your component used Tailwind utilities backed by Stripe’s actual tokens

This is the whole loop: catalog → install → export → use → swap.

Next