INTERFACE
Design system / interface tecnológica 02.26

Design queopera comotecnologia.

Uma linguagem visual premium construída sobre preto profundo, energia azul e lettering transparente. Interface silenciosa no repouso; tecnológica quando entra em movimento.

10Tokens cromáticos
0Grid máximo / px
04Camadas de depth
LIVEMotion system
Black estruturalLettering transparenteInterface de vidroGrid técnicoMovimento precisoContraste editorialBlack estruturalLettering transparenteInterface de vidroGrid técnicoMovimento precisoContraste editorial
PALETA
01 / Fundações

Azul com função.
Preto com profundidade.

A base black cria profundidade e foco. Os azuis da paleta entram como luz, sinal, ação e hierarquia; branco e azul gelo ficam reservados para contraste, dados e lettering de alta legibilidade.

Azul principal#026495
Azul secundário#094A86
Azul profundo#103479
Azul destaque#191B68
Azul navy#081F51
Fundo claro#EEF7FC
Fundo alternativo#F8FBFD
Texto principal#071B32
Texto secundário#52697C
Branco#FFFFFF
02 / Tipografia

Lettering como
arquitetura.

O lettering vazado é parte da arquitetura: grande, branco translúcido e luminoso sobre o black. A tipografia sólida sustenta leitura; mono e microtexto constroem a sensação de interface técnica.

DISPLAY / OUTFIT 500 / -7.5%LETTERING MODE / ACTIVE
BLACK

Uma palavra em escala extrema funciona como textura, assinatura e interface. O contorno recebe brilho sem perder a leveza.

01 / DisplayOutfit 500
Clareza
antes do ruído.
02 / EscalaFluid type
72 / 100Display
48 / 100Heading
28 / 100Subheading
16 / 180Texto funcional
03 / Pesos200 — 600
Outfit200
Outfit300
Outfit400
Outfit500
Outfit600
04 / AlfabetoUpper + lower
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 / & @ # % + —
SPACE MONO / SYSTEM READYTRACKING 0.14EMSTATUS / ONLINEGRID / 1200PXOCEAN BLUE / #026495SPACE MONO / SYSTEM READYTRACKING 0.14EMSTATUS / ONLINEGRID / 1200PXOCEAN BLUE / #026495
INTERFACE
03 / Componentes

Superfícies com
precisão técnica.

Cards usam black glass, bordas frias e halos azuis controlados. No hover, a luz acompanha o cursor e aumenta a profundidade sem deslocar a geometria interna.

Sistema / 01

Malha de sinal

Superfície de leitura técnica com camadas concêntricas, pontos ativos e resposta luminosa ao cursor.

Terminal / 02

Código vivo

Blocos funcionais adotam mono, baixo contraste e digitação recorrente.

const system = createInterface();
system.theme = 'azure';
Métrica / 03

Dados com escala

Indicadores usam números grandes e vazados.

0
Ação / 04

Botões com foco

Estados primário, glass e glow mantêm contraste previsível.

Estado / 05

Status discreto

Cor só aparece quando existe função.

Sistema operacional
MOVIMENTO
04 / Movimento

Entrada limpa.
Resposta imediata.

Reveals combinam blur, deslocamento curto e máscara vertical. O timing é desacelerado no final para transmitir controle — sem bouncing excessivo ou animação decorativa gratuita.

01 / OBSERVAR

Detectar

Elementos entram no campo de visão e ativam o estado de revelação.

02 / REVELAR

Desmascarar

Clip, blur e opacidade convergem para zero de forma simultânea.

03 / RESPONDER

Interagir

Luz e profundidade acompanham cursor sem mover o conteúdo interno.

04 / ESTABILIZAR

Assentar

A interface volta a um estado silencioso assim que a ação termina.

05 / Escala

Do detalhe ao
sistema completo.

O mesmo vocabulário funciona em produto, SaaS, fintech, tecnologia ou consultoria: microtexto técnico, superfícies black glass, azul luminoso e estrutura modular.

system.console / live
iniciando núcleo visual...
tokens carregados
contraste validado
grid 1200 px sincronizado

interface: lettering_transparente = true
surface: black_glass = 0.62
motion: easing = cubic-bezier(.16,1,.3,1)

palette: ocean_blue = #026495
sistema pronto para produção
Núcleo visual
Tipografia
Componentes
Movimento
Interface
06 / Padrões de conversão

Preço sem ruído.
Decisão evidente.

O card central usa o azul oceano como sinal de decisão; os demais permanecem em black glass, com contraste técnico e hierarquia limpa.

Base
R$ 00/mês

Estrutura essencial para uma interface enxuta e funcional.

  • Tokens essenciais
  • Componentes base
  • Motion leve
Personalizado
Sob medida

Extensão do vocabulário para contextos e produtos específicos.

  • Escala customizada
  • Novos padrões
  • Documentação dedicada
07 / Regras de uso

O que mantém
o sistema coeso.

A consistência depende menos de regras numerosas e mais de poucas decisões repetidas com disciplina.

Em títulos de grande escala, palavras de apoio e planos de fundo tipográficos. Ele nunca deve substituir textos longos nem reduzir a legibilidade de informações funcionais.
Azul oceano para ação e foco; azuis profundos para contraste e tecnologia; azul gelo e branco para respiro. A paleta inteira deve ter função, não decoração gratuita.
Curto, previsível e com desaceleração suave. O movimento orienta leitura e hierarquia; não deve competir com o conteúdo.
Baixa opacidade, borda azulada sutil e blur moderado. Em fundo claro, o glass deve parecer ar e profundidade; em navy, deve parecer uma camada técnica translúcida.
CRIAR
Sistema pronto

Azul para energizar.
Black para sustentar.

Uma base black, azul e tecnológica para transformar páginas e produtos em experiências premium, profundas e reconhecíveis.

Voltar ao início