DESIGN.md vs Tokens vs CSS Variables

DESIGN.md: the design brief

DESIGN.md describes the intent: aesthetic direction, color roles, typography hierarchy, spacing philosophy, and component behavior. It answers why something looks the way it does.

Design tokens: the shared vocabulary

Design tokens are named values like color-primary or spacing-md that define design decisions in a platform-agnostic way. They bridge the gap between design intent and code implementation.

CSS variables: the browser implementation

CSS variables implement design tokens at the browser level. They are the runtime layer that makes responsive theming and dark mode possible without recompiling.

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.