; /* ─── SECTION 01: VISÃO GERAL ────────────────────────── */ const Overview = () => (

{[ { color:'blue', label:'Direção', title:'Design como Direção', desc:'Design não é só execução. É direção criativa, construção de identidade e diferencial competitivo para cada conta.' }, { color:'teal', label:'Clareza', title:'Clareza Operacional', desc:'Este playbook define como trabalhamos: processos, decisões, rituais e métricas. Menos ambiguidade, mais autonomia.' }, { color:'amber', label:'Sustentabilidade', title:'Qualidade Sustentável', desc:'Previsibilidade não mata criatividade. Governança criativa garante qualidade consistente sem burnout.' }, ].map(p => { const c = accentColors[p.color]; return (

{p.label}

{p.title}

{p.desc}

); })}

Contexto da Operação

{[[String(T.meta.designerCount),'Designers no time'],[String(T.meta.accountCount),'Contas ativas'],[(T.meta.accountCount / T.meta.designerCount).toFixed(1),'Contas / designer']].map(([n,l],i) => (

{n}

{l}

))}

O que você vai encontrar aqui

{['Como as contas são classificadas e por quê','Como designers são alocados por tipo de conta','Fluxo padrão de trabalho da entrada à entrega','O que você pode decidir sozinho vs. alinhar','Rituais para manter o time sincronizado','Métricas simples para aprender e melhorar'].map(item => (

✓

{item}

))}

Este playbook não é: manual de design, guia de marca, sistema de vigilância ou microgestão. É um documento vivo — muda conforme o time aprende.

); /* ─── SECTION 02: TIPOLOGIA DE CONTAS ───────────────── */ const Accounts = () => { const [active, setActive] = useState('A'); const store = window.useStore(); const acc = T.accounts[active]; const tc = typeColors[active]; const liveItems = store.getAccountsByType(active).map(a => { const d = store.getDesigners().find(x => x.name === a.designerName); return { name: a.name, designer: a.designerName, initials: d?.initials || null }; }); return (

{['A','B','C'].map(t => ( ))}

Características

{acc.characteristics.map(c => (

→

{c}

))}

Perfil de Atuação

{[['Objetivo criativo', active==='A'?'Construir sistema':active==='B'?'Aplicar sistema':'Executar pontual'],['Nível de decisão',acc.decision],['Risco de retrabalho',acc.rework],['Iterações esperadas',acc.iterations],['Autonomia do designer',active==='A'?'Baixa (alta direção)':active==='B'?'Média':'Alta']].map(([k,v],i) => (

{k} {v}

))}

Exemplos

{acc.examples}

Contas Tipo {active} ({liveItems.length})

{liveItems.map(it => (

{it.name} {it.designer ? · {it.designer} : · a alocar}

))}

); }; /* ─── SECTION 03: ALOCAÇÃO ───────────────────────────── */ const Allocation = () => (

{[ { color:'purple', title:'Dedicação Exclusiva', desc:'Designer alocado 100% para uma única conta. Ideal para contas Tipo A.', pros:['Imersão total no contexto da conta','Consistência criativa máxima','Relacionamento forte com cliente'], cons:['Menos exposição a outros projetos'] }, { color:'blue', title:'Dedicação Compartilhada', desc:'Designer atende 2–3 contas. Ideal para contas Tipo B e C.', pros:['Maior variedade de projetos','Melhor uso da capacidade do time','Cross-pollination de ideias'], cons:['Requer gestão de contexto e prioridades'] }, ].map(m => { const c = accentColors[m.color]; return (

{m.title}

{m.desc}

{m.pros.map(p =>

{p}

)} {m.cons.map(p =>

−

{p}

)}

); })}

Limites de Carga por Tipo

{[['A','1','conta','Dedicação exclusiva recomendada','purple'],['B','2–3','contas','Máximo em dedicação compartilhada','blue'],['C','4–5','contas','Demanda baixa e pontual','green']].map(([t,n,u,d,col]) => { const tc = typeColors[t]; const ac = accentColors[col]; return (

{n}

{u}

{d}

); })}

Senioridade por Tipo de Conta

{[['A','Sênior / Lead','Pensamento sistêmico, gestão de complexidade, autonomia criativa, relacionamento com stakeholders C-level'],['B','Pleno / Sênior','Produtividade, atenção a padrões, adaptação criativa dentro de sistemas, gestão de tempo'],['C','Júnior / Pleno','Execução técnica, follow-through, comunicação clara, gestão de expectativas']].map(([t,level,comp]) => (

{level}

{comp}

))}

); /* ─── SECTION 04: MAPA DE ALOCAÇÃO ──────────────────── */ const AllocationMap = () => { const [filter, setFilter] = useState('all'); const store = window.useStore(); const liveAccounts = store.getAccounts(); const liveDesigners = store.getDesigners(); const allocated = liveAccounts.filter(a=>a.designerName).length; const unallocated = liveAccounts.filter(a=>!a.designerName).length; const accountsByType = (t) => liveAccounts.filter(a => a.type === t).map(a => { const d = liveDesigners.find(x => x.name === a.designerName); return { name: a.name, designer: a.designerName, initials: d?.initials || null }; }); return (

{[[String(liveAccounts.length),'Contas Ativas','var(--fg)'],[String(liveDesigners.length),'Designers','var(--fg)'],[String(allocated),'Contas Alocadas','var(--acc)'],[String(unallocated),'A Alocar','oklch(72% .18 85)']].map(([n,l,col]) => (

{n}

{l}

))}

{[['all','Todas'],['A','Tipo A'],['B','Tipo B'],['C','Tipo C']].map(([v,l]) => ( ))}

{['A','B','C'].filter(t => filter==='all'||filter===t).map(type => { const tc = typeColors[type]; const items = accountsByType(type); return (

{T.accounts[type].label}

{items.filter(i=>i.designer).length}/{items.length}

{items.length === 0 &&

Nenhuma conta neste tipo.

} {items.map(item => (

{item.name} {item.designer ?

{item.designer}

: A alocar}

))}

); })}

Visão por Designer

{liveDesigners.map(d => { const myAccs = liveAccounts.filter(a => a.designerName === d.name); return (

{d.initials}

{d.name}

{myAccs.length > 0 ? myAccs.map(a => {a.name}) : Sem conta ativa}

{myAccs.length > 0 && {myAccs.length} {myAccs.length === 1 ? 'conta':'contas'}}

); })}

); }; /* ─── SECTION 05: PIPELINE ───────────────────────────── */ const Pipeline = () => { const [tab, setTab] = useState('A'); return (

{T.pipeline.stages.map((s, i) => (

{s.num}

{s.label}

{s.desc}

{i < T.pipeline.stages.length - 1 &&

} ))}

Profundidade por Tipo de Conta

{['A','B','C'].map(t => ( ))}

{T.pipeline.byType[tab].map((row, i) => (

{row.stage}

{row.detail}

))}

{[['2 rounds inclusos','Adicionais cobrados separadamente'],['Revisão interna obrigatória','Gate antes de entregar ao cliente'],['Fast-track sob aprovação','Custo adicional + aval do lead'],['Mudança = nova demanda','Não extensão — entra na fila']].map(([t,d]) => (

{t}

{d}

))}

); }; /* ─── SECTION 06: BRIEFING ───────────────────────────── */ const Briefing = () => { const [open, setOpen] = useState(null); return (

O briefing é o acordo.

Porque define escopo, expectativa, contexto e critérios de sucesso. Sem briefing, não há acordo claro — e sem acordo, há retrabalho.

{[['Protege o designer','Clareza sobre o que será entregue e por quê'],['Protege o cliente','Garante que a entrega atende o que foi pedido'],['Protege o processo','Reduz ambiguidade e retrabalho desnecessário']].map(([t,d]) => (

{t}

{d}

))}

Modelo Mínimo Obrigatório — clique para ver exemplo

{T.briefing.items.map((item, i) => (

setOpen(open === i ? null : i)} style={{ display:'flex', alignItems:'center', gap: 16, padding:'16px 20px', cursor:'pointer', borderBottom: open===i ? '1px solid var(--br)' : i < 6 ? '1px solid var(--br)' : 'none', background: open===i?'var(--bg2)':'transparent', transition:'background .15s' }}> {item.num} {item.field} {item.desc} {open===i?'↑':'↓'}

{open===i &&

Exemplo:{item.example}

}

))}

✓ Briefing Bom

{T.briefing.good.map(g =>

•

{g}

)}

× Briefing Ruim

{T.briefing.bad.map(g =>

•

{g}

)}

); }; /* ─── SECTION 07: PRINCÍPIOS ─────────────────────────── */ const Principles = () => { const [open, setOpen] = useState(null); return (

{T.principles.map((p, i) => { const c = accentColors[p.color]; return (

setOpen(open===i?null:i)}>

{p.num} {open===i?'↑':'↓'}

{p.title}

{p.subtitle}

{open===i && (

{p.desc}

Na prática

{p.actions.map(a =>

→

{a}

)}

Exemplo: {p.example}

)}

); })}

Estes princípios não são regras isoladas — são um sistema de pensamento que guia decisão criativa em qualquer situação. Use-os para dar e receber feedback estruturado.

); }; /* ─── SECTION 08: GUARDRAILS ─────────────────────────── */ const Guardrails = () => { const [open, setOpen] = useState('green'); const zones = [ { key:'green', label:'Zona Verde', sub:'Você decide sozinho', color:'green', data: T.guardrails.green }, { key:'yellow', label:'Zona Amarela', sub:'Alinhamento necessário', color:'amber', data: T.guardrails.yellow }, { key:'red', label:'Zona Vermelha', sub:'Escalada obrigatória', color:'red', data: T.guardrails.red }, ]; return (

{zones.map(z => { const c = accentColors[z.color]; const isOpen = open === z.key; return (

setOpen(isOpen ? null : z.key)} style={{ display:'flex', alignItems:'center', gap: 16, padding:'18px 24px', cursor:'pointer' }}>

{z.label}

{z.sub}

{isOpen?'↑':'↓'}

{isOpen && (

{z.data.desc}

Exemplos

{z.data.items.map(item => {item})}

{z.data.with && (

Com quem alinhar / escalar

{z.data.with.map(w =>

{w}

)}

); })}

Fluxo de Decisão Rápida

{['Você está diante de uma decisão → Identifique a zona (Verde, Amarela, Vermelha)','Zona Verde? Execute com confiança.','Zona Amarela? Alinha rápido com a pessoa certa antes de executar.','Zona Vermelha? Escala imediatamente — não tenta resolver sozinho.'].map((s,i) => (

{i+1}

{s}

))}

); }; /* ─── SECTION 09: RITUAIS ────────────────────────────── */ const Rituals = () => { const [open, setOpen] = useState(0); const freqColor = { 'Semanal':'blue', 'Quinzenal':'purple', 'Mensal':'amber' }; return (

{T.rituals.map((r, i) => { const fc = accentColors[freqColor[r.freq]] || accentColors.blue; const isOpen = open === i; return (

setOpen(isOpen?null:i)} style={{ display:'flex', alignItems:'center', gap: 16, padding:'16px 20px', cursor:'pointer' }}>

{r.freq}

{r.title}

{r.duration} · {r.who}

{isOpen?'↑':'↓'}

{isOpen && (

{r.desc}

Formato

{r.format.map((f,fi) => (

{fi+1}.

{f}

))}

Output: {r.output}

)}

); })}

); }; /* ─── SECTION 10: MÉTRICAS ───────────────────────────── */ const Metrics = () => { const [open, setOpen] = useState(null); return (

Por que medir?

Métricas não servem para vigiar designers. Servem para identificar padrões, gargalos e oportunidades de melhoria no sistema. O objetivo é aprendizado coletivo, não performance individual.

{[['Volume','Entender capacidade','blue'],['Retrabalho','Identificar causas raiz','amber'],['Gargalos','Resolver bloqueios','red']].map(([t,d,col]) => (

{t}

{d}

))}

{T.metrics.map((m, i) => { const c = accentColors[m.color]; const isOpen = open === i; return (

setOpen(isOpen?null:i)} style={{ display:'flex', alignItems:'center', gap: 16, padding:'18px 20px', cursor:'pointer' }}>

{m.num}

{m.title}

{m.question}

{isOpen?'↑':'↓'}

{isOpen && (

O que medir

{m.measures.map(x =>

•

{x}

)}

Para que serve

{m.purpose.map(x =>

→

{x}

)}

Exemplo: {m.example}

)}

); })}

✓ Faça

{['Revise métricas mensalmente na retrospectiva','Foque em padrões, não casos isolados','Use para identificar causas raiz, não culpados','Transforme insights em ações concretas','Compartilhe métricas com transparência'].map(x =>

• {x}

)}

× Não faça

{['Usar métricas para cobrar indivíduos','Criar ranking de produtividade','Medir por medir, sem usar dados para melhorar','Esconder métricas do time','Ignorar feedback qualitativo em favor de números'].map(x =>

• {x}

)}

); }; const SECTIONS = { Overview, Accounts, Allocation, AllocationMap, Pipeline, Briefing, Principles, Guardrails, Rituals, Metrics }; Object.assign(window, { SECTIONS });

{title}