Uma marca. Um azul.
Uma seta.
O azul #313CF0, a seta ↗, o brandbook, os tokens, as logos, os UI kits, os templates de produto. Tudo o que qualquer pessoa da UP precisa para não improvisar.
AGENCIA/DRIVE CLIENTES/UP/DESIGN SYSTEM/UP Agência Design System V5Cores
Paleta oficial UP. Um azul primário, neutrals de alto contraste e três semânticas. Nada mais.
Tipografia
Quicksans (display, proprietária) + Montserrat (UI/body) + Inter (captions) + JetBrains Mono (labels).
Display / headlines. Fonte proprietária UP (não disponível no Google Fonts). Fallback: Montserrat 900.
Títulos UI + subtítulos + body de documentos A4. Pesos 400 / 500 / 600 / 700 / 900.
Corpo de propostas/relatórios A4, legendas, microcópia. Pesos 400 / 500 / 600 / 700.
Eyebrows, labels, código, tabelas de dados. Único mono do sistema.
Spacing
Escala de espaçamento. 8 passos de 5px a 80px. Usar sempre estes valores — nunca inventar.
Micro-espaçamentos: gap entre chip e ícone, padding interno de badges.
--sp-xsEspaçamento pequeno: entre elementos relacionados dentro de um card.
--sp-smPadrão do sistema. Padding de card, gap entre parágrafos.
--sp-mdGap entre cards, padding lateral de containers.
--sp-lgEspaçamento entre secções médias.
--sp-xlEspaçamento entre blocos verticais.
--sp-2xlSeparação vertical entre secções em landing pages.
--sp-3xlPadding de hero, entre secções principais.
--sp-4xlRadius
Cantos arredondados. 8 valores canónicos, do recto ao pill.
Cantos rectos. Tabelas, edges técnicos.
radius.noneCantos discretos. Inputs, badges, pequenos containers.
radius.smPadrão. Botões, cards secundários.
radius.mdCards principais, modais.
radius.lgCards hero, containers grandes.
radius.xlBlocos brand, CTAs de landing.
radius.2xlChips, tags, badges pill.
radius.pillElementos circulares — avatares, dots.
radius.fullShadow
5 elevações. shadow-1 discreta a shadow-4 modal. Brand-glow só em CTA UP.
Elevação mínima. Cards de tabela, itens hover leve.
shadow.1Cards normais em superfícies claras.
shadow.2Cards elevados, dropdowns, popovers.
shadow.3Modais, hero cards, brand statements.
shadow.4Glow azul UP. CTAs primários em foco.
shadow.brand-glowMotion
Durações e curvas de easing. Micro-interacções são fast (120ms), transições grandes slow (400ms).
Instantâneo — sem transição. Usar em toggles de estado que não precisam animação.
duration.instantMicro-interacções: hover em botões, transição de cor.
duration.fastPadrão UP: aparecer/desaparecer de elementos.
duration.baseModais, drawers, transições entre estados grandes.
duration.slowFundo, motivos decorativos, autoplay ambientes.
duration.ambientCurva padrão UP — entrada e saída suaves.
easing.standardAceleração forte para chamar atenção — usar em CTA hover.
easing.emphasizedLogos
Todas as versões da logo UP + produtos (UP Ads, UpScale, Studio UP). Fundo claro vs escuro — não improvisar.
Preto "UP" + seta azul. Hero lockup — usar em fundo claro.
Versão monocromática preta. Materiais impressos, faxes, docs sem cor.
Versão branca completa. Obrigatória em fundos escuros / brand pages.
Produto UP Leads · captação e qualificação de leads.
Ícones · Arrow motif
A seta ↗ é o motivo universal da marca. Usar como bullet, divider, decorativo, cover art.
Contorno azul — usar como motivo decorativo em backgrounds.
Tokens
CSS + JSON de todos os tokens do sistema. Importar antes de qualquer design.
Componentes · Preview
Previews HTML de cada componente atómico. Referência visual + código copiável.
UI Kits
Kits reais aplicados — site institucional, business card de agência, webinar. Base para novas superfícies.
Kit completo para site institucional UP: Hero, Nav, Services, CaseGrid, ContactForm, CTA, Footer. Código JSX + preview HTML.
Brandbook
O brandbook oficial UP e regras de aplicação da logo. Referência master.
Brandbook oficial UP navegável no browser. Referência para toda a marca.
Catálogo visual das logos de todos os produtos UP (UP Ads, UpScale, Studio UP).
Templates de produto
Aplicações reais UP: Portal do Cliente, Dashboard, Email Relatório, Landing Orçamento, Calendário Editorial e mais.
Voz & Tom
Como a UP escreve. Directa, confiante, humana, técnica sem jargão. Zero emoji. Português cheio.
Sem rodeios. Números antes de adjectivos. Evidência antes de opinião. Se não sabes, diz — não inventes.
UP escolhe. Não sugere timidamente. Copy afirmativa, comando quando fizer sentido.
Brasileiro conversacional, mesmo em B2B. Não empresarial. Frases curtas OK. Contracções OK.
Cita ferramentas e métricas por nome. Explica quando vier de fora do marketing.
Todos os acentos, cedilhas e diacríticos sempre. Nunca ASCII. Não misturar palavras em inglês quando existe equivalente natural em pt-BR/pt-PT.
Nunca usar emojis em copy oficial UP (docs, propostas, relatórios, ads). Excepção: WhatsApp de cliente, se o cliente já usa.