GPlanSiS|SDesign — specimen do design system

Cores primitivas

Nunca consumidas por componente. Clique para copiar a custom property.

Semânticos e contraste medido

Razão WCAG 2.2 calculada agora, sobre as cores renderizadas no tema ativo.

Pares texto × fundo

gate: 4,5 texto · 3,0 UI e foco

O laranja de marca com texto branco reprova (3,17:1). Por isso a ação no tema claro usa um degrau mais escuro — e no escuro, texto escuro sobre o laranja.

Tipografia

Uma família, hierarquia por tamanho e peso. Números tabulares onde há comparação.

3xl · 44/700Ordem 2026-0412

2xl · 32/65087,4 % de disponibilidade

xl · 24/650Planejamento da semana 39

lg · 20/600Apontamentos pendentes

md · 16/400Corpo confortável para leitura contínua em documentação.

base · 14/400Corpo padrão de produto: denso sem perder legibilidade.

sm · 13/400Texto de apoio, descrição de campo, metadado.

xs · 12/400Rótulo de tabela e legenda de gráfico.

tabular-nums1.111,11 t8.088,80 t 472,05 t

mono--glx-color-action-bg: #C2500E;

Espaço, raio e elevação

Base 4 px. Raio hierárquico: o container sempre maior que o filho.

none

sm · 4

md · 6

lg · 10

xl · 14

full

nível 0 · plano

nível 1 · sm

nível 2 · md

nível 3 · overlay

Movimento

Duração e easing em token. Com movimento reduzido, tudo vira instantâneo.

fast · 120 ms · enter

base · 200 ms · enter

slow · 320 ms · exit

Ação

Button, IconButton, grupo, toggle, segmentado, split, link, copiar.

Button — intents × tamanhos × estados

nativo <button>

intent

tamanho

estado Desabilitado com aria-disabled continua focável e explica o motivo no tooltip.

<Button intent="primary" loading={isSaving}>Salvar ordem</Button>
<Button intent="danger"><Trash2 />Excluir lote</Button>
<Button intent="ghost" size="sm" aria-disabled title="Preencha o centro de custo">Exportar</Button>

Grupo, toggle, segmentado e split

APG Toolbar · Radio Group · Menu Button

Turno A Turno B Turno C

Link interno Especificação DTCG ↗

Entrada

Anatomia única de campo: rótulo acima, ajuda, erro no próprio campo.

Field — estados

label + aria-describedby + aria-invalid

Código do material Formato MAT-00000

Centro de custo CC-99 não existe no plano. Use um centro ativo, ex.: CC-1204.

Ordem vinculadaSomente leitura — definida pela programação

Aprovador

Quantidade

kg

Site

https://

Tipos especializados

Spinbutton · search · password · textarea

Setpoint (NumberField)

↑↓ ajusta 0,5 · PgUp/PgDn ajusta 5

Busca

Senha

Observação (textarea que cresce) 52/280 caracteres

Data, hora, cor, código, arquivo

nativos + OTP + dropzone

Data de entrega

Início do turno

Cor da categoria

Código de verificação

Colar distribui os 6 dígitos

Anexos Arraste arquivos aqui ou escolha no computador
PDF, XLSX ou imagem · até 20 MB

Seleção

Checkbox, radio, switch, select nativo, combobox com busca, tags, slider.

Checkbox, radio e switch

APG Checkbox (tri-state) · Radio Group · Switch

Switch aplica na hora. Se a mudança precisa de "salvar", é checkbox.

Notificar quando Todos os eventos

Ordem liberada Material em falta Apontamento rejeitadoInclui rejeição automática por regra

Integração SAP (sem licença)

Prioridade Baixa Normal UrgenteFura a fila do sequenciamento

Atualização automática Mostrar ordens encerradas Modo manutenção

Select, Combobox e TagInput

nativo <select> · APG Combobox + Listbox

Select nativo usa appearance: base-select onde há suporte (Chromium 135+); nos demais, continua o select do sistema. Com busca, é Combobox.

Unidade (select progressivo)

Equipamento (combobox)

Etiquetas

urgentelinha 3

Enter adiciona · Backspace remove a última

Tolerância de peso

± 2,5 %

Faixa de OEE (dois cursores)

65–85 %

Navegação

Breadcrumb, abas, paginação, stepper, árvore, sidebar e command palette (Ctrl K).

Breadcrumb e Tabs

APG Breadcrumb · Tabs (←→ Home End)

TAG: EN-301
Fabricante: Envasadora do Vale
Instalado em: 14/03/2019
Criticidade: B — alta

Paginação e Stepper

