# Sistema de design Maersk ## Prévia da interface sistema de design Maersk Consulte duas referências de exemplo originais, confira o histórico de uma rota e diferencie uma consulta malformada de um registro inexistente. ## Referência de design sistema de design Maersk Documentação pública sobre os fundamentos do MDS e o uso de componentes. Os pacotes de componentes nativos ficam em registros privados da Maersk; o exemplo executável usa HTML nativo e um conjunto documentado de tokens, não APIs mc-* inventadas. ### Funções claras da Maersk | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --mds_brand_appearance_primary_default_background-color | #141414 | Ação principal preenchida. | | --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | Texto sobre o preenchimento principal. | | --mds_brand_appearance_primary_default_link-color | #0077B2 | Texto do link. | | --mds_brand_appearance_secondary_default_background-color | #42B0D5 | Preenchimento secundário da marca. | | --mds_brand_appearance_secondary_default_on-background-color | #141414 | Texto sobre o preenchimento secundário. | | --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | Superfície secundária sutil. | | --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | Borda padrão. | | --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | Texto de apoio. | | --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | Superfície sutil da página. | ### Escala de texto | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --mds_brand_typography_text_font-family | Maersk Text | Fonte nativa da marca. | | text_large desktop/mobile | 18px / 28px line height | Igual nas duas plataformas. | | text_medium desktop/mobile | 16px / 24px line height | Tamanho padrão para leitura. | | text_small desktop/mobile | 14px / 20px line height | Metadados compactos. | | text_x-small desktop/mobile | 12px / 16px line height | Menor tamanho de referência. | | normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | Pesos de fonte documentados. | ### Escala de títulos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | headline_large desktop | 50px / 56px, weight 300 | Título grande de destaque. | | headline_large mobile | 38px / 38px, weight 300 | Versão equivalente para dispositivos móveis. | | headline_medium desktop | 40px / 40px, weight 300 | Título da página. | | headline_medium mobile | 26px / 32px, weight 300 | Título da página em dispositivos móveis. | | headline_small desktop | 26px / 32px, weight 400 | Título da seção. | | headline_small mobile | 22px / 26px, weight 400 | Título de seção em dispositivos móveis. | | headline_x-small desktop/mobile | 20px / 24px, weight 400 | Título pequeno. | ### Raios dos cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | radius-xs | 2px | Elementos aninhados pequenos. | | radius-sm | 4px | Elementos do tamanho de uma caixa de seleção. | | radius-md | 6px | Botões e campos de entrada. | | radius-lg | 8px | Notificações e tabelas. | | radius-xl | 12px | Cartões com controles aninhados. | | radius-2xl | 16px | Imagens grandes e diálogos. | | radius-full | 9999px | Formas totalmente arredondadas. | ### Espaçamento e densidade | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Base rhythm | 4px multiples | Preenchimento interno, margens e intervalos. | | Fine component exceptions | 2px, 6px, 10px | Alinhamento de componentes pequenos. | | Responsive dimensions | Not required to be divisible by 4 | Mantenha o espaçamento entre elementos irmãos alinhado ao ritmo. | ### Hierarquia de ações | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Primary action | Primary + Filled | Uma única ação principal. | | Secondary action | Neutral + Outlined | Ação complementar em um formulário aberto. | | Tertiary action | Neutral + Plain | Limpar, redefinir ou expandir uma seção repetida. | | Secondary in a dialog | Neutral + Filled | Evite contornos concorrentes. | | Brand hero exception | Secondary + Filled | Não é a ação padrão do formulário. | ## Guia completo sistema de design Maersk 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. ## Regras públicas e componentes privados são recursos diferentes de sistema de design Maersk ### Escolha com transparência o caminho de adoção > O MDS disponibiliza publicamente orientações abrangentes sobre fundamentos e uso, enquanto seu guia para desenvolvedores indica que os pacotes estão em repositórios privados do Maersk Global GitHub Packages e do Nexus. Consultar a página de um componente não concede direitos de acesso aos pacotes nem de distribuição das fontes. As equipes autorizadas devem usar o pacote e o Storybook associados à configuração corporativa. Esta referência pública oferece, em vez disso, uma implementação nativa completa de HTML com as regras visíveis, permitindo examinar o comportamento sem recorrer a um comando de instalação público fictício. 1. Confirme o acesso ao registro corporativo antes de optar pelo pacote nativo. 2. Confira se a documentação do componente corresponde à versão instalada. 3. Use o exemplo original de HTML para explorar publicamente, sem dependências privadas. Consulte a especificação de apoio ## Entenda a função antes de reconhecer a cor da marca de sistema de design Maersk ### A ação principal é escura no tema claro O azul da Maersk é reconhecível, mas a função de preenchimento principal do tema claro é #141414, com texto branco sobre a cor de fundo. A função de preenchimento secundário é #42B0D5, com texto escuro. Essa distinção evita que todos os controles se tornem detalhes de destaque em cores vivas da marca. A ação principal de consulta do exemplo usa a função principal escura. Uma superfície secundária clara emoldura o estudo da rota, e bordas neutras organizam os registros complementares. Os nomes dos tokens codificam profundidade, item, variante, plataforma, estado e atributo, mantendo a função compreensível quando o tema muda. Consulte a especificação de apoio ## Separe o caráter dos títulos da legibilidade do texto em sistema de design Maersk ### Use os pares específicos para desktop e dispositivos móveis Maersk Headline e Maersk Text têm propósitos distintos. Um título médio muda de 40/40 no desktop para 26/32 em dispositivos móveis, enquanto o texto corrido médio permanece em 16/24. Aplicar uma única escala percentual a todos os estilos de texto não respeitaria essa diferença intencional. A prévia original usa Arial, pois não redistribui arquivos de fontes da marca. Ela segue a hierarquia de tamanhos documentada: título de página leve, rótulos de seção claros e metadados de eventos legíveis de 14px. Os identificadores de referência permanecem como texto selecionável para que seja possível conferir os zeros à esquerda e copiar a sequência exata. Consulte a especificação de apoio ## Sistema de design Maersk A densidade vem do espaçamento, não da omissão de informações ### Preserve as relações em uma interface operacional compacta O MDS usa um ritmo de espaçamento de quatro pixels, com exceções de 2, 6 e 10px para o alinhamento detalhado dos componentes. Os tokens de densidade oferecem os modos Padrão, Compacto e Espaçoso, mas não se deve deduzir um valor de densidade específico de um pacote apenas com base nesses nomes. Os intervalos de 8px e 16px do exemplo agrupam rótulos, eventos e metadados; os de 24px e 32px separam áreas maiores. Em telas estreitas, a rota e o histórico de eventos ficam empilhados. As informações continuam presentes, em vez de desaparecerem para deixar uma captura de tela pequena mais limpa. Consulte a especificação de apoio ## Contêineres externos precisam de espaço para os controles internos em sistema de design Maersk ### A escala de raios comunica o aninhamento Os cartões usam a referência de 12px; botões e campos, 6px; e imagens grandes ou diálogos, 16px. As orientações sobre raio dos cantos indicam explicitamente que o contêiner externo deve ter um raio maior quando contém outro componente. No exemplo, a ilustração da rota fica dentro de um cartão arredondado, enquanto o campo de consulta tem um formato mais compacto. A borda funciona como separador estrutural, não como contorno decorativo em torno de cada linha de texto. A borda global documentada é uma linha sólida de um pixel. Consulte a especificação de apoio ## Um número de remessa é um identificador, não uma quantidade de sistema de design Maersk ### Não deixe que um campo numérico altere a referência As orientações de entrada do MDS diferenciam quantidades de identificadores, como números de contêiner e números de referência. Um campo numérico pode remover zeros à esquerda ou sofrer alterações por um clique acidental nas setas. Por isso, o exemplo usa type="text" com inputmode="numeric" e chaves de texto exatas. O formato de seis dígitos é uma restrição original do exemplo, não uma especificação de número de remessa da Maersk. Entradas vazias ou malformadas recebem uma mensagem de correção específica; referências bem formadas, mas desconhecidas, recebem uma mensagem distinta de nenhum resultado. Esses casos nunca devem ser reduzidos a um erro genérico de entrada inválida. - Mantenha o rótulo acima do campo. - Preserve todos os dígitos do identificador como texto. - Associe as instruções de formato e o texto do erro com aria-describedby. - Defina aria-invalid apenas para erros de formato, não para registros válidos desconhecidos. Consulte a especificação de apoio ## Mantenha a consulta principal separada dos atalhos de exemplo em sistema de design Maersk ### Use verbos no imperativo e em caixa de frase, com resultados concretos Consultar remessa é a única ação preenchida. Os atalhos de referência de exemplo têm pouco destaque e preenchem a mesma consulta, em vez de concorrerem entre si como vários botões principais. Em um formulário aberto, a ação principal vem antes da ação complementar na ordem de navegação pelo teclado e de leitura. A prévia mostra o histórico de eventos do exemplo selecionado como uma lista ordenada. Os rótulos dos eventos indicam o status por extenso, de modo que o marcador azul e a linha de conexão são apenas elementos complementares. O registro é explicitamente fictício; nenhum horário estimado de chegada ou trajeto é apresentado como informação operacional em tempo real. Consulte a especificação de apoio ## Um tema escuro precisa de valores semânticos próprios em sistema de design Maersk ### Evite inverter uma captura de tela A tabela pública do tema escuro altera o texto principal para #F0F0F0 e o preenchimento principal para branco, enquanto a superfície neutra passa a ser #141414. São mapeamentos intencionais de funções, não uma instrução para inverter cada valor RGB. Este exemplo permanece no tema claro documentado. Para estendê-lo ao modo escuro, é necessário substituir o conjunto de funções de cor de forma coerente, incluindo cores de hover, borda e conteúdo sobre fundos. O diagrama de rotas original precisaria então de uma análise de contraste separada, em vez de herdar um filtro global. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design sistema de design Maersk ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação nativa original e offline de HTML, com as funções de cor claras e os espaçamentos documentados da Maersk. Sem o runtime privado do MDS, arquivos de fontes da marca ou conexão ativa com remessas. ``` Sample shipment lookup
CARGO / WORKSPACEIndependent MDS interpretation

