Sistema de Design · v1.0 — vivo

O design system
que soluciona sem burocracia.

Tokens, componentes e animações construídos sobre a mesma fundação CSS do site OfficeBiz. Para times que querem velocidade sem perder identidade.

Ver componentes → Tokens & tipografia ↗
Cobertura de tokens
78%
+12 pts vs. trim. anterior
Componentes prontos
24
+5 em revisão
Adoção pelos times
92%
+3 squads conectados
02 · Tipografia

Hierarquia que fala antes do conteúdo.

Manrope para corpo, Airbnb Cereal para títulos. Pesos numéricos, line-heights generosos e letter-spacing ajustados para densidade ideal em telas modernas.

H1 · Display
font-family: Airbnb Cereal
weight: 800 · size: 68px
line-height: 105% · tracking: -0.66px

Soluções que escalam

H2 · Section
weight: 800 · size: 52px
line-height: 115% · tracking: -1px

Seções com presença

H3 · Subsection
weight: 700 · size: 32px
line-height: 110% · tracking: -0.24px

Cabeçalhos de bloco

H4 · Card title
weight: 700 · size: 24px
line-height: 110% · tracking: -0.88px

Títulos de cartão

H5 · Eyebrow
weight: 600 · size: 20px
line-height: 120%

Subtítulo de apoio

H6 · Label heading
weight: 600 · size: 18px
line-height: 130%

Tag de seção

Body LG
family: Manrope · weight: 400
size: 20px · line-height: 140%

Para parágrafos de destaque, intros de seção e descrições longas. Conforto de leitura em densidades altas.

Body
family: Manrope · weight: 400
size: 18px · line-height: 150%

Texto padrão para o corpo de páginas. Pensado para leitura digital sem fadiga, com tracking levemente negativo (-0.36px) para manter densidade.

Body SM
family: Manrope · weight: 400
size: 16px · line-height: 162%

Para descrições de cartões, captions e contextos de meta-informação onde o conteúdo precisa ceder espaço para o destaque visual.

Caption / Label
family: Manrope · weight: 600
size: 12px · uppercase · tracking: 0.14em

Eyebrows · etiquetas · meta

03 · Cores

Paleta enxuta. Decisões claras.

Quatro famílias semânticas, três neutros e um accent que se torna assinatura. Cada token vive em hex, RGB e HSL, com regras de contraste e contexto.

Tokens primários

Primary · Lime
Accent · Decorative · CTA
#B9E848 rgb(185, 232, 72) hsl(75, 78%, 60%) opacity 12 / 24 / 45%
Secondary · Forest
Neutral text on light · BG dark
#1B3A1C rgb(27, 58, 28) hsl(122, 36%, 17%) contrast AAA on bg
Secondary Deep
Hero BG · Footer · Modal scrim
#0D2410 rgb(13, 36, 16) hsl(127, 47%, 10%)
Background
Surface base on light
#F8F8F8 rgb(248, 248, 248) hsl(0, 0%, 97%)
Background Alt
Mini-cards · Subtle separations
#F1F3ED rgb(241, 243, 237) hsl(80, 17%, 94%)
Text Light
Body text on dark surfaces
#E4E5DF rgb(228, 229, 223) hsl(70, 9%, 89%)

Feedback semântico

Success
Confirmações · estados positivos
#22C55Ergb(34, 197, 94)hsl(142, 71%, 45%)
Warning
Alertas · pendências
#FBBF24rgb(251, 191, 36)hsl(43, 96%, 56%)
Danger
Erros · ações destrutivas
#EF4444rgb(239, 68, 68)hsl(0, 84%, 60%)
Info
Tooltips · neutros informativos
#60A5FArgb(96, 165, 250)hsl(213, 94%, 68%)

Gradientes decorativos

Regras de uso

Texto · BG · Borda

Texto principal: Secondary sobre BG claro · Text Light sobre BG escuro. Bordas: 8% do Secondary em estados padrão, 22% em hover/focus.

Hover · Active · Disabled

Hover sobe Y -2px e adiciona glow primary. Active comprime para Y 0 e diminui shadow. Disabled: opacidade 45%, cursor not-allowed, sem hover.

Contraste · A11y

Primary sobre Secondary Deep: AA Large. Text Light sobre Secondary Deep: AAA. Body sobre BG: AAA. Evite Primary como texto pequeno em BG claro.

Decorativos vs. semânticos

Primary = accent decorativo + CTA. Feedback (success/warning/danger/info) é reservado a estados de sistema, jamais como cor de marca.

05 · Imagens

Imagens que reforçam o tom: confiança e movimento.

Mockups de produto, fundos verdes profundos com glow lime, gradientes mesh decorativos e fotografias de equipe em luz quente. Toda imagem passa por um leve tint da paleta para amarrar a identidade.

Galeria de assets do site OfficeBiz

Hero · Background

Floresta digital

hero-bg.avif · 1920×1080 · grid sutil + grão
Mockup mobile 1
Mockup · 1

Card balance

hero-image-1.avif · interface mobile
Mockup mobile 2
Mockup · 2

