Spaces:
Running on Zero
Running on Zero
| # Viva Mais AI Style Guide | |
| Viva Mais AI is a local-first WhatsApp copilot for travel agencies. The visual | |
| system should make the app feel friendly and memorable while keeping the CRM | |
| dashboard calm enough for repeated professional use. | |
| ## Brand Idea | |
| The mascot is a robot cowfish: round, curious, helpful, and travel-ready. It | |
| combines a cowfish silhouette with a friendly visor face, teal fins, tiny horns, | |
| an antenna, and a travel tag charm. | |
| Use the mascot as the emotional layer of the product: | |
| - Friendly, not childish. | |
| - Operational, not decorative only. | |
| - Travel-agency warm, not generic SaaS blue. | |
| - Local-first and private, not cloud-magic mysterious. | |
| ## Asset Inventory | |
| | Asset | Path | Use | | |
| | --- | --- | --- | | |
| | Horizontal logo | `assets/brand/vivamais-ai-logo-horizontal.png` | App header, README hero, Space card. | | |
| | Square logo | `assets/brand/vivamais-ai-logo-square.png` | Social previews, thumbnails, square placements. | | |
| | App icon | `assets/brand/vivamais-ai-app-icon.png` | Space avatar, favicon source, launcher icon. | | |
| | Logo mark | `assets/brand/vivamais-ai-mark.png` | Compact badge mark when text is already nearby. | | |
| | Wordmark | `assets/brand/vivamais-ai-wordmark.png` | Places where the mascot would be too large. | | |
| | Mascot cutout | `assets/mascot/robot-cowfish.png` | Empty states, welcome panels, hero visuals. | | |
| | Mascot 512 | `assets/mascot/robot-cowfish-512.png` | Smaller UI placements. | | |
| | State sheet | `assets/mascot/robot-cowfish-state-sheet.png` | Reference sheet for all mascot states. | | |
| | Brand preview | `assets/previews/brand-assets-preview.png` | Quick visual QA and documentation. | | |
| | Animation preview | `assets/previews/mascot-animation-spritesheets-preview.png` | QA board for the sprite animations. | | |
| ## Logo Rules | |
| - Keep the circular cowfish mark to the left of the wordmark in horizontal | |
| layouts. | |
| - Keep `Viva Mais` in Navy and `AI` in Coral. | |
| - Keep the route line under the wordmark subtle; it is a motion cue, not a | |
| divider. | |
| - Do not recreate the logo with generated text. Use the provided PNGs so the | |
| name stays readable. | |
| - Give the horizontal logo clear space at least equal to the cowfish antenna | |
| height. | |
| - Use the square logo when the available width is less than `480px`. | |
| - Avoid placing the logo over busy photos, gradients, or patterned surfaces. | |
| ## Mascot States | |
| | State | Path | Suggested UI moment | | |
| | --- | --- | --- | | |
| | Smiling | `assets/mascot/states/robot-cowfish-smiling.png` | Ready, idle, welcome, success-neutral. | | |
| | Thinking | `assets/mascot/states/robot-cowfish-thinking.png` | Q&A, reasoning, extracting insights. | | |
| | Loading puffed | `assets/mascot/states/robot-cowfish-loading-puffed.png` | Model processing, upload parsing, waiting. | | |
| | Scanning document | `assets/mascot/states/robot-cowfish-scanning-document.png` | Receipt, ticket, voucher, or document OCR. | | |
| | Celebrating reservation | `assets/mascot/states/robot-cowfish-celebrating-reservation.png` | Reservation found, sale completed, payment matched. | | |
| | Sleepy low-power | `assets/mascot/states/robot-cowfish-sleepy-low-power.png` | No file, paused session, empty state. | | |
| Use one mascot state per major panel. Avoid placing multiple large mascots in a | |
| single viewport unless it is documentation or a preview board. | |
| ## Mascot Animation Assets | |
| Each animation has both a GIF and a horizontal spritesheet. Spritesheets are | |
| `4096x512`: eight `512x512` frames in a single row. Frame `n` starts at | |
| `x = n * 512`. | |
| | State | Spritesheet | GIF | | |
| | --- | --- | --- | | |
| | Smiling | `assets/mascot/spritesheets/robot-cowfish-smiling-spritesheet.png` | `assets/mascot/gifs/robot-cowfish-smiling.gif` | | |
| | Thinking | `assets/mascot/spritesheets/robot-cowfish-thinking-spritesheet.png` | `assets/mascot/gifs/robot-cowfish-thinking.gif` | | |
| | Loading puffed | `assets/mascot/spritesheets/robot-cowfish-loading-puffed-spritesheet.png` | `assets/mascot/gifs/robot-cowfish-loading-puffed.gif` | | |
| | Scanning document | `assets/mascot/spritesheets/robot-cowfish-scanning-document-spritesheet.png` | `assets/mascot/gifs/robot-cowfish-scanning-document.gif` | | |
| | Celebrating reservation | `assets/mascot/spritesheets/robot-cowfish-celebrating-reservation-spritesheet.png` | `assets/mascot/gifs/robot-cowfish-celebrating-reservation.gif` | | |
| | Sleepy low-power | `assets/mascot/spritesheets/robot-cowfish-sleepy-low-power-spritesheet.png` | `assets/mascot/gifs/robot-cowfish-sleepy-low-power.gif` | | |
| Keep the state-specific GIFs separate. Do not use a single mixed-state GIF for | |
| loading, because it makes the pet jump between unrelated actions. | |
| ## Tab Icons | |
| | Tab | Icon | | |
| | --- | --- | | |
| | Resumo | `assets/tabs/tab-resumo.png` | | |
| | Orcamentos | `assets/tabs/tab-orcamentos.png` | | |
| | Reservas | `assets/tabs/tab-reservas.png` | | |
| | Embarques | `assets/tabs/tab-embarques.png` | | |
| | Pagamentos | `assets/tabs/tab-pagamentos.png` | | |
| | Pedidos | `assets/tabs/tab-pedidos.png` | | |
| | Hospedagens | `assets/tabs/tab-hospedagens.png` | | |
| | Documentos | `assets/tabs/tab-documentos.png` | | |
| | Nao categorizados | `assets/tabs/tab-nao-categorizados.png` | | |
| | Conversa | `assets/tabs/tab-conversa.png` | | |
| | Rastreamento | `assets/tabs/tab-rastreamento.png` | | |
| The tab icons are transparent skeuomorphic travel glyphs in the Navy/teal | |
| palette with soft glossy highlights, designed to sit directly on dark | |
| backgrounds (the sidebar and the summary board) without a plate. They should be | |
| displayed at `28px` to `32px` in tabs and the board, and can scale to `64px` in | |
| empty states or summaries. | |
| ## UI Shape Language | |
| - Use compact cards for repeated data, not large decorative hero cards. | |
| - Prefer `8px` radius for dashboard cards and inputs. | |
| - Use circular or softly rounded icon badges for navigation and status. | |
| - Keep icon strokes Navy and use a single accent per icon. | |
| - Avoid nested cards. Use spacing, section bands, and clear headings instead. | |
| - Keep text density appropriate for a CRM: compact, scan-friendly, and calm. | |
| ## Illustration Rules | |
| - The cowfish should always have Mango body, Coral spots, Teal fins, Navy visor, | |
| tiny horns, antenna, and travel tag. | |
| - Keep the face expressive with simple visor eyes; do not add a mouth outside | |
| the visor unless it is inside the generated state art. | |
| - Travel cues should be small: tag, suitcase, boarding pass, route line, | |
| document scan beam. | |
| - Do not introduce other mascots or animals. | |
| - Do not use realistic fish photography, dark sci-fi robots, or generic | |
| chatbot heads. | |
| ## Motion Rules | |
| Recommended placements: | |
| - Upload processing: `robot-cowfish-loading-puffed.gif`. | |
| - Vision extraction: `robot-cowfish-scanning-document.gif`. | |
| - Q&A: `robot-cowfish-thinking.gif`. | |
| - Done state: `robot-cowfish-celebrating-reservation.gif`. | |
| - Empty state: `robot-cowfish-sleepy-low-power.gif` or | |
| `robot-cowfish-smiling.gif`. | |
| Keep the GIF under the main status message or beside a progress area. Do not | |
| place animated mascot states inside dense tables. | |