Using designtoken.md with OpenAI Codex

1 Generate your token file

Generate your token file

Head to the designtoken.md generator and configure your design system:

Pick your brand colors and let the generator build full color scales
Configure typography: font families, sizes, and weights
Set spacing and border-radius values
Switch to the designtoken.md tab in the output panel
Copy the output or download the file

2 Place it in your project

Place it in your project root

Drop the file at the root of your repository so Codex picks it up as context:

your-project/
├── designtoken.md    ← place it here
├── src/
├── package.json
└── ...

Codex reads project context files in your repository. By placing designtoken.md at the top level, it becomes part of the context Codex sees when generating or modifying code.

3 Start building with tokens

Start building with tokens

Once designtoken.md is in your project root, Codex will discover it as part of your project context. You can reference it explicitly in your task descriptions for stronger results:

"Build a settings page using the tokens from designtoken.md for all styling."

"Create a card component. Use the color, spacing, and radius tokens from designtoken.md."

Codex will read the full file and apply your color scales, typography stack, spacing, radius, elevation, and component tokens consistently across every file it generates.

Before & after

See the difference tokens make in what your agent outputs:

Without tokens (generic)

<button style="
  background: blue;
  color: white;
  padding: 10px 20px;
">
  Click me
</button>

With designtoken.md

<button style="
  background: var(--color-primary-500);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
">
  Click me
</button>

With tokens, every component Codex generates uses your actual design values instead of arbitrary defaults.

Codex Tip

Codex reads project context files from your repository. Place designtoken.md in your project root and it becomes part of every task context, whether you're running interactive prompts or autonomous tasks.

Best practices

Keep your designtoken.md at the project root where Codex can find it
Regenerate when your design direction changes
The visual reference section helps the agent understand the intended aesthetic
Commit the file to version control so Codex always has access to the latest tokens
Use specific prompts like "apply the primary color scale" for more precise output

Beyond static tokens

For runtime token resolution at production scale, explore Designless Studio. It reads the same token vocabulary and makes it available via API, so your design system updates across your app without regenerating files.

Reusable skills

If you find yourself generating the same tokens across multiple projects, turn your tokens into a reusable design skill on skill.design so your agent installs your design preferences as a package.

Frequently asked questions

Does OpenAI Codex read designtoken.md automatically?

Yes. Codex reads project context files in your repository. Place designtoken.md in your project root and Codex will use the token definitions when generating UI code.

Do I need to reference it in every prompt?

No. Codex picks up project files as context automatically. However, mentioning "use the tokens from designtoken.md" in your task description helps Codex prioritize the token file when making styling decisions.

Can I use designtoken.md with Codex's autonomous mode?

Yes. Since Codex reads your project files as context, it will discover designtoken.md and apply the tokens whether you're working interactively or running autonomous tasks.

Generate your designtoken.md →