nav + aria-current

Dados geraisConcluído
RoteiroConcluído
Lista de materiaisEm edição
RevisãoPendente

TreeView — hierarquia de ativos

APG Tree View (←→ ↑↓ Home End)

▸Planta BlumenauSITE
- ▸Linha 3 — EnvaseAREA
  - Enchedora EN-301EN-301
  - Rotuladora RT-302RT-302
  - Paletizador PL-303PL-303
- ▸UtilidadesAREA
  - Compressor CP-01CP-01
  - Caldeira CA-01CA-01

Overlay

Top layer nativo: <dialog> e popover, sem guerra de z-index.

Dialog, AlertDialog, Drawer, Popover, Menu, Tooltip

APG Dialog · Alert Dialog · Menu Button · Tooltip

Lote 2026-0412

Produto: Suco 1 L
Quantidade: 12.480 un
Validade: 04/2027

Feedback

Alerta, toast, progresso, medidor, skeleton, estados vazio, erro, sem permissão e offline.

Alert e Toast

role=status · role=alert

Cor nunca sozinha: ícone e texto carregam o significado.

Nova versão da programação disponível

A programação da semana 40 foi publicada às 07:12.

Apontamentos sincronizados

214 registros enviados ao ERP.

Estoque abaixo do mínimo em 3 materiais

A OP-0418 pode atrasar se a reposição não chegar até quinta.

Falha ao gravar a ordem

O centro de custo CC-99 foi desativado. Escolha outro centro e salve de novo.

Progresso, medidor, spinner, skeleton

<progress> · <meter> · aria-busy

Importando SINAPI 09/20260 %

Processando lote (indeterminado)

Ocupação do armazém62 %

62 %

Uso de disco do historiador93 %

93 %

Carregando ordens…

Estados de tela

vazio · erro · sem permissão · offline

Estado é direção, não humor: diz o que houve e o que fazer.

Nenhuma ordem para esta semana

Importe a programação ou crie uma ordem manualmente.

Não foi possível carregar as paradas

O serviço de historiador não respondeu em 10 s. Os dados até 07:40 continuam visíveis.

Acesso restrito ao PCP

Seu perfil pode consultar, mas não editar a programação. Peça acesso ao coordenador.

Sem conexão — modo offline

Apontamentos ficam na fila local e sobem quando a rede voltar. 6 na fila.

Exibição de dado

KPI com frescor, tabela, badges, avatar, card, lista de descrição, timeline, gráficos, calendário, kanban.

KPI com estado do dado

<dl> + frescor

Todo número carrega a idade. Fresco, obsoleto e ruim têm forma distinta, não só cor.

OEE — Linha 3 há 4 s: 78,2%; ▲ 2,1 p.p. vs. turno anterior

Produção do turno obsoleto · há 12 min: 9.412un; Meta 11.000 · coletor sem resposta

Temperatura TQ-02 qualidade ruim: 412,0°C; Sensor fora da faixa física — valor descartado

Tabela de dados

<table> + aria-sort + seleção tri-state

Cabeçalho fixo, números à direita em tabular-nums, ordenação acessível, seleção em lote. Densidade segue o eixo do tema.

Ordens de produção da semana 39
						Dado	Ações

Badge, chip, avatar, kbd, contador

exibição

RascunhoLiberadaConcluída AtrasadaBloqueadaNova Linha 3 Abrir busca Ctrl K

SBGCRCMF+1

SB

Stéfano Bianchi

Online · Planejamento

Card, lista de descrição e timeline

article · dl · ol

imagem 16:6

Enchedora EN-301

Rodando

Linha 3 · envase de 1 L. Última parada há 2 h 14 min.

Ficha do lote

Lote: 2026-0412
Produto: Suco 1 L
Qtd.: 12.480 un
Status: Em produção
Responsável: R. Cornelli

Auditoria

Liberada para produção
Hoje, 07:12 · PCP
Lista de materiais revisada
Ontem, 16:40 · Engenharia
Rejeitada na primeira revisão
24/09, 10:05 · Qualidade
Ordem criada
23/09, 09:31 · Sistema

Gráficos com alternativa em tabela

SVG + role=img + tabela

Tendência de processo: eixo Y não começa em zero, faixa de operação ao fundo. Barras: destaque só no que importa.

Pressão do header — últimos 60 min (bar)

faixa de operação 5,6–6,8PV

Paradas por causa — turno (min)

Ver como tabela

Calendário e Kanban

APG Grid (datas) · DnD com teclado

Kanban: Espaço pega o card, ←→ move de coluna, Espaço solta. Arrastar com mouse também funciona.

