O manual completo da marca DFL (DevFellowship): 22 capítulos — fundação, estratégia, voz, logo, cor, tipografia, iconografia, imagem, grafismos, layout, motion, aplicações digitais e impressas, merch, vídeo, canais, sub-marcas, governança, anexos, logos das mini-apps e regras de UI. Sistema dark-first, um único accent amber (#E07A4A), logo puramente tipográfico com o motivo `/`, e o arquétipo Magician/Outlaw.
A fellowship onde aprender é shippar trabalho real em produção, com IA como parceira inseparável. Este documento é como a DFL se apresenta — em palavra, em forma, em código.
O que a DFL é, por que existe, o que defende, o que recusa. A base sobre a qual todo o resto (logo, voz, produto, sub-marca) é só consequência.
Formar o operador completo de software pós-IA — em prod, em meses, com fluxo real — não em laboratório, não em quatro anos.— Propósito DFL
Bootcamps ensinam sintaxe desconectada do trabalho real. Faculdade leva quatro anos sem que o aluno mergeie uma linha em produção. Aprender sozinho é mês após mês sem ritmo, sem feedback, sem rede.
No meio desse vácuo, a IA mudou o que significa "ser dev". O gap entre o que escolas ensinam e o que prod exige nunca foi tão grande.
DFL forma fellows que shippam em produção desde a semana 1, mentorados por quem está shippando hoje, operando com IA como parte do fluxo — não como brinquedo.
A medida é entrega: PR mergeado, plano publicado, eval rodado. Não nota, não certificado, não horas de aula.
DFL como sistema operacional do desenvolvimento de software brasileiro — e, na sequência, global. Forma fellows → fellows treinam empresas via Revera → empresas contratam fellows → o ciclo gira.
"Passei pela DFL" vira selo de "sabe operar com IA em produção, em time". Não é título. É prova de operação.
Stack interna consolidada (plans · harness · brain). Primeira coorte com placement > 70%. Revera com 5 contratos B2B fechados.
Rede alumni > 300 fellows. Revera vira product-led — empresas operam plans+harness+eval no próprio time, sem dependência humana.
"Operador DFL" vira categoria. Empresa sem time formado em runtime DFL é a exceção. Influência exportada para LATAM, depois global.
Entrega de valor real é a métrica única. Plano que não vira PR é overhead. Review que não shippa é cerimônia.
Automatize o trabalho — o custo de API segue. Otimizar custo de token antes de otimizar fluxo é otimizar a coisa errada.
Decisões duráveis ficam em planos públicos versionados. Agentes executam. Humanos destravam. Conhecimento institucional não vive na cabeça de uma pessoa.
Captura honesta do que está quebrado, mesmo quando inconveniente. Drift escondido vira dívida. Drift capturado vira eval.
Raízes locais (PT-BR, cultura brasileira, tu/bora/valeu), ambição mundial. A voz é BR. O design é global. As duas coisas convivem sem custo.
"Você não sai da DFL junior. Você sai com PR real merged, plano publicado, eval rodado, e uma rede de gente que está shippando hoje."
"Você não está comprando entrega. Você está comprando a transição da sua engenharia. Seu time sai 2–3× mais produtivo, com fluxo IA estabelecido, operando como nós operamos."
Transforma. Faz acontecer. Vê padrões que outros não veem (plans+harness+eval como runtime). Promete não conforto, mas transformação real e mensurável.
Recusa a ordem estabelecida (faculdade, bootcamp, consultoria-por-hora). Opinião forte, ferramentas próprias, "we don't do what everyone does". Não pede licença.
Magician puro é sedutor mas frágil — promete sem provar. Outlaw puro é interessante mas auto-marginalizante. A combinação dá transformação com prova: o Magician produz o efeito, o Outlaw entrega sem cerimônia.
Tainan, dev sênior multi-stack, viveu os três modos do dev moderno: tradicional (frameworks, time, prod), consultor/founder (entregar valor → cliente paga), e IA-first (operar com agente, plan-driven).
No terceiro modo, percebeu que o gap entre devs formados pelo modelo (a) e o que (c) exige é gigante — e nenhuma escola estava ensinando isso. Começou informalmente, mentorando devs próximos. Cohort virou programa. Programa virou DFL.
Dá pra escalar via processo + ferramentas próprias, não via "mais aulas". DFL não vende curso. Vende infraestrutura de prática.— O momento de virada
DFL — fellowship de devs que shippam em produção, operando com IA, todo dia.
A DevFellowship é uma fellowship brasileira para devs que querem operar software como o trabalho exige hoje: planos públicos, agentes executando, drift sendo capturado, PR sendo mergeado. Não vendemos curso — operamos uma runtime própria (plans · harness · brain · sandbox) que fellows e empresas usam para entregar valor real, em meses. Quando alguém passa pela DFL, sai sabendo trabalhar com IA em produção, em time — não em demo.
"DevFellowship — fellowship onde a gente forma devs operando com IA em produção. Você entrega projetos reais, é mentorado por quem shippa todo dia, sai daqui empregável ou contratado pela rede. A gente também treina empresa via Revera. Brasileira, ambição global."
Review como tax, não como dado. PR aberto há 9 dias porque três pessoas precisam aprovar. Process theater.
Quatro anos formando gente que nunca shippou. Termina com PowerPoint, não com PR.
Vende vibes e canecas. Não ensina fluxo de trabalho real. Sai sabendo to-do list e vai pra LinkedIn.
O mito de que profissionalismo precisa ser seco, formal, sem voz. Dá pra ser excelente e ainda parecer gente.
Tese covarde. Nossa tese: IA amplifica devs que sabem operar. Quem aprende, sobe. Quem não aprende é amplificado pra fora.
Vende entrega, não transição. Cliente fica dependente. Sem capacity-building, time interno do cliente não muda.
Aluga dev por mês. Não constrói competência interna. Cliente paga pra sempre.
Vídeo gravado + quiz. Zero feedback humano. Sem ship. Sem rede.
| Métrica | Definição | Cadência |
|---|---|---|
| PRs mergeados / fellow / semana | Throughput por pessoa | Semanal |
| Drift signals capturados / run | Honestidade do sistema | Por run |
| Eval pass rate | % de runs com grade pass | Semanal |
| Plans publicados / mês | Velocidade de decisão durável | Mensal |
| Placement rate (fellow → contratado) | % de fellows em prod no fim do programa | Por coorte |
| Tempo até primeiro PR mergeado | Day-1 to merge-1 | Por fellow |
| NPS interno | Como o fellow se sente | Mensal |
| Revera · throughput antes/depois | Métrica B2B principal | Por contrato |
Quem queremos atrair, quem deixamos passar, e como a DFL se relaciona com Revera, Alavancagem, Labs e os produtos internos.
| Fase | Touchpoint | Surface | Tom |
|---|---|---|---|
| 1. Descoberta | Post de Tainan no LinkedIn | LinkedIn DFL · Tainan | Profissional · opinativo |
| 2. Pesquisa | Landing devfellowship.com | Web | Confiante · direto |
| 3. Aplicação | Formulário (10min · técnico) | Web · Calendly | Filtro |
| 4. Triagem | 72h · email + TG | Email · TG | Transacional |
| 5. Conversa | 30min com mentor | Loom · Meet | Conversational |
| 6. Onboarding | Welcome kit · manual A5 | Físico · email | Editorial |
| 7. Semana 1–4 | Primeiro PR em prod | Discord · TG · paperclip | Corrido |
| 8. Semana 5–8 | Plan publicado · primeiro drift | plans.tainanfidelis.com | Técnico denso |
| 9. Semana 9–12 | Projeto final · placement | Discord · email · LinkedIn | Operacional |
| 10. Graduation | Certificado · graduation kit | Físico · cerimônia | Editorial · ritual |
| 11. Alumni | Drops mensais | Discord alumni · email | Insider |
Definir o público é definir quem não cabe. A clareza protege a marca tanto quanto atrai os certos.
| Território | Quem ouve | O que dizemos | Como provamos |
|---|---|---|---|
| Formação técnica pós-IA | Fellow ideal · alumni · candidatos | O modo real de operar com IA em prod, em time. | PRs mergeados, planos públicos, eval rodado. |
| Capacity-building corporativo | CTO · VP Eng · Head of Platform | Não consultoria — transição. 2–3× throughput. | Métricas antes/depois, runs de harness em prod do cliente. |
| Opinião técnica autoral | Comunidade tech BR · LATAM · alumni | Como pensar dev/IA em 2026. Plans > tutoriais. | Posts LinkedIn · blog · livro Alavancagem. |
| Infraestrutura de prática | Devs avançados · early adopters | Plans-app, harness, brain mudam fluxo. | Self-hosted stack · repos públicos · demos overnight. |
Junto, isso é uma runtime própria. Ninguém mais opera assim.
| Caminho | Vende | Resultado típico | Limitação | Tempo até prod |
|---|---|---|---|---|
| Bootcamp tradicional | Sintaxe (React, Node) | Sai sabendo to-do list | Não ensina fluxo, IA, ship | ∞ (não shippa) |
| Faculdade | Diploma | 4 anos sem entregar linha | Perde a era IA · teoria · sem portfólio | ~4 anos |
| Sozinho | Nada (gratuito) | Sem ritmo, vira hobby | Sem feedback, rede, urgência | ~2 anos |
| DFL | Infra de prática + rede | Shippa em prod desde semana 1 | Não cabe quem quer hand-holding ou diploma | ~3 meses |
| Modelo | Vende | Pós-contrato |
|---|---|---|
| Consultoria | Horas | Resolve problema imediato. Time interno continua o mesmo. |
| Software house | Código | Entrega projeto. Time fica dependente do externo. |
| Revera | Capacity-building | Treina o time. Mensurável. Capacita. |
Arquitetura branded house: DFL é a mãe. Sub-marcas herdam tokens (cor, tipo, voz) mas têm lockups distintos. Produtos internos são identificados por nome+mono, sem mark próprio.
DFL · devfellowship (the mother) ├── DFL Fellowship · programa core (product line, não sub-marca) ├── Revera · B2B / corporativo · sister-brand · lockup distinto ├── Alavancagem · livro · extensão editorial · lockup próprio ├── DFL Labs · playground experimental · visual mais solto └── DFL Edu · guarda-chuva educacional Produtos internos (não são sub-marca · usam DFL): plans · harness · brain · paperclip · sandbox-manager · dfl-runner dfl-learn · dfl-financing · dfl-flows · lesson-studio · books-app
| Stage | Surface | Métrica |
|---|---|---|
| Awareness | LinkedIn Tainan · YouTube · IG | Impressões · reach |
| Interest | Landing · blog · podcast | Visitas · tempo na página |
| Consideration | Newsletter · Discord público · meetup | Inscritos · presenças |
| Application | Formulário aplicação | Taxa de conclusão · qualidade |
| Conversion | Triagem + conversa + decisão | Taxa fellow novo / aplicação |
| Stage | Surface | Métrica |
|---|---|---|
| Awareness | LinkedIn Revera · referral · Tainan posts | Visitas landing Revera |
| Interest | Landing Revera · case study | Tempo de leitura · scroll |
| Lead | Calendly 60min agendado | Conversão visita → call |
| Proposta | Doc 8 páginas enviado | Engagement de leitura |
| Fechamento | Contrato assinado | Taxa proposta → fecha · ticket |
| Produto | Preço | Termos |
|---|---|---|
| Fellowship (16 semanas) | R$ 12.000 | 4× ou à vista (5% desc) |
| Fellowship + Revera-ready | R$ 18.000 | Inclui pipeline B2B |
| Revera · empresarial (12 sem · 3 squads) | Sob consulta | R$ 200k+ médio |
| Revera · enterprise (custom) | Sob consulta | R$ 500k+ médio |
| DFL Edu · workshop (1-3 dias) | R$ 800–3000 / participante | Por evento |
| Alavancagem (livro) | R$ 89 físico · R$ 39 digital | Lançamento 2026 |
O guia nomeia o arquétipo explicitamente: Magician dominante, Outlaw secundário.
Por que o par: um Magician puro é sedutor mas frágil (promessas sem prova); um Outlaw puro é interessante mas se auto-marginaliza. Combinados, dão transformação com prova — o Magician produz o efeito, o Outlaw entrega sem cerimônia. Energia Creator/Sage aparece na textura de apoio (tooling próprio, método público, ADRs, drift-as-data), mas o par dominante + secundário é Magician + Outlaw.
O Magician dominante (transformação via sistemas — plans+harness+eval como runtime; disciplinado — "proof, not promise") e o Outlaw secundário (rejeita diploma/bootcamp/consultoria-por-hora, é dono das ferramentas, não pede permissão) descrevem a voz/edge. Co-secundário é o Creator — Outlaw é a atitude, Creator é a atividade diária (a gente constrói; "founders who code"; projetos reais shippados).
Mas o edge sozinho soa frio/elitista. O que mantém quente é a alma (soul): uma linha Sovereign (devs soberanos donos do próprio cap table; autonomia como métrica de output — a tese de liberdade econômica) e um núcleo Caregiver (elevar jovens do Sul-Global / favela na pirâmide de Maslow; um movimento, não uma corporação; a base espiritual da Polaris).
Regra: ambos têm que aparecer. Magician/Outlaw sem a alma Sovereign/Caregiver = frio e elitista; a alma sem o edge = mole e esquecível.
Como a DFL fala — em LinkedIn, em landing page, em deck comercial, em canal interno. A voz é o ativo mais barato e mais difícil de copiar.
Sênior brasileiro que morou fora 10 anos, voltou pra investir no Brasil. Direto sem ser rude. Opinião forte, mas escuta. Cita planos e PRs como prova — não argumenta com adjetivo.— Perfil da marca
| Em vez de | Diga | Por quê |
|---|---|---|
| "para" | "pra" | Voz BR. Soa gente. |
| "você" | "tu" (interno) / "você" (B2B) | Tu na comunicação fellow. Você em landing Revera. |
| "oferecemos" | "a gente faz" / "shippa" | Direto. Ativo. |
| "alinhar expectativas" | "combinar o escopo" | Diz o que é. |
| "jornada" | "caminho", "programa", "fluxo" | "Jornada" é palavra-zumbi. |
| "solução" | nome do que faz | "Solução" mascara o objeto. |
| "impactar" | "mudar", "mover", "shippar" | Verbo concreto > verbo de marketing. |
| "experiência" | "o que tu vai fazer" | Concreto. |
| "compreender" | "entender" | Mesma coisa · menos formal. |
| "realizar" | "fazer" / "rodar" | Mesma coisa. |
| "plataforma" | "app" / "site" / "ferramenta" | Específico. |
| "colaboradores" | "time" · "fellows" · "pessoas" | Soa gente. |
Direto. Operacional. PT+EN sem cerimônia. Verbos ativos. Nomeia os artefatos (plan, drift signal). Tem voz.
Zero objeto, zero prova, zero opinião. Vocabulário-zumbi. Soa como release de qualquer SaaS. Banido em qualquer canal DFL.
Coorte 04 · aplicações abertas até 30 jul. Set 2026. 18 vagas.
Estamos muito felizes em anunciar a abertura das inscrições para a próxima coorte do nosso programa, que terá início em setembro de 2026.
plans-app v2.1 saiu. Lock automático em ADR. PRs vinculados. Drift signal por episode.
Temos o prazer de comunicar uma evolução importante da nossa plataforma, agora ainda mais robusta...
Forma dev que ship em prod, em meses, operando IA.
Capacitamos profissionais de tecnologia a navegarem no novo paradigma da inteligência artificial...
Status DEGRADED · harness 3/11 falhou em onboarding-revera. Drift +0.34 capturado. Fix em 30min.
Estamos enfrentando uma instabilidade temporária. Pedimos desculpas pelo inconveniente. Nossa equipe técnica...
Profissional + opinião + prova. PR shipped, métrica antes/depois, decisão técnica autoral.
Corrido, gírias técnicas+BR, abreviado, TG-friendly. "Bora", "valeu", "PR aberto".
Confiança calma, número grande, prova social, sem hype. "Isto resolve isto".
Curta, escopada, sem floreio. 3 páginas resolvem. Entregáveis nomeados.
Declarativo, curto, sem qualificadores. Frase por linha. Apple-1986. Permitido ser solene.
Respeitoso, direto, sem desculpa performática. Reconhece, age, fecha.
Autoral, médio formato. Mais Georgia que Inter no peso. Mais ar.
Seco, opinativo, técnico. Tweet curto · thread quando vale.
"Bootcamp ensina sintaxe. DFL forma operador." Estado anterior → ruptura → estado novo. Ideal pra LinkedIn e landing.
"11 PRs mergeados enquanto eu dormia." Cena específica → método embutido. Conta a runtime sem listar features.
"Publicamos o plan. Subagents rodaram. Drift capturado virou eval." Três atos da runtime. Convence dev sênior.
"'IA vai substituir devs' vs 'IA amplifica devs que sabem operar'." Posição comum + contraposição. Editorial.
"Semana 1: zero PR · Semana 12: 14 PRs em prod." Time-line concreto da transformação. Landing + IG.
"Captei drift +0.34 · não escondi · virou ADR · virou eval." Sistema aprendendo em público. Newsletter / blog.
| Contexto | DFL diz | Não diz |
|---|---|---|
| Botão CTA primário | Aplicar → · Agendar → · Shippar PR | "Clique aqui" · "Saiba mais" |
| Botão secundário | Ler mais · Ver runtime · Demo | "Voltar" sem contexto |
| Empty state | "Nenhum plan ainda. Bora começar." | "Você ainda não tem nada cadastrado" |
| Loading | "rodando harness…" | "Aguarde, por favor" |
| Erro | "Quebrou. Capturado em drift signal." | "Ocorreu um erro inesperado" |
| Success | "PR mergeado. Próximo?" | "Operação realizada com sucesso!" |
| 404 | "plan errado. route não existe." | "Página não encontrada" |
| Coming soon | "em 2026. waitlist aberta." | "Em breve!" |
| Form label | "email" | "Por favor, informe seu endereço de email" |
| Form helper | "a gente responde em 72h" | "Nossa equipe entrará em contato" |
Sempre traduza "crew" como "tripulação" (registro institucional / elevado; ressoa com a metáfora barco/cibernética e a viagem de transformação do arquétipo Magician) ou "tropa" (registro fellow-facing / cru; a energia de esquadrão leal do Outlaw, "minha tropa"). Escolha pelo contexto. A gíria favela / Global-South "bonde" é permitida só para a voz de fellow / social-media mais crua. Nunca use "turma", "equipe" ou "time" (soam escola / corporativo).
Wordmark tipográfico em Barlow Condensed + slash amber como assinatura. Sem brasão, sem ilustração, sem AI sparkle. A marca é uma palavra tratada com precisão.
A logo DFL é puramente tipográfica. Três letras em Barlow Condensed Black, justaposta a uma barra (slash) em amber que marca a posição: dev / fellowship. A barra é o único elemento gráfico do sistema.
| Elemento | Tratamento | Token |
|---|---|---|
| Wordmark | Barlow Condensed · 700 (Black) | --p-font-display |
| Tracking | −2px no display (≥48px), −1px abaixo | tracking-tight |
| Slash (barra amber) | Mesmo glyph "/", peso 700, cor brand | --brand · #E07A4A |
| Espaçamento ao slash | 0.12em antes e depois | gap · 0.12em |
| Tagline | JetBrains Mono · 500 · letter-spacing 1.4px · uppercase | --p-font-mono |
| Cor padrão | Wordmark ink-primary · slash brand | ink + brand |
Área de proteção igual à altura da letra F em todos os lados. Nada (texto, ícone, foto, borda) entra nessa zona.
Não estique.
Não rotacione.
Não troque o slash.
Não use amber no wordmark inteiro.
Não aplique gradient.
Não aplique shadow.
Não troque a fonte.
Não use sobre amber sem inverter.
Não embale em moldura decorativa.
Não duplique slash.
Não use serifa.
Não combine com emoji.
Co-branding com sub-marcas usa o slash como elemento de junção: DFL / SUB. Com parceiros externos: pipe vertical com 2× clear space.
| Contexto | Variação | Notas |
|---|---|---|
| Favicon · 16/32px | Mark D-bar · amber sobre dark | Sem wordmark, sem tagline |
| App ícone iOS/Android | Mark D-bar · radius 22% | Sand background |
| GitHub org avatar | Mark D-bar quadrada · 4px radius | Para reconhecimento na timeline |
| Header de app | Wordmark horizontal · 24px altura | Sem tagline |
| Slide / deck | Vertical centralizada · canto inferior | Tagline opcional na capa |
| Certificado / diploma | Vertical centralizada · topo · 40mm | Sempre com tagline |
| Vídeo intro/outro | Wordmark anima slash por último | Slash entra com snap, 220ms |
| Assinatura email | Wordmark · 90px largura · PNG @2x | + tagline + nome em mono |
| OG card / social | Wordmark canto inferior · 14-20px | Não no canto da informação principal |
| README GitHub | H1 wordmark inline | Slash amber em span |
| Print · papel timbrado | Mono preto · canto superior esquerdo | Tagline no rodapé |
| Camiseta peito | Wordmark default · 22px largura | Bordado · amber thread |
| Camiseta costas | Manifesto · slash 60-90px | Centro do tórax |
| Stencil de evento | Slash isolado gigante | Decoração ambiente |
A logo atual é a v1.0 deste guide. Versões anteriores eram lockups ad-hoc.
<!-- DFL wordmark · v1.0 · primary -->
<svg viewBox="0 0 240 60" xmlns="http://www.w3.org/2000/svg">
<style>
.dfl-text { font-family: "Barlow Condensed", sans-serif;
font-weight: 700; font-size: 56px;
letter-spacing: -2px; }
.ink { fill: #f4ede2; }
.brand { fill: #E07A4A; }
</style>
<text class="dfl-text ink" x="0" y="48">DFL</text>
<text class="dfl-text brand" x="118" y="48">/</text>
</svg>Sand escuro, um único acento âmbar, quatro cores de estado e uma paleta de dez cores para pessoas. A cor só entra quando carrega informação: ação, posição, estado ou identidade.
surface-page é #0a0908 e as superfícies sobem por tom. O modo claro existe só para impresso e editorial (5.8).#E07A4A é a cor de ação e de posição. Nunca é fundo, borda decorativa nem status.box-shadow.Uma tela de documento ou lista usa duas superfícies: page e panel. Uma tela de ferramenta usa três: stage, page e panel. A raised entra só em overlay real, ou como seleção dentro de um panel.
O surface-scrim é rgba(10,9,8,0.72) e cobre a tela atrás de um dialog.
O acento aparece em quatro lugares: o botão primário (no máximo um aceso por contexto), o item ativo do nav, a seleção (view toggle, tab ativa, radio, slide selecionado) e o hover de título ou link para um objeto. Link inline em prosa usa ink-primary com sublinhado border-strong; o acento só entra no hover.
O focus ring é rgba(224,122,74,0.45) com 3px (--c-focus-ring). Ele é a única sombra permitida.
Um primário por contexto. O olho sabe para onde ir.
Dois ou três botões em âmbar. Com muito acento, nada tem acento.
A forma canônica é um dot de 6 a 7px mais a palavra em ink-secondary. O fundo -subtle fica reservado a bloqueio e erro reais, no máximo um por viewport. Dica, aviso de sistema e “precisa de fulano” são texto normal.
| Estado | Dot | Uso |
|---|---|---|
| ideia / draft | anel 1,5px ink-muted | coluna Ideia, lição draft |
| todo | ink-muted sólido | coluna Todo |
| em review / aguardando | warning sólido | coluna Review |
| executando | info sólido | coluna Running |
| aprovado | anel 1,5px success | coluna Approved |
| done | success sólido | coluna Done, check de saved |
| bloqueado | ícone octagon-alert em danger-fg | botão de bloqueio (cap. 12.6) |
| Intent | Solid | Foreground | Quando |
|---|---|---|---|
| success | #5ec27e | #7ad79a | terminou |
| warning | #e0b04a | #f0c875 | review ou aguardando |
| danger | #e07a7a | #e89898 | quebrou ou bloqueado |
| info | #7aa2e0 | #9ab9e8 | executando |
Dot colorido mais a palavra: done, running, review.
Pill com fundo preenchido para um rótulo que nunca muda.
Progresso: barra de 3px, trilho border-subtle, preenchimento success, radius pill. Em zero, só o trilho.
Pessoa tem foto. Sem foto, o avatar mostra as iniciais em 600 11px, ink-inverse, sobre a cor do membro (hash do UUID). A mesma pessoa tem a mesma cor em todo lugar. Agente usa o ícone bot sobre --s-agent.
bot)A v1 sugeria uma receita de proporções por cor. A v2 troca a receita por um orçamento por tela (cap. 20) e por um piso de vazio: cerca de 30% da tela sem tinta. É um guia de revisão. Nenhuma ferramenta mede isso, e ele não vale para a lista densa nem para o kanban.
Razões calculadas pelo check.mjs do design system, com os tokens v2 do DFL.
| Token | page | panel | raised |
|---|---|---|---|
ink-primary #f6f1e7 | 17,67 | 16,60 | 15,85 |
ink-secondary #c9c0b4 | 11,07 | 10,40 | 9,93 |
ink-muted #887f71 | 5,04 | 4,74 | 4,52 |
ink-disabled #5a5249 | 2,59 | 2,44 | 2,33 |
brand-solid #E07A4A | 6,68 | 6,28 | 5,99 |
brand-fg #f0a872 | 9,99 | 9,39 | 8,97 |
O ink-muted foi clareado de #7d7568 (4,37 na page) para #887f71, e agora passa 4,5:1 nas três superfícies. O ink-disabled não passa e serve só para item desabilitado. Estado nunca depende só de cor: o dot sempre leva a palavra.
O modo claro não faz parte dos tokens v2. Ele existe para contextos editoriais e impressos: propostas, certificados, o livro e o longform de blog. App e dashboard ficam dark, e não há alternância de tema no produto.
| Papel | Hex | Uso |
|---|---|---|
| paper | #F6F1E7 | fundo editorial |
| paper-2 | #ECE4D2 | card editorial |
| ink-on-paper | #1A1714 | texto editorial |
| brand on light | #c2663b | âmbar rebalanceado, 5,1:1 |
As regras valem para o acento de cada marca. O acento é sempre o --s-brand-* do tokens.css da marca.
| Marca | brand-solid | brand-fg | Nota |
|---|---|---|---|
| DevFellowship | #E07A4A | #f0a872 | acento do guia |
| Itera | #3fd17f | #62d996 | fica perto de success #5ec27e; estado sempre leva dot e palavra |
| Revera | #3d8fe0 | #60a3e6 | azul de confiança como acento |
#0a0908.| Cor | HEX | RGB | CMYK | HSL | OKLCH |
|---|---|---|---|---|---|
| Amber primary | #E07A4A | 224 / 122 / 74 | 0 / 56 / 75 / 12 | 19° 70% 58% | 0.66 0.13 50 |
| Sand 950 | #0a0908 | 10 / 9 / 8 | 60 / 60 / 70 / 90 | 30° 11% 4% | 0.10 0.005 60 |
| Sand 50 | #f6f1e7 | 246 / 241 / 231 | 0 / 3 / 8 / 0 | 40° 51% 93% | 0.96 0.015 90 |
| Brand fg | #f0a872 | 240 / 168 / 114 | 0 / 38 / 56 / 5 | 26° 80% 69% | 0.78 0.105 55 |
| Success | #5ec27e | 94 / 194 / 126 | 55 / 0 / 50 / 18 | 140° 47% 56% | 0.74 0.130 145 |
| Danger | #e07a7a | 224 / 122 / 122 | 0 / 60 / 50 / 12 | 0° 64% 68% | 0.69 0.125 25 |
Três famílias com papéis estritos e quatro tamanhos de UI: 11, 13, 15 e 28. Barlow Condensed faz o título, Inter faz o corpo e a UI, JetBrains Mono faz a meta.
| Família | Papel | Pesos | Fallback |
|---|---|---|---|
| Barlow Condensed | título da página (display) | 600 | Inter, system-ui, sans-serif |
| Inter | corpo, UI, botões, lede | 400 · 500 · 600 | system-ui, -apple-system, Segoe UI, sans-serif |
| JetBrains Mono | meta e eyebrow | 400 · 500 | ui-monospace, SF Mono, monospace |
Os tokens v2 declaram só estas três famílias (--s-font-display, --s-font-body, --s-font-mono). A Georgia não tem token na v2. Ela fica fora da UI e vale só para editorial e impresso (cap. 13).
| Papel | Spec | Token |
|---|---|---|
| Título da página | Barlow Condensed 28/600, −0,3px, leading 1,1 | --s-text-display |
| Lede, título de sheet e dialog | Inter 15 (400 lede · 600 título) | --s-text-lead |
| UI, corpo, botões | Inter 13/400. Título de card e linha 13/500 | --s-text-body |
| Meta | JetBrains Mono 11/400, minúsculo, ink-muted | --s-text-meta |
| Eyebrow | JetBrains Mono 11/500, uppercase, 1px. Máx 1 por tela | --s-text-meta |
| Input em tela de toque | 16px, a única exceção aos quatro tamanhos | --s-text-input-touch |
Marketing, impressão e a capa do guia mantêm um nível display à parte (--s-text-marketing-md, -lg, -xl: 36, 44 e 64). Esse nível não vale para UI de app nem de site. Conteúdo do usuário (slides, capas) tem tipografia própria e não conta.
O eyebrow abre o documento, e não cada seção. Depois dele vêm o título em display, o lede em Inter 15 e o corpo em Inter 13. Prosa longa (plano, doc) pode subir para 15/1,6 e ganha H2 e H3 em Inter 600. Os tamanhos continuam os mesmos quatro.
| Contexto | Pareamento | Por quê |
|---|---|---|
| App shell | Barlow 28/600 + Inter 13 + Mono 11 | Inter resolve a UI inteira. Mono fica na statusbar e na meta. |
| Documento e plano | Barlow 28/600 + Inter 15/1,6 + H2/H3 Inter 600 | Prosa confortável com a mesma escala. |
| Dashboard e dados | Inter 13 + Mono 11 tabular | Inter para o rótulo, mono para o número. |
| Capa e marketing | nível display (36, 44, 64) | Fora do orçamento de UI. |
17 h ago, 5 / 10, .zip. Uppercase fica só no eyebrow.17 h ago · 5 / 10 · .zip: mono 11, minúsculo, ink-muted.
LAST UPDATED · 2H AGO em todo rótulo. Uppercase repetido vira ruído e o eyebrow perde o papel.
| Feature | Quando | CSS |
|---|---|---|
| tabular-nums | colunas numéricas, dashboards | font-variant-numeric: tabular-nums |
| liga (Inter) | padrão, sempre ligada | font-feature-settings: "liga" |
| calt (Inter) | padrão, sempre ligada | font-feature-settings: "calt" |
| oldstyle-nums | corpo editorial e livro | font-variant-numeric: oldstyle-nums |
| frac | receitas e livros | font-feature-settings: "frac" |
A classe .mono do tokens.css já liga tnum e ss01.
/fonts/, em WOFF2.font-display: swap evita o FOIT.@font-face {
font-family: "Inter";
src: url("/fonts/inter-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}| Sequência | Espaço | Token |
|---|---|---|
| h1 → corpo | 32px | space-8 |
| h2 → corpo | 24px | space-6 |
| h3 → corpo | 16px | space-4 |
| parágrafo → parágrafo | 16px | space-4 |
| item de lista → item | 8px | space-2 |
| seção → seção | 64px | space-16 |
A escala de espaço termina em 64px. Página tem 32px de padding no topo e 40px nas laterais, e o header da página fica a 28px do conteúdo.
Lucide, stroke 1,5, 16px na UI. Ícone é âncora de varredura e não enfeite: onde ele não carrega informação, apague. Ilustração: não temos. Foto, placeholder honesto ou diagrama.
| Parâmetro | Valor | Notas |
|---|---|---|
| Biblioteca | Lucide | UI genérica. O conjunto custom cobre só conceitos da runtime |
| Stroke | 1,5px | constante em todos os tamanhos |
| Tamanho na UI | 16px | 14px em meta e em botão com label |
| Grid de autoria | 24 × 24px | live area 20 × 20, 2px de padding |
| Linejoin e linecap | round | |
| Fill | none | outline por padrão |
| Cor | currentColor | herda do texto. Nunca uma cor fixa no SVG |
| Estado | Cor |
|---|---|
| repouso | ink-muted |
| hover | ink-secondary |
| ativo | brand-fg |
calendar mais a data, list-checks mais 5. Ícone de 13px e número em mono 11..zip, .html), ao lado do nome.Onde o ícone não entra: ao lado de cada label de formulário, em título de seção e em botão que já tem uma palavra clara (exceto o CTA primário com plus).
Para UI genérica usamos o Lucide, com o mesmo grid e o mesmo stroke. Lista pré-aprovada:
search menu x chevron-down chevron-right arrow-right plus minus settings user users mail bell calendar clock filter more-horizontal external-link copy trash edit check alert-circle info github twitter linkedin bot octagon-alert list-checks message-circle-question
Quando surge uma necessidade de ícone, olhe primeiro o Lucide. Crie um custom só para conceito específico da DFL.
dfl-components/icons, com uso real e teste visual.A DFL não tem estilo de ilustração próprio, e isso é deliberado. Ilustração custa para manter, rende pouco em produto operacional e arrisca o visual de “AI slop”. A ordem é: foto, depois placeholder honesto, depois diagrama.
border-strong, ícone e legenda (“Mermaid diagram · renders here”).Número só se for real. Métrica inventada como textura sai. Sem dado, sem gráfico.
Em produto: nunca. Em marketing público: nunca. Em canal interno de fellows (Telegram, Discord): sim, faz parte do registro corrido. Lista curta de uso interno: 🚢 ship · ✅ done · ⚠️ warn · 🧠 brain · 🚀 launch · 📋 plan · 🐛 bug · ✨ new.
<!-- icon · plan · 24x24 · stroke 1.5 -->
<svg
width="24" height="24" viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="4" y="4" width="16" height="16" rx="2"/>
<path d="M8 10h8M8 14h5"/>
</svg>Sempre currentColor. ViewBox 0 0 24 24. O SVGO roda no build.
Direção documental — pessoas reais, ambientes reais, sem encenação. Quando não tem foto pronta, placeholder honesto > stock genérico. Foto é prova, não decoração.
Pessoa real trabalhando. Tela legível ou desfocada.
Cena coletiva, baixa direção. Ambiente DFL.
Detalhe — teclado, post-it, terminal.
Documental. Plateia + speaker.
Direto, sem sorriso forçado. Olhar lateral OK.
Idem · semi-formal · com setup atrás
Tela real, em prod, chrome neutro.
Macro · post-it · note book · café.
| Param | Valor | Notas |
|---|---|---|
| Color cast | Warm · +5 a +10 mireds | Combina com sand do sistema |
| Saturação | −10 a −20% | Tira o "Instagram look" |
| Contraste | Médio · curva S leve | Sem crush em sombra |
| Highlights | −10 | Recuperação suave em janela / monitor |
| Vinheta | 0 | Não usamos |
| Grain | +5 fine grain (opcional) | Em foto de evento · dá textura editorial |
| Filtros estilizados | Não | Sem B&W estilo · sem duotone |
| Crop ratio | 4:5 portrait · 16:9 land · 1:1 social | Resto, evitar |
| Min resolução | 2400px lado maior | Print + retina |
| Format export | JPG q85 · WebP q80 · AVIF q75 | 3-format fallback |
| Tipo | Source primário | Source secundário |
|---|---|---|
| Foto DFL (fellow, evento, hub) | Banco interno /brand/photos | Fotógrafo contratado · brief próprio |
| Screenshot de produto | App rodando em prod · captura @2x | Mock do design-system v0 |
| Foto de stock (last resort) | Unsplash · busca curada · usuário verificado | Banco interno editado |
| Ícone / pictograma | Lucide-react | SVG custom DFL (cap. 07) |
| Foto histórica / referência | Public domain · Wikimedia | Citar fonte obrigatoriamente |
| B-roll vídeo | Filmado interno | Pond5 · Artgrid (last resort) |
Falta foto e o layout precisa preencher o espaço? Não invente. Coloca placeholder honesto.
alt="" (vazio explícito).# brief · foto DFL · sessão YYYY-MM-DD contexto: [1 parágrafo · o que é a DFL · o que vamos usar a foto pra fazer] mood: - warm + low-sat (cap. 8.3) - documental · pessoa trabalhando, não posando - profundidade rasa em portrait · total em ambiente shot list: 1. fellow @ work (10 frames · 1.6:1) 2. detail · keyboard / post-it (5 frames · 1:1) 3. portrait fellow (3 fellows · 5 frames cada · 4:5) 4. ambiente · hub (15 frames · misto) 5. tainan portrait · serial (10 frames · 4:5) no-go: - sorriso pra câmera - prop stock - flash duro - saturação acima de 80% entrega: - RAW + JPG q85 + WebP q80 - ratio crops já feitos - metadata · IPTC com créditos — release assinado por todos · brand/photos/releases/
A barra-slash como assinatura. Stripes diagonais sand como padrão único. Dataviz com a mesma economia. Decorações? Quase nenhuma — quando aparecem, são propositais.
A barra / da logo é o único elemento gráfico recorrente da DFL. Aparece como separador, acento, divider, bullet — sempre em amber, sempre em mesmo tratamento.
Stripes diagonais a 135°, em duas variações de sand + uma amber para uso ritual.
Toda altura, gap e padding é múltiplo de 4px. Passos usados: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80. Nada fora.
Dataviz segue o sistema: 1 série em amber, intent para estado, mono pra eixo & rótulo. Sem 3D, sem sombra, sem gradient.
--border-subtle. Eixos não recebem cor.| Layout | Estrutura | Quando |
|---|---|---|
| Hero-with-slash | Slash gigante canto + título centro + mark canto oposto | Poster · capa |
| Stat-led | Número 200pt amber + label mono pequeno + 1 frase contexto | Anúncio · social |
| Editorial-quote | Slash + Georgia italic grande + cite em mono | Manifesto · spread |
| 4-col grid | 4 cards stat ou feature alinhados | Landing seção |
| Split 60/40 | Texto à esquerda · visual à direita | Hero de landing |
| Full-bleed photo | Foto cobre tela · overlay sand-dark · texto inferior | Fellow spotlight |
| Diagram-led | Diagrama central · texto periférico | Como funciona |
| Stripe-frame | Stripe pattern só em bordas · conteúdo centro | Cover de capítulo |
Coluna única, hairline e espaço. Grid, card e segunda superfície são upgrades que pedem justificativa. A respiração é uma decisão.
| Token | Valor | Uso típico |
|---|---|---|
| space-0 | 0 | reset |
| space-1 | 4px | gap mínimo, dot e label |
| space-2 | 8px | gap entre chip e label, padding de botão de ícone |
| space-3 | 12px | gap dentro de linha densa |
| space-4 | 16px | gap entre campos de formulário |
| space-5 | 20px | padding de card |
| space-6 | 24px | padding interno de seção |
| space-8 | 32px | padding de topo da página, gap entre blocos e colunas de kanban |
| space-10 | 40px | padding lateral da página |
| space-12 | 48px | topo e base de seção em landing |
| space-16 | 64px | entre seções de página |
A escala termina em 64px. O header da página fica a 28px do conteúdo.
| Token | Min-width | Comportamento |
|---|---|---|
| phone | 0 | coluna única, drawer de nav |
| sm | 640 | grids de 2 colunas |
| md | 768 | sidebar permanente |
| lg | 1024 | alvo principal de layout |
| xl | 1280 | --c-content-max limita a largura |
| 2xl | 1536 | sem mudança estrutural |
| Composição | Estrutura |
|---|---|
| App shell | sidebar + main + statusbar (10.7) |
| Marketing | hero + três colunas de features + CTA (nível display) |
| Editorial e doc | coluna única de prosa, com sidebar de propriedades (cap. 12.8) |
| Lista densa | uma linha por item (cap. 12.7) |
| Kanban | colunas de 232px com gap de 32px (cap. 12.5) |
| Editor | stage + page + panel (cap. 12.9) |
| Formulário | campos em coluna, ações no rodapé |
| Modal e sheet | raised + border-strong, com scrim no dialog |
| Desktop | Mobile (390) |
|---|---|
| Sidebar de nav | drawer pelo ☰ (300px, page), itens de 44px |
| Toolbar com muitas ações | voltar · título · 2–3 ícones · primário · ⋯ (o resto vai no sheet “More”) |
| Painéis laterais | bottom bar de 4 destinos que abre bottom sheets |
| Tabs longas | scroll-x sem scrollbar |
| Grade de 4 colunas | 2 colunas |
| Canvas horizontal | strip com scroll-snap |
| Modal grande | tela cheia com ✕ |
| Hover e tooltip | toque. O ⓘ abre ao tocar |
Regra dura: o <body> nunca tem overflow-x. O scroll horizontal vive só em strip, tabs e kanban.
| Token | Valor | Uso |
|---|---|---|
--c-touch | 44 × 44px | mínimo absoluto em mobile |
| botão em toque | 44px | --c-button-h-touch. No desktop o botão tem 30px |
| REC e primário isolado | 48px | ação única da tela |
A área de toque pode passar do visual por padding invisível. O que conta é onde o dedo acerta.
┌ sidebar 232 / 56 ─┬─ main ────────────────────────────────────┐
│ wordmark │ h1 28 + lede 15 [ + New task ] │
│ avatar · nome │ busca · filtros ······· view ⊞ ≡ │
│ busca ⌘K │ ───────────────────────────────────────── │
│ grupos de nav │ conteúdo │
│ ─ collapse ⌘B │ │
├───────────────────┴───────────────────────────────────────────┤
│ statusbar 28 · mono 11 · dot de sync │
└───────────────────────────────────────────────────────────────┘| Parte | Medida |
|---|---|
| Sidebar expandida / recolhida | 232px / 56px (--c-sidebar-w, --c-sidebar-w-collapsed) |
| Statusbar | 28px (--c-statusbar-h) |
| Header | 56px (--c-header-h) |
| Largura máxima do conteúdo | 1280px (--c-content-max) |
| Padding da página | 32px no topo e 40px nas laterais |
| Camada | Z-index | Conteúdo |
|---|---|---|
| base | 0 | conteúdo da página |
| sticky | 10 | header e sidebar fixos |
| dropdown | 20 | menu e autocomplete |
| tooltip | 30 | tooltip e popover |
| modal-backdrop | 40 | scrim do modal |
| modal | 50 | dialog, sheet, drawer |
| toast | 60 | notificação transitória |
Nunca use z-index arbitrário (999, 9999). Use sempre uma camada nomeada.
/* 1 / 2 / 3 / 4 colunas */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
/* sidebar + main */
.app {
display: grid;
grid-template-columns: var(--c-sidebar-w) 1fr;
}
@media (max-width: 880px) {
.app { grid-template-columns: 1fr; }
}
/* largura máxima */
.container {
max-width: var(--c-content-max);
margin-inline: auto;
padding-inline: 40px;
}Motion serve à clareza: comunica relação causal, suaviza transição de contexto, confirma ação. Curvas rápidas, sem easing dramático. Microinterações pequenas e consistentes.
prefers-reduced-motion desliga tudo não-essencial.| Token | Valor | Uso |
|---|---|---|
| duration-instant | 80ms | Color shift micro · sem percepção |
| duration-fast | 120ms | Hover, focus, color shift |
| duration-base | 180ms | Default — open/close, expand |
| duration-medium | 220ms | Dialog enter, sheet slide |
| duration-slow | 320ms | Page transition · last resort |
| duration-deliberate | 600ms | Logo intro · hero · cinematic |
| ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | Default |
| ease-out | cubic-bezier(0, 0, 0.2, 1) | Entradas |
| ease-in | cubic-bezier(0.4, 0, 1, 1) | Saídas |
| ease-snap | cubic-bezier(0.2, 0.8, 0.2, 1) | Confirmação · ship pulse |
| ease-linear | linear | Progress bars, scroll-tied |
Cor de fundo muda. Sem scale. Sem shadow novo. Sem ripple.
Focus aparece imediato. Animar focus é prejudicar a11y.
Scrim fade-in junto.
Vida útil 4s. Saída 180ms ease-in.
De fora da viewport. Scrim fade junto.
Underline amber desliza para nova tab.
Único loop permitido.
Status dot pulsa quando muda. Sem repeat.
DFL fade-in 200ms; slash entra com scale snap.
Sem chevron rotate exagerado · max 90°.
Sem snap dramático · libera no drop position.
Sem bounce duplo.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}| Anima | Não anima | Por quê |
|---|---|---|
| transform | left/top | Transform usa compositor · não causa reflow |
| opacity | visibility | Opacity é GPU · visibility não anima |
| filter (use raro) | box-shadow contínuo | Shadow muda paint em cada frame |
| scale via transform | width/height | Layout repaint expensive |
| background-position | background-image | Carrega asset · slow |
/* hero entra · 600ms total · ease-out · staggered */
@keyframes hero-eyebrow-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-title-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-slash-in {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
.hero-eyebrow { animation: hero-eyebrow-in 220ms ease-out 0ms both; }
.hero-title { animation: hero-title-in 320ms ease-out 100ms both; }
.hero-slash { animation: hero-slash-in 220ms ease-snap 220ms both; }
.hero-body { animation: hero-title-in 320ms ease-out 320ms both; }
.hero-cta { animation: hero-title-in 320ms ease-out 440ms both; }Onde a marca vive de verdade: 14 apps, 3 landings, orgs do GitHub, ferramentas internas e Telegram. Este capítulo é uma biblioteca. A primeira parte traz os padrões de app e de site em v2, com marcação real. A segunda parte lista os formatos de marketing.
Vale para app web e mobile. Não vale para site, landing, social, vídeo nem impresso: essas mídias seguem os outros capítulos sem mudança. Em app, esta seção vence o cap. 21 e o cap. 5.4 onde eles divergem. Fonte: o canvas Flows Engine minimal e o design dfl-plans-v3, aprovados em 2026-11-12.
| Item | Regra em app |
|---|---|
| Fundo | Preto: surface-page (#0a0908). O palco de editor usa surface-stage (#050404). |
| Texto | Branco (ink-primary) e tons de cinza (ink-secondary, ink-muted, ink-disabled). A tela é preta, branca e cinza. |
| Acento | Um só. Apps DFL: laranja #E07A4A. Apps Itera: o verde Itera #3fd17f. Ele marca só a ação primária, a seleção e o item ativo. |
| Verde de success | Apps DFL: no máximo um ponto verde por tela, no resultado que importa (“9 / 9 pass”, “completed”). Apps Itera: o success nunca é verde, porque o acento já é verde. Ele é um check branco mais a palavra (“✓ pass 3/3”). |
| Vermelho | Só falha real: run que falhou, erro, incidente. Bloqueio, espera e “precisa de você” não são falha. |
| Estado | Palavra em ink-secondary. Sem cor por estado e sem badge colorido por status. Um dot é cinza, ou verde (success, 1 por tela), ou vermelho (falha). |
| Navbar | Pequena e esparsa: barra de 44px, marca em texto pequeno (dfl em ink-muted mais o nome do app, 13/600), até 4 itens mais More, busca ⌘K e avatar. Sem logo grande. |
| Dentro de um objeto | Sidebar de ícones recolhida (56px) no lugar de muitas tabs. Ela expande (⌘B) e mostra os labels. O item ativo leva o ícone no acento. |
| Labels | Curtos: uma ou duas palavras (“Runs”, “Test”, “New flow”). Sem frase que explique a tela. |
┌ navbar 44 ──────────────────────────────────────────────────┐
│ dfl flows Map Flows Decisions Inbox More ▾ ⌘K TF │
├ 56 ┬─ main ─────────────────────────────────────────────────┤
│ ▣ │ título 28 [ New flow ] │
│ ▤ │ conteúdo em preto, branco e cinza │
│ ▥ │ status em palavra · um verde no resultado │
│ ⌘B │ │
└────┴────────────────────────────────────────────────────────┘Exceções: o avatar usa a paleta de membros, e um heatmap de dados (mapa, insights) pode usar vermelho, amarelo e verde como escala. Nada mais leva cor.
Tela preta, texto branco e cinza, um botão no acento, status em palavra e um verde no resultado.
Um badge colorido por status, uma navbar cheia com logo grande e sete tabs com nome escrito.
Os componentes vivem no registry dfl-components-cli. O app nunca copia e cola: ele puxa do registry com npx dfl add. Cada botão cobre default, hover, active, focus, disabled e loading.
| Tipo | Spec |
|---|---|
| Primário | 30px (44px em mobile), fundo acento, texto ink-inverse 500 13. 1 por contexto. |
| Secundário | 30px, hairline border-subtle, sem fundo, ink-secondary. No hover vira border-strong e ink-primary. |
| Ícone | 28 a 30px quadrado, sem borda. Hover em panel. .on = ícone acento mais panel. |
| View toggle | Grupo de ícones. O ativo fica em acento. Separador hairline vertical de 16px. |
O StatusPill de 13 estados com fundo saiu. Em app, o estado de um objeto é a palavra, com um dot cinza de 6 a 7px quando ajuda a varrer (12.0). O dot verde marca só o success que importa, no máximo um por tela. O dot vermelho marca só falha real. Rótulo fixo é texto, sem badge.
O card é nu: sem fundo e sem borda, separado dos vizinhos por hairline. O título é 13/500 em ink-primary e vai para o acento no hover. A meta fica embaixo, em ícone mais número. Fundo, borda e sombra no mesmo limite são o primeiro tell de fase 1-2 (cap. 20).
panel, ink-primary 500 e ícone em acento. A contagem fica em mono à direita. O rótulo de grupo é mono 11 em ink-muted.ink-muted e o atual em ink-primary 500.dfl mais o nome do app), nunca um logo grande. No app de frota com navbar, a navbar tem até 4 itens mais More.Mine ▾). O dropdown ativo fica em ink-primary.ink-primary. A contagem é mono, e contagem zero fica em ink-muted.border-strong.flex-wrap) e nunca estoura a coluna: min-width: 0 na coluna e na meta.O bloqueio é status, então aparece no lugar do status: o ícone octagon-alert mais “blocked · 2” em mono ink-primary. Bloqueio não é falha, então não leva vermelho (12.0). No hover ou aberto, o fundo vira panel. O clique abre um popover (raised, 420px) com as perguntas bloqueantes. Cada pergunta tem opções em radio e um “Answer” primário. A pergunta respondida recolhe para uma linha. O usuário resolve sem abrir o plano.
Which cohort date?
Plano de onboarding do primeiro cliente.
Uma coluna de prosa, com H2 e H3, listas, código, tabela e citação.
success.ink-primary. O vermelho entra só quando a gravação falha.Templates
raised, 13px, padding 7×10, label mais atalho em mono ink-muted, sem seta.raised, 1px border-strong, radius 4 e, no dialog, o scrim surface-scrim./ e grade de cards. No hover o card ganha border-strong e o nome vira acento.page dentro de panel. Hover em border-strong. Foco com borda de acento mais ring de 3px.danger. O fundo -subtle fica reservado a erro real.Regra: nada some, tudo muda de lugar. A tabela completa está em 10.5.
panel, grip, título 15/600).Marketing, impressão e a capa mantêm um nível display. O orçamento da UI não vale para essas peças. O guia v1 (/v/1/) guarda os mockups dos templates. Esta tabela guarda os formatos e as regras.
| Formato | Tamanho | Regra |
|---|---|---|
| Instagram feed | 1080 × 1080 | 9 templates. Alterne manifesto-card, big-stat, fellow-spotlight e editorial-quote. Nunca 3 manifestos seguidos. |
| Instagram stories | 1080 × 1920 | 6 templates. Topo com a marca, centro com a mensagem, rodapé com CTA. Margens internas de 8 a 10%. |
| Reels cover | 9 / 16 | 5 templates. O hook aparece nos primeiros 3s. Texto grande e legível no mute. |
| TikTok cover | 9 / 16 | 4 templates. O terço inferior (30%) fica livre para caption e CTA nativos. |
| YouTube thumbnail | 1280 × 720 | 10 variações, 1 padrão de cabeçalho, 0 clickbait. Texto em Barlow Condensed, 60+ pt. |
| YouTube banner | 2560 × 1440 | 2 templates. Tudo crítico fica na safe zone central de 1546 × 423. |
| capa, post, carrossel | 3 capas, 3 imagens de post e 1 carrossel de 6 slides. | |
| X / Twitter | headers e cards | 2 headers e 2 cards. Sem emoji e sem 🧵. Card só para quote, abertura de thread ou screenshot de código. |
| App Store | ícones e screenshots | 4 ícones e 4 screenshots, na ordem hero, feature, prova, CTA. Uma mensagem por screenshot. |
| transacional e marketing | Claro para transacional e dark para marketing. Assunto em minúsculas, sem emoji, abaixo de 60 caracteres. | |
| Open Graph | cards | 3 receitas: post de blog, número/KPI e manifesto. Preview social do GitHub em 1280 × 640. |
| Podcast, newsletter, Notion | 3000 × 3000 · 1200 × 400 | Capa de podcast, header do Substack e banner do espaço Notion. |
| Discord, Telegram, Calendly | 960 × 540 e headers | Banners de canal e header de agendamento. |
| Landing e README | hero e header | Veja a estrutura abaixo e o header canônico de repo. |
| Receita | Uso típico |
|---|---|
| manifesto-card | frase do manifesto isolada |
| big-stat | um número que faz a história |
| slash-hero | anúncio ou brand drop |
| editorial-quote | citação em papel sand |
| fellow-spotlight | pessoa real em destaque |
| terminal | bastidor técnico |
| diagram | conceito da runtime |
| numbered-series | thread ou carrossel |
| drop / KPI grid | anúncio com 4 datas ou números |
| debate · split | X contra Y, antes e depois |
| data-chart | caso com prova visual |
| talking-head | vídeo de entrevista |
| listicle 3× | “3 razões”, “5 erros” |
| announcement | anúncio importante |
| Seção | Função |
|---|---|
| 1. Hero | tese e CTA primário |
| 2. Manifesto curto | estabelece a voz em 3 frases |
| 3. Runtime | diagrama de 4 blocos: plan, exec, harness, brain |
| 4. Prova | 3 cases curtos com número |
| 5. Testemunho | voz humana de um fellow |
| 6. Programa | timeline de 12 semanas |
| 7. FAQ | 5 perguntas que quebram objeções |
| 8. CTA final | aplicar ou agendar |
A DFL não esconde o estado vazio. O 404 captura o erro como drift, e o coming soon registra o timing. Em vez de ilustração ou mascote, entra o mesmo estado vazio do produto mais a voz da marca.
Decks usam 9 layouts canônicos. Documentação interna segue o sistema do produto. A assinatura de email tem um só template para todas as pessoas.
ink-muted passa 4,5:1 em page, panel e raised.--c-focus-ring).<div align="center">
<h1>DFL / plans</h1>
<p><em>plan-driven autonomous execution · part of the DFL runtime</em></p>
</div>
> "Plans before code. Code before review. Review before celebration."Papel é editorial. Light sand · tinta dark · amber rebalanceado pra CMYK · Georgia entra como segunda voz. Certificado, proposta, livro, sinalização, embalagem. Não-app é não-dark.
Em impresso o sistema vira light: papel sand #f6f1e7, tinta sand-900, amber rebalanceado para #c2663b (legível em CMYK 4-color). Tipografia ganha respiração maior; Georgia entra como serif editorial em texto longo.
| Cor | HEX | CMYK | Pantone |
|---|---|---|---|
| Sand paper | #f6f1e7 | 0 / 3 / 8 / 0 | Warm Gray 1 C |
| Ink dark | #1a1714 | 60 / 60 / 70 / 70 | Black 7 C |
| Brand amber print | #c2663b | 0 / 60 / 78 / 18 | 7585 C |
| Muted | #7d7568 | 10 / 16 / 30 / 50 | Warm Gray 8 C |
| Ink editorial | #3a3530 | 50 / 50 / 60 / 50 | Black 6 C |
completou o programa DFL Fellowship — shippou em produção, publicou planos, rodou harness. Membro permanente da rede.
Não medimos sucesso — medimos drift capturado. A diferença muda como o time se organiza.
Drift escondido vira dívida. Drift capturado vira eval. A pergunta certa não é 'rodou bem?' — é 'o que ficou diferente do plan?'.
pg 42 / 168O fellow recebe na entrada um livreto editorial: manifesto + sistema operacional do programa + glossário. Light editorial, Georgia + Inter, capa com slash + número da coorte.
Vestível diário, palavra forte, qualidade material. Sem mascote, sem tagline cringe. Cada item DFL é um objeto opinativo — não swag genérico.
| Item | Material | Tratamento |
|---|---|---|
| Caderno A5 · plain | Capa sand-dark hardback, miolo pontilhado | Slash debossed na capa |
| Caderno A6 · pocket | Capa kraft sand, miolo liso | "DFL /" gravado a quente |
| Caneta | Metal preto fosco | "DFL" gravado a laser · 4mm |
| Mug · 350ml | Cerâmica matte sand-dark | Wordmark + tagline · interior amber |
| Mug · 60ml espresso | Cerâmica matte sand-light | Slash amber centro · pira de café especial |
| Garrafa · 750ml | Aço escovado sand-dark | Slash grande · gravura a laser |
| Mousepad · 90 × 40cm | Borracha + tecido sand | Manifesto inteiro impresso |
| Tote bag · canvas natural | Algodão 280g | Slash amber serigrafia · 30mm |
| Keychain · metal | Latão acetinado | Mark D-bar · 25mm gravado |
| Pin · metal | Esmalte amber sobre preto | Slash + DFL · pinback |
| Sleeve notebook | Algodão sand-dark · feltro interno | Mark mini canto + slash interno |
| Adesivo conjunto · pack | Vinyl mate | 4 tamanhos × 3 designs |
Camiseta sand-dark + caderno A5 + 3 stickers + sticker nominado + manual A5 + card assinado por Tainan. Caixa kraft com mark debossed.
Jaqueta bomber + certificado A4 emoldurado + cópia de Alavancagem + carta editorial. Caixa preta fosca, slash gold-foil.
Garrafa de aço + caderno + caneta + cópia Alavancagem + carta editorial Georgia. Entrega pessoal para o CTO.
Camiseta + sticker pack + caneca + crachá A6 com QR pro perfil. Entrega na entrada.
YouTube, Loom, podcast cuts, intro/outro, shorts vertical. Mesma marca em movimento. Sem identidade sonora obrigatória — quando aparecer, serve à fala, não compete.
DFL não tem jingle. Tem um logo sonoro discreto: 1.2s de pad sand morno + 1 thump de baixo na entrada do slash. Quando aparece, marca o fim do intro/início do outro. Quando não aparece, silêncio é OK.
| Faixa | BPM | Mood | Quando |
|---|---|---|---|
| amber-pad-01 | — | Warm ambient pad | Intro · outro · 30s loop |
| sand-loop-02 | 92 | Lo-fi piano + sub bass | Tutorial · talk-head |
| drift-03 | 104 | Minimal techno · sem build | Highlight · sizzle |
| silence-04 | — | Silêncio escolhido | Manifesto · entrevista |
| thump-05 | — | Logo sting · 1.2s | Logo entry · transição |
00:00.0 silêncio · tela sand-dark
00:00.4 wordmark "DFL" fade-in 200ms (ease-out)
00:00.8 slash entra com snap (scale 0 → 1, 220ms ease-snap)
+ thump sonoro (opcional)
00:01.0 tagline "devfellowship" fade-in mono uppercase
00:02.0 hold
00:03.0 fade-out 400ms → conteúdo00:00.0 conteúdo · fade-to-black 300ms
00:00.5 wordmark + tagline fade-in centralizado
00:01.5 linha hairline cresce de 0 → 200px (220ms)
00:01.8 CTA mono uppercase fade-in
"devfellowship.com / aplicar"
00:04.0 hold
00:05.0 end| Formato | Duração | Cadência | Plataformas |
|---|---|---|---|
| Episódio talk-head | 14–22 min | 1–2 / mês | YouTube · podcast cut |
| Tutorial técnico | 5–12 min | 1 / mês | YouTube · landing |
| Manifesto reading | 1–3 min | Eventual | YouTube · Reel · LinkedIn |
| Fellow story | 2–4 min | 1 / coorte | YouTube · IG · landing |
| Highlight reel | 30–60s | Eventual | IG Reel · Short · TikTok |
| Case Revera | 3–5 min | 1 / cliente | YouTube · landing Revera |
| Demo de produto | 1–3 min | Por release | landing · LinkedIn |
| Bastidor overnight | 30s–90s | Spontâneo | IG Story · X · TG |
| Gênero | Quando | Referência (busca) |
|---|---|---|
| Ambient eletrônico | Intro · outro · documental | Brian Eno, Tycho, Helios — instrumental low-key |
| Lo-fi instrumental | Tutorial · talk-head | Lo-fi piano + warm bass · sem vocal sample |
| Minimal techno | Highlight · sizzle reel | BPM 100–115 · sem drop · sem build dramático |
| Silêncio | Manifesto falado · entrevista | Sem música. Escolha. |
Podcast canônico DFL: Drift Signal. 1 episódio/semana. Tainan + 1 convidado por episode. Estrutura: 3 min intro tese → 30 min conversa → 5 min síntese.
| Spec | Valor |
|---|---|
| Sample rate | 48 kHz |
| Bitrate output | AAC 192 kbps |
| Loudness | −16 LUFS integrated |
| Peak ceiling | −1 dBTP |
| Microfones | Shure SM7B local · Zoom F6 captura |
| Edit software | Reaper · descript |
| Hospedagem | Transistor.fm |
| Distribuição | Spotify · Apple · YouTube · RSS público |
Cada canal puxa a marca pra uma direção. O sistema absorve — voz e visual se ajustam ao registro sem soltar o eixo. Aqui ficam os contratos por plataforma.
CTO, VP Eng, dev sênior pensando em mudar de carreira, founder técnico, RH de tech.
Profissional + opinião + prova. Primeira pessoa quando possível. Posts curtos (< 250 palavras), 1 número específico, 1 take opinativo. Nunca "vem ser feliz" — sempre "isto resolve isto".
Pensa o feed como matriz 3×3 que rola. Próxima rolagem alterna: dark/light/dark · stat/quote/stat · slash/number/slash. Mantém o feed reconhecível mesmo no thumbnail.
Shorts repurposed de YouTube — cortes de 30–60s com tese curta. Não fazemos conteúdo native pra TikTok. Se um short viralizar, ótimo. Não otimizamos pra algoritmo.
Quinzenal. Edição numerada (#01, #02…). 4–8 min de leitura. Quinta-feira manhã.
| Channel | Propósito | Cadência típica |
|---|---|---|
| #drops | Anúncios oficiais | 2-3 / semana |
| #shipping | PRs em tempo real (bot posta) | diário |
| #help | Perguntas técnicas | contínuo |
| #runs | Discussão de harness runs | contínuo |
| #drift | Drift signals capturados | diário |
| #showcase | Demos de fellow | 1-2 / semana |
| #random | Off-topic | livre |
| #alumni | Pós-formados | contínuo |
Hospedagem em Transistor.fm; distribuição via RSS público pra todas as plataformas. Identidade visual cap. 12.16 — capa quadrada sand-dark + slash. Sem capa diferente por episódio: identidade do canal > identidade do episódio.
| Canal | Audiência | Voz | Visual | Cadência |
|---|---|---|---|---|
| LinkedIn DFL | CTO · VP Eng | Profissional + opinativo | Dark · wordmark canto | 2–3 / semana |
| LinkedIn Tainan | Tech BR + LATAM | Autoral primeira pessoa | Foto + texto | 3–5 / semana |
| Aspirante a fellow | Casual · bastidor | Dark + foto documental | diário stories · 2 posts | |
| X / Twitter | Dev sênior | Técnico · seco · opinativo | Texto, screenshot DFL dark | diário · thread quinzenal |
| YouTube | Dev curioso | Didático · operacional | Intro 4s · outro 5s | 1–2 / mês |
| TikTok | Casual scroller | Hook + ponto | Vertical · caption queimada | repurpose |
| Newsletter | Comunidade · alumni | Editorial · autoral | Sand light · Georgia OK | quinzenal |
| Podcast | Longform escuta | Conversacional | Capa quadrada · áudio | 1 / semana |
| TG / Discord | Fellows ativos | Corrido · BR · técnico | Texto puro | diário |
| GitHub | Dev avançado | Técnico denso | Markdown + badges | commit-driven |
| Landing Revera | B2B · CTO | Confiança calma | Light editorial | static |
| Dia | Surface | Tipo |
|---|---|---|
| Segunda | LinkedIn DFL · X | Tese da semana · post longo |
| Terça | Instagram feed | Manifesto card ou stat |
| Quarta | YouTube · Loom | Vídeo / tutorial / talk |
| Quinta | Newsletter (quinzenal) | Field Notes edition |
| Sexta | Instagram · X · TG | Recap semana · drop |
| Sábado | — | Pause (off-canal) |
| Domingo | — | Pause (off-canal) |
Software DFL quebra em produção. Acontece. Quando acontece em público, a marca responde no tom da runtime: capturado, registrado, corrigido.
status · DEGRADED · 2026-05-19 14:32 BRT what broke: harness-runner failed in 3/11 PRs why: drift +0.34 no plan onboarding-revera captured: episode 07 · drift signal in plans-app fix: rolling out v2.1.3 · ETA 30min status updates: fleet-health.devfellowship.com — tainan
DFL é a mãe. Revera, Alavancagem e Labs herdam paleta + tipografia, mas têm lockup distinto. Produtos internos não são sub-marca — são parte da runtime.
DFL · devfellowship (mother brand)
│
├── DFL Fellowship · programa core (product line, não sub-marca)
├── DFL Edu · guarda-chuva educacional (workshops, lives)
├── Revera · B2B · sister-brand · lockup distinto
├── Alavancagem · livro · editorial · serif protagonista
├── DFL Labs · playground experimental
│
└── Produtos internos (não são sub-marca · usam DFL como pai):
plans · harness · brain · paperclip
sandbox-manager · dfl-runner · dfl-learn
dfl-financing · dfl-flows · lesson-studio
books-app · dfl-notifications · dfl-fellow-portal
dfl-process-mining · dfl-bmcanvas · dfl-apps| Critério | Sub-marca | Produto interno |
|---|---|---|
| Audiência distinta | Sim · público diferente | Não · mesma audiência DFL |
| Lockup próprio | Sim · wordmark dedicado | Não · "DFL · nome" em mono |
| Tom de voz adaptado | Sim · pode formalizar / suavizar | Não · voz DFL pura |
| Tokens compartilhados | Sim (paleta + tipo) | Sim (tudo) |
| Domínio próprio | Sim · revera.* · alavancagem.* | Não · *.devfellowship.com |
| Roadmap independente | Sim | Não · parte da runtime |
Revera herda DFL (paleta, tipografia, voz operacional) e adiciona um registro formal B2B: tom de cinza maior, accent secundário azul (#5a85c4) para KPI e prova social, mais respiração editorial, menos gírias.
"REVERA" wordmark próprio em Barlow Condensed 700 + slash amber. Em material de família, "DFL / REVERA" — em material standalone, "REVERA" sozinha com referência DFL no rodapé.
Concreto. Mensurável. Recusa o teatro consultivo.
Vocabulário-zumbi. Banido em qualquer surface Revera.
Alavancagem tem lockup próprio: título em Georgia italic 700 ao lado de slash amber rotacionada 12°. Tipografia interna majoritariamente Georgia 11pt para texto corrido, Barlow para capítulos.
Única sub-marca onde Georgia ocupa > 50% da composição. Aqui, serif é protagonista.
Labs tem permissão de quebra estética — testamos motion ousado, ilustração experimental, layouts não-canônicos. O contrato: o wordmark DFL aparece em algum canto.
DFL Edu cobre formato de aprendizado curto: workshops 1–3 dias, lives, cohorts focadas (ex.: "harness em 5 noites"). Visual = DFL puro. Lockup: DFL / EDU.
Plans, harness, brain, paperclip, sandbox-manager — não têm logo, não têm wordmark próprio, não têm paleta. São parte da DFL, identificados em mono uppercase ao lado da mãe.
Co-branding externo (cliente Revera, sponsor de evento, parceiro técnico) usa pipe vertical com 2× clear space entre marcas. Nunca trancamos a logo em uma "lockup parceria" — cada marca mantém sua área.
Quem aprova o quê. Onde os arquivos vivem. Como pedir um novo artefato. Como o guide evolui. Sem isso, em 6 meses tudo derrapa.
| Artefato | Aprova | SLA |
|---|---|---|
| Tweak em material existente | Brand owner (Tainan) · async TG | 24h |
| Novo lockup para evento/parceiro | Brand owner | 48h |
| Adição de cor primitiva ao tokens.json | Brand owner + DS owner | 72h · via PR |
| Sub-marca nova / mudança em lockup oficial | Brand owner + ADR público | 1 semana |
| Evolução de versão do guide (1.0 → 1.1) | Brand owner + review pública | 2 semanas |
| Logo redesign / paleta nova | Brand owner + ADR + RFC público | 4–6 semanas |
| Asset | Repo / pasta | Formato canônico |
|---|---|---|
| tokens | design-system/tokens.json | DTCG JSON · gera tokens-v2.css |
| components | dfl-components-cli | shadcn-style registry |
| fontes | brand/fonts/ | WOFF2 self-hosted + fallback Google Fonts |
| logo (SVG) | brand/logo/ | SVG vetor · PNG @1× @2× @3× |
| brand-guide (este) | brand-guide/ | HTML auto-contido + bundle PDF |
| templates (deck, proposta, cert) | brand/templates/ | Keynote · Google Slides · InDesign |
| fotos | brand/photos/ | RAW + JPG editado + metadata |
| vídeos · masters | brand/video-masters/ | ProRes · 4K · 24fps master |
| banco sonoro | brand/audio/ | WAV 48kHz + AAC export |
| artefatos publicados | brand/artifacts/ | Numerado · 2026-05-19-thumb.png |
devfellowship/brand com template "Pedido de artefato".brand/artifacts/ + drop no canal interno.### Pedido de artefato (template) contexto: [1 parágrafo · pra quem é, pra quê] audiência: [primária + secundária] surface: [LinkedIn / IG / landing / etc] prazo: [data hard] referências: [3 links · pode ser do próprio guide] arquivos necessários: [SVG, PNG, MP4, deck...] quem entrega: [auto-assign ou nome] — abre issue
| Versão | Quando bumpar | Comunicação |
|---|---|---|
| patch (1.0.x) | Typo, ajuste de exemplo, spec sem efeito | Changelog interno |
| minor (1.x.0) | Adição de capítulo, novo template, novo token | Drop no canal · changelog público |
| major (x.0.0) | Mudança de logo, paleta, voz, arquitetura | RFC público · 30 dias de transição |
Trimestral (4× ao ano). Cada review: brand owner + 1 fellow ativo + 1 cliente Revera convidado. Pauta: o que travou? o que foi ignorado? o que precisa de update?
brand/decisions/. Histórico fica auditável.# ADR-brand-007: adicionar cor secundária para Revera ## status accepted · 2026-05-19 ## contexto Revera precisa de cor pra destacar KPIs em decks B2B sem competir com amber DFL (que é a primary). ## decisão adicionar trust-blue #5a85c4 como accent secundário exclusivo de surfaces Revera. ## consequências + KPI Revera tem destaque visual próprio + DFL puro permanece mono-accent (amber) - 1 cor a mais para manter - risco de "vazar" para DFL puro · mitigação: docs no cap. 17 ## alternativas consideradas - usar amber + opacity diferente · rejeitado: pouco contraste - usar success green · rejeitado: confunde com status — brand-owner, ds-owner
brand/artifacts/ dos últimos 90 dias revisados em batch.| Quem | Pode | Não pode |
|---|---|---|
| Fellow ativo | "Fellow @ DFL" em LinkedIn · sticker no laptop | Loja com produto DFL |
| Alumni | "Alumni DFL · coorte X" em LinkedIn · perfil | Criar curso "DFL Method" |
| Cliente Revera | "Treinado pela Revera/DFL" em landing | Co-branding sem aprovação |
| Imprensa | Usar logo em matéria sobre DFL | Alterar logo · usar em endorsement |
| Sponsor de evento | Logo em pipe lateral (cap. 17.8) | Logo dentro de DFL clear space |
O que você precisa pra começar a usar a marca: glossário, downloads, checklist, FAQ, templates de plan, manifesto canônico, contato. Esta página muda com mais frequência que o resto do guide.
| Termo | Definição curta |
|---|---|
| ADR | Architecture Decision Record · decisão durável e versionada, com contexto + alternativas + escolha. |
| Agente | Processo de IA que executa um plan. claude-main, codex-twin, sub-agents. |
| Alumni | Fellow formado. Faz parte permanente da rede DFL. |
| Brain | Knowledge graph DFL · conecta plans, episodes, drifts, evals, fellows. |
| Coorte | Grupo de fellows que entram juntos. Delimitador temporal. |
| Drift | Diferença entre o que o plan disse e o que aconteceu. Drift capturado = dado pra eval. |
| Drift signal | Marcador explícito no fim de uma run que aponta drift. |
| Episode | Unidade de trabalho dentro de uma run. Tem hipótese, ação, resultado. |
| Eval | Medição automatizada de output de agente. Pode ser harness, LLM judge, human-in-the-loop. |
| Fellow | Membro da DFL Fellowship. Não conclui — se forma. Faz parte da rede para sempre. |
| Harness | Framework de eval. Roda runs, mede, captura drift, gera grade. |
| Paperclip | Board kanban interno · estado das runs em tempo real. |
| Plan | Plano público versionado. Decisões duráveis lockadas. Fonte da verdade para agente executar. |
| Plans-app | Produto interno que hosta plans. plans.tainanfidelis.com. |
| PR (pull request) | A unidade de entrega DFL. PR mergeado = trabalho shipado. |
| Revera | Sub-marca B2B. Capacity-building para empresas. |
| Run | Execução de um plan por um agente. Tem início, episodes, fim, grade. |
| Runtime DFL | Conjunto plans + harness + brain + sandbox-manager + paperclip — a infra de prática. |
| Sandbox | Ambiente isolado onde agente pode tocar código sem afetar prod. |
| Ship | Mergear PR em produção. A métrica única. |
| TG-typed | Run iniciada via mensagem no Telegram. Fluxo assíncrono humano → agente. |
| Tokens | Custo de API de modelo de IA. Métrica DFL: não importa. Throughput importa. |
| Asset | Formatos | Localização |
|---|---|---|
| Logo · wordmark + variações | SVG · PNG @1×/@2×/@3× · PDF vetor | brand/logo/ |
| Fontes · Barlow Condensed · Inter · JB Mono · Georgia | WOFF2 + TTF + licenses | brand/fonts/ |
| Tokens | JSON (DTCG) · CSS vars · Style Dictionary build | design-system/tokens.json |
| Templates · deck · proposta · cert | Keynote · Google Slides · InDesign | brand/templates/ |
| Templates · email · README | HTML · MJML · Markdown | brand/templates/digital/ |
| Templates · social (este guide) | HTML render · referência visual | brand-guide/templates.jsx |
| Foto · stock interno | JPG editado + RAW | brand/photos/ |
| Brand guide (este doc) | HTML standalone · PDF print | brand-guide/ |
| Vídeo · intro/outro masters | ProRes · MP4 export | brand/video-masters/ |
| Banco sonoro | WAV · AAC export | brand/audio/ |
brand/artifacts/ antes de distribuir.Sim, se for o ÚNICO destaque do slide. Dois destaques amber no mesmo slide = perde a função.
Co-branding tem regra (cap. 17.8): pipe vertical com clear space. Cada marca mantém seu sistema. Não trancamos paletas.
Não. Emoji em marketing soa 2017. Em canal interno (TG/Discord), tudo bem.
Não. Tagline ('devfellowship') aparece em capa de material, certificado, assinatura. App, header, social, pode omitir.
Lowercase, hifenizado se preciso, < 12 chars. Não-pluralizado. Ex.: plans, harness, brain.
Não. DFL não tem estilo de ilustração. Foto real, placeholder honesto ou diagrama-de-blocos. Mascote, nunca.
Editorial = Georgia. Se justificável (livro futuro com outra direção), abrir RFC. Para uso ad-hoc, não.
Esperado — usa --brand pra fill com texto inverse, ou --brand-hi (#f0a872) pra texto sobre dark.
brand/fonts/barlow-condensed/ — WOFF2 self-hosted.
Não. Esse guide é canônico. Para o time do cliente, abrir derivado em brand/derived/{cliente} via ADR.
Sim — é pra isso que existem. Pegue o componente, troque copy, publique.
Em CTA-final-slide, em IG announcement, em capa de section divider. Não em produto.
Sim, mas o tom precisa traduzir. Sem mecânica, sem 'autotranslate'.
Não. O slash é a logo. Sem ele é só 'DFL' em Barlow Condensed — não é a marca.
Sim, no intro/outro de vídeo. Sem loop. Sem giro infinito.
Não. Sand-dark, sand-light, amber. Acabou.
Não temos versão separada, mas todo contraste é WCAG-checado. Status nunca depende só de cor (sempre tem rótulo).
Brand owner via ADR público (cap. 18.6).
CMYK em volume. Pantone 7585C em material premium (cap. 13.1).
Provavelmente sim — abre issue (cap. 18.3) ou inventa seguindo as receitas do cap. 12.3.
# plan: <nome> status · draft | locked | shipped | archived owner · @taigfs versão · v1.0.0 ## contexto [1 parágrafo · de onde veio o plan] ## decisões duráveis - [decisão 1 · com link pra ADR-XXX] - [decisão 2] ## escopo - entregável A - entregável B ## execução - agent: claude-main - sandbox: my-sandbox - harness: required ## drift signal [preenchido no fim da run] — created 2026-05-19 · plans.tainanfidelis.com/0142
# ADR-XXX: <título da decisão> status · proposed | accepted | superseded data · 2026-05-19 ## contexto [1 parágrafo · qual o problema] ## decisão [1 parágrafo · qual a escolha] ## consequências + ganho 1 + ganho 2 - custo 1 - risco 1 ## alternativas consideradas - alt 1 · rejeitada: razão - alt 2 · rejeitada: razão — quem aprovou · referências
drift-signal · run-2026-05-19-overnight magnitude: +0.14 episode: 07 expected: PR-142 merged in 30min actual: merged em 2h · 3 reverts no caminho root cause: plan não previu race-condition em sandbox-manager. what was learned: adicionar lock em sandbox-spawn → ADR-024 aberto. what changes: plans v2 vão incluir secção "sandbox-locks needed". — captured by paperclip · plans-app · ingested by brain
| Versão | Data | Resumo |
|---|---|---|
| 1.0.0 | 2026-05 | Versão inicial · 19 capítulos · alpha |
| 1.1.0 | 2026-06 (planned) | Adição de templates para canais novos (Threads, Bluesky) |
| 1.2.0 | 2026-09 (planned) | Light mode completo · paleta editorial estendida |
| 2.0.0 | 2027 (planned) | Logo + paleta · revisão maior se necessário |
DFL Brand Guide v1.0 · alpha · maio 2026. Documento construído em HTML auto-contido, sob o próprio design system DFL. Tipografia: Barlow Condensed, Inter, JetBrains Mono, Georgia (todas open source / system). Paleta: sand-stack DFL + amber #E07A4A. 19 capítulos · 1 mãe + 5 sub-marcas + 14 produtos internos · 70+ templates visuais prontos.
Autoria · Tainan Fidelis + DFL Brand. Construído com agentes operando a runtime DFL — meta. Próxima revisão · outubro 2026. Issues e propostas · devfellowship/brand.
Cada mini-app DFL tem um ícone que sai de um ícone só: o de DFL Apps. Os outros são essa mesma forma girada, fundida, fatiada, dobrada, arredondada até virar anel, ou aninhada dentro de si. Fundo preto, formas brancas e uma forma laranja.
Um ícone novo só entra na família quando dá para dizer qual transformação leva o ícone de apps até ele. Se não existe, o ícone não é da família.
| App | De apps para o ícone |
|---|---|
dfl/apps | a fonte: 2 × 2 células |
dfl/components | girar 45° |
dfl/bmcanvas | fundir células no canvas |
dfl/financing | esticar em escada 8 · 20 · 32 · 44 |
dfl/documents | fatiar em linhas, título em laranja |
dfl/flows | dobrar uma célula: célula → curva → célula |
dfl/campanhas | abrir em cone (megafone) |
dfl/social-proof | raio máximo: as células viram anel |
dfl/course-shaper | cortar o anel com o slash |
dfl/fleet-health | abrir o anel em medidor; o slash é o ponteiro |
dfl/seo | uma célula vira lente; cabo a 45° |
dfl/wiki | [/]: colchetes e slash |
dfl/board | reorganizar as colunas em cartões de alturas diferentes (kanban) |
dfl/lesson-studio | células deslizadas na diagonal e empilhadas, a da frente em laranja |
dfl/os | aninhar: o tile dentro do tile |
As peças têm três tamanhos, e cada um é feito do anterior com o mesmo vão de 4u: átomo 8u → célula 20u (8 + 4 + 8) → área 44u (20 + 4 + 20). A célula de 20u é o tile reduzido 3,6×, com o mesmo canto de 20%. Um ícone faz parte do outro.
| Item | Valor |
|---|---|
| viewBox | 72 × 72u |
| Tile | 72 × 72u, raio 14,4 (20%), #0a0908 |
| Margem e área viva | 14u em cada lado; área viva 44u |
| Larguras | 8 · 20 · 32 · 44u. Os átomos começam em 14, 26, 38 e 50 |
| Raio | 4u em todo canto, sem exceção. Peça de 8u vira pílula; o átomo vira ponto |
| Peso | 8u para barra, anel, slash e cabo |
| Círculos | Ø 8 · 20 · 32 · 44u |
| Vão | 4u em todos os níveis |
| Diagonal | o slash da marca (0,4 : 1) ou 45° (a rotação de apps para components) |
| Cor | branco #F6F1E7, uma forma laranja #E07A4A, tile #0a0908 |
dfl/ + nome.O ícone do DFL OS é o Kernel: o tile dentro do tile. A moldura é o nível 44u e o núcleo laranja é a célula de 20u, a mesma célula de apps. É o ícone mais fractal da família: ele repete o próprio tile. Escolhido com o núcleo em laranja.
O canvas onde o Tainan desenhou os ícones: Design canvas (Claude), acesso necessário. O link abre numa aba nova e pede login no Claude.
Cada app tem uma pasta em /mini-apps/<app>/. O gerador é scripts/brandkit/mini-apps/build.py; o índice com bytes e sha256 é /mini-apps/manifest.json.
| Arquivo | Uso |
|---|---|
icon.svg | Favicon SVG e imagem da marca na navbar |
glyph.svg | Só a forma, sem tile. Use apenas sobre fundo #0a0908 |
favicon.ico | 16, 32 e 48px num arquivo |
favicon-16.png · favicon-32.png · favicon-48.png | Favicons PNG |
apple-touch-icon.png | 180px, iOS |
icon-192.png · icon-512.png | Manifesto de PWA e Android |
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- copie os arquivos de https://brand.devfellowship.com/mini-apps/<app>/ para public/ -->Saíram da proposta: reviews (sem uso), learn (vai sair), vaults (saiu), dbms (saiu). Eventos entrou em Campanhas. O antigo skillevals virou o ícone de Fleet Health. Do DFL OS ficaram de fora os conceitos Prompt, Slash-cursor, Stack e Órbita. As 16 marcas antigas continuam na versão 1 do guia (/v/1/).
Um sistema inteiro descreve o que existe. Uma tela usa só uma fração dele. Estas regras dizem quanto usar. Em conflito com qualquer outro capítulo, este vence. A exceção é app web e mobile: lá o 12.0 (estilo de app mínimo) vence onde diverge.
Minimalista não é ter menos conteúdo. É ter menos marcação por unidade de conteúdo. Numa tela imatura, cada elemento leva a própria marcação: borda, fundo, badge e cor. Numa tela madura, a marcação fica na estrutura (espaço, hairline, tamanho de texto), e cor, ícone e avatar só entram quando carregam informação.
A densidade de informação pode subir, mas a de tinta cai. Cor com significado é informação e não conta como tinta. Cor de enfeite conta. O erro oposto também existe: uma tela só preta, branca e cinza, quando há estado real, está errada.
O orçamento conta por tela, e não por seção. Ele vale para UI de app e de site. Marketing, impressão e a capa do guia mantêm um nível display.
| Item | Orçamento |
|---|---|
| Superfícies | Tela de documento ou lista: 2 (page e panel). Tela de ferramenta ou editor: 3 (stage, page e panel). A raised entra só em overlay real, ou como seleção dentro de um panel. |
| Texto | 4 tamanhos (11 · 13 · 15 · 28), 3 pesos (400 · 500 · 600) e 1 radius (4px). |
| Borda | Hairline só quando separa. Fundo e borda: escolha um. |
| Sombra | Zero. Um overlay se separa por raised mais border-strong. O focus ring é a única exceção. |
| Grafismo | Zero em UI de app. O capítulo Grafismos continua valendo para marketing e impressão. |
O botão primário usa a cor de ação do acento. Há no máximo um aceso por contexto. O acento aparece em quatro lugares: o botão primário, o item ativo do nav, a seleção (view toggle, tab ativa, radio, slide selecionado) e o hover de título ou link para um objeto. Ele nunca é fundo, borda decorativa nem status. Link inline em prosa usa ink-primary com sublinhado border-strong, e o acento entra só no hover.
success é terminou. warning é review ou aguardando. danger é quebrou ou bloqueado. info é executando. A cor de estado marca só o estado de um objeto, como dot mais palavra, dot no cabeçalho de coluna, barra de progresso ou ícone de bloqueio. Dica, aviso de sistema, “precisa de fulano” e truncamento são texto normal, sem cor. O fundo -subtle fica reservado a bloqueio ou erro real, no máximo um por viewport.
A paleta de membros é só para avatar. Pessoa tem foto. Sem foto, usa iniciais sobre a cor do membro. Agente usa o ícone bot sobre a cor de agente. Nada disso conta no orçamento.
O ícone é uma âncora de varredura. Ele entra no nav, no tipo de coleção ou arquivo, na meta de card (ícone mais número, sem palavra) e em controle compacto com tooltip. Fora disso, o ícone fica ao lado de um label, e então você apaga o ícone.
O mono-eyebrow aparece no máximo uma vez por tela. Ele abre o documento, e não cada seção. Badge, pill e dot só entram quando o estado muda sozinho. Um rótulo fixo é texto.
Reserve cerca de 30% da tela sem tinta. É um guia de revisão, e nenhuma ferramenta o mede. Ele não vale para a lista densa nem para o kanban. Uma seção que não respira é um erro de hierarquia: reorganize em vez de preencher.
Número só se for real. Uma métrica inventada como textura sai. Sem dado, sem gráfico. Se o dado existe mas o render não, use um placeholder honesto.
O passe é obrigatório antes de entregar. Remova o elemento mais decorativo da tela. Se nada piorou, remova o próximo. Repita até doer. Entre duas opções, fique com a mais vazia.
O teste é apagar o elemento e ver se o usuário perde informação. Se perde, o elemento volta. A exceção é a cor, o ícone e o avatar que carregam estado, tipo ou identidade.
Se qualquer um destes aparecer, a tela volta para o forno.
Toda tela nova começa em coluna única, com hairlines e sem card. Grid, card e segunda superfície são upgrades que pedem justificativa. Mais colunas pedem mais decisão de hierarquia, e uma hierarquia errada é o que faz uma tela parecer template. As exceções justificadas são o kanban, em que a coluna é o estado, e o editor, em que o painel é a ferramenta.
Sidebar e painéis não narram. Um painel lateral mostra estado e atalhos: stats, listas, propriedades. Prosa que explica o estado, ou texto de ajuda sobre o próprio produto, sai.
ink-muted passa 4,5:1 em page, panel e raised. Texto que a pessoa precisa ler usa ink-muted ou mais claro. O ink-disabled serve só para item desabilitado.--s-* e --c-*). Ele não usa um primitivo (--p-*).raised, border-strong e, no dialog, o scrim. O focus ring é um box-shadow e é permitido.Uma coluna, hairlines, um primário, estado com dot e palavra, e muito espaço.
Uma grade de cards com fundo, borda e sombra, badges em todo rótulo e um gradiente no vazio.
17 h ago, 5 / 10, .zip.Brandkit / DFL
Choose a file for your surface. Each export includes the brand colors and clear space.
1200 × 600 base size. 2× and 4× for high resolution.
Canonical monogram. Square PNG sizes for icons.
Centered avatars. Cover layouts preserve the logo safe area.
Keep the logo proportions. Use the transparent light-ink file on dark backgrounds. Use the light variant on paper. SVG masters contain no fonts. Read the usage notes or file manifest.