Ir para o conteúdo principal
Sistema de marca v1

O sistema visual e verbal FlytBase

Cores, tipografia, componentes, movimento e voz. Uma única referência para as equipes de produto, marketing e parcerias que trabalham com a marca FlytBase.

Edição
Edição 2026.04
Público
Para equipes de produto, marca e engenharia

Cores

Três cores principais sustentam o sistema. O carvão é a cor de fundo padrão da página, não um modo. O laranja vibrante é a cor de destaque principal. O eucalipto é a cor de destaque secundária para momentos importantes da plataforma. Nunca misture laranja vibrante e eucalipto na mesma área de visualização.

01

Regra rígida

Nunca misture o400 e e400 na mesma viewport. Escolha um acento por seção.

Carvão (base escura)

Plano de fundo padrão da página. Superfícies, bordas e texto são todos derivados desta escala.

dbg#1A1A1A
ds#242424
de#2E2E2E
db#3D3D3D
dm#5C5C5C
dsc#999999
dbd#D6D6D6
dh#F0F0F0

Sinal Laranja

Destaque principal para chamadas à ação (CTAs), sobrancelhas, pontos da marca e movimento térmico.

o50#FDF0E8
o100#F4B896
o200#EC7D42
o400#D95B28
o600#A33D14
o800#7A2B0E
o900#4A1808

Eucalipto

Acento secundário para eventos de plataforma e dados. Usado em seções com inversão de luz.

e50#EAF0EE
e100#BACDD0
e200#72A899
e400#3A7A65
e600#2B5A4A
e800#1B3A30
e900#0F2219

Cinza frio (base clara)

Seções invertidas onde o eucalipto assume o protagonismo.

lbg#F5F5F7
ls#FFFFFF
lb#DDDFE3
lsc#555555
lp#111111

Validação

Reservado apenas para estados de erro de formulário. Nunca usado como cor da marca.

error - #F43F5E

Referências feitas pelo nome do token, nunca por hexadecimal. Os tokens são declarados em src/app/globals.css dentro de @theme.

Tipografia

Três famílias de fontes, funções bem definidas. Lora para exibição. Geist para texto da interface. Geist Mono para metadados. Carregadas através de next/font; nunca de fonts.googleapis.com em tempo de execução.

02

Mostrar

Lora

Operações autônomas

Títulos, destaques, acentos editoriais. A fonte Lora em itálico destaca uma única palavra em um título, nunca uma frase completa.

Interface

Geist

Software empresarial para frotas de drones desenvolvido para escalabilidade.

Corpo do texto, botões, navegação e formulários. Todo o texto da interface do usuário está em Geist.

Metadados

Geist Mono

FLT-2026.04 - 12:00 UTC

Sobrancelhas, etiquetas, registros de data e hora, números e código.

Escala

Os títulos seguem uma curva clamp(32px, 4vw, 56px). O corpo do texto ocupa 17px/1,6. As sobrancelhas estão a 10px com espaçamento entre linhas de 0,12em.

Iconografia

Os ícones são fixados em @phosphor-icons/react com espessura fina (traço de 1px). A espessura normal é aceitável apenas dentro de quadrados com borda de 32 a 40px para ícones emoldurados.

03

Permitir

  • - Fósforo Fino como padrão
  • - Fósforo Regular dentro de um quadrado com borda
  • - Um SVG único em src/components/icons/ caso um glifo esteja faltando, correspondente ao traço do Phosphor.

Nunca

  • - Duotone ou pesos de preenchimento
  • - Emoji como ícones
  • - Outras bibliotecas de ícones (Lucide, Heroicons, Material, Tabler, Font Awesome)
import { House } from '@phosphor-icons/react'

<House size={20} weight="thin" />

Componentes

Cada componente herda a escala do token. Não há raio de borda, a menos que o design exija um elemento emoldurado. As transições são executadas em cubic-bezier(0.22, 1, 0.36, 1) a 200ms.

04

Primário - Fundo laranja vibrante, etiqueta monocromática, brilho ao passar o cursor.

Fantasma - Transparente, a borda aquece para dh ao ​​passar o cursor.

Verde - Eucalipto para eventos de plataforma e dados.

Sobrancelhas e etiquetas

