Foundations
Os primitivos visuais que compõem nossa linguagem de design. Tokens de cor, tipografia, espaçamento e superfície que alimentam toda interface Uebi.
Design Tokens
Uma arquitetura de tokens em três camadas que escala de valores brutos a significado semântico e overrides específicos de componentes.
Design tokens são a fonte única de verdade para toda decisão visual. Eles garantem consistência entre plataformas, reduzem débito de design e tornam a tematização simples. Nosso sistema usa três camadas:
Primitive
Valores brutos sem significado semântico. Códigos hex puros, valores em pixels, font stacks.
Semantic
Aliases baseados em intenção. Mapeia primitivos para papéis: interativo, superfície, feedback.
Component
Overrides com escopo para componentes UI específicos. Permite tematização por componente.
Color System
Uma paleta dark-first abrangente projetada para profundidade, contraste e vibração.
Primary
Elementos interativos principais, links, focus rings, botões CTA primários
Estados hover, destaques secundários, acentos decorativos
Estados active/pressed, bordas de ênfase, camadas de profundidade
Secondary
Ações secundárias, tags, badges, contraparte do gradiente
Estados hover em elementos secundários, decorativo
Estados active, camadas de profundidade em elementos violet
Accent
Destaques informativos, indicadores de status, ações terciárias
Surfaces — Dark Mode
Fundo da página, camada mais profunda
Seções elevadas, fundo secundário
Cards, modais, superfícies glass
Bordas, divisores, contraste sutil
Bordas de input, estados inativos
Scrollbars, fundos desabilitados
Surfaces — Light Mode
Fundos light mode
Cards light mode, branco puro
Text Colors
Títulos, texto do corpo, conteúdo de alta ênfase
Descrições, subtítulos, ênfase média
Legendas, timestamps, metadados de baixa ênfase
Texto em superfícies claras, contextos invertidos
Semantic Colors
Confirmações, estados concluídos, feedback positivo
Mensagens de cautela, estados pendentes, atenção necessária
Erros, ações destrutivas, alertas críticos
Mensagens informativas, dicas, destaques neutros
Brand Gradient
O gradiente assinatura da Uebi. Usado em backgrounds hero, botões CTA, marcas do logo e acentos decorativos. Sempre flui do Electric Blue ao Vibrant Violet em 135 graus.
Typography
Plus Jakarta Sans para clareza. JetBrains Mono para precisão. Duas fontes, expressão infinita.
Plus Jakarta Sans — Weight Specimen
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
JetBrains Mono — Code Specimen
name: 'Uebi',
primary: '#2563EB',
secondary: '#7C3AED',
edition: 'Dark Cockpit',
};
// 0123456789 !@#$%^&*() []|;:'",.<>?
// ABCDEFGHIJKLMNOPQRSTUVWXYZ
// abcdefghijklmnopqrstuvwxyz
Type Hierarchy
A raposa marrom veloz
A raposa marrom veloz pula
A raposa marrom veloz pula sobre
A raposa marrom veloz pula sobre o cachorro
A raposa marrom veloz pula sobre o cachorro preguiçoso
A raposa marrom veloz pula sobre o cachorro preguiçoso
Texto do corpo grande para parágrafos proeminentes e conteúdo principal.
Texto do corpo padrão usado em todo conteúdo longo e interfaces.
Texto do corpo pequeno para conteúdo secundário, descrições e informações de suporte.
TEXTO CAPTION PARA METADADOS, LABELS E TIMESTAMPS
Spacing Scale
Unidade base de 4px com saltos intencionais para ritmo e controle de densidade.
Border Radius
Cantos arredondados que definem nossa geometria suave e acessível.
Shadows
Sistema de elevação baseado em glow projetado para superfícies escuras.
Surfaces
Glass morphism e profundidade em camadas. Painéis translúcidos que respiram com o fundo.
Standard Glass
Superfície semi-transparente com backdrop blur. Perfeita para cards, modais e overlays que precisam revelar a profundidade abaixo.
Heavy Glass
Maior opacidade, blur mais forte. Para elementos que precisam de mais peso visual e legibilidade, como barras de navegação e painéis de conteúdo primário.