Sistemas de design,
Prontos para o seu agente de IA.

Uma referência prática para interfaces de produto: cores com temas personalizáveis, escala de nove níveis para tipografia e espaçamento, estados de componentes e um guia completo para agentes de IA.

Crie uma composição prática de controle de quantidade usando a unidade mágica de 16 px da Mozaic, controles correspondentes de 48 px, imports SCSS reais e classes BEM. O planejador de prateleiras permite observar limites, erros tipados e um resumo local de materiais.

Conheça o Spectrum v3 da React com uma tabela selecionável de recursos criativos e um inspetor de predefinições de exportação. Entenda os temas Provider e a escala de entrada, as propriedades de estilo compatíveis, as coleções com chaves e a diferença entre o v3 e a implementação mais recente do Spectrum 2.

Crie transações de serviço mais longas com o espaçamento concreto, as propriedades responsivas e o modelo de status TaskList da AgDS. Experimente um fluxo de preparação cuja etapa de revisão só é liberada quando todos os pré-requisitos estão concluídos.

Explore o tema Alaska da Auro com tokens reais de cores semânticas e tipografia, tipografia baseada em classes e o componente nativo de voo. Dois registros originais de voos demonstram filtragem e seleção locais, sem representar inventário ou reservas de companhias aéreas.

Use os componentes web nativos e os tokens de design publicados da Alberta para criar uma lista completa de preparação, com opções acessíveis, progresso derivado e feedback de revisão transparente.

Use o contrato real de Switch de código aberto da Amsterdam, com um tema neutro completo, rótulos acessíveis e preferências de leitura aplicadas imediatamente.

Crie um seletor de seções de relatório com o componente Transfer controlado da Arco. Explore as escalas reais de espaçamento e tamanho, as convenções de variáveis de CSS, as superfícies semânticas e a diferença entre selecionar linhas e movê-las.

Ariakit oferece componentes React sem estilo, com estado compartilhado explícito e partes acessíveis que podem ser compostas. Seu combobox separa o texto digitado da seleção confirmada, sendo útil para seletores com busca; o localizador de referências abaixo demonstra essa distinção com resultados agrupados e indisponíveis.

Crie um quadro de planejamento de tarefas com tokens semânticos da Atlassian, uma escala de espaçamento de oito pixels, APIs reais de Button, Lozenge e Toggle, além da configuração necessária de estilos Compiled. Inspecione uma tarefa, filtre o quadro e mova um item de trabalho local sem confundir seleção com status.

Um guia de configuração do Cloudscape com tokens reais de atualização visual, espaçamento adaptado à densidade, APIs controladas para formulários e um assistente funcional de recursos em duas etapas.

Crie um fluxo de revisão bancária com identidade visual usando os módulos Angular da Backbase, a exportação semântica do tema e estados de revisão explícitos. Compare as APIs web com dimensões nativas documentadas separadamente.

Bits UI oferece componentes Svelte sem interface visual, compostos com partes nativas e o estado do Svelte 5. O exemplo combina uma caixa de seleção com estado misto derivado, seções de acordeão expansíveis de forma independente e uma caixa de diálogo de revisão baseada em portal, incluindo a configuração completa de estilos.

Use Bootstrap 5.3.8 com sua escala de espaçamento real, cores semânticas, grade responsiva e APIs de componentes. Experimente um formulário de reserva funcional, um resumo de erros, um filtro de tabela, um modal e um alternador de modo de cor; depois, reutilize o código documentado.

Crie um formulário de preferências de lembrete no estilo B.C., com tokens semânticos reais, controles Aria nativos de React, campos de contato condicionais e comportamento completo de validação.

Crie uma mesa editorial com a estrutura real de campos e controles de Bulma, colunas responsivas, modificadores de cores semânticas e variáveis de CSS, incluindo o código completo de validação.

Explore a tipografia, os tokens semânticos e os componentes web nativos do GC Design System por meio de um guia de preparação completo e pesquisável, com comportamento de divulgação e estado vazio.

Implemente a grade editorial, a tipografia atual e os componentes Expandables nativos do CFPB com uma planilha de leitura funcional, APIs de pacotes verificadas e limites de identidade explícitos.

Uma referência do Chakra UI v3 para tokens, funções de cores semânticas, receitas e componentes compostos de formulário. Examine as escalas reais de espaçamento e tipografia e experimente um formulário nativo de perfil de espaço de trabalho, com validação, simulação de falha ao salvar e aparência clara/escura.

Implemente o CMS Core com variáveis de tema versionadas, APIs reais do componente Review e um fluxo funcional de edição e revisão que preserve as respostas do usuário e o foco.

Uma fila de revisão do CoreUI criada com variáveis reais do tema 5.9, abas nativas, seleção em lote por caixas de seleção e uma notificação persistente que permite desfazer o último arquivamento local.

Um estúdio de convites nativo de CSS que demonstra os temas semânticos 5 de daisyUI, cores pareadas para conteúdo, seleção por botões de opção, controles de intervalo, validação do navegador e uma etapa de revisão em um diálogo real.

Crie uma busca de dispositivos com escopo definido usando o DDS v3: cores semânticas, escala tipográfica responsiva, espaçamento por tokens e uma composição InputGroup cujo comportamento de filtragem cabe à aplicação.

Explore o tema DKFDS da Dinamarca, as escalas Sass reais e os padrões acessíveis de tabela por meio de uma comparação completa de recursos, com ordenação numérica, busca enviada e recuperação do estado vazio.

