Barber Bank

Sua barbearia no piloto automático

Brand Guidelines & Visual Identity Kit

v1.0 — Marco 2026

Logo

Todas as variacoes do logo e regras de uso.

Horizontal (Dark)SVG

Horizontal (Light)SVG

Stacked (Dark)SVG

Stacked (Light)SVG

Icon ColorSVG

Icon Mono WhiteSVG

Icon Mono BlackSVG

WordmarkSVG

Espaco minimo

Mantenha pelo menos 1x a altura do icone de espaco livre ao redor do logo.

Tamanho minimo

O ícone não deve ser menor que 24px. O lockup completo não deve ser menor que 120px de largura.

24px min

120px min

Preview em contexto

Não faça

Não estique

Não rotacione

Não altere as cores

Não reduza a opacidade

Cores

Clique em qualquer valor para copiar.

Marca Original

Brand Black

Cor institucional preta

Brand Orange

Cor institucional laranja original

Brand Navy

Cor institucional azul marinho

Brand Off-White

Cor institucional branco suave

Acentos Gold

Gold

Cor principal da marca. CTAs, destaques, logo.

Gold Light

Hover e variação clara do gold

Gold Dark

Variação escura para contraste

Gold Muted

Gold original da paleta, estados desabilitados

Primarias (Blacks)

Primary 900

Fundo principal da página

Primary 800

Fundo de seções

Primary 700

Fundo de cards elevados

Primary 600

Bordas e divisores

Primary 500

Elementos sutis

Secundarias

Teal

Indicadores de sucesso e positivo

Emerald

Status ativo, online

Rose

Erros, alertas, exclusão

Blue

Links, informações

Neutras

Neutral 50

Texto principal (claro)

Neutral 100

Texto secundario claro

Neutral 200

Bordas claras

Neutral 300

Placeholders

Neutral 400

Texto secundario

Neutral 500

Texto muted

Gradientes

Gold

