# 🎨 UI/UX & Frontend Standards (The "Pixel-Perfect" Protocol)

**Source:** The Antigravity Brain.
**Audience:** AI Agents (Designers & Frontend Engineers).
**Objective:** Create **Premium, Responsive, and Native** interfaces that WOW the user on the first render.

> [!CRITICAL]
> **The Aesthetic Mandate:**
> "Ugly software is a bug. Slow software is a crime. Use Vanilla CSS to create magic, not just layouts."

## 1. 🧠 The AI "Pre-Render" Check (Cognitive Optimization)

Before writing HTML/CSS, clear these mental hurdles to avoid "ugly mockups":

1.  **The "Bootstrap" Hallucination:**
    *   *Error:* Using class names like `col-md-6`, `p-4`, `text-center` without defining them.
    *   *Fix:* **WE DO NOT USE EXTERNAL FRAMEWORKS** (Tailwind/Bootstrap) unless explicitly requested. You MUST write the CSS for every class you use.
2.  **The "Mobile-Last" Sin:**
    *   *Error:* Writing desktop CSS and forgetting mobile.
    *   *Fix:* Start with mobile, then use `@media (min-width: 768px)` for desktop enhancements.
3.  **The "Placeholder" Trap:**
    *   *Error:* Using `lorem ipsum` or `https://via.placeholder.com`.
    *   *Fix:* Use **Real Data** (e.g., "R$ 1.250,00", "João Silva") and generate generic icons (SVG) or colored divs instead of extensive broken images.

## 2. 🎨 The Design System (Variables or Death)

You **MUST** define these variables at the top of your CSS (`:root`). Do not hardcode values.

```css
:root {
    /* 1. Palette (HSL for programmatic manipulation) */
    --hue-primary: 220; /* Blue */
    --primary: hsl(var(--hue-primary), 60%, 50%);
    --primary-hover: hsl(var(--hue-primary), 60%, 40%);
    --surface: hsl(220, 15%, 98%);
    --text: hsl(220, 15%, 10%);
    
    /* 2. Typography (Fluid Scale) */
    --font-sans: 'Inter', system-ui, sans-serif;
    --text-sm: clamp(0.8rem, 0.5vw + 0.5rem, 0.9rem);
    --text-base: clamp(1rem, 0.5vw + 0.8rem, 1.125rem);
    --text-xl: clamp(1.5rem, 1vw + 1rem, 2rem);
    
    /* 3. Spacing (Fluid Math) */
    --space-s: clamp(0.5rem, 1vw, 1rem);
    --space-m: clamp(1rem, 2vw, 2rem);
    
    /* 4. Glassmorphism & Depth */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
```

## 3. 🏗️ Engineering Workflow (Context Matters)

### Path A: "Show me an idea" (The Quick Mockup)
*   **Goal:** Visual validation, rapid prototyping.
*   **Format:** Single `index.html` containing CSS (`<style>`) and JS (`<script>`).
*   **Focus:** Visual impact, "WOW" factor, animation. Code cleanliness is secondary to visual speed.

### Path B: "Build the System" (The Software Engineer)
*   **Goal:** Scalability, Maintainability, Production-Ready.
*   **Format:** Full directory structure (`src/components`, `src/styles`, `src/utils`).
*   **Mandates:**
    *   **DRY (Don't Repeat Yourself):** If a button style is used twice, it's a class. If a layout is used twice, it's a component.
    *   **Separation of Concerns:** CSS in `.css`, JS in `.js`. No inline styles.
    *   **Modular Architecture:** Use specific files for specific domains (e.g., `frota.css`, `financeiro.js`).
    *   **Reusability:** Build generic components (`Card`, `Button`, `Modal`) first, then compose pages.

## 4. 🚀 Performance & Native Features

*   **Modals:** Use `<dialog>`.
    ```javascript
    dialog.showModal(); // Built-in backdrop and focus trap
    ```
*   **Accordions:** Use `<details>` and `<summary>`. No JS needed.
*   **Animations:** Use CSS Keyframes for entrance animations (`fade-in`, `slide-up`).
    ```css
    @keyframes slide-up {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .card { animation: slide-up 0.5s ease-out forwards; }
    ```

## 5. 🤖 The "Self-Correction" Checklist (Audit Yourself)

Before outputting code, verify:

- [ ] **Contrast:** Can I read the text on the button? (White text on light yellow bg = REJECT).
- [ ] **Scrollbar:** Did I hide the ugly default scrollbar? (`::-webkit-scrollbar { width: 8px; ... }`).
- [ ] **Empty States:** If a list is empty, did I show a nice "No items found" illustration/div?
- [ ] **Responsive:** Did I use `flex-wrap: wrap` or Grid `auto-fit`?
- [ ] **Console Errors:** Did I fix references to missing files?

## 6. Persona Signatures (Aesthetic Flavors)

*   **Steve Jobs Mode:** Minimalist. Lots of Whitespace (`gap: 4rem`). Typography is the hero.
*   **Tony Stark Mode:** Dark Mode default. Neon accents (`box-shadow: 0 0 20px var(--primary)`). HUD-like data density.
*   **Corporate Mode:** Clean. White cards on gray background. Borders are thin (`1px solid #e5e7eb`).