Plano Analítico para Criação de uma Página Única de Frontend Guidelines

Com base na análise completa do documento “Frontend Guidelines Questionnaire” de Brad Frost (2015–2025) e nas referências atualizadas sobre design systems, o objetivo é criar uma página única (one-page) clara, profissional e acionável que sirva como ponto de partida ou template para qualquer equipe definir suas diretrizes de frontend de forma consistente.

Objetivos da Página

  1. Ser um questionário vivo e editável (Markdown + HTML).
  2. Cobrir todas as áreas críticas do desenvolvimento frontend atual (2025).
  3. Facilitar a tomada de decisão coletiva da equipe.
  4. Incluir referências atualizadas e links úteis.
  5. Ser visualmente organizada, acessível e mobile-first.

Estrutura Proposta (One-Page)

  • Cabeçalho com título e introdução
  • Navegação ancorada (sticky ou jump links)
  • Seções principais idênticas ao questionário original, porém modernizadas
  • Seção final de Referências e Recursos Atualizados (2025)
  • Rodapé com data de última atualização e convite para contribuição

Decisões de Estilo (Markdown + CSS leve)

  • Markdown GitHub-Flavored (GFM)
  • Uso de tabelas para decisões tomadas (facilita leitura)
  • Alertas com > [!NOTE], > [!TIP] e > [!WARNING]
  • Código inline e blocos quando necessário
  • Links embutidos e referências no final

Frontend Guidelines Questionnaire – Template 2025

Uma página única para sua equipe definir, documentar e manter diretrizes consistentes de desenvolvimento frontend.

Última atualização: 25 de novembro de 2025
Baseado no trabalho original de Brad Frost (2015) e atualizado com práticas de design systems modernas.

Ir para o topo · HTML · CSS · JavaScript · Media & Fonts · Performance · Acessibilidade · Ferramentas · Versionamento · Suporte & Otimização · Deploy · Documentação · Referências

HTML

Princípios Gerais

  • Escrever HTML5 semântico e acessível (WCAG 2.2 AA como mínimo)
  • Priorizar acessibilidade (ARIA quando necessário, ordem de tabulação lógica)
  • Evitar divs e spans desnecessários (semantic-first)

Ferramentas e Pré-processadores

| Pergunta | Decisão da Equipe | |——————————————|————————————————| | Usamos pré-processador HTML? (Pug, Nunjucks, etc.) | [ ] Sim → qual? [ ] Não | | Usamos templating engine? (Handlebars, Twig, etc.) | [ ] Sim → qual? [ ] Não | | Backend influencia o markup? (ex: classes automáticas) | [ ] Sim → documentar aqui |

Estilo de Escrita

  • Indentação: 2 espaços
  • Comentários: <!-- Seção: Header – início -->

CSS

Princípios Gerais

  • Mobile-first e responsivo por padrão
  • Evitar seletores muito profundos (> 3 níveis)
  • Priorizar componibilidade e reutilização

Metodologia

| Metodologia | Usada? | Documentação Oficial / Customizações | |——————-|——–|————————————–| | BEM | [ ] | | | SMACSS | [ ] | | | CUBE CSS | [ ] | | | Utility-first (Tailwind) | [ ] | | | Design Tokens + CSS Custom Properties | [ ] Obrigatório | |

Ferramentas

  • Pré-processador: Sass (SCSS) ou PostCSS
  • Base: Normalize.css + reset mínimo customizado
  • Postprocessor: Autoprefixer + cssnano
  • Framework UI: [ ] Nenhum [ ] Bootstrap 5 [ ] Tailwind CSS [ ] Outro: ____

Estilo de Escrita

  • Indentação: 2 espaços
  • Propriedades agrupadas (SMACSS order): Box → Layout → Typography → Visual → Animation
  • Comentários: 
    /* ==========================================================================
   Componente: Card
   ========================================================================== */

JavaScript

Princípios Gerais

  • Seguir Airbnb JavaScript Style Guide (com adaptações)
  • Preferir vanilla ou framework leve quando possível
  • Evitar jQuery em projetos novos (2025)

Framework / Biblioteca

| Tecnologia | Usada? | Versão | Documentação interna | |——————|——–|——–|———————-| | React | [ ] | | | | Vue 3 | [ ] | | | | Svelte / Solid | [ ] | | | | Vanilla + Web Components | [ ] | | |

Testes

  • Framework: Jest + Testing Library
  • E2E: Playwright ou Cypress

Estilo

  • 2 espaços
  • ESLint + Prettier (configuração: airbnb-base ou custom)

Media & Fonts