Implemente uma sequência de serviços legível com a tipografia real, a estrutura responsiva Stepper e o estado local recuperável de formulário do Bootstrap Italia.

Explore as funções reais de tema, os modos de tamanho e o comportamento nativo dos campos de Designsystemet por meio de um editor completo de briefing de tarefa, com indicação de caracteres e estado de apresentação preservado.

Conheça a tipografia, a grade e o API de acordeão concretos do sistema do Estado francês, dentro de seu escopo institucional. Compare o comportamento de divulgação vinculada e independente em um exemplo educacional claramente neutro.

Estude as escalas de cores e espaçamento do LocalTapiola no Duet por meio de um fluxo de seleção de intervalo de datas, com valores de data ISO, validação explícita do intervalo, métodos de foco dos componentes e a distinção em relação ao seletor de código aberto.

Crie um explorador de registros do Elastic UI com escalas Borealis verificadas, controles nativos de tabela e busca, filtragem por gravidade, eventos salvos localmente e código-fonte completo de React.

Use o modelo Transfer, os filtros e as opções desativadas reais de Element Plus para criar uma bancada de seleção de módulos, com cores, tamanhos de fonte e dimensões de controles verificados.

Conheça o contrato de tabela de dados do Soul junto com seu espaçamento de seis pixels, funções de cores em camadas e tipografia compacta Inter. Compare a seleção em lote, a notação de dados ausentes e as linhas de resumo; depois, examine os pontos de entrada verificados do pacote privado React.

Uma referência prática do Calcite para ferramentas espaciais com foco: superfícies semânticas e ações azuis, painéis compactos de inspeção, APIs reais de entrada e um exemplo completo de revisão local de site.

Examine as funções de cor EC, tipografia e espaçamento do Europa por meio de um briefing completo com acordeão nativo, incluindo navegação por teclado, comportamento de abrir tudo e uma alternativa legível sem JavaScript.

Uma composição nativa de acordeão e gaveta do Flowbite 4, com aliases de tema semântico verificados, uma lista de conferência de bagagem persistente e um fluxo acessível de anotações locais sobre materiais.

Uma estante de leitura nativa do Fomantic UI com valores de tema compilados e verificados, módulos jQuery de menu suspenso e avaliação, suporte explícito a teclado e uma lista local persistente de itens selecionados.

Uma bancada funcional de comprovação do Foundation que usa XY Grid, validadores personalizados do Abide, confirmação com Reveal, configurações Sass reais e código completo de integração local.

Um caderno de esboços nativo do Framework7 com ações reais de deslizar para fora, valores explícitos de tema do iOS, um acionador de ações acessível por teclado e uma lista filtrada que mantém os estudos concluídos até a redefinição.

Um guia Pajamas para fluxos de trabalho técnicos: tokens semânticos reais, tipografia e espaçamento fluidos, um inspetor de pipeline em etapas, saída de falhas legível e uma simulação de nova tentativa explicitamente local.

Crie uma lista de conferência para um kit de campo com os criadores reais de Button e Input do gluestack, cores semânticas explícitas da v5 e o código-fonte completo de React Native Web. Examine a validação, as ações de teclado, a identidade estável dos itens e o progresso de preparação derivado localmente.

Explore as funções reais das cores, os espaços de cartões e a paginação nativa do Gov Design System CE com um kit completo de leitura de seis recursos, incluindo estados explícitos de foco e página.

Crie um fluxo de perguntas e conferência de respostas no estilo GOV.UK com a escala tipográfica atual v6, espaçamento responsivo, cores funcionais, validação vinculada e integração concreta com Frontend.

Entenda o HarvardSites como uma plataforma editorial: compare estilos de sites, escolha combinações de fontes documentadas e monte páginas universitárias com componentes de conteúdo desenvolvidos para esse fim.

Headless UI fornece componentes de interação sem estilos para React, como diálogos, listas de opções e interruptores. Este guia mostra como combinar o comportamento nativo de foco, seleção e pop-up desses componentes com CSS comum, usando como exemplo um fluxo de compartilhamento de documentos.

Combine grupos de seleção nativos do HDS, cores semânticas de feedback e resumos de erros vinculados em um fluxo completo de revisão e correção local.

Uma referência de HeroUI v3 com variáveis CSS semânticas reais, controles compostos de React, superfícies claras e escuras e um procedimento funcional de exportação de imagens.

Modele uma reserva de capacidade com os primitivos de layout do Grommet, campos de formulário controlados e medidores numéricos. Use deliberadamente a escala do tema e mantenha o tema base do Grommet separado do tema HPE instalado à parte.

Crie páginas universitárias com a escala real de tokens de Rivet, a anatomia de componentes de HTML e as interações nativas pelo teclado. Explore uma página compacta de detalhes de oficina com abas acessíveis sobre informações de visita.

Monte um formulário empresarial de manutenção com estados reais de entrada do IDS, aliases de tema e um identificador de recurso exato. Consulte os tokens do tema público atual, um pacote Web Components fixado em uma versão específica e um fluxo local de rascunho com validação e redefinição.

Uma interface nativa do Ionic para preferências de leitura, com funções de cor verificadas, geometria de controles deslizantes para iOS e Material, comportamento real de segmentos e interruptores e um artigo que se adapta às escolhas de fonte, tamanho e papel.

Crie interfaces japonesas legíveis para serviços públicos com funções de texto do DADS, tokens semânticos e a anatomia nativa dos componentes de HTML. Experimente uma consulta funcional de recibos com erros de formato, resultado sem correspondências e um registro de status que pode ser revisado.