A fazer 2

Revisar roteiro EN-301

Altavence 30/09

Cadastrar novo SKU 2 L

Normal

Em andamento 1

Integração balança rodoviária

IoT

Concluído 0

Accordion

<details name> — exclusivo nativo

Quando usar Switch e quando usar Checkbox?

Switch aplica imediatamente (ligar atualização automática). Checkbox faz parte de um formulário que ainda será salvo.

Por que o laranja de marca não é a cor do botão?

Com texto branco ele mede 3,17:1 e reprova no WCAG 2.2 AA. O botão usa o degrau 700 (4,72:1) no tema claro.

Posso usar cor em tela de operação?

Só para condição anormal (ISA-101). Veja a seção Operação.

Operação — modo ISA-101

Linguagem oposta à de gestão: cinza neutro, cor só para anormal, prioridade de alarme por forma e cor.

Faceplate, banner de alarme e prioridades ISA-18.2

operação — não misturar com gestão

Este bloco ignora o tema de marca de propósito: tela de operação não herda acento laranja.

LIC-101bom

58,0%

SP 60,0 % · AH 85 %

1Crítica2Alta3Média4Baixa Forma + número + cor: legível por daltônicos e em monitor ruim.

IA e chat

Mensagem, citação, chamada de ferramenta, digitando e portão de aprovação humana.

Conversa com agente e ApprovalGate

role=log · A IA propõe. O humano decide.

Você · 08:02

Reprograma a OP-0418 pra não estourar a entrega de sexta.

SB

Agente PCP · 08:02

A OP-0418 depende do material MAT-00421, com reposição prevista para quinta 1. Antecipar para quarta na linha 3 libera a entrega com 1 dia de folga 2.

simular_sequenciamento ok · 412 ms

{ "op": "OP-0418", "linha": "L3", "inicio": "2026-09-30T06:00", "folga_h": 26 }

Proposta aguardando sua decisão

− OP-0418 · L3 · qui 01/10 06:00+ OP-0418 · L3 · qua 30/09 06:00 OP-0420 desloca 4 h (sem impacto em entrega)

Justificativa (obrigatória para registrar)

Gerador de tema

Escolha um matiz. A escala sai em OKLCH e a cor de ação é procurada até passar 4,5:1 — medida, não estimada.

Escala OKLCH com busca de luminância por contraste

DTCG color · WCAG 2.2 1.4.3

Matiz45° Croma0,170

◐ indica passo que saiu do gamut sRGB e teve o croma reduzido até caber. Moldura marca o passo escolhido para ação em cada modo.

Aplicar ao specimen inteiro

prévia · claro

prévia · escuro

Laboratório de movimento

Curva, mola e coreografia viram token. Todo movimento aqui obedece ao eixo “reduzir movimento”.

Editor de curva cúbica

DTCG cubicBezier · arraste ou use setas

cubic-bezier(.2, 0, 0, 1)

Duração400 ms

curva

linear

— fps

Mola física → `linear()`

CSS Easing L2 · Baseline 2023

Rigidez180 Amortec.14 Massa1,0

mola

Coreografia e orçamento de tempo

--stagger · teto de 500 ms

Escalonamento40 ms

—

Regra do sistema: entrada coreografada de uma lista não passa de 500 ms no total. Acima disso, o escalonamento some e a lista entra de uma vez.

Microinterações

Movimento que responde a uma ação e mostra o que mudou — nunca decoração solta.

Botões com estado

aria-live · aria-busy

morfológico

segurar Ação destrutiva sem diálogo: exige 1,2 s pressionado (mouse, toque, Espaço ou Enter). Soltar antes cancela.

onda

Checklist, odômetro e validação

checkbox nativo · role=status

Checklist de partida — EN-301 Guardas fechadas Lubrificação conferida Bico calibrado Lote de tampa liberado

Peças boas no turno

Lote de insumo Formato L-AAAA-NNNN. Enter valida.

Deslizar para arquivar

gesto + alternativa por botão

Arquivar

OP-0419 concluída
Linha 2 · 4.120 un · há 12 min

Arquivar

OP-0417 concluída
Linha 3 · 2.880 un · há 40 min

Arquivar

OP-0415 concluída
Linha 1 · 6.300 un · há 2 h

Arraste a linha para a direita além de 40% da largura. Todo gesto tem um botão equivalente — WCAG 2.5.7.

Transições de estado

View Transitions quando existe, FLIP quando não existe. Altura automática sem medir em JS.

Reordenar e expandir com elemento compartilhado

motor: —

Nome OEE Estado

Só paradas e setup

