Kernel.chat Art Direction

Purpose

Turn an editorial argument into a recognizable visual world before writing page code. Make every choice carry meaning: material, type, scale, image treatment, negative space, rhythm, and motion.

Use $kernel-chat-web-design after this skill to implement the direction in the house system. Use $motion-design when the direction calls for substantial choreography. Use $kernel-chat-design-qa after implementation.

Start With the Editorial Sentence

Write one sentence in this form:

This issue argues that [claim], so the page should feel like [material place or process], moving from [opening state] to [closing state].

Do not select a visual style until this sentence is specific. Reject adjectives that do not imply a design decision, such as premium, modern, clean, or immersive.

Build the Direction

1. Choose one material metaphor. Examples: an annotated field notebook, a night train timetable, a conservation ledger, a translucent laboratory sleeve. Define its paper, ink, edge, mark, and light behavior.
2. Name the dominant gesture. Give the composition one memorable act: an interrupted column, a vertical specimen rail, a horizon that shifts between spreads, or a full-bleed plate cut by marginal evidence.
3. Set the type hierarchy. Define display voice, reading voice, metadata voice, bilingual relationship, line length, and at least one intentional scale collision. Preserve kernel.chat's house type families unless the repository explicitly supports another licensed face.
4. Design the cover as an argument. The cover must communicate issue identity at thumbnail size and reward close reading. Use one focal relationship, not a collage of every idea.
5. Create one media grammar. Specify palette, crop logic, camera distance, texture, grain, illustration method, and what may repeat. Original assets may vary in composition while sharing the same material rules.
6. Compose a rhythm, not a component stack. Alternate compression and release, image and text, evidence and reflection. Avoid repeated equal rectangles, uniform section padding, and one-card-per-idea layouts.
7. Recompose for small screens. State what becomes the mobile anchor, what moves into the reading flow, what loses ornament, and what remains interactive. Mobile is a new composition, not a squeezed desktop.
8. Write the motion intent. Name what moves, why it moves, its physical analogy, and its resting state. Do not prescribe decorative motion with no editorial role.

Produce an Art-Direction Brief

Return or record:

• Editorial sentence
• Material metaphor and dominant gesture
• Cover composition
• Type hierarchy and bilingual treatment
• Color and stock assignment
• Media grammar and original asset list
• Spread rhythm or page sequence
• Desktop-to-mobile transformation
• Motion intent and reduced-motion resting state
• Three anti-goals that prevent generic output

Use references/composition-patterns.md for composition prompts, responsive transformations, and the final anti-generic test.

Guardrails

• Do not copy a finished film, issue, campaign, or reference frame. Extract principles and make new work.
• Do not let generated imagery determine the editorial idea. Direct the assets from the concept.
• Do not use novelty as a substitute for hierarchy or legibility.
• Do not add interaction merely to satisfy a request for immersion. Interaction must reveal, compare, tune, navigate, or embody the subject.
• Keep the kernel.chat house grammar recognizable while giving the issue one unmistakable identity.