Crie um painel de compartilhamento voltado a criadores, com contexto claro sobre o curso, ações de cópia objetivas e feedback transparente da área de transferência. Explore a anatomia dos componentes Rails do Sage, suas especificações tipográficas publicadas e a camada mais recente de tokens Pine, carregada externamente.

Crie uma interface nativa de KERN com tipografia verificada, temas semânticos, elementos expansíveis e um fluxo de confirmação reversível.

Um guia do Orbit voltado a viagens, com cores e espaçamentos reais do produto, opções nativas de bagagem, detalhamento de preços consistente e um fluxo completo de revisão local.

Kobalte fornece componentes sem interface visual para Solid, incluindo campos numéricos com valores brutos e formatados separados, a anatomia composta de caixas de seleção e botões com estado pressionado. Este guia conecta esses primitivos aos sinais do Solid por meio de um ajustador de receitas com quantidades derivadas e caixas de seleção de ingredientes que podem ser redefinidas.

Conheça a linguagem de interface operacional da Maersk por meio das funções reais do tema claro, das escalas de títulos e textos, dos raios aninhados e do tratamento de identificadores. Uma consulta de remessa de exemplo demonstra a correspondência exata de referências e um histórico de eventos acessível, sem alegar acesso a dados logísticos em tempo real.

Uma referência do Mantine 9, estruturada em torno de uma tabela nativa de participantes e um painel lateral de agendamento. Consulte as escalas reais do tema, conecte useForm a TextInput, Select, Checkbox e DatePickerInput e teste a validação antes de adicionar um registro local.

Os construtores de store/action de Melt UI associam comportamentos acessíveis à marcação Svelte que você controla. Este guia usa @melt-ui/svelte 0.86.6 para conectar os construtores de radio, slider e switch por meio de seus atributos, actions e stores graváveis; é diferente da abordagem mais recente de API, baseada em runas.

Conheça o fluxo de trabalho compatível com WordPress do Forty-Two, sua paleta para a web e seus padrões de diretório de pessoas por meio de um exemplo funcional de filtro por função e área de pesquisa.

Crie um espaço de trabalho com Fluent UI React v9, tokens semânticos reais, as escalas tipográfica e de espaçamento para a web, abas controladas e um diálogo de acesso validado. Compare os valores do tema, examine a anatomia dos componentes e teste uma interação local antes de usar o exemplo completo de React.

Monte um painel de entregas funcional com tokens do Vibe 4 e controles de React. Entenda a diferença entre cores semânticas de ação e rótulos do painel, os níveis de espaçamento nomeados, as formas abreviadas de fonte e a configuração explícita de CSS necessária para uma nova aplicação.

Crie uma interface de pesquisa em que os números se alinham, as cores dos recursos mantêm seu significado e a tipografia permanece legível. Explore as constantes do MDS, a adoção do Vue 3, a transição do Morningstar Intrinsic e um caderno fictício de alocação com opções de ordenação.

Um guia editorial do Protocol com pilhas de fontes e escalas de espaçamento e largura de contêiner reais, uma página de leitura ilustrada e responsiva e um exemplo completo de formulário nativo de CSS.

Uma bancada nativa de tabelas de dados Naive UI, com valores verificados do objeto de tema, seleção de linhas, expansão, ordenação, paginação e uma ação local para revisar lotes.

Use os tokens ax reais da versão 8 de Aksel, a densidade nativa da tabela e uma estrutura semântica de cabeçalho. Ordene e selecione registros fictícios de acompanhamento enquanto compara os temas claro e escuro.

Use a tipografia, o espaçamento responsivo, as opções de seleção agrupadas e os detalhes contextuais do NHS.UK para criar um fluxo claro de escolha de preferências de consulta.

Crie uma interface de serviço público com componentes reais de colaboradores e um tema explícito. Esta referência usa Utrecht CSS para demonstrar o mapeamento de tokens, a estrutura de uma lista de dados e dois temas originais com o mesmo fluxo de edição.

Inspecione os tokens do tema Therapy do Nord e os contratos de Web Components por meio de um rascunho de solicitação de sala: funções de cor reais, dimensionamento responsivo de campos, validação explícita e resultados preparados localmente.

Explore os tokens de design da NSW, a tipografia Public Sans e as guias nativas acessíveis por teclado em um guia completo de workshop, com uma lista de leitura local independente.

Crie um compositor de brief completo com Nuxt UI 4.11.3, componentes Vue reais, referências semânticas de tema, validação de entrada e comportamento explícito para rascunhos locais.

Crie uma resposta de pesquisa que não possa se contradizer: caixas de seleção nativas do ONS, respostas mutuamente exclusivas, referências exatas de tipografia e cores e um fluxo local completo de revisão.

Crie um guia extenso no estilo de Ontário, com tipografia real, valores publicados de espaçamento e cores, comportamento nativo de acordeão e código-fonte completo correspondente à versão.

Conheça a paleta, as funções semânticas, o espaçamento e os limites de densidade reais do Oracle JET 19 Redwood por meio de uma planilha original e completa para revisão de estoque.

Inspecione os tokens semânticos reais, os pacotes de tema e o comportamento nativo de Offcanvas do Orange OUDS 1.4 em um estudo comparativo responsivo completo.

Um editor de catálogo nativo do Oruga, com tags de tópicos pesquisáveis e removíveis, limites de vocabulário aplicados, tokens reais de um tema opcional e um cartão dinâmico que reflete os rótulos selecionados.