Sinal 01 - AutonomiaPlataforma 02 - EventosAtualizado em 21/04/2026

Espaçamento e layout

Uma grade base de 8px e uma única largura máxima de conteúdo. As superfícies não são arredondadas.

05

Grade

8
16
24
32
48
64

Base de 8px. Use incrementos de 8, 16, 24, 32, 48, 64 e 96.

Recipiente

Largura máxima da página: 1200px. Espaçamento horizontal de 24px em dispositivos móveis e 48px em dispositivos móveis.

raio da fronteira

Zero por padrão. Ícones quadrados emoldurados e campos de validação são as raras exceções.

Padrões e superfícies

Três padrões repetíveis e um gradiente térmico. Use um por seção.

06

Grade

Linhas de 32px com 4% de transparência sobre fundo carvão.

Pontos

Pontos radiais de 20px com transparência de 14% sobre fundo carvão.

Térmico

Um degradê diagonal único, do Laranja Sinal ao Cinza Carvão. Usado para momentos marcantes, nunca dentro de cartas.

Grão

Uma sobreposição animada de granulação de filme aplicada a superfícies escuras. É decorativa - a seção principal permanece totalmente legível sem ela.

Movimento

O movimento é intencional, não ambiental. Revele os blocos ao rolar a tela e, em seguida, mantenha o dedo pressionado. A prioridade é reduzir o movimento.

07

Revelar

duration 0.9s - ease power3.out

0,9s ease power3.out, 24px rise, 12% threshold. Executa uma vez por elemento.

Passar o cursor

duration 200ms - cubic-bezier(0.22, 1, 0.36, 1)

200ms ease cubic-bezier(0.22, 1, 0.36, 1). Os botões principais levantam 1px e brilham.

Movimento reduzido

prefers-reduced-motion: reduce

Todas as revelações se resolvem imediatamente. A granulação para. Os elevadores flutuantes estão desativados.

Voz e tom

Escreva como um operador, não como um profissional de marketing. Frases curtas. Substantivos específicos. Sem jargões.

08

Fazer

  • - Escreva a marca FlytBase por extenso. Com F maiúsculo e B maiúsculo.
  • - Use apenas hífenes comuns.
  • - Escreva títulos com letras maiúsculas e minúsculas.
  • - Dê nome ao resultado, não à característica.

Não

  • - Use travessões longos ou curtos.
  • - Use emojis em produtos, marketing ou código.
  • - Escreva Flytbase, flytbase, FLYTBASE ou FLytbase.
  • - Recorra a termos técnicos como sinergia, alavancagem ou desbloqueio.

Regras de utilização

Um guia de referência rápida para todos que enviam produtos sob a marca. As regras completas estão em Docs/AGENTS.md e Docs/DESIGN-SYSTEM.md.

09
  1. 01

    Componentes de servidor por padrão. Componentes de cliente apenas para estado, efeitos, manipuladores de eventos ou APIs do navegador.

  2. 02

    Cada página indexável chama buildAlternates(path, locale) em generateMetadata. Não emita links alternativos (rel alternate) dos corpos das páginas.

  3. 03

    Todo o texto visível ao usuário utiliza useTranslations. Apenas o arquivo src/messages/en.json é editado manualmente.

  4. 04

    Importe Link, useRouter, usePathname e redirecione de @/i18n/navigation. Nunca de next/link ou next/navigation.

  5. 05

    Sem estilos embutidos. Sem módulos CSS. Apenas utilitários Tailwind e classes de token.

  6. 06

    Não há exportações padrão fora dos arquivos especiais do Next.js (página, layout, erro, carregamento, não encontrado).

Uma única plataforma para todo o seu back office. Agentes infinitos que trabalham 24 horas por dia, 7 dias por semana.

Caminho BVLOS

Você prefere obter suas próprias aprovações, local por local, ou operar sob um serviço gerenciado?

Estrutura de ROI

Como garantir o orçamento para a próxima fase quando os resultados estão limitados a um único caso de uso?

Dados para inteligência

Como transformar terabytes de filmagens em ação sem uma equipe atolada em revisões?

TI e Conformidade

Onde os dados estão armazenados, quem tem acesso a eles e o hardware está em conformidade com a NDAA?