Guia de UI Padronizado

Aqui você encontra todos os componentes visuais oficiais do projeto Robozin. Utilize sempre essas classes para manter a consistência visual do site.

Marcas / Logos

Variações das logos do projeto Robozin. Utilizadas nos cabeçalhos, rodapés e materiais da marca. Dê preferência aos formatos em SVG por conta da escalabilidade.

Robozin.ai - Logo Principal (Consumidor)

Robozíndico - Logo Área do Síndico (Tema Claro)

Robozíndico - Logo Área do Síndico (Tema Escuro)

Robozin.PRO - Logo Área do Profissional

Robozin.condo - Logo Azul

Robozin.imob - Logo Amarela

Robozin.constru - Logo Amarela

Robozin.chat - Logo WhatsApp (Verde)

Ícone Exclusivo - WhatsApp Design System

Tipografia

Fontes utilizadas: Inter (corpo de texto) e Plus Jakarta Sans (alguns destaques). Pesos variam entre 400 (normal) a 800/900 (black).

Heading 1 - H1 Hero

Conectando você ao profissional ideal.

text-5xl font-black text-tech-900 tracking-tight

Heading 2 - H2 Sessions

Seu condomínio mais inteligente

text-3xl font-bold text-slate-800

Heading 3 - H3 Cards/Titles

Profissional Verificado

text-xl font-bold text-slate-700

Body Text

Mais de 150 categorias de serviços com profissionais verificados pela nossa inteligência artificial. Agilidade, segurança e garantia de um bom negócio.

text-base text-slate-500 font-medium leading-relaxed

Small Labels

Informação adicional

text-sm text-slate-400 font-medium uppercase tracking-widest

Cores (Brand & Grays)

Sempre utilize a paleta padrão via Tailwind Config para backgrounds e textos.

Brand (Primária) bg-brand #00c4b5

Brand Dark bg-brand-dark #009b8f

Brand Light bg-brand-50 #e5f9fb

Accent (Alerta) bg-accent #F7B731

Pro Color bg-pro #fcbb2a

Tech 900 bg-tech-900 #18181b

Slate 800 bg-slate-800 #1e293b

Slate 50 (Fundo) bg-slate-50 #f8fafc

Botões

Padrão de borda rounded-xl para ações grandes, ou rounded-full para botões secundários / menores.

class="bg-brand text-white font-bold py-3.5 px-6 rounded-xl hover:bg-brand-dark transition-colors shadow-sm"

class="bg-white border border-slate-200 text-slate-600 font-semibold px-6 py-3.5 rounded-xl hover:bg-slate-50 transition-colors shadow-sm"

class="bg-pro text-white font-bold py-3.5 px-6 rounded-xl hover:bg-amber-500 transition-colors shadow-sm"

class="bg-white border border-slate-200 text-slate-600 font-semibold px-4 py-2 rounded-full shadow-sm hover:shadow-sm hover:text-tech-900 transition-all text-sm"

class="bg-brand/10 border border-brand/20 text-brand hover:bg-brand hover:text-white py-2.5 rounded-lg text-sm font-bold transition-all"

Inputs & Formulários

Foco claro com focus:border-brand. Borda arredondada rounded-xl.

Nome Completo

class="w-full h-11 px-4 rounded-xl border border-slate-200 text-slate-700 placeholder-slate-400 focus:outline-none focus:border-brand bg-slate-50/50"

Categoria

Descrição

Cards & Containers

Padrão: rounded-2xl border border-slate-200 shadow-sm.

Serviço Ágil

Sua solicitação enviada diretamente para profissionais livres naquele exato momento.

Saiba mais →

João Silva

Eletricista

4.9 (12 aval.)

Estrutura base: <div class="bg-white rounded-2xl border border-slate-200 shadow-sm">...</div>

Mais Variações de Cards

Cards adicionais mapeados do projeto principal.

Light Feature Card (Hover Glow)

Cotações Coletivas

Divida serviços caros (limpeza de ar, telas, pequenas obras) com seus vizinhos com um clique e ganhe descontos com os parceiros.

Interactive List Card (Dark)

Tudo no seu WhatsApp

Faça a gestão da sua agenda e crie orçamentos enviando apenas um áudio.

Feature Glow Card

