Collections

Collections help you organize your design tokens into logical groups. Just say you have a marketing site and a web app. Both ‘sites’ might have quite distinct visual styles, or use different spacing and type scales. Collections can help you keep their associated tokens separate and organized.

{
  "product": {
    "source": ["tokens/product/colors.json", "tokens/product/spacing.json"]
  },
  "marketing": {
    "source": ["tokens/marketing/colors.json", "tokens/marketing/typography.json"]
  }
}

Single vs Multiple Collections

You can configure your tokens in one of two ways:

Single collection (default):

{
  "tokens": {
    "source": ["tokens/colors.json"],
    "themes": {
      "dark": ["tokens/dark.json"]
    }
  }
}

Multiple named collections:

{
  "tokens": {
    "product": {
      "source": ["tokens/product/colors.json"]
    },
    "marketing": {
      "source": ["tokens/marketing/colors.json"]
    }
  }
}

Note: You can have either a single collection or multiple named collections, but not both in the same configuration.

If you’re using sugarcube with existing tokens, you’ll be prompted to create collections during initialization.

If you’re unsure whether you need to create a collection, you probably don’t!

For post-initialization configuration details, see the Configuration documentation.