--- name: "Ecossistema Oceanos" version: "1.0" updated: "30/10/2026" description: "A Oceanos articula inteligência de mercado, desenvolvimento de negócios, atuação marítima e conexões empresariais para aproximar empresas de oportunidades no Brasil e no exterior." source: manual de marca (gerado; não edite à mão) colors: light: canvas: "#FAFAFA" tray: "#FAFAFA" part: "#F1F1F1" part-hover: "#E8E8E8" part-soft: "#F7F7F7" ink: "#1F1F1F" ink-muted: "#575D63" primary: "#0B206A" primary-hover: "#07174F" on-primary: "#F1F1F1" accent-soft: "#E2E4ED" accent-ink: "#0B206A" inverse: "#1F1F1F" on-inverse: "#F1F1F1" dark: canvas: "#1F1F1F" tray: "#2A2A2A" part: "#383838" part-hover: "#404040" part-soft: "#333333" ink: "#F1F1F1" ink-muted: "#ABB1B6" primary: "#8BDDFF" primary-hover: "#B0E8FF" on-primary: "#1F1F1F" accent-soft: "#384348" accent-ink: "#B0E8FF" inverse: "#F1F1F1" on-inverse: "#1F1F1F" brands: oceanos: { primary-light: "#0B206A", primary-dark: "#8BDDFF", block: "#0B206A" } oceanos-shipping-agency: { primary-light: "#A84100", primary-dark: "#FF7E2E", block: "#0B206A" } oceanos-solutions: { primary-light: "#0B6A54", primary-dark: "#00C268", block: "#0B6A54" } oceanos-events-global-bridge: { primary-light: "#7A5F00", primary-dark: "#FDD74E", block: "#1F1F1F" } neutral: grafite: "#1F1F1F" nevoa: "#F1F1F1" typography: destaque: { fontFamily: "Nico Moji", fontWeight: 400, fontSize: 56px, lineHeight: 1.0, letterSpacing: "0.02em", textTransform: uppercase } titulo-1: { fontFamily: "Outfit", fontWeight: 500, fontSize: 44px, lineHeight: 1.1, letterSpacing: "-0.01em" } titulo-2: { fontFamily: "Outfit", fontWeight: 500, fontSize: 28px, lineHeight: 1.2, letterSpacing: "0" } subtitulo: { fontFamily: "Outfit", fontWeight: 400, fontSize: 20px, lineHeight: 1.4, letterSpacing: "0" } texto: { fontFamily: "Outfit", fontWeight: 400, fontSize: 16px, lineHeight: 1.6, letterSpacing: "0" } descritor: { fontFamily: "Outfit", fontWeight: 200, fontSize: 14px, lineHeight: 1.3, letterSpacing: "0.4em", textTransform: uppercase } rotulo: { fontFamily: "Outfit", fontWeight: 500, fontSize: 13px, lineHeight: 1.2, letterSpacing: "0.12em", textTransform: uppercase } rounded: peca: 22px barra: 27px painel: 30px tela: 38px full: 9999px spacing: module: 8px scale: [2px, 4px, 5px, 8px, 13px, 16px, 24px, 32px, 48px, 96px] components: part: { height: 44px, rounded: 22px, background: part, border: none } part-compact: { height: 32px, rounded: 9999px } bar-tray: { height: 54px, padding: 5px, rounded: 27px } panel-tray: { padding: 8px, rounded: 30px, gap: 8px } button-primary: { height: 44px, rounded: 22px, background: primary, color: on-primary } icon: { size: 18px, strokeWidth: 2, library: lucide } motion: mare: { easing: "cubic-bezier(.4,0,.2,1)", duration: 800ms } mola: { easing: "linear(0,0.029,0.101,0.202,0.316,0.434,0.548,0.653,0.747,0.827,0.892,0.945,0.985,1.014,1.034,1.047,1.053,1.054,1.052,1.048,1.043,1.036,1.03,1.024,1.018,1.013,1.009,1.005,1.003,1.001,0.999,0.998,0.997,0.997,0.997,0.997,0.997,0.998,0.998,0.998,1)", duration: 900ms } assentar: { easing: "cubic-bezier(.16,1,.3,1)", duration: 1400ms } horizonte: { easing: "cubic-bezier(.2,.8,.2,1)", duration: 500ms } saida: { easing: "cubic-bezier(.4,0,1,1)", duration: 350ms } respiro: { easing: "cubic-bezier(.45,0,.55,1)", duration: 2400ms } --- # Ecossistema Oceanos · DESIGN.md Sistema visual da Ecossistema Oceanos para ferramentas de design e de código (Google Stitch, v0, Cursor, Claude Code e afins). Os tokens acima são a fonte; o texto abaixo explica o papel de cada um. Gerado do manual de marca: não edite à mão, peça a mudança ao designer. ## 1. Atmosfera A Oceanos articula inteligência de mercado, desenvolvimento de negócios, atuação marítima e conexões empresariais para aproximar empresas de oportunidades no Brasil e no exterior. Quatro marcas, um letreiro e as mesmas ondas; muda o sinal do símbolo e a cor de destaque: - **Oceanos**: Identidade institucional, visão integrada e direcionamento de cada demanda para a frente certa. Destaque #0B206A (claro) / #8BDDFF (escuro). - **Oceanos Shipping Agency**: Agenciamento, suporte técnico e serviços para operações navais, offshore e portuárias. Destaque #A84100 (claro) / #FF7E2E (escuro). - **Oceanos Solutions**: Estratégia, inteligência de mercado, prospecção e representação para empresas que expandem para o exterior ou entram no Brasil. Destaque #0B6A54 (claro) / #00C268 (escuro). - **Oceanos Events Global Bridge**: Encontros empresariais, fóruns, rodadas de negócios, missões e feiras, no Brasil e no exterior. Destaque #7A5F00 (claro) / #FDD74E (escuro). ## 2. Cores e papéis | Token | Claro | Escuro | Papel | |---|---|---|---| | `canvas` | #FAFAFA | #1F1F1F | Fundo da página | | `tray` | #FAFAFA | #2A2A2A | Bandejas (cartões, menus, painéis) | | `part` | #F1F1F1 | #383838 | Peças: botões, campos, linhas | | `part-hover` | #E8E8E8 | #404040 | Peça sob o ponteiro | | `part-soft` | #F7F7F7 | #333333 | Linha aberta, prévia, fundo de tabela | | `ink` | #1F1F1F | #F1F1F1 | Texto principal | | `ink-muted` | #575D63 | #ABB1B6 | Texto secundário, rótulos | | `primary` | #0B206A | #8BDDFF | Botão principal, link, foco: o destaque da marca | | `primary-hover` | #07174F | #B0E8FF | Botão principal sob o ponteiro | | `on-primary` | #F1F1F1 | #1F1F1F | Texto sobre o destaque | | `accent-soft` | #E2E4ED | #384348 | Fundo tingido (selos, avisos) | | `accent-ink` | #0B206A | #B0E8FF | Texto sobre o fundo tingido | | `inverse` | #1F1F1F | #F1F1F1 | Peça invertida (aviso, item ativo) | | `on-inverse` | #F1F1F1 | #1F1F1F | Texto sobre a peça invertida | No ecossistema, `primary` muda por marca (tabela de marcas no front matter); acima, os valores da Oceanos. | Cor | HEX | Uso | |---|---|---| | Grafite | #1F1F1F | Letreiro das versões positiva e preta, texto no claro e fundo do tema escuro. | | Névoa | #F1F1F1 | Letreiro das versões negativa e branca, interiores claros dos símbolos e fundo do tema claro. | Texto precisa de 4,5:1 nos dois temas; ícone e texto grande, 3:1. Cores funcionais (sucesso, atenção, erro) só para estado de interface: - Sucesso: sinal #1F9D55, fundo #E3F4EA, texto #18804A. Envio concluído, etapa aprovada, confirmação. - Atenção: sinal #F5A524, fundo #FBEFD9, texto #975A00. Prazo próximo, documento pendente, revisão. - Erro: sinal #E5484D, fundo #FCE9E8, texto #C9363B. Campo inválido, falha no envio, ação destrutiva. ## 3. Tipografia - **Outfit** (SIL Open Font License 1.1): Títulos, textos, botões e rótulos. Os descritores das logos (SHIPPING AGENCY, SOLUTIONS, EVENTS GLOBAL BRIDGE) usam a Outfit fina, em caixa alta, com cerca de 0,4 em de espaçamento. - **Nico Moji** (SIL Open Font License 1.1): Títulos de destaque, em caixa alta e com moderação. É a fonte em que o letreiro do logotipo foi desenhado: nunca recompor o logotipo com texto digitado. Não tem acentos nem cedilha (conferido no arquivo da fonte): use só em palavras sem acento, como nomes das marcas, palavras em inglês e números. Título com acento vai em Outfit. - Substitutas: Sem as fontes instaladas (Word e PowerPoint de outro computador): Century Gothic ou Arial no lugar da Outfit. A Nico Moji não tem substituta: use Outfit 600 em caixa alta. | Estilo | Família | Peso | Tamanho / entrelinha | Uso | |---|---|---|---|---| | destaque | Nico Moji | 400 | 56/56 px · caixa alta | Título de destaque de campanha e capa. Só palavras sem acento. | | titulo-1 | Outfit | 500 | 44/48 px | Título de página e de peça. | | titulo-2 | Outfit | 500 | 28/34 px | Título de seção. | | subtitulo | Outfit | 400 | 20/28 px | Linha fina, abertura de parágrafo. | | texto | Outfit | 400 | 16/26 px | Texto corrido em tela. Impresso: 10 a 11 pt. | | descritor | Outfit | 200 | 14/18 px · caixa alta | Descritor das frentes e rótulos curtos. Nunca em frase longa. | | rotulo | Outfit | 500 | 13/16 px · caixa alta | Rótulos de seção e etiquetas. | Números em algarismos tabulares. Fontes no kit comum: `ecossistema/05_TIPOGRAFIA/`. ## 4. Espaçamento e raios (Zuik · Tray & Parts) - Módulo de 8 px; escala: 2, 4, 5, 8, 13, 16, 24, 32, 48, 96 px. - Raios: peça 22 (pílula de 44), barra 27 (54 de altura), painel 30, tela que hospeda folhas 38. - Regra concêntrica: raio de fora = raio de dentro + recuo (painel 30 = linha 22 + 8; barra 27 = peça 22 + 5). Nada de raios soltos como 8, 12 ou 16. - O que encosta no canto de uma bandeja fica recuado exatamente o recuo dela, nos dois eixos, com raio R − recuo. - Só bandejas têm sombra; peças são chapadas, sem borda. Componentes fluidos de 300 px até a largura máxima, sem largura fixa. ## 5. Componentes Use a biblioteca Zuik (https://zuik.kadu.pro) com esta pele: Outfit, os neutros acima e o destaque da marca. - **Tray (bandeja)**: Contêiner flutuante sem borda: fundo `tray`, anel de 1 px e sombra suave. Painel: raio 30, recuo 8. Barra de uma linha: raio 27, recuo 5, altura 54. - **Part (peça)**: Tudo o que se toca dentro da bandeja: botão, campo, linha, aba, chip. Pílula de 44 px (raio 22), fundo `part`, sem borda e sem sombra. - **Button**: Pílula de 44 px. Um único primário por bandeja (`primary` com texto `on-primary`); os demais em `part`. Ação destrutiva pede segurar para confirmar. - **Icon button**: Círculo de 44 px com ícone de 18 px; o rótulo aparece como dica só no mouse ou no teclado. - **Input / Select**: Pílula `part` sem borda; o rótulo sobe para a borda com foco ou valor; foco com anel de 2 px no destaque. - **Segmented tabs**: Barra de 54 px; a aba ativa ganha o indicador `part` que desliza (mola 280/25). - **Switch / Checkbox**: Liga em verde de sucesso; caixa de seleção redonda. - **Alert / Badge / Toast**: Selo de ícone tingido (`accent-soft` + `accent-ink`); status sempre com texto, nunca só cor. - **Dialog / Sheet**: Bandeja de raio 30 que flutua 8 px longe das bordas; nunca uma placa colada na borda. - Movimento: Maré `cubic-bezier(.4,0,.2,1)` 800 ms (Entrada de blocos grandes, ondas acendendo no carregando); Mola `linear(0,0.029,0.101,0.202,0.316,0.434,0.548,0.653,0.747,0.827,0.892,0.945,0.985,1.014,1.034,1.047,1.053,1.054,1.052,1.048,1.043,1.036,1.03,1.024,1.018,1.013,1.009,1.005,1.003,1.001,0.999,0.998,0.997,0.997,0.997,0.997,0.997,0.998,0.998,0.998,1)` 900 ms (Ondas, letras, células e o leme chegam com uma mola: passam 5% do lugar e assentam); Assentar `cubic-bezier(.16,1,.3,1)` 1400 ms (Sol nascendo, profundidade do símbolo e descritor: rápido no começo, longo no pouso); Horizonte `cubic-bezier(.2,.8,.2,1)` 500 ms (Títulos entrando da esquerda para a direita); Saída `cubic-bezier(.4,0,1,1)` 350 ms (Fechar menu, aviso sumindo); Respiro `cubic-bezier(.45,0,.55,1)` 2400 ms (Loops calmos: ondas e símbolo em movimento contínuo). Respeite “reduzir movimento”. ## 6. Logo O logotipo **nunca é desenhado, recriado em SVG, digitado ou montado** por você. Use só os arquivos oficiais do kit; em imagem gerada, deixe a área livre para aplicar o arquivo depois. **Oceanos** - Horizontal, fundo claro: `/marca/oceanos/03_LOGOS/01_RGB-DIGITAL/Oceanos_Logo_Horizontal_Positiva_RGB_v1.0.svg` - Horizontal, fundo escuro: `/marca/oceanos/03_LOGOS/01_RGB-DIGITAL/Oceanos_Logo_Horizontal_Negativa_RGB_v1.0.svg` - Vertical: `/marca/oceanos/03_LOGOS/01_RGB-DIGITAL/Oceanos_Logo_Vertical_Positiva_RGB_v1.0.svg` · Símbolo: `/marca/oceanos/03_LOGOS/01_RGB-DIGITAL/Oceanos_Logo_Simbolo_Colorida_RGB_v1.0.svg` - Mínimo: horizontal 100 px, vertical 80 px, símbolo 24 px. Área de proteção: a altura das letras do letreiro em volta do logo. **Oceanos Shipping Agency** - Horizontal, fundo claro: `/marca/oceanos-shipping-agency/03_LOGOS/01_RGB-DIGITAL/Oceanos-Shipping-Agency_Logo_Horizontal_Positiva_RGB_v1.0.svg` - Horizontal, fundo escuro: `/marca/oceanos-shipping-agency/03_LOGOS/01_RGB-DIGITAL/Oceanos-Shipping-Agency_Logo_Horizontal_Negativa_RGB_v1.0.svg` - Vertical: `/marca/oceanos-shipping-agency/03_LOGOS/01_RGB-DIGITAL/Oceanos-Shipping-Agency_Logo_Vertical_Positiva_RGB_v1.0.svg` · Símbolo: `/marca/oceanos-shipping-agency/03_LOGOS/01_RGB-DIGITAL/Oceanos-Shipping-Agency_Logo_Simbolo_Colorida_RGB_v1.0.svg` - Mínimo: horizontal 150 px, vertical 120 px, símbolo 24 px. Área de proteção: a altura das letras do letreiro em volta do logo. **Oceanos Solutions** - Horizontal, fundo claro: `/marca/oceanos-solutions/03_LOGOS/01_RGB-DIGITAL/Oceanos-Solutions_Logo_Horizontal_Positiva_RGB_v1.0.svg` - Horizontal, fundo escuro: `/marca/oceanos-solutions/03_LOGOS/01_RGB-DIGITAL/Oceanos-Solutions_Logo_Horizontal_Negativa_RGB_v1.0.svg` - Vertical: `/marca/oceanos-solutions/03_LOGOS/01_RGB-DIGITAL/Oceanos-Solutions_Logo_Vertical_Positiva_RGB_v1.0.svg` · Símbolo: `/marca/oceanos-solutions/03_LOGOS/01_RGB-DIGITAL/Oceanos-Solutions_Logo_Simbolo_Colorida_RGB_v1.0.svg` - Mínimo: horizontal 150 px, vertical 120 px, símbolo 24 px. Área de proteção: a altura das letras do letreiro em volta do logo. **Oceanos Events Global Bridge** - Horizontal, fundo claro: `/marca/oceanos-events-global-bridge/03_LOGOS/01_RGB-DIGITAL/Oceanos-Events-Global-Bridge_Logo_Horizontal_Positiva_RGB_v1.0.svg` - Horizontal, fundo escuro: `/marca/oceanos-events-global-bridge/03_LOGOS/01_RGB-DIGITAL/Oceanos-Events-Global-Bridge_Logo_Horizontal_Negativa_RGB_v1.0.svg` - Vertical: `/marca/oceanos-events-global-bridge/03_LOGOS/01_RGB-DIGITAL/Oceanos-Events-Global-Bridge_Logo_Vertical_Positiva_RGB_v1.0.svg` · Símbolo: `/marca/oceanos-events-global-bridge/03_LOGOS/01_RGB-DIGITAL/Oceanos-Events-Global-Bridge_Logo_Simbolo_Colorida_RGB_v1.0.svg` - Mínimo: horizontal 200 px, vertical 160 px, símbolo 24 px. Área de proteção: a altura das letras do letreiro em volta do logo. ## 7. Voz e tom - Consultiva e estratégica, internacional e sofisticada (hipótese do projeto, a validar com a direção da Oceanos). - Oceanos: “Da oportunidade à operação.” (proposta a validar) - Shipping Agency: “Mão firme em cada escala.” (proposta a validar) - Solutions: “Inteligência antes do investimento.” (proposta a validar) - Events Global Bridge: “Encontro com próximo passo.” (proposta a validar) - Comece pelo objetivo de quem lê e termine com o próximo passo. Nunca invente preço, prazo, contato, cliente, número ou depoimento: deixe [A CONFIRMAR]. - Nomes: Oceanos, Oceanos Shipping Agency, Oceanos Solutions, Oceanos Events Global Bridge. “Global Bridge” nunca sozinho. ## 8. Faça - Use os tokens pelo papel (`primary`, `ink`, `part`), não pelo HEX, e ofereça tema claro e escuro. - Um primário por bandeja; o resto em `part`. Status sempre com texto. - Peças de 44 px, pílulas; ícones lucide de 18 px, traço 2. - Carta náutica como apoio: ondas na base, horizonte no terço de baixo, conteúdo acima dele. Um uso por peça. - Aplique o logo a partir do arquivo oficial, na versão certa para o fundo. ## 9. Não faça - Não desenhe, redesenhe, recolora, gire, distorça ou digite o logotipo; não escreva o nome na Nico Moji para imitá-lo. - Não use cores fora da tabela, degradês na interface nem paletas roxas ou ciano de “IA”. - Não use `rounded-md/lg/xl` em botões ou campos, bordas em peças, nem sombra em peças. - Não use Nico Moji com acento nem em texto corrido. Manual completo: / · versão 1.0 · 30/10/2026. Design: Kadu Veronez.