Crie um espaço de trabalho de dados denso com Blueprint: tokens verificados de tipografia e intenção, uma tabela de conjuntos de dados selecionáveis, um painel de revisão e o código-fonte completo de React.

Explore o sistema de conteúdo da Bolt com a identidade da Pega: tipografia fluida, espaçamentos horizontal e vertical separados e uma composição de acordeão Twig para uma página editorial de recursos.

Pico CSS aplica estilos a HTML semântico com uma escala tipográfica responsiva baseada em rem e variáveis de tema. Suas distribuições padrão, sem classes e condicionais têm escopos de integração diferentes; este guia usa a compilação padrão em um formulário de preferências de leitura, com comportamentos nativos de expansão e diálogo.

Inspecione a grade Bootstrap 3 de Poncho, as cores semânticas das ações e os painéis de serviço totalmente clicáveis em um diretório de atividades funcional.

Explore Porsche Design System v4 com espaçamento fluido, esquemas de cores CSS, tipografia Porsche Next e um configurador com duas opções. A referência inclui expressões reais de tokens e uma entrada completa do Vite que usa os eventos atuais do controle segmentado.

Um planejador de sessões nativo do Preline, com guias vinculadas, um plugin de entrada numérica com restrições, aliases de tema instalados, escalas reais do Tailwind e uma estimativa local de materiais que se atualiza conforme a sessão selecionada.

Uma implementação do PrimeVue com versão fixada do ecossistema Prime UI: uma árvore de documentos com tema Aura e referências reais de predefinição, expansão controlada, filtragem, seleção e fixação local.

Pure CSS é uma folha de estilos modular para grades, formulários, botões, menus e tabelas, sem um runtime de widgets. Este guia mostra como o módulo opcional de grade responsiva e os elementos semânticos nativos se combinam em um catálogo de equipamentos filtrável, com ordenação e seleção implementadas explicitamente.

Um fluxo guiado nativo do Quasar, com valores reais de marca e espaçamento, validação do QForm, um criador de brief em três etapas, opções de formato por botões de opção e uma agenda dinâmica de quarenta e cinco minutos.

Explore a implementação de Bootstrap de Queensland em um seletor de recursos ilustrado e completo, com funções de tema reais, estilo nativo de caixas de seleção e um diálogo acessível de revisão.

Crie um compositor completo de plano de foco com React Native Elements 5.0.0: funções reais de tema, campos e seleções controlados, validação, confirmação local e uma compilação web testada.

Um calendário de revisão nativo do React Suite, com variáveis CSS verificadas da versão 6, marcadores nas células de data, agenda do dia selecionado, validação em modal e regras explícitas para agendamentos locais.

Use PatternFly para criar um espaço de trabalho operacional: referências semânticas de tokens, cartões de serviço selecionáveis, seleção em massa com três estados, revisão do escopo e código nativo completo de React.

Crie um seletor de atendimento de pedidos concreto com Cedar, blocos nativos do Vue, valores reais de tokens, navegação completa pelo teclado e uma composição responsiva de produtos.

Explore as funções de cor reais de Ripple, sua escala de espaçamento de 14 etapas e referências tipográficas responsivas em uma linha do tempo completa de oficina, com exibição progressiva de informações, progresso e foco no próximo passo pelo teclado.

Aplique as diretrizes públicas de design da Sainsbury’s a um fluxo completo de escolha de horário: referências reais de paleta e tamanhos, opções de rádio acessíveis, resumo atualizado e feedback local transparente.

Um guia de referência do Lightning para trabalhar com registros densos: espaçamento, tipografia e cores semânticas reais, espaço de trabalho editável para casos, validação de campos e histórico de atividades que reflete as alterações locais.

Conheça a estrutura de visualização e interação do One UI, suas diretrizes de margens de 24 dp e a exigência de ampliação do texto em 200% por meio de uma prévia completa e original das preferências de leitura, com aparência escura e opção explícita de redefinição.

Use o tema Horizon de SAP Fiori com UI5 Web Components: parâmetros reais do tema, densidade de conteúdo explícita, estados semânticos de valor e uma composição para solicitações de compra com validação local.

Aplique a tipografia responsiva, o espaçamento e as funções de cor do governo escocês em um campo nativo com contagem de caracteres, que preserva o texto acima do limite e permite corrigir o conteúdo.

Entenda o Braid por meio de uma composição original para busca de empregos: variáveis com escopo de tema, quatro breakpoints reais, texto contextual, botões com tonalidades distintas e um campo controlado que explica a validação em vez de desativar a ação.

Uma referência do Evergreen com valores reais do tema, entrada controlada de tags, correspondência de regras em tempo real, alternativa de recuperação para estados vazios e uma caixa de diálogo nativa para revisão.

Crie uma configuração sequencial do espaço de trabalho com os componentes Steps básicos recomendados pelo Semi, Input e Switch controlados, tokens reais do tema e uma escolha explícita entre os pacotes React 18 e React 19.

Um guia do Intergalactic com tokens semânticos e de gráficos atuais, controles nativos de filtragem, comparação em escala fixa, detalhes do item selecionado e um conjunto de dados completo e reproduzível.

Explore as referências exatas de espaçamento, raio e tipografia do Horizon Workspace em um fluxo local completo de revisão de solicitações, com retenção de rascunhos, validação, filtros de status e recuperação.

Torne o Anvil2 concreto com seu modelo de tokens em três níveis, valores de função verificados para os modos claro e escuro e uma interação completa de atribuição de serviço, com estados sincronizados de técnico, horário e revisão.

