▸ Brand Architecture Hub
Design System
& Brand Architecture
HASHIDATA. A ponte (Hashi) entre engenharia brutalista e elegância executiva: o sistema visual que codifica o cérebro digital do C-Level.
O Manifesto Visual
Nossa identidade reflete a interseção entre a precisão brutalista da engenharia e a elegância executiva. A palavra HASHIDATA é construída como uma única peça de precisão: o símbolo atua como a Ponte (Hashi) entre o bloco de HASH e DATA. Os três estados visuais — SECURE, FLOW e AUDIT — materializam peso executivo, energia viva e profundidade técnica.
▸ Dualidade de Modos
Executive × Terminal
Relatórios C-Level, propostas e artefatos certificados. Sombras amplas, suaves e difusas. Tipografia Executive Slate sobre #FFFFFF / #F7F8FA.
Dashboards, AI Assistant e ambientes de engenharia. Glow effects e bordas neon na paleta ativa (Teal · Purple · Pink) sobre #0A0A0A / #161616.
▸ Tom de Voz
Direto · Técnico · Accountability
O Motor Visual (Logotipo)
O Nó Isométrico de três braços não é estático — é um diagrama funcional que representa a arquitetura Northbridge/Southbridge, atuando em três estados.
Sólido preto/branco. Engenharia e peso. Apresentações executivas, propostas, Certified Artifacts e C-Level.
Gradiente Neon Cyan → Purple → Magenta. Estado primário da marca: apresentações, cartões, site, capas, vídeo e projeções.
Wireframe e Fio. Versão técnica e deep tech — animações de load, brincadeiras visuais com a marca, explicação de conceitos e diagramas.
Esta versão em malha fina é ideal para microinterações e telas de carregamento. Implementar com animações lineares fluidas no fluxo das linhas (ex: CSS stroke-dashoffset), alternando sequencialmente entre Tech Teal → Core Purple → Main Pink, simulando o processamento ativo de uma malha neural.
▸ Stacked para selos e cover · Wide para cabeçalhos e documentos · Wide / Line para faixas estreitas e assinaturas. Tracejado inferior reforça a leitura de engenharia.
▸ Uso principal: apresentação institucional, cartões, site, capas, vídeo e projeções. Símbolo em gradiente neon · wordmark sólido.
▸ Wireframe expõe a malha geométrica · Fio reduz ao traço mínimo. Uso ideal: loaders animados, explicações conceituais, diagramas técnicos e composições deep tech.
Carimbo de Propriedade Técnica
Uma fusão simplificada, simétrica e sóbria entre o rigor estrutural do Audit (linhas de diagrama) e a blindagem sólida do Secure. Versão compacta e institucional projetada especificamente para atuar como selo de autenticidade.
- · Marcas d'água em relatórios analíticos
- · Assinaturas de blocos de código homologados
- · Carimbos de propriedade técnica em entregáveis
- · Certificações de artefatos gerados pelo framework HASHIDATA
▸ Selo técnico não-decorativo. Aplicar exclusivamente em contextos de certificação e prova de autoria — não substitui os Estados 1, 2 ou 3.
Restrições & Não Usos
Governança e compliance visual. A marca HASHIDATA opera como um sistema auditável — cada estado tem jurisdição estrita, cada aplicação passa por um QA. Abaixo, as cinco regras de violação que devem ser evitadas a todo custo.
Escala & Proporção
▸ Não reduzir a marca abaixo do limite de legibilidade do símbolo isométrico.
Tamanho mínimo: 24px (digital) · 12mm (impresso) para a versão Stacked. Wide / Line: 16px de altura mínima. Abaixo disso, o nó isométrico perde a leitura de engenharia.
Isolamento Perimetral · Respiro Executivo
▸ Não desrespeitar a área de respiro ao redor da marca.
Mantenha a blindagem espacial equivalente à altura da letra H ao redor de todo o lockup. Nenhum elemento tipográfico, botão de UI, ícone ou bloco gráfico tem permissão para invadir esse perímetro.
Índice de Contraste
▸ Não aplicar logos sem contraste adequado e validação de acessibilidade.
Proibido usar Secure Black em fundo escuro ou Executive White em fundo claro. Toda aplicação deve atingir contraste mínimo WCAG AA (4.5:1). A arquitetura da marca não pode ser camuflada pela variante errada.
Dinâmica de Energia
▸ Não alterar o fluxo do gradiente ativo no estado Flow / Neon.
A sequência [Teal T=0.0 → Purple T=0.5 → Pink T=1.0] é uma assinatura codificada de estado ativo. Não inverter as cores, não dessaturar, não substituir por paletas corporativas externas, não interromper com stops adicionais.
Matriz de Jurisdição
▸ Não misturar os contextos de aplicação entre Secure, Flow e Audit.
Cada estado do logo possui jurisdição estrita. Usar Audit/Wireframe onde deveria estar o selo Secure é falha de compliance — assim como aplicar Flow em assinatura executiva ou Secure em interação gamificada.
O nó isométrico desaparece. O traço inferior torna-se ruído.
Elementos invadem o perímetro de respiro da marca. Sem blindagem espacial.
Branco sobre branco e preto sobre preto. A marca é absorvida pelo fundo.
Gradiente invertido. A assinatura de estado ativo é quebrada.
Estados trocados de domínio. Audit não pertence ao executivo; Secure não pertence à gamificação.
| Estado | C-Level / Executivo | UI / Gamificação | Engenharia / Dev |
|---|---|---|---|
| Secure | ✓PASS | ×VIOLATION | ×VIOLATION |
| Flow / Neon | ×VIOLATION | ✓PASS | ×VIOLATION |
| Audit / Wireframe | ×VIOLATION | ×VIOLATION | ✓PASS |
▸ Cada interseção PASS é a única aplicação autorizada. Toda célula VIOLATION dispara alerta de compliance no QA Audit.
Sistema Cromático
Matriz cromática operacional. Acentos de alta energia para intenção e ação, neutros estratificados em temperaturas frias e quentes, e a escala de profundidade do Terminal Dark.
Brand Accents
Escala de Cinzas & Brancos
Terminal Dark — Profundidade
Família Tipográfica
Infográficos & UI Editorial
Cada blueprint nasce da desconstrução geométrica do Nó Isométrico na versão Audit · Fio Fino. O símbolo deixa de ser apenas marca: vira treliça explicativa, linguagem estrutural dos nossos processos.
A desconstrução circular do Nó Isométrico ilustra o ciclo contínuo de refinamento entre a visão de negócios e a engenharia de dados — nenhum código é escrito sem validação prévia de valor.
O símbolo Audit desdobrado em uma malha ortogonal: ponte de alta fidelidade entre o processamento de modelos avançados de IA (Northbridge) e a governança de dados analíticos (Southbridge).
A desconstrução linear dos braços do símbolo em eixos e vetores cria uma esteira técnica de auditoria — mapeia fluxos ponta a ponta e aplica gates lógicos de otimização de receita.
▸ Princípio
Tinta Digna — Data-Ink Ratio
Remova todo excesso. A linha da treliça (Audit State) é a base estrutural; fundos desnecessários são abolidos.
| Componente | Regra Técnica | Justificativa |
|---|---|---|
| Números (ROI) | Geist Mono · #FF46C7 | Destaque imediato para o valor gerado. |
| Fluxos (Diagramas) | Linhas 1px + Degradê | Degradê Teal → Purple indica o sentido do processamento. |
| Tabelas | Geist Mono · alinhamento à direita | Sem grids pesados; o conteúdo é o desenho. |
▸ Grid & Layout
12 colunas · Base 8px
▸ Elevation & Shadows
Sombras Executivas × Glow Terminal
▸ Iconography
Wireframe · Linha fina · Geométrico
Ícones derivam da espessura de linha do Estado 3 — AUDIT: 1px, geométricos, sem preenchimento.
▸ Core Components
Buttons · Inputs · Badges · Tables
| Métrica | Q3 | Q4 |
|---|---|---|
| ARR | 1,240,500 | 1,873,200 |
| NRR | 112% | 128% |
| Latency | 42ms | 12ms |
▸ UI Patterns & Modules
Markdown · AI Assistant · Data Viz
Relatório H1
Parágrafo padrão em Geist Sans, line-height 1.6, para máxima legibilidade em relatórios HTML automatizados.
"A decisão é o produto final do dado."
const roi = revenue / cost; // 4.7Nunca usar cores genéricas de software. Mapeamento estrito: Teal = dado base · Purple = validação/previsão · Pink = alerta/highlight.
Guia de Visualização de Dados
Os dados estão por toda parte — mas raramente falam por si. Este guia codifica como a HASHIDATA transforma números brutos em insights acionáveis. Inspirado em Edward Tufte: clareza, simplicidade, "menos é mais".
▸ Padrões de Cor · Princípios · Famílias de gráficos · Ferramentas
Disciplina Cromática nos Gráficos
Com a expansão da paleta para tons secundários, a aplicação de cor em dashboards precisa ser intencional. Estes três padrões garantem visualizações executivas, limpas e com hierarquia clara — reduzindo poluição cromática e maximizando a narrativa dos dados.
Monocromático
Para volumes de dados contínuos (barras ou áreas), utilize variações tonais de uma única cor — base em Core Purple, com tons mais escuros para o fundo e mais claros para os dados.
Cria um visual limpo, executivo e imersivo, ideal para dashboards densos.
Insight
Utilize o gráfico em Espectro Único (barras em tons fechados de Purple) e aplique o Main Pink em apenas um elemento: uma barra específica, um ponto ou um outlier.
Storytelling direto. Guia o olhar imediatamente para a métrica principal, ROI ou meta atingida.
A Visão Global
As 3 cores primárias (Teal, Purple, Pink) juntas no mesmo gráfico são reservadas APENAS para diferenciar categorias distintas ou fluxos opostos.
Evitar poluição visual. Manter as 3 cores apenas para mapas complexos, gráficos de rosca multivariáveis ou comparativos categóricos.
Como abordar um projeto de visualização
Sete decisões estratégicas antes de qualquer pixel. Definem público, clareza, comparações justas, consistência, contexto, acessibilidade e sustentabilidade.
Que história? Que público? Executivos preferem dashboards de alto nível; analistas precisam de scatter, heatmaps e densidade.
Menos é mais. Remova tinta que não comunica. Rótulos e legendas explícitos.
Per capita > totais brutos quando os conjuntos diferem. Adicione anotações para limitações.
Mesmas métricas, cores, fontes e tipos de gráfico. Mudanças de formato sugerem significado.
Títulos, anotações e chamadas que expliquem tendências e anomalias. 'Declínio sazonal' resolve uma queda.
Contraste suficiente, padrões além de cor, alt text, navegação por teclado e leitor de tela.
Real-time pede automação; relatório mensal permite direção de arte manual. Adapte ao ritmo.
A 'tinta digna' de Tufte. A linha estrutural (Audit) é a base; fundos desnecessários são abolidos.
Tabelas, Pizza, Sparklines
Para informações simples — texto, percentuais e tendências compactas dentro de tabelas e dashboards.
A ferramenta mais versátil: linhas/colunas com cabeçalhos claros. Pivots permitem reorganizar campos em tempo real.
Proporções de uma única categoria — 3 a 6 segmentos. Donut > Pizza: oferece centro para conteúdo adicional.
Mini-gráficos embutidos em tabelas e KPIs. Tendências sem eixos, ideais para dashboards densos.
Barras, Linhas, Áreas, Aranha, Bullet
Para business analytics: identificar tendências, monitorar desempenho e dar clareza a padrões.
Comparações categóricas. Cada barra começa em zero. Variações: empilhada, agrupada, positiva/negativa, cascata, Pareto.
Tendências ao longo do tempo. Não exige começar em zero. Foque em conjuntos específicos para comparação.
Tendências + proporções com sombreamento de volume. Começa em zero. Camadas, positivo/negativo, percentual.
Múltiplas variáveis em coordenadas polares. Variante Radial usa anéis concêntricos para mapear habilidades.
Performance contra meta em uma única barra empilhada. Linha real, marca alvo, faixas (ruim/médio/bom).
Sombreamento geográfico por variável. Cartogramas distorcem áreas pelo valor. Mapas baseados em localização.
Dispersão, Bolhas, Heat Map
Descobrir correlações, padrões e clusters. Essenciais em pesquisa, análise científica e modelagem preditiva.
Pontos em plano X/Y. Correlação positiva, negativa ou nula. Variante agrupada distingue categorias por cor.
Como scatter, mas o tamanho da bolha codifica uma terceira variável. Mais informação por ponto.
Matriz com cor proporcional à densidade. Quanto mais saturada, maior o valor. Compara respostas por critério.
Box Plot, Violin, KDE
Como os dados estão dispersos e onde estão as anomalias. Controle de qualidade, risco e variabilidade.
Min, Q1, mediana, Q3, max em formato compacto. Bigodes para extremos. Ideal para comparar distribuições.
Box plot + densidade. A largura indica frequência. Mais detalhe que box, mas exige familiaridade.
Curva de densidade suave. Sem o agrupamento em intervalos do histograma. Excelente para comparar variáveis.
Candlestick, Gantt, Tree, Sunburst
Cenários específicos com insights únicos: finanças, planejamento de projetos e hierarquias.
Open, High, Low, Close por sessão. Cor indica ganho ou perda líquida. Padrão para dados de trading.
Cronograma de projeto em raias. Barras horizontais medem duração. Marcos, dependências, sprints.
Hierarquia direcional com nós e arestas. Diretórios, organogramas, árvores genealógicas.
Hierarquia em anéis concêntricos. Cada anel é um nível. Ideal para orçamentos e caminhos de navegação.
Flow, Sankey, Force-Directed
Visualizar processos, relações e fluxos de informação dentro de sistemas conectados.
Caixas e setas representando processo, algoritmo ou workflow. Losangos para perguntas sim/não.
Largura das setas proporcional ao fluxo. Quantidades conservadas. Ideal para sistemas complexos.
Nós e arestas otimizados por forças. Minimiza cruzamentos. Redes sociais e arquiteturas de sistemas.
Software & plataforma de visualização
Categoria, capacidade, limitações, licença e nível de habilidade exigido. O stack canônico HASHIDATA para business intelligence e design editorial.
Visualização poderosa para grandes datasets e dashboards interativos em tempo real. Suporta múltiplas fontes e tipos de gráficos.
Skills · Drag-and-drop para iniciantes · analítica avançada para especialistas
Relatórios e dashboards interativos com Google Analytics, Ads, Sheets e terceiros. Compartilháveis e embedáveis.
Skills · Intuitivo · SQL básico para recursos avançados
Visualização via tabelas dinâmicas, gráficos e diagramas. Limitado em integridade de dados e datasets grandes.
Skills · Acessível ao público em geral
Diagramas e fluxogramas de processos de negócio. Templates avançados exigem familiaridade.
Skills · Geral · diagramas complexos exigem expertise
UChart, Chart, Google Sheets Sync, Figmotion, Table Generator, Autoflow. Stack de design editorial para dataviz dinâmica e prototipagem.
Skills · Designers · prototipagem data-driven
Design Tokens JSON
Este bloco é a ponte entre o design e a automação/desenvolvimento.
{
"hashidata": {
"color": {
"neutral": {
"white": { "value": "#FFFFFF" },
"executive-grey": { "value": "#F7F8FA" },
"silver-grey": { "value": "#E0E0E0" },
"nordic-gray": { "value": "#222326", "role": "Interfaces / Dashboards" },
"secure-black": { "value": "#101010", "role": "Executive Reports" },
"dark-slate": { "value": "#181818" }
},
"intent": {
"validation": { "core": "#8758FF", "bold": "#7000FF" },
"strategic": { "main": "#FF46C7", "alert": "#FF007F" },
"action": { "tech-teal": "#2AD0C3" }
},
"flow-gradient": {
"stops": ["#2AD0C3", "#8758FF", "#FF46C7"],
"direction": "T=0.0 → T=0.5 → T=1.0",
"rule": "no-inversion"
}
},
"typography": {
"display": { "family": "Michroma", "tracking": "0.06em", "weight": 400, "use": "Headlines & Navigation Menus" },
"body": { "family": "Inter", "line-height": 1.6, "weight": "300-700", "use": "UI & Long-form" },
"dashboard": { "family": "DM Sans", "tracking": "-0.01em", "weight": "400-700", "use": "Dashboards, Infographics & Data Density" },
"code": { "family": "Space Mono", "feature": "tnum", "use": "Audit Trail & Telemetria" }
},
"governance": {
"min-size": { "stacked-digital": "24px", "stacked-print": "12mm", "wide-line": "16px" },
"contrast": { "standard": "WCAG-AA", "ratio": "4.5:1" },
"jurisdiction": {
"secure": "C-Level / Executive",
"flow": "UI / Gamification",
"audit": "Engineering / Dev"
}
}
}
}