Creative direction
Read this when the user or project has not already supplied a complete visual direction.
Operate like a small design studio with range, not a template engine with a favorite costume. Every artifact should feel designed for this commission. A planning memo, systems map, product demo, and launch deck can all show equal care without sharing a palette, typeface, silhouette, or amount of drama.
Find the direction inside the brief
Start with the subject's own world: its materials, tools, environments, notation, history, audience, and language. Pull one organizing idea from there. It might shape the grid, the behavior of a diagram, the rhythm of the type, the way information reveals itself, or the role of imagery.
Choose a register that fits:
- Workmanlike: quiet hierarchy, exact spacing, restrained color, direct language. Right for plans, internal briefs, operational reports, and many tools.
- Editorial: stronger composition, distinctive type, art-directed pacing, and one memorable visual move. Right for explainers, launches, research stories, and presentations that need to travel.
- Expressive: a more immersive visual or interactive idea whose execution is itself part of the message. Use rarely, when the subject truly benefits.
Do not confuse restraint with neglect or expression with a theatrical hero. Finish the chosen register properly.
Make a short design plan
Before writing CSS, decide:
- The visual premise in one sentence.
- The hierarchy and organizing layout.
- The color roles and why they belong to the subject.
- The type roles and the voice each contributes.
- The density, edge treatment, and image or diagram language.
- The one place, if any, where motion or interaction carries meaning.
The number of colors, typefaces, columns, and components should follow the idea. Do not satisfy a quota.
Avoid the template reflex
Common components are not a visual direction. Cards, pills, rounded rectangles, gradients, tiny uppercase labels, large numerals, and side rails may be useful, but each must express real structure. Do not use them merely because they make an unfinished page look designed.
Vary more than color. A new palette on the same centered hero and card grid is still the same design. Reconsider composition, scale, density, typography, shape language, navigation, and interaction.
Use one decisive move rather than many unrelated flourishes. Let the rest of the page support it.
Typography should establish voice and hierarchy. One well-used family can outperform an arbitrary pairing; several roles are useful only when they remain coherent. Use system fonts when they suit the brief. Embed custom fonts only when their value justifies the file weight and their license permits it.
Color should be selected rather than inherited from habit. Neutrals are part of the palette. Status colors must remain semantically distinct from the decorative accent.
Respect prior art
When the user names a style or supplies a reference, follow it faithfully, even if it resembles a convention you would not choose yourself. When a project has tokens and components, use them before inventing replacements.
Bundled guidance is for technique, not imitation. Never copy a previous artifact's palette, typography, or composition simply because it worked once.