linear-gradient(135deg, #FFB800 0%, #FFD54F 50%, #FFB800 100%)

Logo, botões primários, destaques

Hero

linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #121212 100%)

Fundo da seção hero

Gold Radial

radial-gradient(ellipse at center, rgba(255, 184, 0, 0.15) 0%, transparent 70%)

Glow decorativo de fundo

Tipografia

Plus Jakarta Sans em todos os pesos, com escala responsiva via clamp().

Familia tipografica

Plus Jakarta Sans

'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif

Pesos

300 Light

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

400 Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

500 Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

600 SemiBold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

700 Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

800 ExtraBold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Escala

H1clamp(2.05rem, 5vw, 4.4rem)

Sua barbearia no piloto automático

Hero headline

H2clamp(1.7rem, 4vw, 3.35rem)

Sua barbearia no piloto automático

Títulos de seção

H3clamp(1.32rem, 2.5vw, 1.8rem)

Sua barbearia no piloto automático

Subtítulos

Bodyclamp(0.98rem, 0.92rem + 0.2vw, 1.08rem)

Sua barbearia no piloto automático

Texto corrido

Small0.875rem

Sua barbearia no piloto automático

Labels, captions

XS0.75rem

Sua barbearia no piloto automático

Badges, meta info

Espacamento e Radius

Tokens de espacamento e border-radius usados no design system.

Espacamento

space-2

0.5rem (8px)

space-3

0.75rem (12px)

space-4

1rem (16px)

space-5

1.25rem (20px)

space-6

1.5rem (24px)

space-8

2rem (32px)

Border Radius

10px

radius-sm

14px

radius-md

20px

radius-lg

28px

radius-xl

999px

radius-pill

Container

Max width1200px

Padding X (desktop)2rem (32px)

Padding X (mobile)1.5rem (24px)

Componentes

Componentes reais do design system renderizados ao vivo.

PremiumButton

import { PremiumButton } from '@/components/ui/premium-button'

ModernButton

import { ModernButton } from '@/components/ui/modern-button'

PremiumCard

import { PremiumCard } from '@/components/ui/premium-card'

Default

Com gold accent e hover

Elevated

Sombra mais forte

Glass

Glassmorphism

PremiumInput

import { PremiumInput, PremiumTextarea } from '@/components/ui/premium-input'

Normal

ErroCampo obrigatorio

Textarea

PremiumBadge

import { PremiumBadge } from '@/components/ui/premium-badge'

GoldNeutralSuccessDanger

Skeleton

import { Skeleton } from '@/components/ui/skeleton'

text

card

list-item

stat

Glassmorphism

.glass

Backdrop blur com borda sutil

.glass-gold

Glassmorphism com tinta dourada

Icones

Usamos Lucide React como biblioteca de icones.

import { Scissors } from 'lucide-react'

ScissorsLogo, marca

CalendarAgenda

UsersClientes

WalletCaixa/Financeiro

BarChart3Relatorios

PlusAcao de criar

SearchBusca

SettingsConfiguracoes

HelpCircleAjuda

LogOutSair

ChevronDownExpandir

ClockHorario

CheckSucesso/Confirmacao

XFechar/Cancelar

AlertCircleAlerta/Erro

MenuMenu mobile

Tamanhos recomendados

16px

Dentro de botoes

20px

Uso geral, standalone

24px

Feature icons, destaques

Ilustracoes

Estilo visual para ilustracoes e empty states.

Agenda vazia

Agenda vazia

Clientes vazio

Clientes vazio

Equipe vazia

Equipe vazia

Diretrizes de estilo

Use paleta escura com acentos dourados
Formas geometricas simples, cantos arredondados
Minimalista — poucos elementos, sem excesso de detalhes
Consistente com o tom premium do design system
Sempre inclua ao menos um elemento dourado (#FFB800)

Voz e Tom

Como o Barber Bank se comunica.

Personalidade

DiretoConfianteParceiroSimples

Tom

Informal e profissional. Fala como um parceiro de negócio que entende a rotina do barbeiro.

Faca

Use linguagem clara e direta
Fale como parceiro, não como vendedor
Use "você" e tom de conversa
Mencione resultados concretos (números, tempo economizado)
Adapte vocabulário ao universo da barbearia
Seja breve — barbeiro tem agenda cheia

Não faça

Não use jargão técnico (API, backend, deploy)
Não fale de forma excessivamente formal
Não prometa coisas vagas ("melhore seu negócio")
Não use emojis em excesso
Não use termos em inglês quando há equivalente em português
Não infantilize o usuário

Exemplos de copy

Hero headline

“Sua barbearia no piloto automático”

CTA button

“Começar agora — é grátis”

Empty state

“Nenhum agendamento hoje. Hora de relaxar ou divulgar!”

Error message

“Algo deu errado. Tente de novo em alguns segundos.”

WhatsApp bot

“Opa! Qual serviço você quer agendar?”

Motion

Principios e tokens de animacao.

Sutil > Chamativo

Animações devem guiar o olhar, não competir com o conteúdo.

Proposital > Decorativo

Cada movimento deve ter uma razão: feedback, transição ou hierarquia.

Rápido para feedback, lento para ambiente

Interações respondem em <200ms. Animações ambientais são suaves e lentas.

Demos ao vivo

fadeIn

fadeInUp

fadeInDown

pulseGlow

shimmer (skeleton loading)

Duracoes

Nome	Valor	Uso
Fast	0.2s	Hover, focus, micro-interações
Normal	0.3s	Transições de estado, toggles
Slow	0.4s	Entrada de modais, expansões
Slower	0.6s	Animações complexas, page transitions

Easings

Nome	Valor	Uso
Default	ease	Uso geral
Smooth	cubic-bezier(0.4, 0, 0.2, 1)	Transições suaves, sliders
Bounce	cubic-bezier(0.68, -0.55, 0.265, 1.55)	Toasts, notificações, emphasis

Downloads

Todos os assets de identidade visual para download individual.

Logo Horizontal (Dark)Logo Horizontal (Light)Logo Stacked (Dark)Logo Stacked (Light)Icon Color Icon Mono White Icon Mono Black Wordmark Instagram Post Instagram Story WhatsApp Status LinkedIn Banner OG Image Email Signature

Design System by BarberBank Team

Voltar ao inicio