PHPackages                             trendyminds/craft-design-tokens - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. trendyminds/craft-design-tokens

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

trendyminds/craft-design-tokens
===============================

A Craft dropdown field powered by JSON files in your project

2.0.0(2y ago)13.2k↑44.4%MITPHPPHP ^8.2

Since Jul 8Pushed 2y ago2 watchersCompare

[ Source](https://github.com/trendyminds/craft-design-tokens)[ Packagist](https://packagist.org/packages/trendyminds/craft-design-tokens)[ RSS](/packages/trendyminds-craft-design-tokens/feed)WikiDiscussions craft-4 Synced 1mo ago

READMEChangelog (7)Dependencies (2)Versions (7)Used By (0)

Design Tokens
=============

[](#design-tokens)

🤔 What is this?
---------------

[](#-what-is-this)

Design Tokens is a Craft dropdown fieldtype where the options and the values are controllable via JSON files.

If you use Tailwind the JIT process only runs against Tailwind values it finds in your filesystem. If you have a class like `bg-indigo-700` in your database there's nothing Tailwind can do to find that (unless you enable Project Config, but do you *really* want Tailwind crawling your Project Config?).

Design Tokens allows you to define the values within JSON files on your filesystem, making it possible to use Tailwind's JIT process and provide a simple way to add and edit new values to your dropdowns.

⚠️ Careful, though!
-------------------

[](#️-careful-though)

Editing these JSON files means it's possible to break the output of your data. For example:

```
{
  "standard": "my-12",
+ "tighter": "my-6",
- "tight": "my-6",
  "none": "my-0"
}
```

Changing "tight" to "tighter" would break any entry using "tight"! Now when it tries to locate the value of "tight" it will come up empty until you've changed all of those values.

📝 Usage
-------

[](#-usage)

To setup configurations, create individual JSON files within `config/designtokens`.

### A single key/value pair (Ex: `spacing.json`)

[](#a-single-keyvalue-pair-ex-spacingjson)

```
{
  "standard": "my-12",
  "tight": "my-6",
  "none": "my-0"
}
```

```
{{ entry.myTokenField }}
{# Outputs the value of the selected option (my-12, my-6, my-0) #}
```

```
{{ entry.myTokenField.key }}
{# Outputs the key of the selected option (standard, tight, none) #}
```

### A nested key/value pair (Ex: `hero.json`)

[](#a-nested-keyvalue-pair-ex-herojson)

```
{
  "red": {
    "text": "text-red-500",
    "bg": "bg-red-100"
  },
  "green": {
    "text": "text-green-500",
    "bg": "bg-green-100"
  },
  "blue": {
    "text": "text-blue-500",
    "bg": "bg-blue-100"
  }
}
```

```
{{ entry.myTokenField.key }}
{# Outputs the key of the selected option (red, green, blue) #}
```

```
{{ entry.myTokenField.get('text') }}
{# Outputs the nested value of the selected option (text-red-500, text-green-500, text-blue-500) #}

{{ entry.myTokenField.get('bg') }}
{# Outputs the nested value of the selected option (bg-red-100, bg-green-100, bg-blue-100) #}
```

You can also call a config directly without interface with a field.

```
{# Get the spacing.json config #}
{{ designTokens('spacing') }}

{# Get the value from the `standard` key #}
{{ designTokens('spacing').standard }}

{# Get the value from the `tight` key #}
{{ designTokens('spacing').tight }}

{# Get the value from the `none` key #}
{{ designTokens('spacing').none }}
```

🪄 Example
---------

[](#-example)

Rather than using many Twig conditions to render the properly selected colors you can use Design Tokens to easily pluck the value you need and insert the class into your respective HTML.

[![An example of design tokens on a module](resources/example.png)](resources/example.png)

📦 Installing
------------

[](#-installing)

Install Design Tokens in one of two ways:

- [Install via Craft's Plugin Store](https://plugins.craftcms.com/design-tokens)
- Run `composer require trendyminds/design-tokens` and enable the plugin from "Settings > Plugins"

🤝 Contributing
--------------

[](#-contributing)

If you'd like to contribute please submit a pull request for review. We try to review and accept contributions whenever possible!

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity21

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~157 days

Total

5

Last Release

777d ago

Major Versions

1.1.1 → 2.0.02024-03-27

PHP version history (2 changes)1.0.2PHP ^8.0.2

2.0.0PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/51ee860b8a11c81c32b2d0bf9f90e23067fcf3cf72476bfab89913bf0e1ea3b3?d=identicon)[trendyminds](/maintainers/trendyminds)

---

Top Contributors

[![aaronbushnell](https://avatars.githubusercontent.com/u/315202?v=4)](https://github.com/aaronbushnell "aaronbushnell (13 commits)")

---

Tags

craft-fieldcraft-plugincraftcmsCraftcraft cmstoken field

###  Code Quality

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/trendyminds-craft-design-tokens/health.svg)

```
[![Health](https://phpackages.com/badges/trendyminds-craft-design-tokens/health.svg)](https://phpackages.com/packages/trendyminds-craft-design-tokens)
```

###  Alternatives

[verbb/super-table

Super-charge your content builders and create nested Matrix fields.

3141.6M22](/packages/verbb-super-table)[craftcms/feed-me

Import content from XML, RSS, CSV or JSON feeds into entries, categories, Craft Commerce products, and more.

292927.5k22](/packages/craftcms-feed-me)[verbb/navigation

Create navigation menus for your site.

90683.7k17](/packages/verbb-navigation)[verbb/formie

The most user-friendly forms plugin for Craft.

101372.9k40](/packages/verbb-formie)[verbb/comments

Add comments to your site.

13753.1k](/packages/verbb-comments)[doublesecretagency/craft-cpcss

Add custom CSS to your Control Panel.

117454.0k9](/packages/doublesecretagency-craft-cpcss)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)