Statistic

hero-image-2.avif · gauge + linha
Brand · Glow

Primary glow

Composição decorativa · use atrás de stat cards

Avatares & testemunhos

Avatares circulares 1:1 no estilo Notion · ilustrações vetoriais (SVG) geradas via DiceBear · notionists · resolução infinita, hand-drawn, fundos da paleta. Use em depoimentos, listas de membros e badges de equipe.

Diretrizes de uso

Tint da marca

Toda foto colorida recebe overlay 25% secondary + 12% primary em mix-blend multiply.

Aspect ratios

16:9 para hero, 4:5 para mockup, 4:3 para textura, 1:1 para avatares circulares. Nunca corte conteúdo essencial.

Iluminação

Luz quente e direcional, contraste médio-alto. Sombras suaves, nunca duras. Evite cenários estéreis ou stock genérico.

Composição

Mockups em ângulo (-6° / +6°) sobrepostos em pares. Texturas decorativas com mesh radial em primary a 12-18% de opacidade.

Pessoas

Diversidade de gênero, etnia e idade. Plano peito ou rosto. Olhar discreto, não posado em excesso. Sempre com consentimento.

Formato & peso

AVIF para fotografias de hero (até 280KB), SVG para ícones e ilustrações vetoriais. PNG só quando precisar de transparência rasterizada.

06 · Componentes

Peças prontas, rápidas e consistentes.

Botões com glow e shimmer, inputs com focus ring suave, cards com lift, navbar pílula, modais que respondem ao hover. Tudo com transições cubic-bezier(.2,.8,.2,1).

Buttons

Primary com glow, ghost para BG escuro, secondary forest. Variantes --sm e --lg. Hover dispara shimmer diagonal e elevação.

Inputs

Borda forte, focus com ring de 4px primary @ 25% e leve translate Y. Usa o mesmo radius dos botões small.

Cards

Mini-cards para features e métricas. Hover eleva, amplia sombra e fortalece a borda. Ícone com glow primary.

Privacy first

Tokens auditáveis e versionados.

Multi-locale

Suporte a pt-BR e en-US.

Navbar (pill)

Pílula flutuante com blur, borda translúcida e CTA primary. Links com hover em fundo lime soft.

OfficeBiz
Home Recursos Preço
Demo →

Sections (padrão de bloco)

Padding vertical generoso (120px desktop), centralização do head, eyebrow + título + subtítulo. Backgrounds variam entre BG, BG Alt e Secondary Deep.

Light
BG base
Alt
BG alternada
Dark
Secondary Deep

Modals

Animação de entrada: scale .92 → 1 com fade. Passe o mouse no quadro tracejado para ver.

Confirmar publicação?

Os tokens novos serão distribuídos a todos os squads imediatamente após confirmação.

Badges & Tooltips

Badges com dot opcional. Tooltip aparece em hover com slide vertical de 6px.

Live Stable Beta Deprecated Preview
Tooltip primary
Atalho ⌘K
07 · Ícones · Lucide

Glifos com peso e cantos consistentes.

Biblioteca Lucide: stroke 2px, cantos arredondados, viewBox 24×24. Cada ícone amarrado ao tema em que aparece — segurança, finanças, métricas, time e ações.

Segurança & privacidade

shield-check
lock
key-round
fingerprint

Finanças & pagamentos

credit-card
wallet
banknote
receipt

Análise & métricas

trending-up
bar-chart-3
pie-chart
target

Produtividade & time

briefcase
users
folder-kanban
calendar-days

Interface & sistema

monitor
bell
search
settings

Ações universais

check
plus
arrow-right
star

Todos os ícones vêm da biblioteca Lucide · use o nome do ícone como referência: import { ShieldCheck } from 'lucide-react'

08 · Animações

Movimento que guia, não distrai.

Easing único cubic-bezier(.2,.8,.2,1), durações entre 250ms e 800ms. Reveal por IntersectionObserver, glow contínuo e shimmer disparado em hover.

Pulse
Indicadores live, dots
Float
Orbs, partículas, ícones leves
Spin
Loaders, transições contínuas
Morph
Formas decorativas
Glow
CTAs em foco, badges live
Shimmer
Disparo em hover de CTA

Reveal on scroll

Adicione .ds-reveal a qualquer elemento. Use .ds-reveal--delay-1..4 para encadear.

const io = new IntersectionObserver(es => {
  es.forEach(e => e.isIntersecting && e.target.classList.add('is-visible'))
}, { threshold: 0.12 })
document.querySelectorAll('.ds-reveal').forEach(el => io.observe(el))

Princípios

Movimento curto (≤ 350ms) para feedback de interação; longo (600–800ms) para entrada. Nunca anime cor sem easing. Respeite prefers-reduced-motion.

  • Easing padrão: cubic-bezier(.2,.8,.2,1)
  • Reveal: 800ms / 28px de offset
  • Hover: lift Y -2px + shadow up
  • Glow primary: ring + outer glow
  • Shimmer: 900ms · gradient diagonal