Saúde e Bem Estar

Psicólogos, Personal Trainers, Fisioterapeutas... Uma página mais leve, que foca na autoridade.

Ver Página Exemplo →

Product/Plan Card

Robozíndico

Para Síndicos e Admins

Assistente 24h via WhatsApp com triagem.
Orçamentos automatizados e relatórios.

Blog Article Card (Light)

Sobre o Robozin

Profissional com perfil verificado

O selo de perfil verificado significa que o profissional passou por validação rigorosa.

Badges & Tags

Para rótulos, alertas em cards ou indicadores de status.

Online Agora Pro Pendente Cancelado

Navegação & Header

Header fixo com backdrop-blur. Logo SVG + nav desktop + hamburger mobile.

Header: class="fixed top-0 left-0 z-[100] w-full bg-slate-50/90 backdrop-blur-md border-b border-slate-200/60" Nav: class="hidden lg:flex items-center gap-8 font-semibold text-slate-600 text-sm"

Mobile hamburger: class="lg:hidden text-slate-600 w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100"

Dropdowns

Menus flutuantes com hover. Padrão rounded-2xl shadow-xl.

Profissional Consumidor Síndico Pro

Imobiliárias Síndicos

Container: class="w-56 bg-white border border-slate-200 rounded-2xl shadow-xl p-2"

Item: class="flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 text-slate-700 font-medium transition-colors text-sm"

Tabs / Abas

Abas superiores para formulários e dashboards. Aba ativa com cor bg-brand.

Aba Ativa

Aba Inativa

Outra Aba

Conteúdo da aba ativa aparece aqui.

Ativa: class="flex-1 py-4 bg-brand text-white font-black uppercase tracking-widest"

Inativa: class="flex-1 py-4 border-b border-slate-200 text-slate-400 font-bold bg-slate-50/80 uppercase tracking-widest hover:text-slate-600"

Modais

Overlay escuro com backdrop-blur. Padrão de card central rounded-2xl.

Pedido Confirmado!

Seu pedido foi enviado com sucesso. Você receberá uma confirmação no WhatsApp.

Overlay: class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-[200]" Card: class="bg-white rounded-2xl border border-slate-200 p-6 max-w-sm w-full shadow-premium text-center"

Formulário Lateral (Agendar Pedido / Cotação) - Padrão

Modal do consumidor onde ele solicita: Que profissional precisa?

Agendar Pedido

Comparar Preços

Qual seu nome?

Que profissional precisa?

Descrição do Serviço

CEP

Quando Precisa?

Data Preferida (até 3 datas)

Aceito termos e privacidade

100% gratuito. Você só paga ao profissional após o serviço.

Verificados Robozin

Todos os profissionais passam por rigorosa checagem de antecedentes e validação de documentos para sua total segurança.

Formulário Lateral (Agendar Pedido / Cotação) - Profissional

Modal da página de perfil do profissional onde ele solicita a Especialidade.

Agendar Pedido

Comparar Preços

Qual seu nome?

Qual especialidade precisa?

Descrição do Serviço

CEP

Quando Precisa?

Data Preferida (até 3 datas)

Aceito termos e privacidade

100% gratuito. Você só paga ao profissional após o serviço.

Verificados Robozin

Todos os profissionais passam por rigorosa checagem de antecedentes e validação de documentos para sua total segurança.

Modal 3: Perfil Premium (Glassmorphism)

Variante com Glassmorphism, sobreposição de Logo, abas embutidas e design focado para a página do profissional logado onde o formulário é flutuante em cima de background com fotos.

Variação 1: Brand Color (Padrão)

Qual seu nome?

Qual especialidade?

Descrição do serviço

CEP

Quando precisa?

Imediato Agendar

Data preferida (até 3 datas)

Aceito termos e privacidade

PROFISSIONAL ROBOZIN

Confirmação no WhatsApp.

Detalhes do Projeto

Fotos ou vídeos para um orçamento dinâmico.

Descrição detalhada

Mídia (Opcional)

Adicionar fotos PNG, JPG, MP4

PROFISSIONAL ROBOZIN

Confirmação no WhatsApp.

Variação 2: Amber/Gold Color

Qual seu nome?

Qual especialidade?

Descrição do serviço

