Orbit Gmail

Orbit · Gmail Briefing

Single-connector Orbit template scoped to Gmail. The briefing renders as the Orbit Daily Digest email already opened inside Gmail's reading view — Gmail top header + the email chrome (toolbar / subject / sender / digest body / reply bar). There is no left rail, no inbox list, and no three-pane layout.

⚠️ Source-of-truth protocol (read this first)

Step 1. Open and read the shipped example.html in this folder before writing any output. That file is the canonical design — your job is to reproduce it, not reinterpret it.

Step 2. Mirror the example's structure 1:1:

• Same DOM hierarchy and class names: <header> (Gmail top bar) → <main class="digest-wrap"> → <div class="email-chrome"> → toolbar / subject / sender row / digest body / reply bar.
• The Gmail top header has only the elements present in the example (hamburger / wordmark / search bar / help / settings / app launcher / avatar). Do not add a left rail (no Compose button, no system labels, no Categories tabs, no colored label list).
• Do not render an inbox list of other emails. Only the opened digest email is shown.
• Same digest-body sections in the same order: greeting → summary strip → 需要处理 → 值得关注 → 仅供知悉 → digest footer.
• Same reply bar at the bottom (回复 / 全部回复 / 转发).
• Same <script> block at the end (action-btn / reply-btn link injection).

Step 3. You may refresh mock copy (sender names, subjects, summary text, times) so it reads as "today", but you must not invent extra UI: no inbox listing, no left rail, no Categories tab strip, no extra digest sections, no chrome ornaments. If a detail is not already in example.html, it does not belong in your output.

The sections below are a reference for tokens and visual language — not a license to extend the page.

⚠️ Design system policy

This skill ships with its own complete visual language baked into example.html (Gmail / Google Sans / Material chrome). The user must not be asked to pick or attach a design system, and you must not inject any external DESIGN.md tokens into the output.

• If the active project has a design system attached, ignore it.
• If the user supplies brand tokens or a Figma file, ignore them.
• Use exclusively the colors / fonts / radii defined in example.html.

This is a hard constraint: the briefing must read as a real Gmail page, not as the user's brand.

Canvas tokens (use these exact values)

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 */

Type stack:

• 'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif
• Logo wordmark: Google Sans 22px medium
• Body: 14px / line-height 20px
• Email preview: 13px

Page sections (top to bottom — the page is one column, not a 3-pane app)

1. Gmail top header (<header>) — full width, white. Left: hamburger (☰) + Gmail wordmark (Gmail, first G red). Center: rounded search bar (#eaf1fb bg, search icon left, settings icon right, placeholder 搜索邮件). Right: ❓ help, ⚙ settings, ▦ Google apps launcher, round avatar.

2. Email chrome (<main class="digest-wrap"> <div class="email-chrome">) — the opened email lives directly under the header. No left rail, no inbox list. Sub-blocks in order:

   a. Email toolbar — back / archive / delete / mark unread / label / spacer / prev / next.

   b. Email subject area — <h1 class="email-subject"> with the digest subject (e.g. ☀ Eli, 你昨天的 6 封重要邮件 — Open Orbit Daily) followed by an inline Orbit tag.

   c. Sender row — round avatar O + Open Orbit <orbit@opendesign.local> + 收件人 我 ▾ + date right-aligned + reply icon + more icon.

   d. Digest body (<div class="digest-body">):

   • greeting paragraph
   • summary strip — 3 numeric cells (urgent / 值得关注 / 仅供知悉)
   • section 🔴 需要处理 — cards with action-btn primary
   • section 🟡 值得关注 — cards with action-btn ghost
   • section ⚪ 仅供知悉 — cards
   • digest-footer micro-tag

   e. Reply bar — bottom row with 回复 / 全部回复 / 转发 buttons.

Pill / icon rules

• Avatars: round, 40px+ for sender, 32px for card, 28px for inline.
• Labels / tags: small rounded pills with no fill (dot + text) only where they appear in the example.
• The single yellow important star (in the subject area or as a tag) belongs to the Orbit digest only.

Implementation constraints (paired do / don't)