Visual identity

Color paletteCSS custom properties

`–text`	#1a1a1a — primary text.
`–muted`	#5f5e5a — secondary text, descriptions.
`–faint`	#888780 — tertiary text, footer, captions.
`–border`	rgba(0, 0, 0, 0.12) — table rows, card borders, dividers.
`–accent`	#04342c — section headers, key identifiers, mono code.
`–accent-bg`	#e1f5ee — recommendation cards (decision trees), pale highlight.
`–code-bg`	#f7f6f2 — inline code background, code-block fields.
`–warn-bg`	#faeeda — gotcha and trap callout backgrounds.
`–warn-text`	#633806 — text on warn-bg.

TypographySans-serif body, mono code

`Body`	-apple-system, BlinkMacSystemFont, “Segoe UI”, system-ui, sans-serif. 10.5pt, line-height 1.45.
`H1`	17pt, weight 500, tight letter-spacing.
`H2 (section)`	9.5pt, uppercase, letter-spacing 0.1em, accent color.
`Code`	“SF Mono”, “Cascadia Mono”, Consolas, monospace.
`Mono identifiers`	11pt for card heads (e.g., `type:` labels). 8.5pt elsewhere.

Page structureCheat sheet template

<header> — H1 + ribbon <p class="lede"> — one-line intro <div class="grid"> <div class="card"> — bordered <div class="card-head"> <p class="desc"> <div class="fields"> — code <div class="gotcha"> — callout <div class="footer-note"> — global notes <footer> — locator

Card gridTwo-column standard

2-col grid with 12px gap. Cards have break-inside: avoid so they don’t split across pages in print.

Use .card-full on cards that need the full row width — typically the first card on a sheet (overview table) or the last (footer-spanning content).

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .card-full { grid-column: 1 / -1; }

Calloutsgotcha class

Warm callout for emphasis. Use semantic prefixes — Gotcha:, Use when:, Pattern:, Note:, Trap: — to convey advice type without changing color.

.gotcha { background: var(--warn-bg); color: var(--warn-text); border-radius: 4px; padding: 6px 9px; font-size: 9pt; }

Print CSSSingle-sheet artifacts

Cheat sheets and decision-tree cards lock to one Letter sheet. Long-form HTML follows normal page flow with the same @page rules.

@page { size: letter; margin: 0.4in; } @media print { body { padding: 0; } }

File & ribbon conventionPer-card

`File name`	`NN-slug.html` — two-digit zero-padded number, hyphen, kebab-case slug. Example: `11-machine-types.html`.
`Ribbon text`	`Cheat sheet · NN` on cheat sheets. `Tree · NN` on decision trees. Format-appropriate for any new HTML pack.
`Footer locator`	`Reference card NN of TOTAL`. Update `TOTAL` when the pack size changes.
`Footer brand`	Left side: companion publication name. Right side: locator.