Design Rules

Workflow

1. Identify product context: user, task, object, frequency, risk, platform, desired feeling, metric.
2. Define structure before style: IA, navigation, main object, primary action, secondary actions.
3. Design behavior: feedback, loading, empty, error, success, disabled, focus, offline/sync, saved states.
4. Build visual system: hierarchy, spacing, typography, color roles, surfaces, shape, motion.
5. Add brand and graphics only where they support the scenario.
6. Check accessibility, responsiveness, performance, real data, long strings, and edge cases.
7. Reject default UI-kit output unless it has a product-specific system and states.

Non-Negotiables

• One primary action per context.
• Action belongs near the object it changes.
• Spacing expresses meaning: inside element < inside group < between groups < between sections.
• Color is a semantic role, not decoration.
• Text labels must explain outcomes, not say OK/Submit when specific action text is possible.
• Loading, empty, error, success, disabled, focus, hover/pressed states are part of the design.
• Critical flows must be familiar, explicit, recoverable, and accessible.
• Accessibility is part of component readiness, not a final pass.
• Product screenshots, graphics, and 3D must perform a job.

Avoid

• Tailwind/shadcn clone aesthetic.
• Card soup and nested cards.
• Decorative 3D blobs or generic SaaS isometry.
• Landing-page layout inside dashboards/admin tools.
• Hover-only actions with no keyboard/mobile fallback.
• Icon-only mystery actions.
• Dark premium trap with poor contrast.
• AI sparkle instead of AI workflow.
• Search as a cover for bad IA.
• Dashboards that are chart cemeteries.
• Empty/loading/error states left for later.

Visual Rules

• Use 3-5 text roles for most interfaces.
• Keep accent color rare; if everything is accent, nothing is.
• Meet WCAG contrast: 4.5:1 normal text, 3:1 large text and UI objects.
• Use semantic color tokens: text, surface, border, primary, danger, success, warning, focus.
• Use a spacing scale, typically 4/8-based, with optical corrections when needed.
• Use surfaces/elevation to explain layering, not decoration.
• Motion should explain feedback, continuity, or relationship.

Graphics Rules

• 3D: object, material, tactility, memorable hero.
• Isometry: systems, workflows, architecture, relationships.
• Photo: reality, people, place, trust.
• Product screenshot: proof of product value.
• Pictogram: quick concept.
• Motion: state and transition.

AI UI Rules

AI features need workflow states:

• input;
• retrieving/thinking;
• generating/streaming;
• tool call;
• draft result;
• sources/provenance when accuracy matters;
• edit;
• accept/apply;
• reject/regenerate;
• undo;
• failure/retry;
• privacy/data note.

Do not default to chat-only UI. Prefer hybrid UI when users need precise control.

Review Checklist

Ask:

• Is the user/task/context clear?
• Is the main object obvious?
• Is the main action obvious?
• Are secondary/risky actions quieter or separated?
• Does spacing show grouping correctly?
• Does color encode roles and pass contrast?
• Are all states designed?
• Does the interface respond immediately?
• Can the user recover from mistakes?
• Does it work on mobile, keyboard, screen reader, long text?
• Does the brand help the scenario?
• Does it avoid generic UI-kit output?

When unsure, prefer live product behavior, platform conventions, and clear recovery over visual novelty.