docs/DESIGN.md opens with the design principles in under 30 lines, with the home page and Security settings as worked examples #9601

docs/DESIGN.md now opens with the principles, and the design lint refuses a second accent color. The design lint, tsc --noEmit and the three design test files pass (35 tests); I ran no other tests. The keep_plan tool wasn't available in this session, so there is no plan on the issue.

• Principles: eight short lines open docs/DESIGN.md, inside the first 30 lines. They cover one confident sentence, the real product as the visual, rhythm, one background and text color, at most one accent, few borders, rows over boxes, and plain words (docs/WRITING.md). The numbered principles in §1 are unchanged.
• Worked examples: two entries name which principle each line shows.

- studioHome in src/web/studio/home.ts covers the tellBox and <section class="stack"> lines and the muted "The feed" link. - securityPage in src/web/pages/security.ts covers the <dl class="status-rows"> with one statusRow per fact.

• Lint rule: scripts/design-lint.ts has a new quiet rule, accent. It flags any accent token other than --accent and --accent-fg, such as --accent-2 or --accent-alt. No file has one today, so the debt list needed no change. The new test in test/design-lint.test.ts fails without the rule.

Left out:

• The "bordered box where a row would do" check isn't written. It can't be told apart from a legitimate card by a pattern match, so it would need a baseline of existing offenders.
• Home's "one text color" line is only documented, not enforced.

Try it: bun scripts/design-lint.ts should print the "no colour, size or component added" line. Then add --accent-2 to any /* css */ block under src/web and it should fail with accent.

Closes #9576

docs/DESIGN.md now opens with the principles, and the design lint refuses a second accent color. The design lint, tsc --noEmit and the three design test files pass (35 tests); I ran no other tests. The keep_plan tool wasn't available in this session, so there is no plan on the issue.

• Principles: eight short lines open docs/DESIGN.md, inside the first 30 lines. They cover one confident sentence, the real product as the visual, rhythm, one background and text color, at most one accent, few borders, rows over boxes, and plain words (docs/WRITING.md). The numbered principles in §1 are unchanged.
• Worked examples: two entries name which principle each line shows.

- studioHome in src/web/studio/home.ts covers the tellBox and <section class="stack"> lines and the muted "The feed" link. - securityPage in src/web/pages/security.ts covers the <dl class="status-rows"> with one statusRow per fact.

• Lint rule: scripts/design-lint.ts has a new quiet rule, accent. It flags any accent token other than --accent and --accent-fg, such as --accent-2 or --accent-alt. No file has one today, so the debt list needed no change. The new test in test/design-lint.test.ts fails without the rule.

Left out:

• The "bordered box where a row would do" check isn't written. It can't be told apart from a legitimate card by a pattern match, so it would need a baseline of existing offenders.
• Home's "one text color" line is only documented, not enforced.

Try it: bun scripts/design-lint.ts should print the "no colour, size or component added" line. Then add --accent-2 to any /* css */ block under src/web and it should fail with accent.

docs/DESIGN.md now opens with the design principles and two worked examples, and scripts/design-lint.ts now refuses a second accent color. The two failing checks were not caused by this change. After merging origin/main the failing tests, the design-lint tests and tsc --noEmit pass. The whole suite was not re-run here, so the forge's next check is the full confirmation.

Fix for the failed check

• } else rule: the failure came from a stray else on its own line at src/boards/guide.ts:231. That line was already fixed on main, so merging origin/main into the branch cleared it.
• Terminal home crew line: this test passed on the branch when I ran it. I did not find a cause, and I did not touch it. It may have been sharing state with the other failure.

What changed

• Principles: eight short lines open docs/DESIGN.md, inside the first 30 lines. They cover one confident sentence, the real product as the visual, rhythm, one background and text color, at most one accent, few borders, rows over boxes, and plain words (docs/WRITING.md). §1 stays as the long form.
• Worked examples: two entries name which principle each line shows. studioHome in src/web/studio/home.ts covers the tellBox and <section class="stack"> lines and the muted "The feed" link. securityPage in src/web/pages/security.ts covers the <dl class="status-rows"> with one statusRow per fact.
• Lint rule: a new quiet rule, accent, flags any accent token other than --accent and --accent-fg, such as --accent-2. No file has one today, so the debt list is unchanged. A new test in test/design-lint.test.ts fails without the rule.

Left out

• The "bordered box where a row would do" check is not written. A pattern match can't tell it from a legitimate card, so it would need a baseline of existing offenders.
• "One text color" is documented but not enforced.

Try it: bun scripts/design-lint.ts should print the "no colour, size or component added" line. Add --accent-2 to any /* css */ block under src/web and it should fail with accent.

Both points from the review are fixed and pushed. The design-lint check and the design-lint tests pass again; I did not re-run the rest of the suite.

• Security example: you were right that I misstated the page. I rewrote the clause in docs/DESIGN.md to match src/web/pages/security.ts:

- Rows: each fact is a statusRow in <dl class="status-rows">. - Links: only the rows that lead somewhere (Traffic, Backups) end in an <a>, so the old "single <a> per row" was wrong too. Other rows, such as Admin accounts, have no link. - Badges: each row says its state in plain words, and a toned badge gives the verdict. The page uses success badges as well as danger and attention ones, so the example no longer says "only where something is wrong".

• Lint comment: I re-flowed the doc comment in scripts/design-lint.ts so it no longer breaks mid-sentence.

I agree the accent rule is only a tripwire: no file uses a second accent token today, so it only catches one added later.