[00] Design System & Brand Identity

MAESTRO

Você rege. O negócio executa.

Brandbook completo e design system da marca MAESTRO. Filosofia visual Podium Stage. Tokens, cores, tipografia, componentes, motion e guidelines -- tudo governado por CSS custom properties.

60+
Componentes UI documentados
8
Seções no brandbook
100%
Dark-first. CSS custom properties.
6
Arquivos de design system
[01]

Quatro Pilares

O sistema MAESTRO é organizado em quatro pilares que vão da estratégia de marca até o motion design. Cada pilar sustenta o próximo.

[01]
Brand Identity
Estratégia de marca, posicionamento, filosofia visual, moodboard e guidelines completas.
Guidelines Strategy Moodboard
[02]
Design Foundations
Tokens de design, paleta de cores, sistema tipográfico, espaçamento, bordas e sombras.
Tokens Cores Tipografia
[03]
UI Components
Botoes, cards, inputs, badges, alertas, tabelas, toggles, progress bars e mais 60+ componentes documentados.
Buttons Cards Forms Feedback
[04]
Motion & Showcase
Sistema de animações, transições, easings e templates para aplicações visuais da marca.
Easings Transitions Templates
[02]

Podium Stage

Podium Stage é a filosofia visual do MAESTRO: um sistema 100% dark-first onde cada token de cor, componente e animação foi desenhado para evocar a experiência do palco de uma orquestra. Em um palco escuro, cada luz importa.

