Conheça a linguagem de interface operacional da Maersk por meio das funções reais do tema claro, das escalas de títulos e textos, dos raios aninhados e do tratamento de identificadores. Uma consulta de remessa de exemplo demonstra a correspondência exata de referências e um histórico de eventos acessível, sem alegar acesso a dados logísticos em tempo real.
Interpretação nativa e offline original de HTML, baseada nas funções e no espaçamento documentados do tema claro da Maersk. Sem ambiente de execução privado do MDS, arquivos de fontes da marca ou conexão com remessas em tempo real. · Referência de implementação
02
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.
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.
Confirme o acesso ao registro corporativo antes de optar pelo pacote nativo.
Confira se a documentação do componente corresponde à versão instalada.
Use o exemplo original de HTML para explorar publicamente, sem dependências privadas.
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.
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.
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.
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.
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.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Sample shipment lookup</title><style>*{box-sizing:border-box}body{font:16px/24px Arial,sans-serif;background:#f7f7f7;color:#141414;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #0077b2;outline-offset:3px}header{background:#fff;padding:20px 32px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #d4d4d4}header b{font-weight:500;letter-spacing:1px}header span{font-size:12px;color:#6a6a6a}main{max-width:1120px;margin:auto;padding:32px}h1{font-size:40px;line-height:40px;font-weight:300;margin:8px 0 16px}p{margin:0 0 16px}.subtitle{color:#6a6a6a}.search{background:#fff;border:1px solid #d4d4d4;padding:24px;border-radius:12px;margin:24px 0}.search label{display:block;margin-bottom:8px}.entry{display:flex;gap:8px}.entry input{border:1px solid #8a8a8a;border-radius:6px;padding:12px 16px;max-width:360px;min-width:0;width:100%;background:#fff;color:#141414}.entry button{border:0;background:#141414;color:#fff;border-radius:6px;padding:12px 24px}.hint{font-size:14px;color:#6a6a6a;margin:8px 0 0}.error{color:#b80012;margin:8px 0 0}.error:empty{display:none}.layout{display:grid;grid-template-columns:250px 1fr;gap:24px}aside{background:#fff;border-radius:12px;border:1px solid #d4d4d4;padding:24px}aside h2{font-size:20px;line-height:24px;font-weight:400;margin:0 0 16px}.record{display:block;text-align:left;background:none;border:0;border-top:1px solid #e2e2e2;padding:16px 0;width:100%;color:#141414}.record strong,.record small{display:block}.record strong{font-size:16px;font-weight:500}.record small{color:#6a6a6a;font-size:12px;margin-top:4px}.record[aria-pressed=true]{color:#0077b2}.record[aria-pressed=true] strong:after{content:' →'}.detail{background:#fff;border:1px solid #d4d4d4;border-radius:12px;padding:24px;min-width:0}.detail h2{font-size:26px;line-height:32px;font-weight:400;margin:0}.topline{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.tag{font-size:12px;border-radius:4px;background:#e2f3f9;color:#141414;padding:4px 8px;align-self:start;white-space:nowrap}.route{height:148px;border-radius:12px;background:#e2f3f9;display:flex;align-items:center;justify-content:space-between;padding:24px;position:relative;gap:16px}.port{position:relative;z-index:1;font-size:14px;max-width:40%}.port b{display:block;font-size:20px;line-height:24px;font-weight:400}.port:last-child{text-align:right}.route:before{content:'';height:2px;background:#42b0d5;position:absolute;left:24px;right:24px;top:52%}.port{background:#e2f3f9;padding:8px}.history{list-style:none;margin:24px 0 0;padding:0}.history li{position:relative;padding:0 0 24px 28px;border-left:2px solid #d4d4d4;margin-left:5px}.history li:last-child{padding-bottom:0;border-color:transparent}.history li:before{content:'';position:absolute;left:-6px;top:7px;width:10px;height:10px;background:#42b0d5;border-radius:50%}.history b{font-weight:500;display:block}.history small{font-size:14px;line-height:20px;color:#6a6a6a;display:block;margin-top:4px}.notice{padding:32px 0;max-width:430px}footer{font-size:12px;line-height:16px;color:#6a6a6a;margin-top:24px}@media(max-width:650px){header{padding:16px}header span{max-width:115px}main{padding:24px 16px}h1{font-size:26px;line-height:32px}.layout{grid-template-columns:1fr}aside{padding:16px}.record{padding:12px 0}.search,.detail{padding:20px}.entry{flex-wrap:wrap}.entry input{max-width:none}.entry button{width:100%}.topline{flex-wrap:wrap}.route{padding:8px}.port b{font-size:18px}.route:before{left:16px;right:16px}}
</style><header><b>CARGO / WORKSPACE</b><span>Independent MDS interpretation</span></header><main><h1>Follow the next milestone.</h1><p class="subtitle">A reference lookup and event history, using original sample records.</p><form id="lookup" class="search" novalidate><label for="reference">Shipment reference</label><div class="entry"><input id="reference" type="text" inputmode="numeric" value="000042" required aria-describedby="hint error"><button type="submit">Show shipment</button></div><p class="hint" id="hint">Try 000042 or 000108. Keep the leading zeros.</p><p class="error" id="error" role="alert"></p></form><div class="layout"><aside><h2>Sample shipments</h2><button class="record" data-id="000042" aria-pressed="true"><strong>000042</strong><small>Rotterdam → Singapore</small></button><button class="record" data-id="000108" aria-pressed="false"><strong>000108</strong><small>Hamburg → New York</small></button></aside><section class="detail" id="result" aria-live="polite"></section></div><footer>All references, routes and events are fictional. No live tracking, shipment status or transport commitment is represented.</footer></main><script>const data={'000042':{from:'Rotterdam',to:'Singapore',status:'In transit',events:[['Booking received','Sample milestone 1 · Reference created'],['Loaded at origin','Sample milestone 2 · Origin handling complete'],['In transit','Sample milestone 3 · Next event pending']]},'000108':{from:'Hamburg',to:'New York',status:'Awaiting handover',events:[['Booking received','Sample milestone 1 · Reference created'],['Awaiting origin handover','Sample milestone 2 · Cargo handover pending']]}};const input=document.querySelector('#reference'),result=document.querySelector('#result'),error=document.querySelector('#error');function resetError(){error.textContent='';input.setAttribute('aria-invalid','false')}function show(){resetError();const id=input.value.trim();document.querySelectorAll('.record').forEach(x=>x.setAttribute('aria-pressed',String(x.dataset.id===id)));result.replaceChildren();if(!/^\d{6}$/.test(id)){error.textContent='Use a six-digit sample reference, including leading zeros.';input.setAttribute('aria-invalid','true');input.focus();result.innerHTML='<p class="notice">Correct the reference to view a sample event history.</p>';return}const r=data[id];if(!r){result.innerHTML='<h2>No sample shipment found</h2><p class="notice">This reference does not match the two sample records. Try 000042 or 000108.</p>';return}result.innerHTML=`<div class="topline"><h2>Shipment ${id}</h2><span class="tag">${r.status}</span></div><div class="route"><div class="port"><small>ORIGIN</small><b>${r.from}</b></div><div class="port"><small>DESTINATION</small><b>${r.to}</b></div></div><ol class="history">${r.events.map(([a,b])=>`<li><b>${a}</b><small>${b}</small></li>`).join('')}</ol>`}document.querySelector('#lookup').onsubmit=e=>{e.preventDefault();show()};document.querySelectorAll('.record').forEach(x=>x.onclick=()=>{input.value=x.dataset.id;show()});input.oninput=()=>{resetError();document.querySelectorAll('.record').forEach(x=>x.setAttribute('aria-pressed','false'));result.innerHTML='<p class="notice">Select Show shipment to look up the edited reference.</p>'};show();</script></html>
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.
html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>Sample shipment lookup</title><style>
/* Local snapshot of documented Maersk light roles; not an MDS package import. */
:root{--mds_brand_appearance_primary_default_background-color:#141414;
--mds_brand_appearance_primary_default_on-background-color:#fff;
--mds_brand_appearance_neutral_default_border-color:#d4d4d4;
--mds_brand_appearance_secondary_weak_background-color:#e2f3f9}
body{font:16px/24px Arial,sans-serif;color:#141414;margin:32px}
main{max-width:48rem;margin:auto}label{display:block;margin-bottom:8px}
input,button{font:inherit;padding:12px 16px;border-radius:6px}
input{border:1px solid var(--mds_brand_appearance_neutral_default_border-color);max-width:100%;box-sizing:border-box}
button{border:0;background:var(--mds_brand_appearance_primary_default_background-color);color:var(--mds_brand_appearance_primary_default_on-background-color)}
.actions{display:flex;gap:8px;flex-wrap:wrap}li{padding:12px 0}#error{color:#b80012}#result{margin-top:24px;padding:24px;border-radius:12px;background:var(--mds_brand_appearance_secondary_weak_background-color)}
</style><main><h1>Find a sample shipment</h1>
<form id="lookup" novalidate><label for="reference">Shipment reference</label>
<p id="hint">Try 000042 or 000108. These are original sample records.</p>
<div class="actions"><input id="reference" type="text" inputmode="numeric" value="000042" aria-describedby="hint error" required>
<button type="submit">Show shipment</button></div><p id="error" role="alert"></p></form>
<section id="result" aria-live="polite"></section></main>
<script>
const shipments={'000042':{route:'Rotterdam → Singapore',events:['Booking received','Loaded at origin','In transit']},'000108':{route:'Hamburg → New York',events:['Booking received','Awaiting origin handover']}};
const input=document.querySelector('#reference'),result=document.querySelector('#result'),error=document.querySelector('#error');
function lookup(e){e.preventDefault();const id=input.value.trim();error.textContent='';input.setAttribute('aria-invalid','false');result.replaceChildren();
if(!/^\d{6}$/.test(id)){error.textContent='Use a six-digit sample reference, including leading zeros.';input.setAttribute('aria-invalid','true');input.focus();return;}
const record=shipments[id];if(!record){result.textContent='No sample shipment matches this reference. Try 000042 or 000108.';return;}
const heading=document.createElement('h2');heading.textContent=id+' · '+record.route;
const list=document.createElement('ol');record.events.forEach(x=>{const li=document.createElement('li');li.textContent=x;list.append(li)});
result.append(heading,list);
}
document.querySelector('#lookup').addEventListener('submit',lookup);
input.addEventListener('input',()=>{error.textContent='';input.setAttribute('aria-invalid','false');result.replaceChildren();});
</script></html>
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.
04
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.
texto
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
Prompt para agente de IA
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.
05
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.
