05 Brandbook

Moodboard

Referências visuais, texturas e pistas atmosféricas que definem a estética Uebi. Uma coleção curada de influências destiladas no nosso DNA de design.

5 Sections · Dark Cockpit Edition · 2026
01

Visão Geral do Mood

A filosofia por trás de cada pixel.

Dark Cockpit
Edition

Inspirada em cockpits de aeronaves e salas de controle de missão, a estética Uebi prioriza densidade de informação sem sobrecarga cognitiva. Toda superfície é escura para reduzir fadiga visual durante sessões longas. Todo acento é deliberado — um sinal, não decoração.

Abraçamos a tensão entre precisão técnica e calor humano. JetBrains Mono comunica exatidão; as formas geométricas e terminais arredondados da Plus Jakarta Sans convidam à legibilidade. Gradientes azuis fluindo para violeta transmitem lógica e criatividade simultaneamente. Este é design para construtores que se importam com ofício.

Dark-first

Toda decisão de design começa no escuro. Light mode é derivado, nunca primário.

Alta densidade

Máxima informação por viewport. Denso, mas nunca desorganizado.

Calor técnico

Monospace encontra humanist sans. Código encontra prosa. Lógica encontra sentimento.

Narrativa por gradiente

Blue-to-violet é nosso arco assinatura. De dados (azul) a design (violeta).

Profundidade em camadas

Superfícies glass, texturas grain, orbes de glow — a realidade tem camadas, nós também.

02

Referências Visuais

Nove influências que moldam a linguagem de design da Uebi.

Product Design
L

Linear App

Masterclass em densidade de UI escura. Cada pixel ganha seu lugar. Modelo de interação keyboard-first com camadas de superfície ultra-refinadas.

dark surfaces density control keyboard-first UX
Web UI
V

Vercel Dashboard

O padrão ouro para interfaces escuras voltadas a desenvolvedores. Base monocromática com uso cirúrgico de cor de acento para guiar atenção.

mono typography minimal accent glass panels
Editorial
S

Stripe Press

Precisão tipográfica encontra calor editorial. Prova que marcas técnicas podem parecer humanas sem sacrificar sofisticação.

type hierarchy editorial rhythm warm neutrals
Product Design
R

Raycast

Borrou a linha entre SO e web. Vidro fosco, gradientes vibrantes e micro-interações ultra-responsivas.

glass morphism gradient accents micro-interactions
Motion
F

Framer Motion Docs

Animação como documentação. Cada transição ensina. Física de molas comunicada através de playgrounds interativos com tema escuro.

spring physics interactive demos code-as-design
Product Design
A

Arc Browser

Reimagina hierarquia espacial com espaços codificados por cor. Escolhas de paleta ousadas que parecem lúdicas e intencionais.

spatial color bold palette playful precision
Editorial
A

Awwwards Annual

Layouts digitais com qualidade de impressão. Controle extremo de espaço em branco, tipografia oversized e composições de grid cinematográficas.

editorial grids oversized type cinematic layout
Web UI
M

Midjourney Showcase

Canvas escuro que deixa o conteúdo respirar. Grids masonry com estados hover sutis revelam profundidade sem distração.

dark canvas masonry grid content-first
Motion
A

Apple Vision Pro Site

Narrativa scroll-driven com profundidade. Parallax, mudanças de escala e coreografia de opacidade criam uma experiência de storytelling espacial.

scroll narrative parallax depth spatial design
03

Color Mood

A paleta emocional — como nossas cores fazem sentir, não apenas como parecem.

Accent Dominant

Electric Blue + Vibrant Violet

O gradiente é nossa assinatura emocional. Azul carrega confiança, precisão e calma. Violeta traz criatividade, ambição e energia. Juntos formam o arco da lógica à imaginação.

#2563EB
#7C3AED
#06B6D4
Base Dominant

Deep Dark Surfaces

95% de cada tela é superfície escura. A base quase preta (#050508 a #1E1E2E) absorve distração e empurra o conteúdo para frente. Cores de acento ganham impacto pela escassez.

050
0A0
141
1E1
2A2
3A3
04

Textura & Pattern

Padrões de fundo sutis que adicionam profundidade sem competir com o conteúdo.

Dot Grid

Dot Grid

.pattern-dot-grid

Grade padrão de 32px. Sutil indicação de profundidade para fundos e estados vazios.

Dot Grid Dense

Dot Grid Dense

.pattern-dot-grid-dense

Grade de 16px. Maior densidade para seções técnicas e layouts com muitos dados.

Line Grid

Line Grid

.pattern-line-grid

Grade de engenharia 64px. Estética de blueprint para seções estruturais.

Hazard Stripe

Hazard Stripe

.hazard-stripe

Listras diagonais repetidas. Zonas de perigo, avisos de depreciação, limites.

.glass
.glass-strong

Glass Surfaces

Vidro fosco com backdrop blur. Glass padrão (60% opacidade, xl blur) para a maioria das superfícies. Glass forte (80% opacidade, 2xl blur) para navegação e painéis de alta prioridade.

05

Typography Mood

Como nossas fontes criam a atmosfera técnica-mas-acolhedora.

Geometric Sans

Plus Jakarta Sans

Formas geométricas, terminais arredondados e personalidade moderna e premium. Plus Jakarta Sans traz clareza e calor a cada título e parágrafo. Lê-se rápido e parece acessível — a voz humana da Uebi.

Light 300 — Sussurro

Regular 400 — Conversa

Medium 500 — Declaração

Semibold 600 — Ênfase

Bold 700 — Autoridade

títulostexto do corponavegaçãobotões
Monospaced

JetBrains
Mono

Projetada para desenvolvedores, adotada por designers. As ligaduras e largura consistente da JetBrains Mono criam um ritmo que parece preciso e intencional. É a voz técnica da Uebi — código, dados, labels, metadados.

01 Cabeçalhos de seção e numeração
const tokens e referências de código
V1.0 carimbos de versão e metadados
0123456789 figuras tabulares
blocos de códigometadadoslabelscarimbos de versão
A Combinação

02 — FOUNDATIONS

Onde precisão encontra personalidade

Títulos em Plus Jakarta Sans fluem naturalmente para metadados em JetBrains Mono. O contraste entre geométrica e monoespaçada cria hierarquia visual sem depender apenas do tamanho. Esta combinação é a alma tipográfica da Uebi.

V1.0 · Dark Cockpit Edition · 2026