Profundidade
Backgrounds midnight (#1C1C2E) criam a sala de concerto. Camadas de superfície constroem dimensão sem perder o escuro.
Brilho Controlado
O gold (#C9A84C) é usado com parcimônia extrema — 10% da interface. Quando aparece, comanda atenção absoluta, como um spot no solista.
Precisão
Grid rígido de 4px, espaçamento matemático, alinhamento perfeito. A partitura não tolera improviso no layout.
Comando
Tipografia Montserrat Black (900) com letter-spacing expansivo. A voz da marca comanda a sala antes de qualquer palavra ser lida.
Elegância
Transições suaves, bordas sutis, sombras profundas. O movimento é intencional — nunca decorativo, sempre comunicativo.
[03]

Paleta de Cores

Três famílias de cor que trabalham em harmonia: Midnight para profundidade, Gold para comando e Slate para legibilidade. Proporção: 70% / 20% / 10%.

Midnight -- Background & Surfaces
midnight-950
#141422
midnight-900
#1C1C2E
midnight-800
#23233A
midnight-700
#2D2D4A
midnight-600
#37376A
midnight-500
#3F3F72
Gold -- Accent & Command
gold-950
#4A3816
gold-900
#6B5220
gold-800
#886828
gold-700
#A07D34
gold-600
#B89340
gold-500
#C9A84C
gold-400
#DFBE62
gold-300
#F0D080
gold-200
#FFE399
gold-100
#FFEFC2
Slate -- Text & Neutral
slate-200
#E2E8F0
slate-300
#CBD5E1
slate-400
#94A3B8
slate-500
#64748B
slate-600
#475569
slate-700
#334155
Feedback -- Semantic
success
#4ADE80
warning
#FBBF24
error
#F87171
info
#60A5FA
[04]

Tipografia

Montserrat em todos os pesos, de Light (300) a Black (900). A hierarquia nasce do contraste de peso, não de famílias diferentes.

Hero Montserrat Black 900 / clamp(64px, 10vw, 120px) / ls: 24px
MAESTRO
Display 1 Montserrat Black 900 / clamp(36px, 5vw, 64px) / ls: -1px
Seu negócio funcionando sem você
Display 2 Montserrat Bold 700 / clamp(24px, 3vw, 38px)
Pare de escolher entre ser artista e ser profissional
Heading 1 Montserrat Bold 700 / 28px / ls: -0.5px
Diagnóstico completo em 7 dias
Heading 2 Montserrat Semibold 600 / 24px
12 especialistas trabalhando para você
Heading 3 Montserrat Semibold 600 / 20px
Garantia incondicional de 30 dias
Body Large Montserrat Regular 400 / 18px / lh: 1.8
Você construiu algo que depende só de você. Isso é risco, não negócio. O MAESTRO transforma essa realidade em 6 meses, com diagnóstico, processo e automação.
Body Montserrat Regular 400 / 17px / lh: 1.8
Cada reunião, cada processo, cada decisão foi desenhada para que você delegue com confiança. Não é sobre trabalhar mais — é sobre o negócio funcionar melhor, com ou sem você.
Eyebrow Montserrat Semibold 600 / 12px / ls: 4px / uppercase
Plano Fundador -- Vagas Limitadas
Mono JetBrains Mono 400 / 14px
--accent: #C9A84C; --bg: #1C1C2E; font-weight: 900;
[06]

Design Tokens

Todos os valores visuais do sistema, governados por CSS custom properties. Base unit: 4px. Grid rígido. Zero improvisação.

Spacing Scale (base: 4px)
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px
Border Radius
none
sm / 4px
md / 8px
lg / 12px
xl / 16px
full
Shadows
shadow-sm
shadow-md
shadow-lg
shadow-glow
CSS Custom Properties
/* Core Semantic Tokens */ --bg: #1C1C2E; --bg-card: #23233A; --bg-elevated: #2D2D4A; --text: #E2E8F0; --text-muted: #94A3B8; --accent: #C9A84C; --accent-lt: #F0D080; --border: rgba(148, 163, 184, 0.12); --inverse: #0A0A14; /* Typography */ --font-display: 'Montserrat', 'Arial Black', sans-serif; --font-sans: 'Montserrat', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 200ms; --duration-normal: 300ms;
[07]

UI Components

Componentes atômicos do design system MAESTRO. Cada um respeita os tokens de cor, tipografia, espaçamento e motion definidos no sistema.

Buttons 3 variants / 3 sizes
Fundador Ativo Urgente Info
Badges 4 variants
Inputs text, email, focus
Diagnóstico em 7 dias
Mapeamento completo de processos, gargalos e oportunidades de automação do seu negócio.
Cards hover, border, shadow
✓ Pagamento confirmado com sucesso.
⚠ Sua assinatura vence em 3 dias.
✗ Erro ao processar pagamento.
ℹ Nova funcionalidade disponível.
Alerts 4 variants
Inativo
Ativo
Progresso 72%
Toggle & Progress interactive states
Fase Prazo Entrega Status
Diagnóstico D+7 Dashboard de clareza operacional Completo
Estruturação D+30 Processos documentados Em andamento
Automação D+90 Workflows n8n ativos Planejado
Autonomia D+180 Negócio autossustentável Planejado
Table striped, hover, badges
Plano Fundador
6 Meses de Jornada
Eyebrow & Divider gold, muted
Gestão Automação Processos n8n Notion WhatsApp Dashboard Musical
Tags pill style
[08]

Motion System

Animação é intencional, nunca decorativa. Cada easing tem um propósito. Passe o mouse sobre os cards para ver cada curva em ação.

Default (ease-out)
cubic-bezier(0.4, 0, 0.2, 1) / 500ms

Transições padrão. Entrada e saída de elementos. Hover states.

Bounce
cubic-bezier(0.68, -0.55, 0.265, 1.55) / 500ms

Notificações, toasts, badges de sucesso. Uso comedido.

Spring
cubic-bezier(0.34, 1.56, 0.64, 1) / 500ms

Modais, drawers, menus. Elementos que entram com energia.

Fade
opacity / cubic-bezier(0.4, 0, 0.2, 1) / 500ms

Overlays, tooltips, transições suaves de conteúdo.

Duration Scale
Token Duração Uso
instant 100ms Feedback de clique, micro-interações
fast 200ms Hover, mudança de cor, opacidade
normal 300ms Entrada de elemento, transições padrão
slow 500ms Modais, drawers, menus laterais
glacial 800ms Transições de página, loading states
[09]

FAQ

O que é a filosofia Podium Stage?
É a filosofia visual do MAESTRO: um sistema 100% dark-first inspirado no palco de uma orquestra. Fundo profundo como sala de concerto, dourado como instrumentos sob luz, precisão como partitura. O princípio central: "Em um palco escuro, cada luz importa."
Posso usar a marca sobre fundo claro?
Sim, mas é uso excepcional. A versão invertida (midnight sobre branco) existe para documentos impressos e parcerias externas. O padrão é sempre dark-first.
Quais fontes o sistema usa?
Montserrat para display (900) e corpo (300-700), e JetBrains Mono para dados e código. A hierarquia vem do contraste de peso dentro da mesma família, nunca de fontes diferentes.
Como usar o gold corretamente?
O gold (#C9A84C) deve ocupar no máximo 10% da interface. É a cor de comando — botões CTA, eyebrows, destaques críticos. Nunca usar como background de área grande.
Onde encontro os tokens de design?
O arquivo MAESTRO-brand-tokens.json contem todos os tokens em formato JSON. As CSS custom properties estão documentadas nesta página na seção Tokens. O arquivo MAESTRO-color-palette.md tem a paleta detalhada com regras de uso.