Cores
Paleta oficial UP. Um azul primário, neutrals de alto contraste e três semânticas. Nada mais.
Primary · brand
O azul primário. Toda a identidade UP construída a partir daqui.
Hover
Estado hover ligeiramente mais escuro. Aplicar em CTAs interactivos.
Press / Deep
Estado active/pressed. Também apropriado para ênfase escura em documento.
Background tint
Background suave sobre branco. Para highlights inline e blocos de destaque.
Decorativo
Decorativo. Bordas, badges, ilustrações auxiliares.
Text · Dark bg
Texto primário. Também usado como fundo de páginas dark.
Dark surface
Superfícies dark que não são preto puro.
Text · secondary
Texto secundário em superfícies claras.
Text · tertiary
Texto terciário, metadados.
Border
Bordas, divisores, hairlines.
Paper light
Off-white padrão dos documentos A4.
Paper alt
Off-white quente alternado em páginas de sumário/cronograma.
Semantic · ok
KPI positivo, meta atingida, verdict OK.
Semantic · warn
Atenção, métrica em risco, verdict médio.
Semantic · danger
Erro, churn, verdict negativo, budget estourado.
Tipografia
Quicksans (display, proprietária) + Montserrat (UI/body) + Inter (captions) + JetBrains Mono (labels).
Aa Bb 01
Quicksans Accurate ICG Fill
Display · headlinesDisplay / headlines. Fonte proprietária UP (não disponível no Google Fonts). Fallback: Montserrat 900.
Aa Bb 01
Títulos UI + subtítulos + body de documentos A4. Pesos 400 / 500 / 600 / 700 / 900.
400–900
Google Fonts →Aa Bb 01
Corpo de propostas/relatórios A4, legendas, microcópia. Pesos 400 / 500 / 600 / 700.
400–700
Google Fonts →Aa Bb 01
JetBrains Mono
Mono · labels · codeEyebrows, labels, código, tabelas de dados. Único mono do sistema.
400 / 500 / 600
Google Fonts →Logos
Todas as versões da logo UP + produtos (UP Ads, UpScale, Studio UP). Fundo claro vs escuro — não improvisar.
UP · Primary (blue arrow)
Preto "UP" + seta azul. Hero lockup — usar em fundo claro.
PNG · Fundo claro
Baixar PNGUP · All black
Versão monocromática preta. Materiais impressos, faxes, docs sem cor.
PNG · Mono · light bg
Baixar PNGUP · All white
Versão branca completa. Obrigatória em fundos escuros / brand pages.
PNG · Fundo escuro
Baixar PNGStudio UP
Marca do braço criativo Studio UP. Preto sobre fundo claro.
PNG · Studio UP
Baixar PNGStudio UP · White
Studio UP em branco — fundos escuros.
PNG · Studio UP · dark bg
Baixar PNGStudio UP · Clean
Versão limpa Studio UP sem baseline.
PNG · Studio UP · alt
Baixar PNGUP Ads
Produto UP Ads · gestão de tráfego pago.
PNG · Produto · fundo claro
Baixar PNGUP Ads · White
UP Ads em branco — cards escuros.
PNG · Produto · dark
Baixar PNGUpScale
Produto UpScale · CRM / automação.
PNG · Produto · fundo claro
Baixar PNGUpScale · White
UpScale em branco.
PNG · Produto · dark
Baixar PNGÍcones · Arrow motif
6 itemsÍcones · Arrow motif
A seta ↗ é o motivo universal da marca. Usar como bullet, divider, decorativo, cover art.
Arrow · SVG
Vector oficial da seta UP. Editável, escala sem perda.
SVG · Vector
Baixar SVGArrow · Blue
Seta azul UP em PNG. Uso geral em documentos claros.
PNG · Documento claro
Baixar PNGArrow · White
Seta branca. Uso em backgrounds escuros / brand.
PNG · Fundo escuro
Baixar PNGArrow · Black
Seta preta. Uso mono / impresso sem cor.
PNG · Mono
Baixar PNGArrow · Outline Blue
Contorno azul — usar como motivo decorativo em backgrounds.
PNG · Decorativo
Baixar PNGArrow · Outline White
Contorno branco decorativo em fundos escuros.
PNG · Decorativo dark
Baixar PNGTokens
CSS + JSON de todos os tokens do sistema. Importar antes de qualquer design.
CSS · v4 canónico
colors_and_type.css
Fonte primária das variáveis CSS UP v4. Importa Google Fonts + define paleta + tipografia semântica.
CSS · Brandcast · dual theme
tokens.css
Tokens completos com dark/light theme — spec Brandcast adaptada à paleta UP. Cobre cores, tipografia, espaçamentos, radii, sombras, animações.
JSON · Tokens Studio v1
tokens.json
Design tokens JSON compatíveis com Style Dictionary / Tokens Studio. Integração com Figma.
Componentes · Preview
8 itemsComponentes · Preview
Previews HTML de cada componente atómico. Referência visual + código copiável.
UP↗
Buttons
Botões — primário, secundário, hover, disabled.
UP↗
Cards
Cartões — feature, metric, phase.
UP↗
Inputs
Inputs de formulário e estados de foco.
UP↗
Colors · Brand
Paleta brand em preview visual.
UP↗
Colors · Neutrals
Escala de neutros do sistema.
UP↗
Arrow Mark
Uso do símbolo ↗ como motivo de marca.
UP↗
Animations
Micro-interacções e transições.
UP↗
Dark Neon
Variante de theme para dashboards/portais.
UI Kits
Kits reais aplicados — site institucional, business card de agência, webinar. Base para novas superfícies.
UP↗
UI Kit · Website
Kit completo para site institucional UP: Hero, Nav, Services, CaseGrid, ContactForm, CTA, Footer. Código JSX + preview HTML.
8 JSX · Hero, Nav, Services, Case Grid, CTA, Footer, Contact
UP↗
UI Kit · Agency BC
Kit específico para agência/business card. Layout curto e denso.
UP↗
UI Kit · Webinar
Landing de webinar / evento. Contagem regressiva + inscrição + programa.
Brandbook
O brandbook oficial UP e regras de aplicação da logo. Referência master.
UP↗
Brandbook · Interactivo
Brandbook oficial UP navegável no browser. Referência para toda a marca.
HTML interactivo
UP↗
Brandbook · Print
Versão do brandbook otimizada para imprimir em A4.
HTML → PDF
UP↗
Logos · Produtos
Catálogo visual das logos de todos os produtos UP (UP Ads, UpScale, Studio UP).
UP↗
Aplicação da Logo
Regras de uso da logo — clear space, fundos válidos, proibições.
Templates de produto
10 itemsTemplates de produto
Aplicações reais UP: Portal do Cliente, Dashboard, Email Relatório, Landing Orçamento, Calendário Editorial e mais.
UP↗
Portal do Cliente
Portal onde o cliente vê status, entregas, relatórios em tempo real.
UP↗
Dashboard
Dashboard operacional interno UP.
UP↗
Gestão de Tarefas
Interface de gestão de tarefas do time UP.
UP↗
Email · Relatório
Template de email HTML para envio de relatório mensal ao cliente.
UP↗
Calendário Editorial
Grelha visual do calendário editorial mensal com posts previstos.
UP↗
Relatório Mensal
Relatório mensal de performance no visual UP (versão do V5).
UP↗
Landing · Orçamento
Landing de captura para pedidos de orçamento.
UP↗
Animação · Site
Página do site institucional com animações UP.
UP↗
Ebook · Máquina de Clientes
Ebook oficial UP no visual v2.
UP↗
Proposta · Sistema de Crescimento
Modelo de proposta comercial no visual do site UP.
