Margin Atlas

Field notes on design files and the things they carry.

EDITION 01 / 16 OCT 2026
Independent of Google & Stitch
Recorded with @google/design.md 0.4.0
Google Stitch / DESIGN.md6 original files · native CLI 0.4.0

What actually leaves a DESIGN.md file?

DESIGN.md carries named values and written design decisions. We changed one original file, one thing at a time. These are actual lint, diff and Tailwind token export results—not generated UI previews.

The starting file / native record

A successful command.
A partial answer.

Our fictional reading-room system has four colors, two type styles and one component. Its first lint run reports no errors. It also reports two warnings: two colors have no component references.

0errors
2 warnings · 1 information item

The exported theme contains the four colors, font names, font sizes, heading weight, rounding and spacing. It does not contain the instruction to put the reading queue beside the excerpt.

Open the actual lint record

Recorded with @google/design.md 0.4.0

designmd lint base.DESIGN.md

"summary": {
  "errors": 0,
  "warnings": 2,
  "infos": 1
}

Read the full JSON output

The warnings name colors.paper and colors.quiet. Both appear in our written design reasoning; neither is referenced by a component token. This warning is not a finding that their hex values are invalid.

A document result is not a rendered-page test. Keep the warnings with the output instead of reporting “passed” with no qualification.

Read the entire 55-line source ↗
↓ Change only the reasoning. Every machine-readable value stays the same.
Controlled change / prose only

A different layout.
The same CSS.

We replaced one sentence so the reading queue should sit above the excerpt instead of beside it. The exported CSS stayed byte-for-byte identical. The native diff reports no token changes and regression: false.

Compare the two layout instructions

BASE

Keep a separate narrow reading queue alongside the excerpt.

PROSE CHANGE

Place the reading queue above the excerpt as a single wrapping line.

These are exact sentence changes, not screenshots of generated pages. The complete files retain all the other content. Read the native diff.

For a layout revision, send the changed DESIGN.md and say which sentence changed. A theme-only handoff would silently drop this decision. “No token regression” does not mean “no design change.”

Inspect the original layout paragraph ↗
Controlled change / one named color

One value.
Two affected tokens.

#D1F15F#F4B9D1

Changing only colors.signal changes the exported --color-signal. The diff lists both signal and button-primary as modified, because that component points to the color through {colors.signal}.

Inspect the token-change result
/* base */
--color-signal: #d1f15f;
/* token-change */
--color-signal: #f4b9d1;

Full native diff · Full exported theme

The component’s reference text is unchanged. Native diff follows its resolved value. The CLI still reports regression: false; changed tokens are not automatically a regression.

Use a named reference for a shared role; inspect dependent components when its value changes. Then update the prose too: our isolated test still says “Signal green,” so it is deliberately not a polished design handoff.

Repeated group / empty output / repair

Zero errors.
Empty export.

We added a fenced YAML block that defines colors again. Version 0.4.0 returns one duplicate-group warning and an empty theme. Both lint and export exit successfully. The draft specification dated 16 October requires duplicate top-level groups to be rejected; the recorded package behavior is different.

Actual output from css-tailwind export

@theme {
}
See the duplicate and the repair

The added block repeats an existing top-level group

```yaml
colors:
  extra: "#133277"
```

Repair: put the extra value in the original colors group; remove the second group.

colors:
  primary: "#202025"
  paper: "#F5EEDC"
  signal: "#D1F15F"
  quiet: "#5A5860"
  extra: "#133277"

Our repaired file exports all five colors, including --color-extra: #133277;. Lint now reports three orphaned-token warnings, because the added color also has no component reference. Those warnings are visible; the empty-output failure is gone.

Duplicate inputRepaired inputRepaired output

If an export is empty, inspect both stderr/stdout and the actual file. Check repeated groups before assuming that every fenced block is unsupported. A zero process status alone is insufficient for this case.

Control case / same tokens in a fenced block

The fence is not the failure.

We moved the complete YAML from the front matter into one fenced block under Colors, with no duplicated groups. Version 0.4.0 exported the same theme bytes as the baseline and returned the same two warnings.

What this control does—and does not—show

The input has one block containing all metadata and tokens. It proves that this specific fenced layout works in the recorded package. It does not test every legal distribution of groups across several blocks.

Choose where to place tokens for clarity, but define each top-level group once. If combining two files, consolidate their colors intentionally; merely pasting one after the other can create the repeated-group case above.

From a document to a real page

What should leave the handoff?

Send the decisions with the values.

Imagine handing our reading room to a frontend developer. Sending only the generated theme gives them colors and sizes, but does not tell them whether the queue should be a sidebar, where reading time goes or what the primary action should say.

Use this DESIGN.md as the design brief. The active essay comes first; on phones the reading queue follows it. The theme file supplies named values. Preserve a visible focus state when implementing the controls.

This is an original implementation brief, not a tested prompt or a promise about an AI tool’s output. Attach the exact document revision and theme together; record the CLI version. The source page shows why each instruction matters.

Separate three different decisions.

Meaning: did the written layout or hierarchy change? Review the prose, including mobile order. Values: did the exported token or a dependent component change? Inspect the native diff and theme. Behavior: does the implemented page follow the intended reading order and show a focus indicator? Test the actual page.

For our sample, shrink the implemented page and check that the queue follows the excerpt; then use the keyboard to reach the reading action. An exported color cannot answer either question. We have not generated or tested a Stitch page in this edition.

On a page you own, WebTraceCheck can be an optional browser inspection step. It does not certify DESIGN.md conformity. If that page also has a non-sensitive demo email flow, CleanTempMail supplies a temporary test inbox; it is unrelated to parsing the design file and should not be used for important account recovery. Your own browser and test inbox are also valid choices.

Original inputs / recorded outputs

Take the evidence with you.

Six complete inputs, unedited native outputs and a script that recreates the files and reruns the published CLI. Nothing here requires a hosted AI service.

Recorded with @google/design.md 0.4.0 on 16 October 2026
InputFilesObserved export
OriginalSourceLintTheme4 colors
Prose changeSourceLintThemeIdentical to original
Color changeSourceLintThemeSignal becomes pink
Repeated colorsSourceLintThemeEmpty theme
Consolidated colorsSourceLintTheme5 colors
One fenced blockSourceLintThemeIdentical to original

Run the same six files locally

Download reproduce.mjs into a new folder. Use Node.js 20.6 or newer. The first command installs the external open-source CLI from npm; the script itself makes no network requests.

npm install --ignore-scripts --no-audit --no-fund @google/design.md@0.4.0
node reproduce.mjs

The script embeds all six original inputs, writes them to a newly created margin-atlas-run-* folder, runs lint/export/diff and verifies the stated relationships. It refuses a different CLI version. A failed assertion means the recorded expectation needs investigation; it is not a score for your own design.

Input and output SHA-256 manifest · Original example license

Version matters.

The published package and the current draft are separate references. These observations use 0.4.0, published 27 July 2026. The draft linked below is pinned to 16 October 2026. This edition does not silently apply behavior from the draft to the older package.

  1. Google’s DESIGN.md announcement, 21 April 2026: background on the open design format.
  2. Pinned draft specification: front matter, fenced token groups and duplicate handling. The current upstream may change after this revision.
  3. Published native package, version 0.4.0: the version actually used for every record here.

No Stitch account, AI generation, native Stitch import, rendered output or mail-client compatibility was tested. The CSS is a Tailwind-style theme export, not a complete page stylesheet. Use the files to inspect these bounded results, not as a certification for a production site.