Orbit · Briefing do Gmail

Template Orbit com conector único, focado no Gmail. O briefing é renderizado como o e-mail Orbit Daily Digest já aberto dentro da visualização de leitura do Gmail — cabeçalho superior do Gmail + o "chrome" do e-mail (barra de ferramentas / assunto / remetente / corpo do resumo / barra de resposta). Não há barra lateral esquerda, lista de caixa de entrada ou layout de três painéis.

⚠️ Protocolo de fonte de verdade (leia isto primeiro)

Passo 1. Abra e leia o example.html enviado nesta pasta antes de escrever qualquer saída. Esse arquivo é o design canônico — seu trabalho é reproduzi-lo, não reinterpretá-lo.

Passo 2. Espelhe a estrutura do exemplo 1:1:

• Mesma hierarquia DOM e nomes de classe: <header> (barra superior do Gmail) → <main class="digest-wrap"> → <div class="email-chrome"> → barra de ferramentas / assunto / linha do remetente / corpo do resumo / barra de resposta.
• O cabeçalho superior do Gmail tem apenas os elementos presentes no exemplo (menu hambúrguer / logotipo / barra de pesquisa / ajuda / configurações / lançador de aplicativos / avatar). Não adicione uma barra lateral esquerda (sem botão de Compor, sem rótulos do sistema, sem abas de Categorias, sem lista de rótulos coloridos).
• Não renderize uma lista de caixa de entrada de outros e-mails. Apenas o e-mail do resumo aberto é mostrado.
• Mesmas seções do corpo do resumo na mesma ordem: saudação → faixa de resumo → 需要处理 → 值得关注 → 仅供知悉 → rodapé do resumo.
• Mesma barra de resposta na parte inferior (回复 / 全部回复 / 转发).
• Mesmo bloco <script> no final (injeção de link action-btn / reply-btn).

Passo 3. Você pode atualizar o texto fictício (nomes de remetentes, assuntos, texto do resumo, horários) para que pareça "hoje", mas você não deve inventar UI extra: sem lista de caixa de entrada, sem barra lateral esquerda, sem faixa de abas de Categorias, sem seções extras de resumo, sem ornamentos de "chrome". Se um detalhe não estiver presente no example.html, ele não pertence à sua saída.

Guarda de identidade. Trate cada nome de pessoa ou identificador no example.html como conteúdo fictício apenas. Não infira o nome de exibição do usuário atual a partir do exemplo, rótulos da conta do conector, proprietários, atribuídos, remetentes ou menções, a menos que a solicitação ou os dados do conector identifiquem explicitamente o usuário autorizado. Se nenhum nome explícito de usuário atual estiver disponível, use uma redação neutra como you, your, current user, 我 ou 你.

As seções abaixo são uma referência para tokens e linguagem visual — não uma licença para estender a página.

⚠️ Política do sistema de design

Esta habilidade envia sua própria linguagem visual completa incorporada em example.html (Gmail / Google Sans / Material chrome). O usuário não deve ser solicitado a escolher ou anexar um sistema de design, e você não deve injetar nenhum token externo de DESIGN.md na saída.

• Se o projeto ativo tiver um sistema de design anexado, ignore-o.
• Se o usuário fornecer tokens de marca ou um arquivo Figma, ignore-os.
• Use exclusivamente as cores / fontes / raios definidos em example.html.

Esta é uma restrição rígida: o briefing deve parecer uma página real do Gmail, não a marca do usuário.

Tokens de tela (use estes valores exatos)

page bg:           #f6f8fc
surface:           #ffffff
border:            #e0e0e0
text:              #202124
text-secondary:    #5f6368
text-muted:        #80868b
surface-hover:     #f1f3f4

red (Gmail):       #D93025  /* Compose, important markers, accent */
blue:              #1a73e8  /* CTA / link */
yellow:            #f4b400  /* important ★ */
green:             #0f9d58
search bar bg:     #eaf1fb  /* light blue-tinted pill */

Pilha de tipos:

• 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif
• Logotipo: Google Sans 22px medium
• Corpo: 14px / altura da linha 20px
• Pré-visualização do e-mail: 13px

Seções da página (de cima para baixo — a página é uma coluna, não um aplicativo de 3 painéis)

1. Cabeçalho superior do Gmail (<header>) — largura total, branco. Esquerda: menu hambúrguer (☰) + logotipo do Gmail (Gmail, primeiro G vermelho). Centro: barra de pesquisa arredondada (fundo #eaf1fb, ícone de pesquisa à esquerda, ícone de configurações à direita, placeholder 搜索邮件). Direita: ❓ ajuda, ⚙ configurações, ▦ lançador de aplicativos Google, avatar redondo.

2. "Chrome" do e-mail (<main class="digest-wrap"> <div class="email-chrome">) — o e-mail aberto fica diretamente abaixo do cabeçalho. Sem barra lateral esquerda, sem lista de caixa de entrada. Sub-blocos em ordem:

   a. Barra de ferramentas do e-mail — voltar / arquivar / excluir / marcar como não lido / rótulo / espaçador / anterior / próximo.

   b. Área do assunto do e-mail — <h1 class="email-subject"> com o assunto do resumo (por exemplo, ☀ 6 e-mails importantes de ontem — Open Orbit Daily) followed by an inline Orbit tag.

   c. Linha do remetente — avatar redondo O + Open Orbit <orbit@opendesign.local> + 收件人 我 ▾ + data alinhada à direita +

…