Course style

When to use

• You write or review a page, a card, a figure, or a manual for the course.
• You need a token value for light or dark mode.
• You need the label format for a figure, a sub-figure, or a widget.
• You need to check prose against the plain technical English rules.
• You add motion and need the timing, the easing, and the reduced motion behaviour.

When not to use

• You draw a static SVG figure. Use blueprint-figure, which cites this skill.
• You build an animated or slider figure. Use motion-figure.
• You build an isometric machine explainer. Use isometric-explainer.
• You write a full manual. Use write-manual for the structure and the audit.
• The page belongs to a different product with its own brand.

Method

1. Set the theme. Put the light tokens on

   :root

   and the dark tokens on

   [data-theme="dark"]

   . Copy them from

   references/tokens.md

   .
2. Pick the token set. Pages use the site tokens. Manual figures use the

   --m-

   tokens.
3. Load the three fonts with the exact link in

   references/typography.md

   . Use the stacks as given.
4. Give each figure a label in the format from

   references/labels-and-layout.md

   .
5. Build cards and figure frames with the measurements in

   references/labels-and-layout.md

   .
6. Add motion only with the motion tokens. Add the reduced motion block from

   references/accessibility.md

   .
7. Write the prose. Then check every line against

   references/plain-english.md

   .
8. Run the checklist below. Fix each failure before you finish.

Rules

Colour

• Use one accent per page:

  --blueprint

  (

  #3553ff

  light,

  #6b8eff

  dark). Status tokens and manual figure hues are the only other colours.
• Write every colour as a CSS variable. A hex value is allowed only as the default inside

  var()

  .
• Define every token in both themes. A token without a dark value is a defect.
• Put body text in

  --ink

  or

  --ink-soft

  only.
• Do not use

  --ink-mute

  or

  --warn

  for body text. Their contrast on the paper is below 4.5:1.
• Keep the four fixed figure hues: rose for failure, grey for outside, amber for lifecycle, teal for durable state.
• Use no gradients except the paper dot grid and the dashed rule. Use no rounded corners on cards or frames.

Type

• Headings use the display font, weight 400, uppercase, letter spacing 0.02em, colour

  --blueprint

  .
• Body text uses the serif at 18px with line height 1.62.
• Labels, meta lines, and code use the mono font, uppercase for labels, letter spacing 0.06em to 0.16em.
• Figure text is at least 11 units at a 640-unit width.

Labels

• A course figure number is

  FIG_

  plus three digits, such as

  FIG_005

  . Numbers are never reused.
• A sub-figure adds a dot and a capital letter:

  FIG_005.A

  .
• Separate label parts with a middle dot and one space on each side:

  FIG_001 · FORWARD PASS

  .
• A manual figure is

  Fig. <part>.<n>

  , such as

  Fig. 4.1

  . Its id is

  fig-4-1

  .

Prose

• Sentences have at most 25 words. Instructions have at most 20 words and use the imperative.
• A paragraph has one topic and at most six sentences.
• Use no em dashes, no en dashes, no semicolons, and no contractions.
• Never write "may". Write "can", or state the condition.
• Use none of the banned words in

  references/plain-english.md

  .
• Code spans, fenced code, quotes, and citations are exempt.

Motion and access

• Use only the four durations: 160, 180, 220, and 250 ms.
• Page reveals start 8px away at opacity 0 and use

  --ease-out

  . Modals start 14px lower at scale 0.985.
• Pressed buttons scale to 0.97.
• Under

  prefers-reduced-motion: reduce

  , remove transitions and animations and show the final state.
• Every focusable control shows a 2px solid

  --blueprint

  outline at a 2px offset.
• Touch targets in menus and figure controls are at least 44px tall.

Check before you finish

• Every colour is a

  var(--token)

  , and each token has a light and a dark value.
• The page uses one accent colour.
• No body text uses

  --ink-mute

  or

  --warn

  .
• Fonts load from the one Google Fonts link, and the stacks match

  references/typography.md

  .
• Every figure has a label in a format from

  references/labels-and-layout.md

  .
• No label uses an em dash as a separator.
• Every transition uses a motion token, and a reduced motion block exists.
• Every control has a visible focus outline. Menu rows and figure controls are 44px tall or more.
• The prose check in

  references/plain-english.md

  reports zero hits.
• You switched the theme to dark and read the page again.

Files

• references/tokens.md

  : site and figure tokens for light and dark, hue meanings, motion tokens, measured contrast.

• references/typography.md

  : font stacks, the font link, type scale, and label styles.

• references/labels-and-layout.md

  : FIG_ formats, file names, card layout, and figure frames.

• references/plain-english.md

  : the full prose rule list, the banned words, and a checker.

• references/accessibility.md

  : focus, targets, figure markup, theme start-up, and reduced motion.

site/style.css

manuals/_shared/tokens.css

scripts/audit_manuals.js