### Run Development Server

Source: https://github.com/tbrasington/typescale-generator/blob/main/apps/docs/README.md

Starts the development server for the project. Open http://localhost:3000 in your browser to view the application.

```bash
yarn dev
```

--------------------------------

### Install Typescale Generator Globally

Source: https://github.com/tbrasington/typescale-generator/blob/main/readme.md

Install the Typescale generator globally using npm. This command makes the `typescale-cli` available in your terminal.

```sh
npm install -g @initiate-ui/typescale-generator
```

--------------------------------

### Generate Typography Scale with CLI

Source: https://github.com/tbrasington/typescale-generator/blob/main/readme.md

Run the Typescale CLI tool from your terminal to generate a typography scale stack. This is the primary way to use the generator after installation.

```zsh
typescale-cli
```

--------------------------------

### Example Nested Token Structure

Source: https://github.com/tbrasington/typescale-generator/blob/main/todo.md

This JSON structure demonstrates nested token groups and individual tokens. It illustrates a hierarchical organization for design tokens, allowing for complex structures.

```json
{
  "token uno": {
    "$value": "token value 1"
  },
  "token group": {
    "token dos": {
      "$value": "token value 2"
    },
    "nested token group": {
      "token tres": {
        "$value": "token value 3"
      },
      "Token cuatro": {
        "$value": "token value 4"
      }
    }
  }
}
```

--------------------------------

### Example Color and Font Family Token Structure

Source: https://github.com/tbrasington/typescale-generator/blob/main/todo.md

This JSON structure defines color tokens and font family tokens. It shows how to categorize colors and specify font families, with values that can be directly used or referenced.

```json
{
  "brand": {
    "color": {
      "$type": "color",
      "acid green": {
        "$value": "#00ff66"
      },
      "hot pink": {
        "$value": "#dd22cc"
      }
    },
    "typeface": {
      "$type": "fontFamily",
      "primary": {
        "$value": "Comic Sans MS"
      },
      "secondary": {
        "$value": "Times New Roman"
      }
    }
  }
}
```

--------------------------------

### Example Typography Token Structure

Source: https://github.com/tbrasington/typescale-generator/blob/main/todo.md

This JSON structure defines typography styles, including font family, size, weight, letter spacing, and line height. It demonstrates how to reference other tokens using curly braces.

```json
{
  "type styles": {
    "heading-level-1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Roboto",
        "fontSize": "42px",
        "fontWeight": "700",
        "letterSpacing": "0.1px",
        "lineHeight": "1.2"
      }
    },
    "microcopy": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.serif}",
        "fontSize": "{font.size.smallest}",
        "fontWeight": "{font.weight.normal}",
        "letterSpacing": "0px",
        "lineHeight": "1"
      }
    }
  }
}
```

--------------------------------

### Build Figma Plugin

Source: https://github.com/tbrasington/typescale-generator/blob/main/apps/figma/README.md

Use this command to build the plugin for production. It generates the manifest.json and JavaScript bundles.

```bash
npm run build
```

--------------------------------

### Build Typography Scales with Min/Max Breakpoints (Old Method)

Source: https://github.com/tbrasington/typescale-generator/blob/main/packages/typescale-generator/CHANGELOG.md

Illustrates the previous method of defining typography scales using minimum and maximum width breakpoints.

```typescript
const scale = buildTypographyScales({
    range: [-1, 0, 2],
    min: {
      width: 320,
      fontSize: 16,
      typeScale: TypographyScaleValues.MINOR_SECOND.value
    },
    max: {
      width: 1440,
      fontSize: 20,
      typeScale: TypographyScaleValues.PERFECT_FOURTH.value
    }
  });
```

--------------------------------

### Build Typography Scales with Named Sizes (New Method)

Source: https://github.com/tbrasington/typescale-generator/blob/main/packages/typescale-generator/CHANGELOG.md

Demonstrates the updated approach for building typography scales using named size breakpoints, offering more flexibility.

```typescript
const scale = buildTypographyScales({
    range: [-1, 0, 2],
    sizes: [
      {
        $name: "BP1",
        width: 320,
        fontSize: 16,
        typeScale: TypographyScaleValues.MINOR_SECOND.value
      },
      {
        $name: "BP2",
        width: 768,
        fontSize: 18,
        typeScale: TypographyScaleValues.PERFECT_FOURTH.value
      },
      {
        $name: "BP3",
        width: 1440,
        fontSize: 20,
        typeScale: TypographyScaleValues.PERFECT_FOURTH.value
      }
    ]
  });
```

--------------------------------

### Watch for Figma Plugin Changes

Source: https://github.com/tbrasington/typescale-generator/blob/main/apps/figma/README.md

Run this command to automatically rebuild the plugin whenever code changes are detected during development.

```bash
npm run watch
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.