Web Design Direction System

Web Design Direction System

Use when shared visual intent is unresolved or a recurring design correction requires revising the governing guidance. A settled design or localized implementation goes directly to its specialist; this is not a mandatory router.

Design Guidance Contract

When a project has repeated design decisions, a named design system, or a recurring review failure, read the design guidance evidence loop before changing the standard. Start with the reader's job and the strongest supported answer, then choose the smallest destination that can enforce the decision: guidance, a component primitive, a deterministic check, an exemplar, or an evaluation case.

Do not turn one screenshot, one reviewer preference, or one shipped implementation into a universal rule. Record scope, rationale, evidence, exceptions, and a bad/good example. Keep unresolved decisions visible instead of hiding them inside CSS or component code.

Infer The Design Mode

Before choosing components or CSS, write a compact design read:

• product type: marketing site, product UI, dashboard, portfolio, service business, commerce, docs, app shell, or campaign
• user state: browsing, evaluating, comparing, buying, onboarding, operating, recovering, or managing
• brand posture: quiet, precise, editorial, luxurious, playful, industrial, technical, cinematic, utilitarian, or warm
• density need: sparse, normal, dense, or expert-dense
• motion need: none, small tactile, section choreography, scroll scene, spatial/canvas, or demo-like

Turn those choices into concrete layout, type, color, media, and motion decisions.

Direction Dials

For an open brief, these optional internal dials can help compare directions. They are descriptive aids, not scores or required deliverables:

• layout_variance: 1 centered conventional, 5 balanced asymmetry, 10 experimental composition
• motion_depth: 1 static with hover, 5 section transitions, 10 scroll/canvas/spatial choreography
• surface_density: 1 spacious editorial, 5 normal product page, 10 compact operator dashboard
• brand_commitment: 1 neutral system UI, 5 clear accent identity, 10 brand carried by color, material, and type

Illustrative starting profiles: premium public site 6 / 5 / 4 / 6; product dashboard 4 / 3 / 7 / 3; expressive campaign 8 / 7 / 4 / 8. Derive actual choices from the brief; do not impose these values.

Design Lanes

Pick one lane and stay coherent:

• editorial: strong type hierarchy, unusual grid, restrained UI chrome, image/copy rhythm
• product-precise: crisp controls, dense proof, neutral palette, exact states, product credibility
• luxury-service: quiet rhythm, tactile materials, high-quality imagery, short confident copy
• cinematic: large spatial scenes, scroll pacing, image/video depth, minimal but strong copy
• industrial: mechanical grid, hard contrast, exposed structure, deliberate tension
• soft-premium: calm color, generous whitespace, rounded tactile controls, controlled spring motion

If the repo already has a system, preserve its best parts and change only what is weak.

Remove Generic Output

Rewrite these before shipping:

• centered hero with vague headline and three feature cards
• repeated bento or card grids without a reason for the grid
• random gradients, blobs, dots, glows, browser chrome, decorative lines, or stock-looking dashboards
• huge display words that do not carry meaning
• unsupported metrics, testimonials, awards, logos, screenshots, or proof
• body text too light to read
• every section using the same entrance animation
• mobile layouts that simply stack desktop sections
• vague CTAs where the action can be specific
• placeholder copy or placeholder code comments in final output

Redesign Protocol

For existing projects:

1. Inspect the rendered UI or existing files before proposing direction.
2. Preserve working IA, routes, real copy, assets, and brand anchors unless they are the issue.
3. Identify the material failures, if any: hierarchy, spacing, type, color, states, motion, content, accessibility, or responsiveness.
4. Change the smallest set of files that fixes the visible problem.
5. Compare before and after behavior, not just code diffs.