Follow the next milestone.

A reference lookup and event history, using original sample records.

``` Referência de código - Só é possível encontrar as referências de remessa de exemplo incluídas. A correspondência exata de strings preserva os identificadores; o documento não contém componentes privados do Maersk nem acesso ao rastreamento. ### Preserve as referências de remessa como texto Um formulário nativo segue as diretrizes de entrada do MDS e usa funções de cor de tokens públicos. A correspondência exata dos dados de exemplo preserva os zeros à esquerda e distingue um formato inválido de um registro não encontrado. ``` Sample shipment lookup

Find a sample shipment

Try 000042 or 000108. These are original sample records.

``` Referência de código - type="text" preserva os dígitos do identificador; inputmode apenas sugere um teclado. - O rótulo visível, a dica persistente e o erro vinculado têm funções distintas. - Este código é uma implementação original, não o componente privado Input do MDS API. ## Configuração do agente sistema de design Maersk ### Ponto de partida para implementação A página pública para desenvolvedores documenta o acesso ao registro privado. As importações nativas exatas e as assinaturas de eventos não são inventadas a partir de trechos de código indisponíveis. O HTML fornecido é uma interpretação completa e funcional dos fundamentos públicos. ``` Native MDS adoption (authorized Maersk teams): 1. Obtain access to Maersk Global GitHub Packages or the private Nexus registry. 2. Use the corporate authentication and SSO flow in the official developer guide. 3. Install the approved component or core package and its documented token/font dependencies. 4. Read exact component properties and events in the MDS Storybook for that installed release. Public reference specimen: Save the complete HTML example as index.html and open it in a browser. It requires no registry, external script or private asset. Its token declarations are a local light-theme snapshot; they do not initialize MDS Web Components. ``` ### Um prompt para seu projeto ``` Crie uma consulta operacional inspirada na Maersk, usando funções de cor claras documentadas, uma ação primária escura, intervalos baseados em 4px, cantos de 6px nos campos e cartões de 12px. Preserve os identificadores de remessa como texto, diferencie uma entrada malformada de um registro ausente e apresente o histórico de eventos como uma lista ordenada. Não invente acesso a pacotes públicos nem APIs de componentes privados. ``` ## Fontes e escopo de sistema de design Maersk Referência independente de OpenDesign. Os pacotes nativos do MDS exigem acesso corporativo autorizado. Todos os identificadores de remessa, rotas e eventos na prévia são dados fictícios de exemplo; nenhum serviço de rastreamento é chamado. - Acesso para desenvolvedores Registros privados e adoção nativa. - Arquitetura de tokens Nomes, marcas e densidade. - Tema claro da Maersk Funções semânticas de cor exatas. - Tema escuro da Maersk Valores correspondentes do tema. - Tokens de texto Pares de tamanho e peso do texto do corpo. - Tokens de títulos Escala de títulos específica da plataforma. - Espaçamento Ritmo de quatro pixels e exceções. - Raio dos cantos Escala de formas aninhadas. - Diretrizes para campos Identificadores, rótulos e erros. - Diretrizes para botões Destaque e ordem das ações. ## Recursos relacionados a sistema de design Maersk ### Microsoft Fluent 2 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. ### Monday Vibe 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. ### Morningstar sistema de design 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. - [Referência de implementação](https://designsystem.maersk.com/components/input/index.html) - [Fonte](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Fonte](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Fonte](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Fonte](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Fonte](https://designsystem.maersk.com/foundations/spacing/) - [Fonte](https://designsystem.maersk.com/components/button/index.html) - [Consulte a especificação de apoio](https://designsystem.maersk.com/develop/index.html) - [Consulte a especificação de apoio](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Consulte a especificação de apoio](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Consulte a especificação de apoio](https://designsystem.maersk.com/foundations/spacing/) - [Consulte a especificação de apoio](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Consulte a especificação de apoio](https://designsystem.maersk.com/components/input/index.html) - [Consulte a especificação de apoio](https://designsystem.maersk.com/components/button/index.html) - [Consulte a especificação de apoio](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Referência de código](https://designsystem.maersk.com/components/input/index.html) - [Acesso para desenvolvedores Registros privados e adoção nativa.](https://designsystem.maersk.com/develop/index.html) - [Arquitetura de tokens Nomes, marcas e densidade.](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/) - [Tema claro da Maersk Funções semânticas de cor exatas.](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Tema escuro da Maersk Valores correspondentes do tema.](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Tokens de texto Pares de tamanho e peso do texto do corpo.](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Tokens de títulos Escala de títulos específica da plataforma.](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Espaçamento Ritmo de quatro pixels e exceções.](https://designsystem.maersk.com/foundations/spacing/) - [Raio dos cantos Escala de formas aninhadas.](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Diretrizes para campos Identificadores, rótulos e erros.](https://designsystem.maersk.com/components/input/index.html) - [Diretrizes para botões Destaque e ordem das ações.](https://designsystem.maersk.com/components/button/index.html)