# Sistema de design Siemens iX ## Prévia da interface do sistema de design Siemens iX Filtre eventos fictícios, inspecione uma observação sobre equipamento e marque um registro como revisado localmente, mantendo visível a gravidade original. ## Referência de design do sistema de design Siemens iX Documentação pública atual do iX e captura oficial do componente API da branch principal. As entradas de cor abaixo são papéis semânticos, não valores hexadecimais fixos inventados. As versões dos pacotes instalados devem ser compatíveis entre si; o exemplo offline usa uma paleta e dimensões próprias, claramente identificadas. ### Tema e entrada de pacotes | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Core package | @siemens/ix | Web components e folha de estilos global. | | React wrappers | @siemens/ix-react | Integração do componente React. | | Icons | @siemens/ix-icons | Dependência oficial de ícones. | | data-ix-theme | classic | Seletor de tema no nível do documento. | | data-ix-color-schema | dark \| light \| system | A grafia exata do atributo segue o esquema. | | Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | Importe uma vez na entrada do aplicativo. | ### Papéis de leitura e superfície | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --theme-color-primary | Primary action role | Resolva conforme o tema escolhido. | | --theme-color-std-text | Default reading color | Títulos de eventos e texto do corpo. | | --theme-color-soft-text | Secondary reading color | Horários e metadados de recursos. | | --theme-color-weak-text | Disabled reading color | Não use para informações secundárias importantes. | | --theme-color-alarm-text | Alarm text role | Use quando o texto de erro precisar de uma cor de primeiro plano. | | --theme-color-component-1 | Interactive component fill | Semitransparente; a superfície subjacente influencia sua aparência. | | color-0 | Transparent background role | Os outros níveis de fundo são opacos. | ### Terminologia de gravidade | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Alarm | Error, invalid or dangerous condition | Mantenha o rótulo textual junto ao marcador colorido. | | Critical | Between alarm and warning | Um significado distinto, não apenas outro tom decorativo. | | Warning | Condition requiring attention | Não o transforme silenciosamente em alarme. | | Success | Positive outcome | Uma ação de revisão não significa necessariamente que um alarme foi resolvido com sucesso. | | Info | Informational condition | Diferente do conteúdo desativado. | | Neutral | Unclassified neutral condition | Disponível quando não se aplica nenhum julgamento de estado. | ### Hierarquia de contornos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --theme-color-hard-bdr | Strong solid boundary | Separação forte. | | --theme-color-std-bdr | Standard control boundary | Controle de entrada ou seleção. | | --theme-color-soft-bdr | Card boundary | Usado para o inspetor do caderno. | | --theme-color-weak-bdr | Region boundary | Separe as regiões principais com sutileza. | | --theme-color-x-weak-bdr | Very subtle boundary | Divisão de baixa ênfase. | | --theme-primary-bdr-1 | Complete border value | Use como borda: var(--theme-primary-bdr-1), não como cor. | ### Papéis tipográficos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Headings | H1 through H6 | Hierarquia do documento. | | Body | Multiline reading | Observações de inspeção e explicações. | | Label | Single-line component text | Controles e campos curtos. | | Display | Single-line KPI presentation | Contagens; não parágrafos. | | Code | Code and technical syntax | Exemplos ou identificadores API, quando apropriado. | ### Captura do Event List API | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | IxEventList.itemHeight | S \| L \| number; default S | Use L para o título e os metadados de exemplo. | | IxEventList.compact | boolean; default false | O modo compacto é selecionado explicitamente. | | IxEventList.chevron | boolean; default false | Exiba um indicador de navegação. | | IxEventList.animated | boolean; default false | Evite movimento desnecessário em um registro estático. | | IxEventListItem.itemColor | string | Expressão de cor do tema CSS. | | IxEventListItem.selected | boolean; default false | Controlado pelo ID do registro selecionado. | | IxEventListItem.variant | outline \| filled; default outline | Escolha de apresentação. | | IxEventListItem.disabled | boolean; default false | Desative apenas quando não houver interação disponível. | | itemClick | Custom event | O wrapper React onItemClick seleciona o registro. | ## Siemens iX Guia completo do sistema de design Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Siemens iX: eventos industriais com estados distintos de revisão e resolução ### Um caderno, não um painel de controle de máquinas > O exemplo funcional é um caderno fictício de equipamentos. Três registros mantêm a gravidade de origem, enquanto um estado de revisão local separado acompanha o que o leitor inspecionou. Essa separação é essencial para a composição: selecionar uma linha, ler uma observação e resolver uma condição física são operações diferentes. A prévia implementa as duas primeiras e não afirma oferecer controle em tempo real. O Event List é um ponto de partida melhor do que cartões decorativos, pois seu estado selecionado, marcador de gravidade e chevron tornam registros repetidos fáceis de percorrer como uma coleção navegável. O inspetor exibe textos mais longos fora da linha. Não há fluxo de telemetria falso nem notificação de sucesso que afirme que um alarme foi resolvido. Consulte a especificação de apoio ## Sistema de design Siemens iX: papéis de cor para significados operacionais ### Combine marcadores com cores de leitura O sistema de cores diferencia camadas de fundo opacas de preenchimentos semitransparentes dos componentes. Não é possível avaliar o preenchimento de um componente sem considerar a superfície abaixo dele. Use as variáveis reais do tema no código nativo, em vez de copiar um valor hexadecimal de uma captura de tela para cada linha. Os estilos de texto padrão e suave atendem a prioridades de leitura diferentes. O texto fraco é destinado ao conteúdo desativado; por isso, um horário necessário para uma investigação não deve ser automaticamente colocado nesse estilo. Para o primeiro plano de uma mensagem de erro, o papel dedicado a texto de alarme é mais apropriado do que reutilizar um preenchimento de status sem critério. - Exiba a palavra Alarme, Aviso ou Informação ao lado da borda colorida. - Mantenha o marcador de alarme após a revisão local; a revisão não altera a condição de origem. - Reserve o estilo selecionado para o estado de navegação, para que gravidade e seleção continuem distintas. Consulte a especificação de apoio ## Sistema de design Siemens iX: tipografia que diferencia observações de rótulos ### Use formatos em vez de supor uma escala de pixels O iX organiza a tipografia em títulos, corpo, rótulos, exibição e código. Observações de inspeção precisam do comportamento multilinha do corpo; uma contagem grande pode usar o estilo de exibição; e um rótulo curto de filtro pertence à categoria de rótulos. O estilo de exibição não é um atalho para aumentar o texto de toda a descrição de um evento. O exemplo documentado ix-typography format="h3" oferece um ponto de partida concreto para a implementação. O mixin Sass equivalente typography-h3 permite usar um elemento personalizado sem recriar as regras tipográficas. A prévia usa intencionalmente uma fonte substituta do sistema e tamanhos tipográficos do aplicativo; esses valores não são apresentados como tokens oficiais da Siemens. Consulte a especificação de apoio ## Sistema de design Siemens iX: seleção e densidade do Event List ### Controle a identidade separadamente da aparência do item A captura API expõe itemHeight como S, L ou um número. O exemplo escolhe L, mantém compact no padrão false e habilita um chevron. Um registro de produção com títulos localizados mais longos deve verificar se a altura escolhida comporta a quebra de linha, em vez de presumir que todos os registros cabem só porque o exemplo cabe. Cada item recebe selected a partir da comparação de IDs e envia itemClick pelo manipulador onItemClick do wrapper. O inspetor consulta o mesmo ID. Isso evita que a seleção visual e o painel de detalhes se refiram silenciosamente a registros diferentes. As mudanças de filtro limpam explicitamente o ID selecionado. Consulte a especificação de apoio ## Sistema de design Siemens iX: um inspetor que se adapta a uma janela estreita ### Mova os detalhes para baixo da coleção de eventos A grade de duas colunas em proporção dois para um do exemplo é um layout do aplicativo, não um token de grade publicado do iX. Em uma janela estreita, ela passa a ter uma coluna, mantendo os registros antes do inspetor. O inspetor não cria uma armadilha de rolagem aninhada; o leitor pode percorrer o exemplo inteiro naturalmente. Os metadados do evento aparecem em uma segunda linha, com uma cor secundária legível. O filtro fica fora das linhas repetidas e não muda de lugar quando os registros são alterados. Um parágrafo de status informa o resultado da revisão local do registro selecionado, sem alterar o filtro nem substituir o título. Consulte a especificação de apoio ## Sistema de design Siemens iX: torne os estados perceptíveis sem depender de cor ou precisão do ponteiro ### Texto, controles de teclado e foco A prévia offline usa botões nativos para os registros, um seletor identificado para a gravidade e uma região de status aria-live para informar o resultado da revisão. Enter e Espaço podem selecionar um registro. A composição da biblioteca nativa usa os wrappers do Event List; antes de adotar substituições personalizadas de foco, teste o comportamento de teclado e de tecnologias assistivas na versão instalada. Os rótulos descrevem a distinção de negócio: Marcar como revisado localmente, não Resolver alarme. Uma ação de revisão desativada vem acompanhada de um estado revisado visível. A cor não transmite todo o significado, e o filtro não deixa uma seleção obsoleta e inacessível oculta em outra categoria. Consulte a especificação de apoio ## Sistema de design Siemens iX: conecte o pacote, o tema e o estado local do aplicativo ### Uma sequência de integração planejada O bloco de configuração contém as importações de pacotes, os atributos de tema do documento, as propriedades reais dos componentes, o estado completo de React e o CSS do aplicativo. O seletor de tema é data-ix-color-schema, não um atributo personalizado de nome parecido. No aplicativo, fixe versões compatíveis do core, dos wrappers e dos ícones instalados. O exemplo visual é uma interpretação offline de HTML/CSS dessas regras de interação. Sua paleta azul-marinho escura, margens internas de 24 pixels e ilustração esquemática de equipamentos são escolhas originais do aplicativo. Para obter fidelidade visual nativa, execute o exemplo separado de React com a folha de estilos oficial e inspecione os valores calculados do tema. 1. Instale core, wrappers React e ícones em um scaffold Vite React; mantenha o elemento raiz gerado. 2. Substitua main.jsx e style.css pelos arquivos fornecidos e selecione classic com dark, light ou system no documento. 3. Selecione um registro, marque-o como revisado, filtre a lista e confirme que a gravidade persiste enquanto a seleção oculta é limpa. Consulte a especificação de apoio ## Sistema de design Siemens iX: exemplos de componentes ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente offline de HTML/CSS. Paleta original, fonte do sistema e dimensões do aplicativo; não é o runtime nativo do iX. ``` Equipment event notebook — iX interpretation
EVENT NOTEBOOKSample plant / offline