Acordeão, abas com tinta e rolagem com linha do tempo

grid-rows 0fr→1fr · animation-timeline

Animar grid-template-rows de 0fr para 1fr dá altura automática sem medir em JavaScript e sem saltos. Onde houver interpolate-size, height:auto também anima.

As durações vêm de token. Com o eixo ligado viram 0 ms: o conteúdo aparece, só não desliza.

transform e opacity rodam no compositor. Largura, altura e sombra custam layout ou pintura: use com parcimônia e meça.

Componentes avançados

Carrossel, avaliação, faixa dupla, divisor, lista ordenável, lista virtual, notificações, menu de contexto, assistente e linha do tempo.

Carrossel e avaliação

APG Carousel (tabbed) · radio group

meta batida82,4%

OEE da linha 3 na semana — melhor resultado desde a troca da enchedora.

atenção3 h 10 min

Setup acumulado na linha 1. Duas trocas de formato acima do padrão.

IA propõe−12% refugo

Ajuste de temperatura sugerido para o lote 0421, aguardando aprovação do supervisor.

A instrução de trabalho IT-042 foi clara?

Sem avaliação

Faixa de temperatura aceitável

35 °C a 78 °C

Divisor redimensionável e lista ordenável

APG Window Splitter · reorder com teclado

Árvore de ativos

Planta Blumenau › Linha 3 › Envase › EN-301

Detalhe

Arraste o divisor ou foque nele e use ← →, Home e End. Enter recolhe e restaura.

Prioridade de ordens — linha 3

Arraste, ou foque um item, Espaço para pegar, ↑ ↓ para mover, Espaço para soltar, Esc para cancelar.

Lista virtual, notificações e menu de contexto

janela de renderização · popover · APG Menu

—

Notificações

Clique com o botão direito aqui
ou foque e pressione Shift F10 / tecla Menu

Assistente em etapas e linha do tempo

ol + aria-current=step · validação por etapa

1Produto
2Quantidade
3Revisão

08:02OP-0418 liberada por Stéfano
08:05Agente PCP propôs antecipar para quarta — aguardando decisão
08:40MAT-00421 com reposição atrasada 1 dia
09:15Setup da linha 3 iniciado
09:52Primeira peça aprovada pela qualidade

Dado ao vivo

Frescor do dado é estado de interface: fresco, obsoleto e inválido têm aparência própria.

Tendência em streaming com frescor

role=img + resumo textual

PT-102 · pressão de descargaao vivo—faixa alta ≥ 7,2 bar

Pause a fonte: depois de 5 s sem leitura o indicador vira “obsoleto”, a linha fica tracejada e o valor perde o destaque. O operador nunca confunde dado velho com dado atual.

Medidor, mapa de calor e atualização otimista

meter semântico · rollback visível

78%

OEE diário — 16 semanas

menosmais

OP-0421 · Bloqueada

OP-0422 · Bloqueada

A interface muda na hora e confirma depois. Se o servidor recusar (aqui, 35% das vezes), volta ao estado anterior com tremor e explicação.

Modais e gavetas

Top layer nativo com entrada e saída animadas em CSS puro. No celular, modal vira folha inferior.

Modal — tamanhos, rolagem, formulário protegido e empilhamento

APG Dialog (Modal) · allow-discrete

Esc e clique fora fecham com a mesma animação de saída — sem JavaScript de animação: transition em display e overlay com allow-discrete, entrada em @starting-style. Em navegador sem suporte, abre e fecha instantâneo. Abaixo de 640 px, modais com data-mobile="sheet" sobem de baixo.

dialog.modal{opacity:0;translate:0 12px;
  transition:opacity .32s,translate .32s,overlay .32s allow-discrete,display .32s allow-discrete}
dialog.modal[open]{opacity:1;translate:0 0}
@starting-style{dialog.modal[open]{opacity:0;translate:0 12px}}

Gavetas — quatro lados, três larguras, modal e não modal

<dialog> showModal() · show()

Modal bloqueia a página e prende o foco (top layer + inert implícito). Não modal (show()) deixa a página utilizável: serve para ajuda contextual ou inspetor. A folha inferior tem alça: arraste para cima para expandir, para baixo para fechar; pelo teclado, Enter na alça alterna meio/cheio.

Topbar responsiva e app shell

Mesmo HTML do desktop ao celular: container queries, prioridade+ e barra inferior. Arraste a borda direita da moldura.

Prioridade+ → hambúrguer + barra inferior + FAB

@container · ResizeObserver · APG Disclosure

Celular 375 Tablet 768 Livre

—

GPlanSiS|PCP

SB

