FoundationWorkbenchDemo

Como funciona

  1. Tokens
    Veja onde a cor aparece.
    Sua próxima ideia.Pronta para ganhar forma.
    Criar
    Localize no produto

    Clique numa cor e encontre onde ela é usada.

  2. 14px

  3. PropostaCada valor. Um papel claro.
    CorpoTexto
    14px
    IntervaloEspaço
    16px
    CantoForma / raio 1:1
    8px
    Compare a proposta

    Compare os papéis e valores da entrada com a proposta.

Diagnóstico

Localize estilos no produto

Seu espaço de trabalho

Projetos

Um lugar para suas ideias ganharem forma.

  • WebsiteEstrutura e navegação
  • Biblioteca de componentesElementos compartilhados
  • DocumentaçãoDecisões e referências

Um sistema. Muitas possibilidades.

--surface3 elementos

Selecione um estilo e encontre seus usos na composição.

Proposta

Compare antes de decidir

9 valores dispersos

  • Tamanhos de texto11,5 · 12 · 13px
  • Intervalos7 · 13 · 15px
  • Cantos3 · 5 · 7px

Entrada

CorpoTexto
11,5px
IntervaloEspaço
13px
CantoForma / raio 1:1
3px
Texto e espaço em 2×

Uma proposta organiza valores dispersos em famílias para você revisar.

Editor

Teste a tipografia no produto real

Ajuste um papel e confira a resposta na prévia antes de alterar os arquivos do produto.

Tipografia
Corpo
PréviaUm próximo passo claro.
Arraste o tamanho e confira a resposta na prévia.
Demo

Uma proposta só

O Experimento e o Design System guardavam duas propostas separadas. Agora é uma só: o que você muda numa tela aparece na outra, e no app. Juntei o que estava salvo assim:


  
As versões antigas continuam guardadas como estavam; nada foi apagado.