The page stays still
Background, ruled lines and the margin line never animate. Cut between any two blocks in Resolve and the page doesn't jump.
01The idea
Every English teacher marks up a page the same way: a margin for corrections, a highlighter for what to say out loud, a pen for ticks, crosses, carets and little notes. Margin turns those habits into a motion system. The page is calm and still; only the marks move.
One thing moves at a time
A learner can only read one thing at a time, so blocks play in order: text in, then the mark, then the note. No two things fight for the eye.
Colour always means something
say this / stress · what changed · right · wrong. Word classes have their own four colours. Nothing is coloured just for decoration.
02Colour
Values below are read live from brand/tokens.css, so they're always correct, and they change when you switch theme (top right). Contrast is measured against the page colour; 4.5:1 is the WCAG AA minimum for text, and anything we use for words scores well above it.
Brand & roles
Neutrals & surfaces
Word classes
Using colour in video
- Highlighter is a fill, never text. It sits behind a word; the word on top turns Ink (
--k-on-hl). That's why it works on every theme. - Iris marks change. Prefixes and suffixes, carets, arrows and handwritten notes, so "what's new" always looks the same.
- Green and red are for ✓ and ✗ only, and they always come with the mark, so colour-blind viewers still get it.
- Keep page colour and text colour at full strength. YouTube compression smears thin, low-contrast strokes, which is why the smallest text is 24 px and strokes are 2 px or more.
Chroma keying
This palette covers the whole colour wheel, so no single key colour is safe for every block: correct ✓ is green (clashes with chroma green, #00B140), and nouns and Iris are blue-violet (close to chroma blue, #0047BB).
- Best: no keying at all. Export a transparent PNG sequence or ProRes 4444 with the export tool, or record on the brand background and put the narrator on top.
- If you must key: each block's panel checks the colours it actually uses and tells you which key is safe for that block.
- Blocks switch off every soft shadow and blur, so edges key cleanly.
green #00B140blue #0047BB
03Type
Four open-licence families, all bundled in brand/fonts (SIL Open Font Licence, free for commercial video). Each one has exactly one job.
photographer
Designed to make reading easier: wide letters, open shapes, generous spacing, which is exactly what learners need. The variable weight lets a stressed syllable thicken as it's spoken.
Word formation
A slim, elegant serif for section titles, mistake numbers and "vs". It gives the videos a calm editorial voice without shouting.
/fəˈtɑːɡrəfər/
Made by SIL for literacy, with every IPA symbol drawn clearly: ə ɪ ʊ θ ð ʃ ʒ ŋ ˈ ː. Most display fonts are missing some of these.
not a photograph!
Handwriting for short asides only, like a note in the margin. Under 30 letters, always in Iris, tilted −1.5°.
Type scale for a 1920×1080 frame
Sizes are pixels on the 1080p frame (the samples here are drawn at half size). They're deliberately modest: the biggest word is 96 px, about 9% of the frame height.
| Token | Size | Font · weight | Used for | Sample (50%) |
|---|---|---|---|---|
--k-t-hero | 96 px | Lexend 560 | One featured word | complaint |
--k-t-title | 76 px | Instrument Serif 400 | Section titles | complain → complaint |
--k-t-word | 64 px | Lexend 560 | Words in families, compare, forms | freeze · froze · frozen |
--k-t-sentence | 46 px | Lexend 380 | Example sentences | I put the frozen vegetables into the freezer. |
--k-t-pen | 44 px | Caveat 600 | Handwritten notes | be + allergic to |
--k-t-ipa | 40 px | Andika 400 | Phonetics | /kəmˈpleɪnt/ |
--k-t-body | 36 px | Lexend 380 | Meanings, options | a person who takes photographs |
--k-t-label | 24 px | Lexend 520, caps, +16% tracking | Labels and tags, the smallest size allowed | Common mistake |
Weights
380 · body520 · labels560 · words760 · stressed syllable
Do & don't
— Common mistakeI have a complaint.
DON'T MAKE THIS MISTAKE!!!
One of my neighbors made a formal complaint to the police about all the non-residents who use our street for parking.
photographer
04Layout
Everything is designed on a 1920×1080 frame. By default the graphics live in the left 55%; the narrator's frame sits on the right and nothing ever crosses into it. All sizes snap to an 8 px unit.
margin line · x 128
graphics safe area · x 176–1000 · y 120–960
— Word stressphotographer
55% · x 1056
narrator frame
- Frame
- 1920 × 1080, 16:9, designed at 100%
- Title / action safe
- 120 px top and bottom (11%)
- Margin line
- x = 128, 2 px, Margin colour at 42%
- Text starts
- x = 176 (margin + 48)
- Left safe area
- 824 × 840 px, ends 56 px before the 55% split
- Alternatives
- Full frame (176–1744) and Centred (360–1560), chosen per block
- Grid
- 8 px unit; ruled lines every 64 px, fading out before the narrator
Full frame
Centred
Corners & strokes
10 px small: keys, badges
18 px cards, plates, bands
pill word-class tags, open slots
2 px hairline: frames, dividers
5 px pen: round caps, drawn on
05Motion
Three curves, four durations. They're tokens too: change --k-ease-enter or --k-dur-m in tokens.css and every block retimes.
Fast start, long soft landing. Everything that appears.
A small overshoot. Only for ✓ ✗, dots, tags and chips.
Quick and quiet, no bounce. 0.4 s, 16 px down, fade.
| Token | Value | Used for |
|---|---|---|
--k-dur-s | marks, dots, tags | |
--k-dur-m | words and lines rising in | |
--k-dur-l | big moves: a word rising from its mask, cards | |
--k-stagger | between letters (words use ~0.05) | |
--k-beat | the pause between two ideas, e.g. wrong → right |
The vocabulary, live
photo
stress
see you
Timing a block
- Every block has three parts: build (the animation), hold (reading time) and exit.
- Speed stretches or squeezes the build to match the voice. Hold is in real seconds. Total fixes the whole length, and the hold adapts.
- Rule of thumb: hold ≥ 1 s per 3 words on screen.
How emphasis works
- Only one emphasis per moment: the highlighter or a mark, never both at once.
- Wrong things are struck, dimmed to 50% and left visible, so the learner can compare.
- No blur, no glow, no shake. They look cheap after compression and break keying.
06Marks & icons
Word-class tags
Tags are always lowercase and always written out in full: the colour helps, but the word is what carries the meaning. Anything that isn't one of the four classes (idiom, phrase…) is grey.
07Themes
Same system, three moods. A theme only swaps colours in tokens.css; layout, type and motion stay identical. Every block has a theme menu, and the switch at the top of this page restyles the whole book.
08The blocks
One template per kind of teaching moment. Each block is its own page with an edit panel: type your content, set the timing, copy the link. See the library with every field →
09Downloads
The whole kit (.zip)Every block, the brand files, fonts, the export tool and the guide, to run on your own computer.
Brand sheet (PNG, 3840×2160)Palette, type and marks on one page. Drop it into Resolve's Media Pool as a reference still.
Palette (.json)All three themes with roles, HEX and RGB.
Swatches (.ase)Adobe Swatch Exchange for Photoshop, Illustrator and Affinity.
Palette (.gpl)GIMP, Inkscape and Krita.
tokens.cssThe one file that styles everything.
tokens.jsonThe same tokens as data.
In Resolve, type the HEX codes into Text+ / Fusion colour pickers. Resolve can't import .ase files, so the brand sheet is there to eyedrop from. Fonts are in brand/fonts: install Lexend, Instrument Serif, Andika and Caveat on your computer to match titles you make directly in Resolve.