--- name: "Tec Capital" version: "1.0" updated: "01/11/2026" description: "Assume a tecnologia de instituições de classe e de empresas: moderniza o que existe, integra o que está solto e continua cuidando depois da entrega." 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: "#1A4E89" primary-hover: "#143D6C" on-primary: "#F1F1F1" accent-soft: "#E4EAF1" accent-ink: "#1A4E89" inverse: "#1F1F1F" on-inverse: "#F1F1F1" dark: canvas: "#1F1F1F" tray: "#2A2A2A" part: "#383838" part-hover: "#404040" part-soft: "#333333" ink: "#F1F1F1" ink-muted: "#ABB1B6" primary: "#6FA8E6" primary-hover: "#94BFEE" on-primary: "#1F1F1F" accent-soft: "#343C44" accent-ink: "#94BFEE" inverse: "#F1F1F1" on-inverse: "#1F1F1F" brand: azul-tec: "#1A4E89" azul-noite: "#002242" azul-ceu: "#6FA8E6" neutral: grafite: "#1F1F1F" nevoa: "#F1F1F1" typography: destaque: { fontFamily: "Azonix", fontWeight: 400, fontSize: 52px, lineHeight: 1.05, letterSpacing: "0.02em", textTransform: uppercase } titulo-1: { fontFamily: "Azonix", fontWeight: 400, fontSize: 36px, lineHeight: 1.15, letterSpacing: "0.01em", textTransform: uppercase } titulo-2: { fontFamily: "Caladea", fontWeight: 700, fontSize: 28px, lineHeight: 1.2, letterSpacing: "0" } subtitulo: { fontFamily: "Caladea", fontWeight: 400, fontSize: 20px, lineHeight: 1.4, letterSpacing: "0" } texto: { fontFamily: "Caladea", fontWeight: 400, fontSize: 17px, lineHeight: 1.6, letterSpacing: "0" } rotulo: { fontFamily: "JetBrains Mono", fontWeight: 500, fontSize: 13px, lineHeight: 1.3, letterSpacing: "0.08em", textTransform: uppercase } dado: { fontFamily: "JetBrains Mono", fontWeight: 400, fontSize: 14px, lineHeight: 1.4, letterSpacing: "0" } 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: sinal: { easing: "cubic-bezier(.2,0,0,1)", duration: 320ms } encaixe: { 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: 700ms } traco: { easing: "cubic-bezier(.65,0,.35,1)", duration: 1100ms } constelacao: { easing: "cubic-bezier(.16,1,.3,1)", duration: 1400ms } saida: { easing: "cubic-bezier(.4,0,1,1)", duration: 240ms } pulso: { easing: "cubic-bezier(.45,0,.55,1)", duration: 2400ms } --- # Tec Capital · DESIGN.md Sistema visual da Tec Capital 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 Assume a tecnologia de instituições de classe e de empresas: moderniza o que existe, integra o que está solto e continua cuidando depois da entrega. Símbolo: Cruzeiro do Sul, circuitos e o traçado de Brasília num círculo. Dentro do círculo, o traçado de Brasília abre espaço para o Cruzeiro do Sul; os circuitos chegam de fora e se ligam às estrelas. O caminho, a conexão e a origem: tudo num desenho só. Tom visual: responsável, precisa, próxima. Monocromático primeiro (grafite e névoa), com um único destaque por tela. ## 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` | #1A4E89 | #6FA8E6 | Botão principal, link, foco: o destaque da marca | | `primary-hover` | #143D6C | #94BFEE | Botão principal sob o ponteiro | | `on-primary` | #F1F1F1 | #1F1F1F | Texto sobre o destaque | | `accent-soft` | #E4EAF1 | #343C44 | Fundo tingido (selos, avisos) | | `accent-ink` | #1A4E89 | #94BFEE | Texto sobre o fundo tingido | | `inverse` | #1F1F1F | #F1F1F1 | Peça invertida (aviso, item ativo) | | `on-inverse` | #F1F1F1 | #1F1F1F | Texto sobre a peça invertida | | Cor | HEX | Uso | |---|---|---| | Azul Tec | #1A4E89 | O disco do símbolo. Texto, botão e destaque no tema claro; fundo de capa e de bloco de marca. | | Azul-noite | #002242 | Fundos de capa, palco das animações e céu da constelação. Texto névoa por cima. | | Azul-céu | #6FA8E6 | Texto, botão e destaque no tema escuro; circuitos e realces sobre azul-noite. O Azul Tec sobre grafite tem 1,96:1; o azul-céu tem 6,6:1. | | Grafite | #1F1F1F | Letreiro da colorida para fundo claro e da positiva, texto no claro e fundo do tema escuro. | | Névoa | #F1F1F1 | Letreiro da colorida e da negativa, interior do símbolo 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 #007D2F, fundo #E2F2E8, texto #006826. Envio concluído, sistema no ar, etapa aprovada. - Atenção: sinal #FCC100, fundo #FFF5D6, texto #8A6400. Prazo próximo, manutenção programada, revisão. - Erro: sinal #A00000, fundo #FBE6E6, texto #A00000. Campo inválido, falha no envio, incidente. ## 3. Tipografia - **Caladea** (SIL Open Font License 1.1): Texto corrido, subtítulos e documentos. Substituta livre e com as mesmas medidas da Cambria, a fonte oficial dos documentos desde 2020. - **JetBrains Mono** (SIL Open Font License 1.1): Rótulos, dados técnicos, códigos de cor, botões e legendas. A voz técnica da marca. - **Azonix** (Fonte gratuita (Free Font, autor MixoFX; licença comercial e web a confirmar)): Títulos de destaque e de capítulo, sempre em caixa alta e curtos. É a família do CAPITAL do logotipo: nunca recomponha o logotipo com texto digitado. Larga e forte: até seis palavras por título. Não tem acentos: desenha Ç como C e à como A, então escolha títulos sem acento ou use a Caladea 700. Nunca em parágrafo nem abaixo de 14 px. - Substitutas: Sem as fontes instaladas (Word e PowerPoint de outro computador): Cambria no lugar da Caladea (já vem no Windows e no Office), Consolas no lugar da JetBrains Mono. Azonix e Ocean não têm substituta: use os títulos em Cambria negrito em caixa alta. | Estilo | Família | Peso | Tamanho / entrelinha | Uso | |---|---|---|---|---| | destaque | Azonix | 400 | 52/55 px · caixa alta | Título de capa e de campanha. Curto. | | titulo-1 | Azonix | 400 | 36/41 px · caixa alta | Título de página e de peça. | | titulo-2 | Caladea | 700 | 28/34 px | Título de seção. | | subtitulo | Caladea | 400 | 20/28 px | Linha fina, abertura de parágrafo. | | texto | Caladea | 400 | 17/27 px | Texto corrido em tela. Impresso: 10,5 a 11,5 pt. | | rotulo | JetBrains Mono | 500 | 13/17 px · caixa alta | Rótulos de seção, etiquetas e dados. | | dado | JetBrains Mono | 400 | 14/20 px | Números, códigos e valores técnicos. | Números em algarismos tabulares. Fontes no kit comum: `ecossistema/05_TYPOGRAPHY/`. ## 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: Caladea, 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: Sinal `cubic-bezier(.2,0,0,1)` 320 ms (Entradas de interface: o bloco chega rápido e para exato, sem balançar); Encaixe `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)` 700 ms (Estrelas e nós do circuito: chegam com uma mola curta, passam 5% e assentam); Traço `cubic-bezier(.65,0,.35,1)` 1100 ms (Circuitos se desenhando e o traçado do símbolo: aceleração e freada simétricas); Constelação `cubic-bezier(.16,1,.3,1)` 1400 ms (Estrelas acendendo e o disco do símbolo: rápido no começo, longo no pouso); Saída `cubic-bezier(.4,0,1,1)` 240 ms (Fechar menu, aviso sumindo); Pulso `cubic-bezier(.45,0,.55,1)` 2400 ms (Loops calmos: o pulso de dados correndo no circuito). 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. - Horizontal, fundo claro: `../03_LOGOS/01_RGB-DIGITAL/Tec-Capital_Logo_Horizontal_Positive_RGB_v1.0.svg` - Horizontal, fundo escuro: `../03_LOGOS/01_RGB-DIGITAL/Tec-Capital_Logo_Horizontal_Negative_RGB_v1.0.svg` - Vertical: `../03_LOGOS/01_RGB-DIGITAL/Tec-Capital_Logo_Vertical_Positive_RGB_v1.0.svg` · Símbolo: `../03_LOGOS/01_RGB-DIGITAL/Tec-Capital_Logo_Symbol_Color_RGB_v1.0.svg` - Mínimo: horizontal 80 px, vertical 90 px, símbolo 24 px. Área de proteção: a altura das letras do letreiro em volta do logo. ## 7. Voz e tom - **Responsável**: Assume a tecnologia do cliente e responde por ela depois da entrega: quem contrata sabe quem procurar. - **Precisa**: Diz o que vai fazer, em que etapa e em quanto tempo. Nada de promessa vaga nem de jargão. - **Próxima**: Fala com a diretoria, com a secretaria e com o inscrito. Educada, na primeira pessoa do plural. - Tagline (proposta a validar, não usar em campanha antes da aprovação): “Pontes entre pessoas e tecnologia.” - Diga o que vai acontecer, quando e quem responde. Nunca invente preço, prazo, contato, cliente, número ou depoimento: deixe [A CONFIRMAR]. - Nomes: Tec Capital, Ordo 360, Apta 360, Clube TEC. Nunca TecCapital, Tech Capital, Ordo360 ou Safira AI. ## 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. - Constelação e circuitos como apoio: circuito na base, horizonte no terço de baixo, céu com o Cruzeiro do Sul em cima. 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 Azonix 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 Azonix em texto corrido nem a Ocean fora do logotipo. - Nada de robô, cérebro de IA, cadeado brilhante, binário ou placa-mãe verde. - O símbolo tem disco cheio: Em todas as versões o interior do símbolo é preenchido (azul, grafite ou névoa). Não existe versão vazada aprovada: para carimbo e gravação em uma cor, use a positiva (grafite) ou a negativa (névoa) inteira. - Colorida para fundo claro × colorida: A colorida tem o letreiro em névoa e foi feita para fundo escuro. Em fundo claro, use a colorida para fundo claro (letreiro grafite) ou a azul. - TEC fino, CAPITAL forte: O peso diferente das duas palavras é desenho: nunca recomponha o letreiro com texto digitado nem iguale os pesos. Manual completo: /manual · versão 1.0 · 01/11/2026. Design: Kadu Veronez.