Acima de 900 px todos os links cabem. Entre 600 e 900 px, os que não cabem vão para “Mais” — medido de verdade, não por breakpoint fixo. Abaixo de 600 px: hambúrguer abre gaveta, busca expande sobre a barra, barra inferior com 4 destinos e botão flutuante; rolar para baixo esconde topo e base, rolar para cima traz de volta. Esta própria página faz o mesmo abaixo de 820 px.

PWA — instalável e offline

Estado real do navegador, componentes do ciclo de vida e o kit pronto para servir por HTTPS.

Estado ao vivo e critérios de instalação

Web App Manifest · Service Worker · Storage API

Aberto como arquivo local, este specimen não é instalável — service worker exige origem segura e script servido pelo mesmo domínio. Publique a pasta do kit abaixo num servidor HTTPS (ou localhost) e os critérios ficam verdes.

Componentes do ciclo de vida

beforeinstallprompt · online/offline · controllerchange

Instalar GPlanSiS|PCPAbre em janela própria, funciona sem rede no chão de fábrica.

Simular offline

Fila de sincronização0 pendentes

Ícone mascarável, splash e manifesto gerado dos tokens

purpose: maskable · theme_color

Mostrar zona segura (80%)

GPlanSiS|PCP

manifest sw.js register

Inventário completo

Tudo o que o sistema cobre, com base nativa ou padrão APG e onda de entrega.

Componente	Categoria	Base / padrão	Onda	Neste specimen

Pipeline de tokens

Uma fonte, cinco saídas. dist/ nunca é editado à mão.

FonteDTCG 2025.10tokens/*.json
Validaçãotipos, aliases, ciclos, contrastecheck_tokens.py
BuildTerrazzo ou Style Dictionarytokens.css · theme.css
ConsumoTailwind v4 @theme + Base UIbg-action text-on-action
Gatesaxe · visual × 3 temas · APGPlaywright + Vitest

{
  "color": {
    "$type": "color",
    "action": {
      "bg": { "$value": "{color.orange.700}" }
    },
    "text": {
      "on-action": {
        "$value": "{color.neutral.0}",
        "$extensions": { "com.glx.contrast": { "against": ["{color.action.bg}"], "min": 4.5 } }
      }
    }
  }
}

$ python scripts/check_tokens.py primitives.json semantic.light.json
tokens: 65  ·  erros estruturais: 0  ·  pares de contraste: 18  ·  reprovados: 0

GPlanSiS|SDesign — specimen gerado pela skill glx-design-system-hard. Tokens espelham assets/tokens/.

Todo elemento de interface que o sistema sabe construir, num só lugar.

Pares texto × fundo

Button — intents × tamanhos × estados

Grupo, toggle, segmentado e split

Field — estados

Tipos especializados

Data, hora, cor, código, arquivo

Checkbox, radio e switch

Select, Combobox e TagInput

Breadcrumb e Tabs

Paginação e Stepper

TreeView — hierarquia de ativos

Dialog, AlertDialog, Drawer, Popover, Menu, Tooltip

Alert e Toast

Progresso, medidor, spinner, skeleton

Estados de tela

Nenhuma ordem para esta semana

Não foi possível carregar as paradas

Acesso restrito ao PCP

Sem conexão — modo offline

KPI com estado do dado

Tabela de dados

Badge, chip, avatar, kbd, contador

Card, lista de descrição e timeline

Enchedora EN-301

Ficha do lote

Auditoria

Gráficos com alternativa em tabela

Calendário e Kanban

A fazer 2

Em andamento 1

Concluído 0

Accordion

Faceplate, banner de alarme e prioridades ISA-18.2

Conversa com agente e ApprovalGate

Proposta aguardando sua decisão

Escala OKLCH com busca de luminância por contraste

Editor de curva cúbica

Mola física → linear()

Coreografia e orçamento de tempo

Botões com estado

Checklist, odômetro e validação

Deslizar para arquivar

Reordenar e expandir com elemento compartilhado

Acordeão, abas com tinta e rolagem com linha do tempo

Carrossel e avaliação

Divisor redimensionável e lista ordenável

Lista virtual, notificações e menu de contexto

Assistente em etapas e linha do tempo

Tendência em streaming com frescor

Medidor, mapa de calor e atualização otimista

Modal — tamanhos, rolagem, formulário protegido e empilhamento

Gavetas — quatro lados, três larguras, modal e não modal

Prioridade+ → hambúrguer + barra inferior + FAB

Estado ao vivo e critérios de instalação

Componentes do ciclo de vida

Ícone mascarável, splash e manifesto gerado dos tokens

Mola física → `linear()`