course-style

Course Style

This skill defines the look and expression of Learning AI Engineering from Scratch. blueprint-figure, motion-figure, isometric-explainer, and write-manual read exact values from here. Supports Claude, Cursor, Codex, OpenClaw, Hermes, and all agents that read SKILL.md. This skill does not define drawing methods; it specifies colors, fonts, labels, spacing, wording, and checking methods.

When to Use

• Writing or reviewing course pages, cards, diagrams, or manuals.
• Looking up light/dark theme tokens.
• Looking up label formats for figures, subfigures, and interactive components.
• Checking body text against clear technical writing rules.
• Adding motion effects, where duration, easing, and reduced-motion behavior need to be determined.

When to Hand Off to Other Skills

• Static SVG diagrams: use blueprint-figure, which references this skill.
• Animated or slider diagrams: use motion-figure.
• Isometric machine explanations: use isometric-explainer.
• Structure and audit of complete manuals: use write-manual.
• Other products use their own brand guidelines.

Method

1. Set up the theme. Put the light tokens of references/tokens.md into :root, and the dark tokens into [data-theme="dark"]。
2. Choose the token set. Pages use site tokens; manual diagrams use --m- token。
3. Load the three fonts via the exact links in references/typography.md , and use the font stacks as-is.
4. Label each figure according to references/labels-and-layout.md .
5. Build cards and figure frames to the dimensions in the same document.
6. Motion effects use only the motion tokens, and include the reduced-motion code from references/accessibility.md .
7. Write the body text, then check it line by line against references/plain-english.md .
8. Complete the checklist below and fix every failure.

Rules

Color

• Use only one accent color per page, --blueprint, light #3553ff, dark #6b8eff. Only status tokens and the semantic colors of manual diagrams are exceptions.
• Write all colors as CSS variables. Hex values may only appear as defaults for var() .
• Every token must define both light and dark values; a missing dark value is a defect.
• Body text uses only --ink or --ink-soft。
• Body text does not use --ink-mute or --warn, which fall below 4.5:1 contrast on the paper color.
• Keep four fixed semantic colors: rose for failure, gray for out of scope, amber for lifecycle, and cyan for persistent state.
• Only the paper dot grid and dashed dividers may use gradients. Cards and figure frames use right angles.

Fonts

• Headings use the display font at weight 400, uppercase English, letter-spacing 0.02em, color --blueprint。
• Body text uses the serif font at 18px with line-height 1.62.
• Labels, metadata, and code use the monospace font. English labels are uppercase with letter-spacing from 0.06em to 0.16em.
• When the image width is 640 units, the text in the image must be at least 11 units.

Label

• Course diagram numbers are FIG_ plus three digits, for example FIG_005, and numbers must not repeat.
• Subfigures use a dot and an uppercase letter, for example FIG_005.A。
• Separate with a middle dot, with one space on each side, for example FIG_001 · FORWARD PASS。
• Manual diagrams use Fig. <part>.<n>, for example Fig. 4.1, and the ID is fig-4-1。

Body text

• Each English sentence has at most 25 words, and instructions have at most 20 words and use imperative sentences. Chinese follows the short-sentence principle and does not apply English word-count rules.
• Each paragraph discusses only one topic and has at most six sentences.
• Do not use long or short dashes, semicolons, or English contractions.
• In English, do not use "may"; use "can" or state the specific condition instead.
• Do not use references/plain-english.md forbidden expressions.
• Inline code, code blocks, quotations, and citation markers are not subject to the above text checks.

Motion and accessibility

• Use only four durations: 160, 180, 220, and 250 ms.
• Page reveal starts from an 8px offset and 0 opacity, using --ease-out. Popups start from a 14px downward shift and 0.985 scale.
• When a button is pressed, scale it to 0.97.
• Under prefers-reduced-motion: reduce , remove transitions and animations and show the final state.
• Each focusable control uses a 2px solid --blueprint outline with a 2px offset.
• Touch targets for menu and chart controls are at least 44px high.

Pre-completion checks

• All colors are var(--token), and every token has light and dark values.
• The page uses only one accent color.
• Body text does not use --ink-mute or --warn。
• Fonts load from a unified Google Fonts link, and the font stack matches references/typography.md .
• Every image has a label that complies with references/labels-and-layout.md .
• Labels do not use dashes as separators.
• Every transition uses motion tokens and includes code for reduced motion.
• Every control has a visible focus outline. Menu rows and chart controls are at least 44px high.
• references/plain-english.md The text check has no hits.
• Switch to the dark theme, then read the page again.

Files

• references/tokens.md: Light and dark tokens, semantic colors, motion tokens, and measured contrast for the site and charts.
• references/typography.md: Font stack, font links, font sizes, and label styles.
• references/labels-and-layout.md: FIG_ format, file names, card layout, and figure frames.
• references/plain-english.md: Complete writing rules, forbidden words, and the checker.
• references/accessibility.md: Focus, touch targets, chart markers, theme initialization, and reduced motion.

The source values in the repository are in site/style.css、manuals/_shared/tokens.css and scripts/audit_manuals.js。