Independent HTML interpretation of Siemens iX interaction rules. Original colors, dimensions and fictional equipment records. Local review does not acknowledge or resolve a live alarm.

``` Referência de código - Marcar um evento como revisado não altera sua gravidade nem resolve um alarme de equipamento. A entrada nativa do iX demonstra separadamente a seleção na Event List e os atributos de tema. ### Event List com painel de inspeção controlado separadamente Um ID selecionado controla o destaque do item e os detalhes. A revisão apenas registra um estado local no caderno; a gravidade original continua visível. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` Referência de código - Use itemColor para o indicador de gravidade e um rótulo textual de gravidade legível. - Alterar o filtro de gravidade limpa a seleção, impedindo que o painel de inspeção descreva um evento oculto. - O botão de revisão local faz parte da lógica do aplicativo; não é um reconhecimento de alarme do iX API inventado. ### Tipografia adaptada ao tema, sem copiar tamanhos de fonte Use a propriedade format documentada ou o mixin Sass, em vez de fixar um tamanho de texto para todos os temas. ``` Inspection record @import "@siemens/ix/scss/mixins/font"; .inspection-title { @include typography-h3; } ``` Referência de código - A prévia usa uma fonte alternativa do sistema; ela não distribui fontes da marca Siemens. ## Configuração do agente do sistema de design Siemens iX ### Ponto de partida para implementação Complete main.jsx e style.css para um scaffold Vite React com seu elemento raiz existente. Os wrappers oficiais, a importação CSS e as propriedades da Event List estão documentados; a compilação do pacote nativo não foi executada aqui. A prévia incorporada é uma interpretação independente offline. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` ### Um prompt para seu projeto ``` Crie um caderno de eventos Siemens iX usando as propriedades verificadas da Event List e os atributos de tema documentados neste guia. Preserve a gravidade independentemente da seleção e da revisão local. Use cores semânticas do tema na versão nativa. Nunca sugira que uma ação no caderno resolve um alarme físico. Mantenha os filtros identificados, permita acessar as linhas pelo teclado e empilhe o painel de inspeção em telas estreitas. ``` ## Fontes e escopo do sistema de design Siemens iX Guia independente de OpenDesign. Os dados de eventos e a ilustração dos equipamentos são fictícios. O estilo da prévia é uma interpretação original; o exemplo separado de React usa o API documentado do iX. Não há conexão com máquinas, telemetria nem reconhecimento de alarmes em tempo real. - instalação de React Pacotes, CSS e atributos de tema. - Resumo do componente API Propriedades e eventos reais. - Fundamentos de cores Papéis de superfície, leitura e status. - Tipografia Categorias de texto e suas finalidades. - Implementação da tipografia Formato e entrada Sass. - Bordas Hierarquia dos limites. - Event List Exemplos de componentes e variações de densidade. ## Recursos relacionados ao sistema de design Siemens iX ### Sprout Social Seeds 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. ### SumUp Circuit 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. ### TDesign 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. - [Referência de implementação](https://ix.siemens.io/docs/components/event-list/code) - [Fonte](https://ix.siemens.io/docs/home/installation/react) - [Fonte](https://ix.siemens.io/docs/styles/colors) - [Fonte](https://ix.siemens.io/docs/styles/borders) - [Fonte](https://ix.siemens.io/docs/styles/typography/guide) - [Fonte](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Consulte a especificação de apoio](https://ix.siemens.io/docs/components/event-list/code) - [Consulte a especificação de apoio](https://ix.siemens.io/docs/styles/colors) - [Consulte a especificação de apoio](https://ix.siemens.io/docs/styles/typography/code) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Consulte a especificação de apoio](https://ix.siemens.io/docs/guidelines/accessibility/code) - [Consulte a especificação de apoio](https://ix.siemens.io/docs/home/installation/react) - [Referência de código](https://ix.siemens.io/docs/components/event-list/code) - [Referência de código](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Referência de código](https://ix.siemens.io/docs/styles/typography/code) - [instalação de React Pacotes, CSS e atributos de tema.](https://ix.siemens.io/docs/home/installation/react) - [Resumo do componente API Propriedades e eventos reais.](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Fundamentos de cores Papéis de superfície, leitura e status.](https://ix.siemens.io/docs/styles/colors) - [Tipografia Categorias de texto e suas finalidades.](https://ix.siemens.io/docs/styles/typography/guide) - [Implementação da tipografia Formato e entrada Sass.](https://ix.siemens.io/docs/styles/typography/code) - [Bordas Hierarquia dos limites.](https://ix.siemens.io/docs/styles/borders) - [Event List Exemplos de componentes e variações de densidade.](https://ix.siemens.io/docs/components/event-list/code)