Workspace Studio (Ativos Criativos e Penpot)
O workspace Studio serve como o núcleo criativo e estrutural multidisciplinar do ecossistema Elo Orgânico. Ele funciona como o repositório mestre da estratégia de marca, fontes de design de alta fidelidade em suítes profissionais e uma camada de orquestração técnica para nosso ambiente de design self-hosted integrado com o assistente Aide AI.
- Identidade de Marca
- Penpot & Aide
- Studio & Ativos Criativos
Estratégia Visual e Governança
A identidade visual é baseada no arquétipo "Everyman" (comum/cidadão comum), priorizando acessibilidade, empatia e uma orientação realista voltada para a comunidade. A governança é mantida por meio de um sistema de design estritamente baseado em tokens projetado para conformidade com a norma WCAG AAA.
Filosofia Core e Pilares
- Pertencimento: Fomentar a propriedade comunitária e a participação coletiva.
- Simplicidade Honesta: Operações transparentes entregues através de interfaces intuitivas e funcionais.
- Conexão Humana: Manter o vínculo social em cada transação digital.
- Conceito: "De produtor para produtor, da terra para a mesa."
Slogans da Marca
| Contexto | Slogan |
|---|---|
| Principal | "Sua comunidade, nossa colheita." |
| Funcional | "Compartilhamento orgânico, fácil como deve ser." |
| Marketing | "Tão natural quanto nossa amizade." |
Especificação Completa da Paleta de Cores
A identidade de cores evoca naturalidade combinada com a simplicidade da comunidade. Todos os tokens são priorizados para acessibilidade e flexibilidade semântica.
Identidade Primária (Tríade da Marca)
| Amostra | Token | Hex | Aplicação Funcional |
|---|---|---|---|
| Olive Leaf | #8EA637 | Identificador primário da marca e componentes interativos. | |
| Sprout Green | #C9F2AC | Suporte secundário, destaques e luminosidade. | |
| Deep Forest | #022601 | Bases sólidas, texto de alto contraste e bordas estruturais. |
Sistema de Fundo (Superfícies)
| Amostra | Token | Hex | Uso Sugerido |
|---|---|---|---|
| Natural Fiber | #F2E8C9 | Fundo Claro (Base). Creme quente. | |
| Coffee Soil | #400101 | Fundo Escuro (Base). Fundo principal para o Modo Escuro. | |
| Mint Whisper | #F1F8E9 | Fundo Claro (Tom). Superfícies suaves de destaque. | |
| Canopy Dark | #02590F | Fundo Escuro (Sombra). Modais e barras laterais. |
Cores Neutras Estruturais
| Amostra | Token | Hex | Uso Sugerido |
|---|---|---|---|
| Raw Line | #E6DCC3 | Bordas de Fundo Claro. | |
| Night Line | #2C1A1A | Bordas de Fundo Escuro. | |
| Disabled Gray | #A89F91 | Estados desabilitados. Cinza quente. |
Destaque e Feedback
| Amostra | Token | Hex | Propósito |
|---|---|---|---|
| Harvest Pumpkin | #F2622E | CTA / Ação Primária. | |
| Sun Pollen | #F2A341 | Destaques / Badges. | |
| Emerald Fresh | #2ECC71 | Estados de sucesso. | |
| Clay Error | #D9042B | Alertas críticos. | |
| Ripe Warning | #F2C84B | Avisos e alertas de precaução. | |
| Water Info | #2F80ED | Mensagens informativas e dicas. |
Tipografia e Engenharia de Fontes
O sistema utiliza a família de fontes Nunito (Rounded), gerenciada como um ativo centralizado dentro do workspace @studio para garantir a paridade entre pacotes. Títulos são priorizados nos pesos Bold, enquanto o corpo de texto segue as especificações de peso Regular.
- Distribuição: As fontes são empacotadas via
@fontsource/nunitoe injetadas automaticamente nos estilos globais através do arquivo centralizadotheme.css. - Desempenho: A implementação utiliza Variable Fonts (
variable.css) para fornecer todo o espectro de pesos (200-900) com uma única requisição HTTP, otimizando as Core Web Vitals.
Implementação Técnica: Sistema Híbrido de Tokens
O sistema de design emprega um modelo de Fonte Única de Verdade Híbrida (Hybrid SSOT), unindo a CSS de alto desempenho com a engenharia TypeScript fortemente tipada.
| Camada | Caminho do Arquivo | Propósito Técnico |
|---|---|---|
| Fonte de Verdade (TS) | src/tokens/colors.ts | Objeto fortemente tipado (HEX) para componentes React, animações GSAP e materiais Three.js. |
| Camada de Distribuição (CSS) | src/tokens/theme.css | Bloco @theme do Tailwind CSS v4 e resets básicos para entrega sem runtime no navegador. |
| Registro de Ícones | src/icons/index.tsx | Barrel com curadoria de ícones do FontAwesome e um wrapper padronizado de componente Icon (forwardRef). |
Engenharia de Design Self-Hosted
O Elo Orgânico utiliza uma stack do Penpot distribuída integrada com o Aide, um assistente de engenharia AI-native. Esta configuração garante soberania absoluta de dados e sincronização automatizada entre as camadas de design e a base de código.
Arquitetura de Infraestrutura
O ambiente é orquestrado via uma stack do Docker multi-container, utilizando backends em nuvem para durabilidade.
- Orquestração: Gerenciada via
studio/penpot/compose.yaml(Frontend, Backend, Exporter, Valkey). - Camada de Banco de Dados: Persistência do PostgreSQL hospedada no Neon.tech para integridade transacional sem servidor (serverless).
- Armazenamento de Objetos: Ativos binários são persistidos em buckets compatíveis com S3 (Backblaze B2 ou Filebase), garantindo um footprint mínimo no Git.
Aide: Integração Nativa de IA
O Aide funciona como uma ponte Model Context Protocol (MCP), permitindo que agentes de IA interajam diretamente com a API de Plugins do Penpot para consultas avançadas e transformações de layout.
Lógica da Ponte Aide
- Protocolo: Comunicação WebSocket bidirecional entre o servidor
@penpot/mcpe o ambiente Penpot. - Segurança: O Aide opera dentro da rede isolada
penpot-net, fornecendo um gateway controlado para manipulação do design. - Conectividade: Utiliza a Porta 4402 para auditorias e sincronização de design em tempo real.
Scripts Operacionais
| Comando | Responsabilidade Técnica |
|---|---|
pnpm penpot:up | Inicializa os serviços core de design em http://localhost:9005. |
pnpm penpot:update | Baixa as últimas imagens de serviço e realiza um reinício gradual (rolling restart). |
pnpm aide:up | Ativa a ponte do Aide (Penpot MCP) para manipulação de design por IA. |
pnpm aide:down | Desativa a ponte de automação. |
Regras Obrigatórias de Manipulação por IA
- Reutilização de Componentes: Sempre verifique a biblioteca de componentes existente (Penpot) ou a biblioteca de UI (
instance/apps/web/src/components) antes de criar novos elementos. O Aide deve priorizar os tokens e componentes existentes do design system. - Lógica de Tokens Primeiro: As exportações de design para código devem usar estritamente as propriedades personalizadas do CSS (CSS Custom Properties) derivadas de
src/tokens/para cores, fontes e espaçamento. - Otimização de SVG: Certifique-se de que o código SVG exportado está otimizado, segue os padrões de ícones do projeto e está integrado através do registro
@elo-organico/studio/icons. - Hierarquia de Camadas: A manutenção do agrupamento semântico é obrigatória. Os elementos devem ser organizados em páginas e frames claros (ex:
Layout/Grid,Components/Buttons).
Repositório Central de Criação
O workspace Studio atua como o cofre mestre para todos os ativos criativos da marca Elo Orgânico. Ele centraliza arquivos de origem de suítes de design e produção profissionais, garantindo uma evolução visual controlada por versão e eliminando o gerenciamento fragmentado de ativos.
Integração com Ferramentas de Design
O repositório suporta fluxos de trabalho com múltiplas ferramentas, mantendo arquivos de origem brutos que servem como a origem canônica para todos os ativos prontos para produção.
- Gráficos Vetoriais: Arquivos mestre do Adobe Illustrator (
.ai) para logotipos, exploração de tipografia e iconografia. - Imagens Digitais: Fontes do Adobe Photoshop (
.psd) para ativos rasterizados de alta fidelidade e material de marketing. - Engenharia 3D: Arquivos mestre do Blender (
.blend) para componentes de plataforma e visualizações espaciais (ex:Avokado.blend). - Pós-Produção: Projetos do Adobe Premiere (
.prproj) para tutoriais da comunidade e conteúdo de marketing.
Gerenciamento de Ativos de Origem
Todos os arquivos mestre de alta fidelidade são mantidos estritamente dentro da estrutura do diretório assets/sources/**. Isso garante que toda a história da identidade visual da marca seja preservada e acessível dentro do contexto do monorepo.
Pipeline de Produção
Os arquivos mestre transitam para as camadas da aplicação através de um pipeline otimizado:
- Ícones: As fontes são processadas em SVGs otimizados em
src/icons/. - Modelos 3D: Os arquivos mestre do Blender são exportados para o formato GLB para renderização em tempo de execução.
- Tokens: Constantes visuais são exportadas como definições do TypeScript fortemente tipadas de
src/tokens/.
Exportações com Namespace do Workspace
Pacotes internos acessam ativos criativos através de exportações estritamente definidas para garantir o isolamento arquitetônico:
@elo-organico/studio/icons: Biblioteca SVG otimizada e registro de componentes Icon com curadoria (wrapper forwardRef).@elo-organico/studio/logos: Logotipos canônicos da marca.@elo-organico/studio/tokens: Constantes de design fortemente tipadas para a lógica JS/TS.@elo-organico/studio/theme.css: Tema Tailwind CSS v4 sem runtime e resets globais.