Design System Tokens Skill for Codex

Organize repeated colors, type sizes, spacing, and radii into semantic CSS variables. It helps projects with existing components bring their light and dark themes and interactive states into alignment.

中文

Install in Codex

Use a Codex environment that can discover project skills. The example can be tested in a local project. Keep the codex-design-core references if you want to use the repository’s fallback design language.

In a temporary directory, run git clone https://github.com/Eldergenix/Codex-Design.git. Enter the clone, run git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c, and review the pinned SKILL.md.
Copy the entire skills/design-system-tokens folder to .agents/skills/design-system-tokens in your own project, keeping its scripts, templates, and references together.
Open Codex in that project. Choose the skill with /skills or mention $design-system-tokens, then run the example below. Restart Codex if the list does not refresh.

Example task

Provide a sample page with a card, a dialog, and a primary button that use hardcoded background, border, and focus colors. Ask Codex to propose the smallest token map and list what to check in both themes.

What to check

The output maps each relevant role to light and dark values and covers the card, dialog, and button focus. Changing one theme value should update its components without editing each selector.

Original SKILL.md on GitHub · Updated 2026-11-11

Frequently asked question

When should I add a new color token?

Start by checking whether an existing token already describes the role. A recurring new role can justify a semantic token. Verify its contrast and focus behavior in both themes.