byescaleira

byescaleira

Preto e branco. A cor só aparece quando informa. Tokens, regras, uma API e uma skill do Claude para aplicar a mesma identidade na web, em slides e nos apps nativos.

Adicionar ao Claude Ler a documentação

Arraste a linha para comparar o tema claro e o escuro. É o mesmo sistema, invertido.

Cinco regras

Valem para site, app, slide e documento. Cada uma aqui embaixo funciona: mexa nela.

Tinta sobre papel

O fundo é branco puro, ou preto puro no escuro. O texto é o inverso. Nada de creme, nem de um preto “quase”. Os cinzas só dão hierarquia.

paper
ink
ink-muted
rule

Interação é tinta

Não existe cor de marca. O botão principal, a seleção, o filtro ativo e o foco ficam em tinta cheia, com o texto em papel. Selecionar é inverter.

A cor só informa

Âmbar para atenção, vermelho para erro, verde para feito, sempre com palavras. A cor que vem do próprio dado aparece só num ponto de 8px, com o nome ao lado.

Atenção. Um dos prazos cai num feriado. Confira antes de aprovar.

  • Ana Exemplo
  • Bruno Teste
  • Clara Modelo

Fios, não caixas

As áreas se separam por fios de 1px. Sem cartão, sem borda grossa, sem fundo de outro tom. Só o que flutua tem sombra: abra o menu.

Parecer de exemplo

O texto longo fica em Source Serif 4, na medida de leitura. Na lista, aparece só o começo dele, cortado em duas linhas, para a pessoa reconhecer o documento sem abrir.

Minuta de teste

Cada linha tem um fio embaixo e nenhuma caixa em volta. No hover, o fundo rebaixa um tom; na seleção, a linha inverte.

Fio de 1px em rule. Menu com borda em ink, raio 14 e shadow-pop.

Um destaque por tela

Cada tela tem uma peça grande, e só uma: a data, o número, a palavra que diz onde você está. O resto fica quieto. Clique na data do CLIO para trocar o dia.

CLIO Dados inventados

Segunda, setembro. 3 prazos

Duas fontes

Schibsted Grotesk em toda a interface. Source Serif 4 só na leitura longa. Sem monoespaçada: os números em coluna usam algarismos tabulares.

Escreva para ver a escala inteira com o seu texto.

Espaço e raio

Sete passos de espaço e um raio para cada nível. Um valor fora da lista é erro, inclusive 6, 10 e 20 no espaço.

Espaço

  • space-14
  • space-28
  • space-312
  • space-416
  • space-524
  • space-632
  • space-748

Raio por hierarquia

Cápsula. Botão, busca, filtro, etiqueta.

10. Linha selecionada e aviso.

14. Popover, menu e folha.

8. Opção dentro do popover.

Reto. Painel, seção e página.

Nativo primeiro

Nos apps, os controles, a navegação e os materiais são os do sistema, vestidos com estes tokens. Não há código pronto: cada plataforma recebe a documentação de como mapear.

A identidade como API

Os mesmos tokens, servidos em JSON e em CSS, resolvidos para o tema, o produto e a data. Pública, só leitura e sem chave. Escolha e veja a resposta.

Tema
Produto

/api/v1/themes/light?season=auto

Ler o guia da API Ver todos os endereços

Adicionar ao Claude

Com a skill, o Claude aplica a identidade sozinho em qualquer trabalho visual. Com o conector, ele consulta os tokens na hora. Escolha onde você usa o Claude.

  • Pelo botão

    O botão abre o Claude Code no terminal com o pedido de instalação já escrito. Confira o texto e aperte Enter: o Claude roda os dois comandos e pede a sua permissão antes.

    Abrir no Claude Code

  • Pelo terminal

    claude plugin marketplace add byescaleira/byescaleira-visual-id && claude plugin install byescaleira-visual-id@byescaleira-visual-id

  • Depois, peça normalmente

    “Faça a landing page do produto”, “monte os slides da reunião”, “crie a tela de configuração no app iOS”. A skill entra sozinha; para chamar, use /byescaleira-visual-id.

O botão só funciona com o Claude Code instalado e depois de você ter usado o Claude Code uma vez nesta máquina.