Inspecione eventos industriais com um vocabulário explícito de níveis de gravidade, funções de cor adaptadas ao tema e o iX Event List API. Este guia cria um caderno local de equipamentos sem confundir um registro revisado com um alarme de máquina resolvido.

Use os Web Components atuais do SGDS com tokens responsivos reais, temas diurno e noturno e quantidades nativas com limites que mantêm um plano local sincronizado.

Compare os temas Cerberus, Mint e Rose reais do Skeleton 5.0.1 em uma mesa de leitura completa, com inspeção de tokens em tempo real, combinações de superfícies escuras e estado local reversível.

Inspecione as cores públicas, o espaçamento, a tipografia de produto e os tokens de borda reais do Seeds em uma fila completa de revisão editorial, com seleção múltipla, estados vazios após filtragem e opção de desfazer.

Crie páginas editoriais acadêmicas com a predefinição Tailwind de Decanter, uma escala tipográfica responsiva e bordas de tela fluidas. Explore cartões originais de eventos com filtros de tema funcionais e resumos expansíveis.

Um guia do Circuit com tokens semânticos exatos, propriedades nativas de validação, um editor completo de itens para lojistas e uma prévia ilustrada do lado do cliente.

Crie formulários legíveis para serviços públicos finlandeses com Source Sans 3, tokens de espaçamento explícitos e um padrão recuperável de seleção de documentos.

Um diário de projeto nativo do Tabler com variáveis reais do tema 1.6, cartões de linha do tempo, contexto de datagrid, validação em janela modal e uma composição clara/escura que aceita marcos locais.

Explore as categorias reais de tokens da v5 e os temas azuis claro e escuro do Tamagui em um painel completo de hábitos com componentes nativos, validação, progresso e recuperação para estados vazios.

Crie um editor compacto de políticas API com TDesign React: funções concretas do tema, escala de tamanhos de dois pixels, registro de campos do Form e composição tipada de Table.

Crie uma interface de descoberta de serviços com os elementos primitivos documentados da v2 do Thumbprint: cartões compactos de prestadores, detalhes de comparação fáceis de ler, estados de seleção claros e uma lista de favoritos persistente.

Crie um rascunho de notificação com o tema e os contratos de botões do Paste, uma escala de espaçamento verificada e uma distinção clara entre editar, revisar e realmente enviar uma mensagem.

UIkit combina uma estrutura de CSS, personalização com Less e componentes JavaScript orientados por atributos. No planejador de oficina abaixo, Switcher, Accordion e a grade responsiva funcionam em conjunto, ilustrando onde termina o comportamento nativo dos componentes e começa o estado de seleção da aplicação.

Explore os tokens públicos de cor e espaçamento da UNDP, abas nativas operáveis pelo teclado e um exemplo completo de leitura de oficina com progresso de revisão local.

Combine os tokens de espaçamento de USWDS, os papéis do tema, tabelas semânticas e accordions nativos em uma comparação de oportunidades pesquisável.

Crie jornadas de serviço claras com os tokens semânticos e a Process List nativa da VA: explicações visíveis das etapas, rótulos de status significativos e detalhes complementares que mantêm o fluxo principal legível.

Um fluxo móvel de seleção de endereço criado com Vant 4: variáveis CSS reais, identidade de endereço controlada, validação de campos, alternância de tema e salvamento explicitamente apenas local.

Use o Nova CSS da Visa para criar uma opção clara de formato de extrato, com controles de opção nativos, cabeçalho em cor alternativa e resumo para revisão. Confira os valores exatos do tema 1.6.5, o espaçamento escalável e a integração completa da folha de estilos.

Analise a base web da Volvo Cars, priorizada para HTML, os tokens reais do modo claro e o estilo nativo de cartões selecionáveis por meio de um exemplo completo de plano de bagagem, com escolhas independentes, alternância de tema e redefinição.

Uma folha de avaliação nativa do Vuestic, com predefinições de modo claro e escuro verificadas nas fontes, rótulos de avaliação acessíveis, validação de área de texto, média calculada e um estado salvo que preserva a avaliação concluída.

Crie interfaces de leitura resilientes com tipografia fluida, papéis semânticos de cores e conteúdo expansível nativo que continua legível sem JavaScript.

Analise os tokens semânticos reais de Web Awesome em elementos personalizados nativos, incluindo alterações localizadas de raio e espaçamento, estilo do shadow DOM, comportamento de seleção e validação de entrada.

Use a anatomia real do SearchInput, a hierarquia de ações e os tokens voltados à leitura de Codex. Pesquise um índice local de artigos, consulte um resultado e retorne à mesma posição de leitura.

Use os papéis de tema e a sintaxe de tokens reais do Wanda em um espaço completo para ler feedback, com filtros por tópico, contexto expansível de evidências e um caderno local persistente.

Crie um plano de aprendizagem local com o FormField composto, o TextInput controlado e o PrimaryButton do Canvas Kit, diferenciando as fontes atuais de tokens semânticos dos exemplos antigos de migração de space.x4.

Um guia Garden para tarefas de suporte, com aliases de tema reais, escalas de tipografia e raio, um editor de resposta completo, rascunhos locais que levam em conta a visibilidade e recuperação de campos.

Marketplace de viagens. Destaque coral acolhedor, visual guiado por fotografia e interface arredondada.

Gerenciamento de projetos. Minimalismo extremo, precisão e destaque roxo.

Sistema sereno, quase monocromático, ancorado em um tom profundo de azul-petróleo quase preto, com bastante espaço em branco e tipografia editorial.

