How to Use DESIGN.md with Codex

Why Codex needs DESIGN.md

Codex defaults to generic UI patterns because it lacks visual context. A DESIGN.md file replaces those defaults with your specific design decisions: colors, fonts, spacing, and component behavior.

What DESIGN.md should contain for Codex

Include the design aesthetic, primary and secondary color hex values, font stack, base spacing unit (4px or 8px), border radius values, and interaction states. Codex reads these rules and applies them to every component it generates.

Placement and setup

Place DESIGN.md in your project root. Codex reads it during session initialization. Reference it in your system prompt: 'Read DESIGN.md before generating any UI code.' This ensures consistent, on-brand output across every session.

How this becomes an OmniSaver record

The practical output of this guide is not another long note. It is a compact record with enough structure to help you act later: the source, the situation, the important fields, the reason it mattered, and the next step.

For AI Context, that means choosing the smallest Saver that matches the moment and saving only the fields that will help you compare, repeat, prove, decide, or reuse the context later.

A simple workflow

Start by saving one real example while the context is fresh. Review it after the outcome is visible. Compare it with the next similar record. Reuse the best version when the situation appears again.

This save, review, compare, reuse loop is the reason OmniSaver uses tiny apps instead of one giant database. Each Saver keeps the record close to the behavior it supports.