Flyt · Sistema visual

Design
System v1.6

Um sistema de componentes para comunicar operações complexas com clareza, consistência e presença corporativa.

Proposta de extensão do Brand Book v1.201

01 · Princípio

Clareza é uma decisão de sistema.

O design não deve adicionar complexidade. Ele organiza informação para que uma empresa entenda o que a Flyt faz, o que muda na operação e qual é o próximo passo.

Uma mensagem por bloco

Cada seção tem uma função: apresentar uma tese, orientar uma decisão ou convidar à ação.

Forma acompanha função

Hierarquia, espaços, cor e componentes tornam a operação legível antes de torná-la bonita.

Consistência reduz esforço

Uma peça nova parte de padrões aprovados, não de uma tela em branco.

Regra editorial: pessoa confusa não compra.

02 · Tokens

Poucos elementos, usados com intenção.

Ink organiza. Soft recebe informação. Neon sinaliza direção e ação. O branco mantém espaço para a decisão aparecer.

Ink#101112

Texto, contraste e ação principal

White#FFFFFF

Campo predominante

Soft#F5F5F4

Superfície de apoio

Neon#D8FF00

Estado, avanço e ação

Neon não é decoração. É um sinal: índice, avanço, estado ou CTA pontual.

03 · Tipografia

Presença sem peso excessivo.

Satoshi conduz títulos entre 600 e 700. Inter organiza informação, interface e textos operacionais.

IA que faz o trabalho fluir.

Satoshi · títulos

Peso: 600 a 700
Uso: tese, título de seção, mensagem principal

Inter organiza o que precisa ser entendido.

Inter · corpo e interface

Peso: 400 a 600
Uso: contexto, instruções, tabelas e controles

Evitar: títulos em peso black, blocos longos em caixa alta e texto técnico sem tradução operacional.

04 · Bordas e superfícies

Cantos arredondados são regra de família.

As linhas retas ficam para divisórias, grades e fluxos. Blocos de interface devem ter borda discreta e raio definido.

12 px

Controles e tabelas

Botões, células e indicadores.

18 px

Cards e blocos

Informações agrupadas e componentes.

26 px

Seções e galerias

Superfícies maiores e áreas de destaque.

Não usar: cantos retos em cards, botões, tabelas, acordeões, galerias ou superfícies de interface.

05 · Layout

Uma, duas, três ou quatro colunas, com propósito.

A quantidade de colunas acompanha a densidade da decisão. Em mobile, toda estrutura se torna uma coluna legível.

1 colunaTese, processo ou CTA

2 colunasComparar ou explicar

3 colunasEtapas ou escolhas

4 colunasMétodo ou categorias

06 · Componentes

Componentes que explicam a operação.

Os componentes privilegiam estado e decisão, não ornamento. Todos usam borda discreta e raio definido.

Botões

Ação principal em Ink. Ação secundária em White. Neon apenas em contexto seletivo.

Tabela

Cabeçalho, linha e estado devem ser legíveis. A tabela informa, não simula planilha.

Fluxo	Revisão	Estado
Contratos	Jurídico	Ativo
Atendimento	Comercial	Teste

Acordeões

Detalhes que não devem competir com a mensagem principal. Uma pergunta por linha.

Quando usar

Como usar

07 · Galerias e evidência

Mostrar progresso, não encher espaço.

Galerias organizam casos, etapas, telas ou resultados. Devem ter uma lógica de leitura explícita.

Case em foco

Contexto

Decisão

Resultado

Processo

Interface

Revisão

Resultado

Cada item precisa responder: o que é, por que importa e qual decisão ele sustenta.

09 · Regras de conteúdo

Clareza também é padrão editorial.

Cada peça precisa deixar claro o que a Flyt resolve, por que isso importa e qual é o próximo passo possível.

Uma ideia por peça

Não tentar explicar a empresa inteira em um post.

Tradução operacional

Nenhum termo técnico sem contexto do trabalho que muda.

Evidência proporcional

Dado pede fonte. Afirmação pede limite. Case pede contexto.

CTA proporcional

Convite para conversa, leitura ou próximo passo. Sem pressão artificial.

10 · Linguagem de imagem

Outline para documentos que precisam organizar uma decisão.

Ícones outline são a linguagem da Flyt em propostas, contratos, documentos operacionais, interfaces e fluxos. Eles sinalizam função, sem competir com a leitura.