Eletrônicos de consumo. Espaço em branco premium, SF Pro e imagens cinematográficas.

Infraestrutura de pagamentos. Gradientes roxos característicos e elegância com peso 300.

Banco digital. Interface escura elegante, cartões em degradê e precisão fintech.

Efeito de vidro fosco com camadas translúcidas, desfoque sutil e bordas luminosas que criam profundidade e elegância moderna.

Transferência de dinheiro. Destaque em verde vibrante, visual acolhedor e claro.

Automóveis elétricos. Subtração radical, fotografia em tela cheia e interface quase inexistente.

Plataforma de aprendizagem de idiomas. Verde vibrante da coruja, sombras marcantes e diversão gamificada.

Plataforma voltada ao código. Densidade funcional, precisão do azul sobre branco e fundamentos do Primer.

Interface conversacional que prioriza a IA, com controles mínimos, resultados claros e fluxos de tarefas delegadas para processos com agentes.

Híbrido de planilha e banco de dados. Visual colorido, acolhedor e estruturado para dados.

Sistema de design estruturado e voltado ao ambiente corporativo, que prioriza clareza, consistência e eficiência em aplicações web com grande volume de dados.

Painel de aplicativo com estética em tons de roxo, navegação na barra superior, layouts com cartões e fluxos de trabalho voltados a desenvolvedores.

"O navegador que navega por você." Superfícies translúcidas, gradientes acolhedores e layout com foco na barra lateral.

Estilo expressivo e de alto contraste, com tipografia criativa e cores marcantes para interfaces visualmente impactantes.

Um sistema visual editorial, guiado por colagens: fundo em papel aquecido, imagens surreais de gesso e arquitetura, tipografia de destaque em grandes dimensões, filetes finos, marcadores de seção em algarismos romanos e pequenas anotações editoriais. Inspirado no padrão de produção de revistas impressas de alto nível (Monocle, Apartamento, IDEA), adaptado para um site funcional.

Layout de grade modular com blocos em formato de cartão, hierarquia clara, espaçamento suave e contraste visual sutil para interfaces organizadas e fáceis de percorrer.

Corretora de criptomoedas. Destaque amarelo marcante sobre base monocromática e urgência de pregão.

Automóveis de luxo. Superfícies escuras premium e estética precisa da engenharia alemã.

Submarca de alto desempenho automobilístico. Superfícies de cockpit quase pretas, destaques tricolores da BMW M e geometria de engenharia precisa.

Forte presença visual, com tipografia robusta, cores de alto contraste e layouts imponentes.

Estética bruta e antidesign, inspirada na arquitetura de concreto, com elementos sem adornos, layouts impactantes e minimalismo funcional.

Marca de hipercarros. Base em preto cinematográfico, austeridade monocromática e tipografia de exibição monumental.

Interface aconchegante inspirada em cafés, com tons quentes, tipografia suave e layouts organizados para uma navegação descontraída.

Agendamento de código aberto. Interface limpa e neutra, com simplicidade voltada a desenvolvedores.

Plataforma de criação visual. Gradiente vívido de roxo e azul, espaçamento generoso e formas acolhedoras.

Assistente de IA da Anthropic. Destaque em terracota quente e layout editorial limpo.

Agência criativa. Formas orgânicas, gradientes suaves e layout com direção de arte.

Formas suaves, arredondadas e com aparência tridimensional, que imitam argila moldável, com elementos volumosos e divertidos e superfícies coloridas.

Design focado na simplicidade, com bastante espaço em branco, tipografia legível e paleta de cores reduzida para diminuir a poluição visual.

Banco de dados para análises rápidas. Estilo de documentação técnica com destaque em amarelo.

Plataforma de IA empresarial. Gradientes vibrantes e estética de painel repleto de dados.

Corretora de criptomoedas. Identidade visual azul e limpa, com foco na confiança e estilo institucional.

Paletas e gradientes vibrantes de alto contraste para experiências digitais envolventes, memoráveis e modernas.

Plataforma de integração de ferramentas. Visual escuro e moderno, com ícones de integração coloridos.

Design minimalista contemporâneo, com grades bento, suporte ao modo escuro e layouts acessíveis de alto desempenho.

Design profissional alinhado à marca, com grades estruturadas, layouts minimalistas e padrões empresariais consistentes.

Estética futurista de ficção científica, com temas escuros, destaques neon vibrantes e elementos espaciais imersivos.

Design lúdico e cheio de personalidade, com tipografia expressiva e gráficos marcantes para páginas de apresentação e projetos criativos.

Editor de código com IA como prioridade. Interface escura e elegante, com detalhes em gradiente.

Estética de plataforma de nuvem com tema escuro, grades modulares, painéis com aparência de vidro e hierarquia clara de dados para painéis de produtividade.

Plataforma de voz e bate-papo. Tons profundos de azul-arroxeado, superfícies prioritariamente escuras e toques de cor divertidos.

Técnica de renderização com padrões de pontos que simula tons usando uma paleta limitada, criando visuais nostálgicos, retrô e de alto contraste.

Estilo desenhado à mão, com rabiscos, fontes manuscritas e traços imperfeitos para um visual descontraído e divertido.

Design teatral e de alto contraste, com layouts marcantes, visuais imersivos e composições pouco convencionais que chamam a atenção.

Layout editorial inspirado em revistas, com tipografia serifada refinada, grades estruturadas e uma experiência de leitura elegante.

Estética graciosa e refinada, com tipografia delicada, paletas minimalistas e layouts sofisticados e bem-acabados.

