Flat Design

# Implement Flat Design in your agent

## Objective
Create this interface with Flat Design using solid fills, hierarchy based on size, space, and typography, and simple geometric icons. Use no texture, gloss, or decorative volume.

## Prerequisites
- Inspect existing components, tokens, and brand constraints.
- Confirm that this style fits the surface and content.
- Preserve existing structure, semantics, and interactions.

## Behavior and surfaces
- Solid color fills — Each surface uses a direct color without texture or gloss.
- No simulated depth — Bevels, realistic shadows, and decorative volume are absent.
- Simple glyphs — Icons and shapes reduce to immediately recognizable geometry.
- Typographic hierarchy — Weight, size, and color replace depth to organize information.

## States
- Cover existing default, hover, focus, active, disabled, loading, and error states.
- Provide a static state when reduced motion is requested.

## Accessibility
- Do not remove control boundaries along with decorative shadows.
- Pair color with a label, icon, or programmatic state.
- Preserve clearly distinct focus and hover states.

## When not to use
- Removing all interaction cues in the name of visual simplicity.
- Confusing lack of volume with lack of hierarchy.

## Acceptance criteria
- An application that must remain clear, light, and adaptable to several densities.
- A design system where simple tokens should carry hierarchy.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• Requires · Existing tokens, components, and brand constraints

# Audit Flat Design on the real surface

## Objective
Check that Flat Design remains consistent, accessible, and measured on the components that actually use it.

## Checks
- Compare interactive states and fallbacks.
- Check contrast, focus, and reduced motion.
- Report visual effects that weaken hierarchy or performance.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:937ebdbc8054eac2c752c5eec00a31dfacff9c54b61b7fcb43ee78e49a53b997

# Debug Flat Design in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Compare the surface with the documented visual signals.
- Verify contrast, focus, reduced motion, and fallback behavior.
- Isolate the visual layer without changing functional structure.

## Possible causes
- The style hides hierarchy or reduces contrast.
- The effect is applied to too many surfaces or depends on an unavailable API.
- An interactive state is no longer perceivable.

## Bounded corrections
Repair affordances that became ambiguous after flattening. Restore visible borders, labels, states, and focus without reintroducing imitation material.

## Final verification
- Do not remove control boundaries along with decorative shadows.
- Pair color with a label, icon, or programmatic state.
- Preserve clearly distinct focus and hover states.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• Requires · Existing tokens, components, and brand constraints

# Prevent Flat Design drift

## Objective
Turn the visual fix into a reusable rule and focused check without freezing the whole interface.

## Checks
- Isolate the responsible tokens or variants.
- Add focused evidence for the affected states.
- Compare nearby styles before widening the rule.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:e29f8d1b2659abb19eecfda027f2d49f016db0dc7a1c47fe614e35092f632887