Frontend Design

Color

• Commit to a palette with a dominant tone and a small number of accents.
• Use CSS variables or theme tokens for consistency.
• Avoid generic purple-on-white gradient aesthetics.

Layout

• Avoid cookie-cutter centered cards unless the product language already uses them.
• Use asymmetry, density, negative space, layering, or framing when it helps the concept.
• Keep the layout legible at narrow widths without losing the visual idea.

Motion

• Add a few meaningful transitions or reveals rather than many shallow micro-interactions.
• Prefer CSS-based motion unless the app already uses a React animation library.
• Motion should support hierarchy, not distract from it.

Product Fit

• Match the interface to the domain.
• A finance dashboard, creative tool, and consumer landing page should not feel interchangeable.

Implementation Rules

• Preserve the repo's component structure and design tokens when they already exist.
• When introducing new styling patterns, keep them localized and readable.
• Use comments sparingly and only for non-obvious structure.
• Do not add decorative complexity that fights usability.
• Always check mobile and tablet layouts, not just desktop.

Codex-Specific Validation

• For static inspection, read the component and stylesheet files together.
• For browser verification, prefer the built-in browser tools available in Codex.
• If the task is substantial, verify key states after editing: default, hover/focus, active, empty, loading, and small-screen layout when relevant.

Output Expectation

The result should feel designed by a person with taste and intent, not generated from a generic component template.