@brewedby/ds

Fynd One Design System — CLI installer

Sets up design tokens, font declarations, icon library, and AI context (CLAUDE.md) in any Fynd project. Works with Astro, Next.js, Vite, React, and vanilla HTML.

Usage

One-time install in a project (recommended)

npx @brewedby/ds init

Or install globally and run anywhere

npm install -g @brewedby/ds
fynd-ds init

What it does

Runs an interactive setup that:

1. Detects your framework and package manager automatically
2. Asks where to place tokens, fonts, and whether to write CLAUDE.md
3. Writes fynd-tokens.css to your styles directory (with font paths patched for your project structure)
4. Creates a font directory with a .gitkeep placeholder for Fynd Sans files
5. Writes CLAUDE.md at project root (AI context for Claude / Cursor)
6. Prepends the token import to your global stylesheet
7. Installs @fontsource/inter-display, @fontsource/inter, and lucide-react if you want them

After install — the one manual step

Fynd Sans is a proprietary font and cannot be distributed via npm.
After running fynd-ds init, place the .woff2 files in the fonts directory the installer created:

FyndSans-Regular.woff2
FyndSans-Medium.woff2
FyndSans-SemiBold.woff2
FyndSans-Bold.woff2

Obtain them from the design assets repo or contact [email protected].

Files installed

| File | Purpose | |------|---------| | {stylesDir}/fynd-tokens.css | All CSS custom properties — tokens, spacing, radius, component tokens | | FYND_DESIGN_SYSTEM.md | Full design system reference doc | | CLAUDE.md | AI context file (if opted in) — Claude and Cursor read this automatically | | .fynd-ds-readme.md | Quick-reference for the installed configuration | | {fontsDir}/.gitkeep | Placeholder for Fynd Sans font files |

Token reference

After install, use CSS variables directly:

/* Typography */
font-family: var(--font-family--primary);   /* Fynd Sans    — headings      */
font-family: var(--font-family--secondary); /* Inter Display — body         */
font-family: var(--font-family--ui);        /* Inter         — buttons, nav */

/* Colors */
color: var(--text--title);                  /* #0e0e0e */
color: var(--text--subtext);                /* #5b5c5d */
background: var(--blue--blue-fill);         /* #f9fbff */

/* Spacing */
gap: var(--spacing--24);                    /* 24px */

/* Radius */
border-radius: var(--border-radius--pill);  /* 250px — buttons */
border-radius: var(--border-radius--16);    /* 16px  — cards   */

Icons

# Installed automatically if you opt in
npm install lucide-react

import { ArrowRight, ShoppingBag } from 'lucide-react'
<ArrowRight size={16} strokeWidth={1.5} />

Always use strokeWidth={1.5} — Fynd icon convention.

Publishing to internal registry

# Set your internal npm registry
npm config set @brewedby:registry https://your-registry.company.com

# Publish
npm publish

Then any team member can run:

npx @brewedby/ds init