CEP

Quando precisa?

Imediato Agendar

Data preferida (até 3 datas)

Aceito termos e privacidade

PROFISSIONAL ROBOZIN

Confirmação no WhatsApp.

Detalhes do Projeto

Fotos ou vídeos para um orçamento dinâmico.

Descrição detalhada

Mídia (Opcional)

Adicionar fotos PNG, JPG, MP4

PROFISSIONAL ROBOZIN

Confirmação no WhatsApp.

Tabelas

Tabelas com bordas sutis. Cabeçalho em text-slate-500 uppercase.

Serviço	Profissional	Status	Data
Eletricista	Carlos Silva	Confirmado	19/03/2026
Encanador	João Santos	Pendente	18/03/2026
Pintor	Ana Lima	Cancelado	17/03/2026

Header th: class="text-[11px] font-extrabold text-slate-400 uppercase tracking-widest py-3 px-4" Row: class="border-b border-slate-100 hover:bg-slate-50 transition-colors"

Breadcrumbs

Navegação hierárquica. Links em text-slate-500, item atual em text-slate-800 font-bold.

Nav: class="flex text-[13px] font-semibold text-slate-500" Item atual: class="text-slate-800 font-bold"

Paginação

Botões quadrados w-10 h-10 rounded-lg. Ativo com bg-brand text-white shadow-brand-glow.

...

Ativo: class="w-10 h-10 rounded-lg bg-brand text-white font-bold shadow-md shadow-brand-glow"

Inativo: class="w-10 h-10 rounded-lg border border-slate-200 text-slate-600 hover:text-brand hover:border-brand font-semibold bg-white shadow-sm"

Tooltips

Info hover com fundo bg-slate-800. Usado nos selos verificados.

Verificado Robozin

Profissional verificado pela Robozin, documentos checados e recomendado pela comunidade.

Mais info

Tooltip simples com texto informativo.

Tooltip: class="absolute bottom-full mb-2 bg-slate-800 text-white text-[10px] font-bold rounded-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all shadow-xl z-50"

Footer

Rodapé escuro com bg-[#09090b]. Links em uppercase tracking-widest.

BOZIN TECNOLOGIA LTDA

CNPJ: 53.879.715/0001-22

Curitiba - PR

Área do Profissional Termos de Uso Privacidade

Footer: style="background-color: #09090b;" class="text-slate-400 py-16 text-sm border-t border-slate-800" Links: class="text-[11px] uppercase font-bold tracking-widest text-slate-500 hover:text-brand-400"

Avatares & Avatar Groups

Círculos com borda branca. Overlap com -space-x-3.

Grande (w-16)

Médio (w-10)

Avatar Img

Avatar Group

Avatar Group: class="flex -space-x-3" com cada img: class="w-10 h-10 rounded-full border-2 border-white object-cover shadow-sm"

Star Ratings

Estrela preenchida em text-[#F7B731] ou text-yellow-300.

Rating Grande (Listagem)

5.0

Rating Inline (Card) 4.9 (12 aval.)

Badge de Avaliação

Média 4.9/5

Star: class="text-[#F7B731] fill-[#F7B731]" ou class="text-yellow-300" fill="currentColor"

Upload / Drop Zone

Área pontilhada border-dashed com hover para border-brand.

Envie fotos ou vídeos Isso ajuda muito no orçamento

class="border-2 border-dashed border-slate-300 rounded-xl hover:border-brand hover:bg-brand-50/50 cursor-pointer bg-slate-50 group"

Ícones (Lucide)

Usamos Lucide Icons. Load: <script src="https://unpkg.com/lucide@latest"></script> + lucide.createIcons().

Ícones mais usados no projeto

wrench

user

building

building-2

store

shield-check

zap

star

bell

medal

upload-cloud

git-compare

smartphone

check-circle

calendar

file-text

Uso: <i data-lucide="nome-icone" class="w-5 h-5 text-slate-500"></i> — Tamanhos comuns: w-3, w-4, w-5, w-6

Device Mockups

Frames virtuais de iPhone e Android para abrigar IFrames ou imagens de demonstração.

Modelo iPhone (iOS)

Insira o seu IFrame ou <img> aqui

Modelo Android

Insira o seu IFrame ou <img> aqui