← Library
REF 18 Cheat Sheet · Reference

Visual identity

Standards for any HTML artifact in the publishing system. Cheat sheets and decision trees use the same palette, typography, and print rules — extending to a third HTML format inherits the same constraints.

Color palette CSS 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.
Typography Sans-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 structure Cheat 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 grid Two-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; }
Callouts gotcha 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 CSS Single-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 convention Per-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.
Notes