Plataforma de voz com IA. Interface escura e cinematográfica, com estética inspirada em formas de onda de áudio.

Estilo dinâmico e vibrante, com bordas espessas, formas geométricas, cores de alto contraste e tipografia expressiva que transmite movimento e vitalidade.

Design empresarial limpo e de alto contraste para fluxos de trabalho orientados por dados, com padrões intuitivos de arrastar e soltar e layouts estruturados.

React Plataforma nativa. Tema escuro, espaçamento entre letras reduzido e foco em código.

Design vibrante e cheio de personalidade, com cores marcantes, gráficos lúdicos e layouts dinâmicos que equilibram criatividade e estrutura.

Estética de fantasia inspirada em jogos, com visuais marcantes e sofisticados, paletas de cores ricas e elementos temáticos imersivos.

Automóveis de luxo. Editorial com luz e sombra dramáticas, detalhes em vermelho Ferrari e preto cinematográfico.

Ferramenta de design colaborativo. Visual multicolorido e vibrante, divertido sem deixar de ser profissional.

Estilo minimalista bidimensional, com cores vibrantes, tipografia limpa e sem efeitos 3D, ideal para interfaces rápidas e fáceis de usar.

Criador de sites. Preto e azul marcantes, com foco em movimento e design.

Design acolhedor e intuitivo, com elementos arredondados, bastante espaço em branco e paletas de cores pastel suaves.

Design voltado para o futuro, com tipografia inspirada em tecnologia, layouts modernos e estética elegante, guiada pela inovação.

Transições suaves de cor e superfícies ricas em gradientes para interfaces modernas e divertidas, com profundidade visual.

Automação de infraestrutura. Visual empresarial limpo, em preto e branco.

Ponto de encontro da comunidade de aprendizado de máquina. Amarelo ensolarado como cor de destaque, identidade monoespaçada, visual alegre e denso.

Tecnologia empresarial. Design system Carbon, paleta azul estruturada.

Mensagens para clientes. Paleta azul acolhedora e padrões de interface conversacionais.

Sistema editorial inspirado em papel: fundo de pergaminho quente, destaque azul-tinta e hierarquia guiada por fontes serifadas. Feito para currículos, documentos de uma página, artigos técnicos, portfólios, apresentações — tudo que deve parecer uma impressão de alta qualidade, não uma interface. Multilíngue por design (EN · zh-CN · ja).

Negociação de criptomoedas. Interface escura com detalhes em roxo e painéis densos em dados.

Marca de supercarros. Superfícies em preto absoluto, detalhes dourados e tipografia dramática em maiúsculas.

Design focado em conversão, que elimina obstáculos e conduz as pessoas à ação com clareza, confiança e agilidade.

Design divertido e minimalista, com cores vivas, formas arredondadas, bordas 3D táteis e ilustrações acolhedoras para interfaces acessíveis.

Criador de aplicações full-stack com IA. Gradientes divertidos e estética de desenvolvimento acolhedora.

Estética sofisticada e escura, com títulos marcantes, paleta monocromática e sensação premium para experiências de marcas de luxo.

Rede global de pagamentos. Fundo em tom creme quente, formas ovais orbitais e calor editorial.

Material Design do Google, com superfícies em camadas, temas dinâmicos, animações integradas e padrões responsivos multiplataforma.

Loja de tecnologia. Fotografia em primeiro plano, superfícies claras ou escuras e chamadas para ação em Meta Blue.

Design despojado que prioriza espaços em branco, tipografia limpa e cores contidas para garantir clareza e foco máximos.

Provedor de modelos de IA. Interface escura e marcante, com detalhes em neon.

Plataforma de documentação. Visual limpo, detalhes verdes e foco na leitura.

Colaboração visual. Amarelo vivo como cor de destaque e estética de tela infinita.

Monitoramento de missões espaciais e aeroespaciais. Centro de comando escuro, telemetria âmbar e precisão monoespaçada. Clareza funcional acima de tudo.

Provedor de modelos de linguagem de grande porte com pesos abertos. Minimalismo de inspiração francesa, em tons de roxo.

Estilo editorial contemporâneo, com tipografia serifada, paletas minimalistas e layouts limpos para produtos digitais refinados.

Banco de dados de documentos. Identidade visual com folha verde e foco em documentação para desenvolvedores.

Design inspirado em matrizes, guiado por tipografia monoespaçada, com alto contraste, alta densidade e estética hacker elegante.

Interpretação moderna do brutalismo, com bordas marcantes, cores de destaque vibrantes e layouts crus de alto contraste sobre superfícies quentes.

Efeitos de brilho neon elétrico e combinações de cores de alto contraste para interfaces marcantes que chamam a atenção.

Elementos de interface suaves e em relevo, com sombras internas e externas sobre superfícies monocromáticas, criando uma aparência tátil e integrada.

Uma opção padrão, limpa e orientada a produtos. Use quando o briefing não pedir um estilo específico — funciona bem para ferramentas B2B, painéis e páginas utilitárias.

Varejo esportivo. Interface monocromática, tipografia enorme em maiúsculas e fotografias em tela cheia.

Espaço de trabalho completo. Minimalismo acolhedor, títulos serifados e superfícies suaves.

Computação com GPU. Energia em verde e preto, estética de potência técnica.

Execute modelos de linguagem de grande porte localmente. Prioridade ao terminal e simplicidade monocromática.

Plataforma de programação com IA. Tema escuro centrado em desenvolvedores.

Design inspirado em fliperamas retrô, com fontes pixeladas, bordas pontilhadas, cores divertidas de alto contraste e estética de jogos 8-bit.

