01 / PALETTENear-black, slate and mint.
Dark surfaces establish depth. Mint marks an action or a useful detail. Warm colour is reserved for a condition that needs attention. Borders organise content without competing with it.
#0C1014Page canvas
#11181EPanels and file rows
#172127Inline code and secondary detail
#2A3840Quiet structural borders
#EDF3F5Headings and article text
#ACBBC1Captions and supporting copy
#8BF4C7Primary actions, links and indices
#E6B980Unverified conditions and warnings
02 / TYPOGRAPHYTechnical character. Comfortable reading.
How to make AI character-swap videos
Geometric letterforms, a clear hierarchy and slightly tighter spacing. Headlines wrap naturally; their containers grow with the text.
A character swap uses two inputs: a video that supplies the movement, and an image that supplies the new character. Start with a short, clearly framed clip. Keep the complete instructions easy to read.
17px starting size, 1.8 line height and approximately 68 characters per line. Weight 600 emphasises an instruction without changing the reading rhythm.
VIDEO / CHARACTER REPLACEMENT
ComfyUI/models/clip_vision
0123456789 >_ { workflow: "local" }
Used for filenames, code, metadata and small navigational details. This is where the terminal character belongs in this design.
03 / BLOG GRAMMARA useful article has its own hierarchy.
- A specific title, concise explanation and route choice open the article.
- Major sections use ordered indices and quiet dividers; setup steps use compact subheadings.
- Images have a clear purpose and an honest caption. The reference panel identifies an input asset.
- File rows, prompts, workflow diagrams and downloads have distinct, consistent treatments.
- The desktop contents rail marks the section being read. On narrow screens it becomes a native disclosure.
- Long identifiers wrap. Mobile padding stays bounded when text is enlarged. Print has a readable light treatment.
04 / COMPONENTSActions, conditions and commands.
Before uploading private footage: check the service’s upload terms. Read the browser workflow and conditions.
ffmpeg -n -i "prepared.mp4" -frames:v 1 "first-frame.png"The character-swap starter pack
Two workflow files, the reference image, setup notes, a model-link manifest and the optional video tool.
Download the starter ZIP · 1.8 MB05 / CONSISTENCYOne system across future guides.
Use the same colour roles, font assignments, reading width, spacing scale and article components. Change the content and relevant imagery for each task. New effects still need their own research and verification.
Font files are self-hosted with their original licences. Sources: Space Grotesk and IBM Plex. This reference documents the palette, typography and article components used across HowDoesAIDoThat.