Tema Decisão
Ícones SVG sprites + <symbol> ou icones como componentes (React/Vue)
Imagens responsivas srcset, sizes e <picture> obrigatórios + WebP/AVIF
Otimização de imagens ImageOptim, Squoosh ou build-time com Sharp/Imagemin
Fontes customizadas Variáveis de fonte (font-display: swap) + pré-carregamento crítico
Serviço de fontes Google Fonts (self-hosted) ou Adobe Fonts

Performance

Métrica Budget 2025 Ferramenta de Medição
First Contentful Paint ≤ 1.8s (3G) Lighthouse / WebPageTest
Total Blocking Time ≤ 300ms Lighthouse
Cumulative Layout Shift ≤ 0.1 Lighthouse
Tamanho total da página ≤ 1.5 MB (mobile) WebPageTest

[!TIP] Usar performance budgets obrigatórios no CI (via Lighthouse CI ou Bundle Analyzer)

Acessibilidade (a11y)

  • WCAG 2.2 AA obrigatório
  • Ferramentas no workflow: axe DevTools, Lighthouse, eslint-plugin-jsx-a11y
  • Testes manuais com leitores de tela (NVDA/VoiceOver) em cada sprint

Ferramentas & Workflow

Categoria Ferramenta escolhida
Task runner / Build Vite, Turborepo ou Nx
Gerenciador de pacotes pnpm ou npm workspaces
Linter/Formatter ESLint + Prettier + Stylelint
Design System Figma + Tokens Studio + Supernova ou Storybook
Documentação Zeroheight, Backlight ou Docusaurus

Versionamento

  • Sistema: Git
  • Hospedagem: GitHub ou GitLab
  • Workflow: Trunk-based com short-lived feature branches
  • Issues: GitHub Projects ou Linear

Suporte & Otimização (Graded Browser Support – 2025)

Grau Navegadores Experiência
A Chrome/Edge últimos 2, Firefox último, Safari últimos 2 (iOS/macOS) Experiência completa
C IE11, navegadores antigos Funcionalidade básica (graceful degradation)

Deploy / Integração

  • CI/CD: GitHub Actions ou GitLab CI
  • Ambiente de preview automático por PR (Vercel, Netlify ou Cloudflare Pages)

Documentação & Design System

  • Ferramenta principal: Storybook 8 + Figma + Zeroheight ou Backlight.dev
  • Responsável pela governança: Tech Lead + Design System Engineer
  • Atualização das diretrizes: via PR + aprovação do time de Design System

Referências e Recursos Atualizados (2025)

Originais (Brad Frost)

  • Frontend Guidelines Questionnaire (2015) – https://github.com/bradfrost/frontend-guidelines-questionnaire
  • Atomic Design – http://atomicdesign.bradfrost.com

Design Systems & Boas Práticas Modernas

  • Figma – 5 Shifts Redefining Design Systems in the AI Era (2025) – https://www.figma.com/blog/5-shifts-redefining-design-systems-in-the-ai-era/
  • Supernova – Design System Management – https://www.supernova.io/design-system-management
  • Schema 2025 Recap – https://www.figma.com/blog/schema-2025-design-systems-recap/
  • “Interactive, Intelligent, and Integrated: The New Design System Paradigm” – https://uxplanet.org/interactive-intelligent-and-integrated-the-new-design-system-paradigm-5eaa217608fd

Guias de Estilo & Metodologias

  • CSS Guidelines (Harry Roberts) – https://cssguidelin.es
  • Sass Guidelines – https://sass-guidelin.es
  • Airbnb JavaScript Style Guide – https://github.com/airbnb/javascript
  • CUBE CSS – https://cube.fyi

Acessibilidade & Performance

  • WCAG 2.2 – https://www.w3.org/TR/WCAG22/
  • Performance Budgets – Tim Kadlec – https://timkadlec.com/2014/11/performance-budget-metrics/

Esta página deve ser versionada no repositório do projeto (ex: /docs/frontend-guidelines.md) e revisada a cada 6 meses ou quando houver mudança significativa de stack.

Exemplos de Design Systems Famosos (2025)

A seguir, uma seleção dos design systems mais influentes e amplamente referenciados no mercado em 2025, organizados por empresa, com links oficiais e características principais.