Design inspirado em papel e impressão, com poucas cores, tipografia serifada e sem serifa, limpa e superfícies táteis.

Mecanismo de busca com IA conversacional. Fundo muito escuro, tipografia marcante, um único destaque violeta e hierarquia densa de informações.

Design com profundidade espacial, vistas isométricas, pontos de fuga e elementos em camadas que direcionam a atenção com realismo tridimensional.

Descoberta visual. Destaque vermelho, grade de alvenaria e imagens em primeiro plano.

Varejo de consoles de jogos. Layout com três superfícies, tipografia de exibição com autoridade contida e efeito de escala ciano ao passar o cursor.

Análise de produtos. Identidade visual divertida com um ouriço e interface escura voltada a desenvolvedores.

Estética premium inspirada na Apple, com espaçamento preciso, tipografia moderna e linguagem visual refinada e polida.

Design refinado e pronto para negócios, com tipografia moderna, layouts estruturados e identidade visual confiável.

Linguagem visual inspirada na impressão para livros, revistas e relatórios, com grades editoriais e tipografia expressiva.

Iniciador de produtividade. Interface escura elegante, com detalhes em gradientes vibrantes.

Estilo minimalista moderno, cuidadosamente selecionado, com tipografia serifada elegante e paletas discretas e sofisticadas.

Setor automotivo francês. Gradientes vibrantes de aurora, tipografia NouvelR e energia marcante.

Execute modelos de ML por meio de API. Tela branca e limpa, com foco em código.

E-mail API. Tema escuro minimalista, com detalhes em fonte monoespaçada.

Design nostálgico com tipografia de inspiração vintage, paletas retrô de alto contraste e elementos visuais que evocam o passado.

Geração de vídeo por IA. Interface escura cinematográfica, com layout rico em mídia.

CMS headless. Detalhe em vermelho e layout editorial com foco no conteúdo.

Monitoramento de erros. Painel escuro e rico em dados, com detalhes em rosa e roxo.

Design inspirado no Shadcn/ui, com componentes limpos e minimalistas, paleta monocromática e padrões utilitários.

Plataforma de comércio eletrônico. Estética cinematográfica com tema escuro, detalhe em verde-neon e tipografia ultraleve.

Design direto e sem excessos, com tipografia limpa, cores neutras e layouts intuitivos que não distraem.

Imitação do mundo real com superfícies texturizadas, efeitos 3D e metáforas físicas familiares para interfaces digitais intuitivas.

Estética minimalista moderna, com linhas limpas, paleta de cores intencional, interações sutis e espaçamento consistente.

Tecnologia espacial. Preto e branco contrastantes, imagens em tela cheia e estética futurista.

Espaços generosos, preenchimento consistente e layouts baseados em grade criam interfaces limpas, legíveis e arejadas.

Streaming de música. Verde vibrante sobre fundo escuro, tipografia marcante e foco nas capas dos álbuns.

Marca global de cafeterias. Sistema de verdes em quatro níveis, fundo em tom creme quente e botões totalmente arredondados.

Design guiado por narrativas, que usa recursos visuais, textos e interações para conduzir os usuários por jornadas envolventes e emocionalmente marcantes.

Alternativa de código aberto ao Firebase. Tema verde-esmeralda escuro, com foco em código.

Cliente de e-mail rápido. Interface escura premium, com foco no uso do teclado e brilho roxo.

Design inspirado no clássico jogo de blocos, com cores divertidas, fontes de destaque marcantes e layouts compactos e cheios de energia.

Veículo editorial de tecnologia. Detalhes em verde-menta ácido e ultravioleta, fonte de destaque Manuka e blocos de conteúdo no estilo de cartazes de rave.

Infraestrutura de IA de código aberto. Design técnico no estilo de blueprint.

Superfície: uma experiência web cósmica e premium, com sistema escuro e efeito de vidro que transmite a admiração intensa de um eclipse solar — superfícies obsidianas, destaques âmbar de “coroa” e detalhes atmosféricos em ciano.

Plataforma de mobilidade. Preto e branco marcantes, tipografia compacta e energia urbana.

Implantação de front-end. Precisão em preto e branco, com fonte Geist.

Design alegre e colorido, com tipografia divertida e marcante, detalhes quentes e energia visual dinâmica.

Nostalgia das décadas de 1950 a 1990, com toques de esqueumorfismo, texturas granuladas, paletas retrô e tipografia em estilo pixel.

Marca global de telecomunicações. Tipografia monumental em caixa alta e faixas de seção em vermelho Vodafone.

Framework para agentes de IA. Fundo preto absoluto, detalhe em verde-esmeralda e estética nativa de terminal.

Estética de revista com foco em fontes serifadas. Detalhe terracota sobre papel em tom quente de branco suave — ideal para textos longos, conteúdo editorial e páginas de marketing focadas em marca.

Terminal moderno. Interface escura no estilo de IDE, com comandos organizados em blocos.

Criador visual de sites. Estética refinada de site de marketing, com detalhes em azul.

Revista de tecnologia. Densidade de jornal em papel branco, tipografia serifada personalizada para títulos, chamadas em fonte monoespaçada e links em azul-escuro.

Laboratório de IA de Elon Musk. Monocromia contrastante e minimalismo futurista.

Plataforma social de conteúdo gerado por usuários sobre estilo de vida. Vermelho como cor exclusiva da marca, cantos amplamente arredondados e foco no conteúdo.

Plataforma de automação. Laranja acolhedor e ilustrações convidativas.