# Course Style Guide

Holds the colours, fonts, labels and writing rules for course pages and figures.

- Repository: https://github.com/rohitg00/ai-engineering-from-scratch (76237 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rohitg00/ai-engineering-from-scratch --skill course-style -g -a claude-code -y`
Codex: `npx skills add rohitg00/ai-engineering-from-scratch --skill course-style -g -a codex -y`
Cursor: `npx skills add rohitg00/ai-engineering-from-scratch --skill course-style -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/ai-engineering-from-scratch --skill course-style -g -a gemini-cli -y`

## Description

The shared visual and writing reference for AI Engineering from Scratch pages, figures, and manuals. Use it for light and dark colour tokens, font stacks, FIG_ label formats, and card layout. Use it for the plain technical English rules and the accessibility and reduced motion defaults. Trigger phrases: "course style", "blueprint palette", "course tokens", "FIG label", "plain technical English", "check my prose", "course fonts", "dark mode tokens

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Course style

This skill is the reference layer for the AI Engineering from Scratch look and voice. Other craft skills point here for exact values: blueprint-figure, motion-figure, isometric-explainer, and write-manual. Use it with Claude, Cursor, Codex, OpenClaw, Hermes, or any agent that reads SKILL.md. It holds no drawing method of its own. It tells you which colour, font, label, spacing, and word to use, and how to check each one.

## 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

The rest: https://github.com/rohitg00/ai-engineering-from-scratch/blob/HEAD/.claude/skills/course-style/SKILL.md