Empresa / Produto Nome do Design System Link Oficial Destaques em 2025
Google Material Design 3 (Material You) https://m3.material.io Personalização dinâmica por wallpaper, tokens extensivos, forte presença no Android
Apple Human Interface Guidelines (HIG) + SwiftUI Design System https://developer.apple.com/design/human-interface-guidelines SF Symbols 6, Dynamic Type avançado, integração nativa com VisionOS
Shopify Polaris https://polaris.shopify.com Excelente documentação, tokens + React components, foco em e-commerce
Airbnb DLS (Design Language System) https://airbnb.design/building-a-visual-language/ Tipografia proprietária (Cereal), ilustrações customizadas, migração para tokens
Atlassian Atlassian Design System (ADS) https://atlassian.design Componentes acessíveis, tema claro/escuro automático, usado em Jira, Confluence
IBM Carbon Design System https://carbondesignsystem.com v11 com IBM Plex Sans Variable, suporte a design tokens JSON, forte WCAG AAA
Microsoft Fluent Design System (Fluent 2) https://fluent2.microsoft.design Efeitos Mica/Acrylic no Windows 11+, Web Components, integração WinUI 3
Uber Base Web → Spectrum (novo em 2025) https://spectrum.uber.design Migração completa para tokens + React 19, foco em escala global
Salesforce Lightning Design System (SLDS) https://www.lightningdesignsystem.com Mais de 3.000 componentes, tokens gerados automaticamente, governança madura
GitHub Primer (Primer React + Primer CSS) https://primer.style v35 com variáveis CSS nativas, ViewComponents (Rails), acessibilidade exemplar
BBC GEL (Global Experience Language) https://www.bbc.co.uk/gel Foco em inclusão (BAME), suporte a mais de 40 idiomas, tipografia proprietária
GOV.UK GOV.UK Design System https://design-system.service.gov.uk Referência mundial de serviço público, componentes ultra-acessíveis, zero JS
Adobe Spectrum 2 https://spectrum.adobe.com Web Components nativos, tokens em JSON/YAML, usado no Creative Cloud inteiro
Vercel Geist (usado no vercel.com) https://vercel.com/design Minimalista, tipografia Vercel Mono, tokens open-source, influência em Next.js App Router
Figma Figma Design System (interno + público) https://www.figma.com/community/file/1343514670261856438 Tokens Studio + Variables nativas, Dev Mode 2.0, AI-assisted components
Stripe Stripe Design System (não público, mas referenciado) – (trechos em https://stripe.com/jobs) Foco extremo em conversão, micro-copy, ilustrações 3D isométricas
Duolingo Duolingo Design System https://design.duolingo.com Ilustrações + personagem Duo como parte do sistema, tokens animados
Lonely Planet Rizzo → Atlas (atualizado 2025) https://atlas.lonelyplanet.com Pattern Lab + Storybook, migração para React + TypeScript

Os mais estudados em 2025

  1. Material Design 3 – por escala (bilhões de usuários) e personalização dinâmica
  2. Fluent 2 + Carbon v11 – por maturidade em enterprise e acessibilidade
  3. Polaris + Lightning Design System – referência em governança e contribution model
  4. Primer + Spectrum 2 – melhores exemplos de Web Components + design tokens multiplataforma
  5. GOV.UK Design System – ouro em acessibilidade e conteúdo público

Esses sistemas são frequentemente usados como benchmark em conferências como Clarity, Config, Schema (Figma) e Leading Design. A maioria já publica seus design tokens em formato aberto (JSON, Style Dictionary, Tokens Studio) e mantém repositórios públicos no GitHub.

Detalhes sobre Material Design 3: Análise Formal e Atualizada (2025)

Introdução

O Material Design 3 (MD3), também conhecido como Material You, representa a terceira iteração do sistema de design desenvolvido pelo Google, lançado inicialmente em maio de 2021 durante o Google I/O. Essa evolução do Material Design original (introduzido em 2014) enfatiza a personalização dinâmica, acessibilidade e expressividade emocional nas interfaces digitais, com foco principal no ecossistema Android, mas extensível a web, iOS e outros plataformas. Em 2025, o MD3 evoluiu para uma variante chamada Material 3 Expressive, anunciada no Google I/O 2025, que introduz animações mais fluidas, interações intuitivas e suporte aprimorado para dispositivos como Wear OS 6 e Android 16. Essa atualização não é uma ruptura completa, mas uma iteração que constrói sobre os princípios de Material You, priorizando experiências que “conectam emocionalmente” com os usuários, baseadas em estudos com mais de 18.000 participantes globais.

O MD3 é um sistema aberto e modular, sintetizando princípios clássicos de design (como grid-based layouts, animações responsivas e efeitos de profundidade) com inovações tecnológicas, como temas gerados a partir de wallpapers do usuário. Seu propósito é criar interfaces que se adaptem inteligentemente, expandindo o conceito de “papel digital” para superfícies que respondem a interações humanas de forma natural e inclusiva.

Princípios Fundamentais

Os princípios do MD3 são ancorados em quatro pilares principais, evoluídos para enfatizar a humanização das interfaces:

  1. Material como Metáfora Física: Superfícies com bordas, sombras e costuras que sugerem tangibilidade, mas com expansão inteligente (ex.: animações que “reformam” elementos).
  2. Personalização e Adaptação: Interfaces que se moldam ao usuário, incluindo temas dinâmicos e suporte a preferências de acessibilidade (ex.: alto contraste automático).
  3. Movimento Intencional: Animações sutis que guiam o usuário, com ênfase em fluidez e feedback háptico para interações mais naturais.
  4. Inclusividade e Acessibilidade: Conformidade com WCAG 2.2, suporte a modos escuro/claro, tipografia escalável e designs que priorizam usabilidade para todos os usuários, tornando a acessibilidade “não opcional” em 2025.

Esses princípios são suportados por pesquisas extensas, com 46 estudos em 2025 focando em como designs expressivos melhoram a usabilidade e a percepção emocional.

Recursos Principais

O MD3 introduz ferramentas e elementos que facilitam a criação de experiências personalizadas e performáticas. A seguir, uma visão tabular dos principais recursos, com ênfase em atualizações de 2025:

Recurso Descrição Atualizações em 2025 (Material 3 Expressive)
Sistema de Cores Temas dinâmicos gerados de wallpapers, com paletas adaptáveis (primárias, secundárias e neutras). Suporte a tons elevados para contraste. Cores mais vibrantes e “ousadas”, com animações de transição suaves entre temas; integração com IA para geração automática.
Tipografia Escalas baseadas em Roboto (ou fontes customizadas), com pesos variáveis e tamanhos responsivos. Ênfase em legibilidade em telas pequenas. Fontes mais “expressivas” com suporte a tipografia variável aprimorada; integração com Dynamic Type para acessibilidade.
Movimento e Animações Animações responsivas com easing curves, incluindo transições de profundidade e feedback háptico. Animações “elásticas” (springy) para notificações e scrolls; curvas que traçam displays circulares no Wear OS.
Ícones e Componentes Ícones vetoriais escaláveis (Material Icons) e componentes modulares como botões maiores e cards com bordas arredondadas. Novos componentes com formas “tweaks” (ex.: botões pill-shaped); carrosséis animados e rails de navegação.
Acessibilidade Suporte nativo a alto contraste, navegação por teclado e leitores de tela; métricas de contraste mínimo de 4.5:1. Ênfase em designs “glanceable” (fáceis de ler rapidamente), com suporte expandido para XR e modos de baixo consumo.

Esses recursos são implementados via bibliotecas como Jetpack Compose (Android), Flutter e Material Theme Builder, garantindo consistência multiplataforma.

Implementação e Ferramentas

Para desenvolvedores e designers, o MD3 oferece integração fluida:

  • Ferramentas de Desenvolvimento: Jetpack Compose para Android nativo, Flutter para cross-platform, e APIs de animação para web (via Material Web).
  • Recursos para Designers: Componentes no Figma, documentação atualizada em m3.material.io e gerador de temas (Material Theme Builder).
  • Atualizações 2025: Rollout inicial em Pixel 10 e Android 16 QPR1, com suporte a Wear OS 6 para animações circulares e bateria otimizada em 10%. Desenvolvedores podem adotar templates prontos para apps, mas fabricantes como Samsung podem customizar, impactando a adoção uniforme.

Comparação com Versões Anteriores

| Versão | Foco Principal | Inovações Chave | Evolução para MD3 | |—————–|—————————————–|——————————————|——————————————–| | Material 1 (2014) | Layouts em grid, sombras e cards | Efeitos de profundidade e animações básicas | Base metafórica mantida, mas com mais adaptação | | Material 2 (2018) | Responsividade e usabilidade | Componentes refinados e suporte a temas escuro | Expansão para personalização dinâmica | | Material 3 (2021+) | Personalização e expressividade | Temas de wallpaper, botões maiores e animações aumentadas | Iteração Expressive adiciona fluidez emocional e suporte XR |

O MD3 representa uma “filosofia shift” para designs human-centered, contrastando com o foco mais rígido das versões iniciais.

Conclusão

Em 2025, o Material Design 3, com sua extensão Expressive, consolida-se como benchmark para interfaces adaptáveis e inclusivas, influenciando bilhões de usuários no Android e além. Sua ênfase em personalização emocional e usabilidade baseada em dados o torna essencial para profissionais de UX/UI. Para implementação, recomenda-se consultar a documentação oficial em m3.material.io e testar em protótipos com Figma ou Compose. Atualizações futuras, como integrações com IA generativa, prometem evoluir ainda mais o paradigma. Essa análise baseia-se em fontes atualizadas até novembro de 2025, destacando a maturidade do sistema em cenários enterprise e mobile.