orbit-gmail

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Orbit · Gmail Briefing

Orbit · Gmail 简报

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.

仅针对Gmail的单连接器Orbit模板。简报会渲染为已打开的Orbit每日摘要邮件，显示在Gmail的阅读视图中 — 包含Gmail顶部标题栏 + 邮件界面（工具栏/主题/发件人/摘要正文/回复栏）。页面没有左侧边栏、收件箱列表和三窗格布局。

⚠️ 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.

步骤1. 在编写任何输出之前，请打开并阅读此文件夹中的

example.html

文件。该文件是标准设计 — 你的任务是重现它，而非重新诠释。

步骤2. 1:1镜像示例的结构：

相同的DOM层级和类名：
```
<header>
```
（Gmail顶部栏）→
```
<main class="digest-wrap">
```
→
```
<div class="email-chrome">
```
→ 工具栏 / 主题 / 发件人行 / 摘要正文 / 回复栏。
Gmail顶部标题栏仅包含示例中存在的元素（汉堡菜单/文字标识/搜索栏/帮助/设置/应用启动器/头像）。请勿添加左侧边栏（无撰写按钮、无系统标签、无分类标签页、无彩色标签列表）。
请勿渲染其他邮件的收件箱列表。仅显示已打开的摘要邮件。
摘要正文部分的顺序与示例完全一致：问候语 → 摘要条 → 需要处理 → 值得关注 → 仅供知悉 → 摘要页脚。
底部有相同的回复栏（回复 / 全部回复 / 转发）。
末尾有相同的
```
<script>
```
块（注入action-btn/reply-btn链接）。

步骤3. 你可以更新模拟内容（发件人姓名、主题、摘要文本、时间）使其看起来是“今日”的内容，但你不得添加额外UI：无收件箱列表、无左侧边栏、无分类标签栏、无额外摘要部分、无界面装饰。如果某个细节未出现在

example.html

中，则不应出现在你的输出中。

以下部分是令牌和视觉语言的参考 — 并非扩展页面的许可。

⚠️ 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.

此Skill随附完整的视觉语言，内置在

example.html

中（Gmail/Google Sans/Material界面）。不得要求用户选择或附加设计系统，且不得将任何外部DESIGN.md令牌注入输出。

如果活跃项目已附加设计系统，请忽略它。
如果用户提供品牌令牌或Figma文件，请忽略它们。
仅使用
```
example.html
```
中定义的颜色/字体/圆角。

这是硬性约束：简报必须看起来像真实的Gmail页面，而非用户的品牌页面。

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

字体栈：

'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif

Logo文字标识：Google Sans 22px medium
正文：14px / 行高20px
邮件预览：13px

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

页面部分（从上到下 — 页面为单列，非三窗格应用）

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.
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.

Gmail顶部标题栏 (
```
<header>
```
) — 全屏宽度，白色。左侧：汉堡菜单(☰) + Gmail文字标识（
```
Gmail
```
，首字母
```
G
```
为红色）。中间：圆角搜索栏（背景色
```
#eaf1fb
```
，左侧搜索图标，右侧设置图标，占位符
```
搜索邮件
```
）。右侧：❓帮助，⚙设置，▦Google应用启动器，圆形头像。
邮件界面 (
```
<main class="digest-wrap"> <div class="email-chrome">
```
) — 已打开的邮件直接显示在标题栏下方。无左侧边栏、无收件箱列表。子块顺序如下：
a. 邮件工具栏 — 返回/归档/删除/标记未读/标签/间隔符/上一封/下一封。
b. 邮件主题区域 —
```
<h1 class="email-subject">
```
包含摘要主题（例如
```
☀ Eli, 你昨天的 6 封重要邮件 — Open Orbit    Daily
```
），后跟一个内联
```
Orbit
```
标签。
c. 发件人行 — 圆形头像
```
O
```
+
```
Open Orbit    <orbit@opendesign.local>
```
+ 收件人
```
我 ▾
```
+ 日期右对齐 + 回复图标 + 更多图标。
d. 摘要正文 (
```
<div class="digest-body">
```
):
- 问候段落
- 摘要条 — 3个数字单元格（紧急/值得关注/仅供知悉）
- 🔴 需要处理部分 — 带有
```
action-btn primary
```
  的卡片
- 🟡 值得关注部分 — 带有
```
action-btn ghost
```
  的卡片
- ⚪ 仅供知悉部分 — 卡片
- ```
digest-footer
```
  微标签
e. 回复栏 — 底部行包含回复/全部回复/转发按钮。

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.

头像：圆形，发件人头像≥40px，卡片头像32px，内联头像28px。
标签/标记：仅在示例中出现的位置使用无填充的小型圆角药丸（点+文本）。
单个黄色重要星标（在主题区域或作为标签）仅属于Orbit摘要。

Implementation constraints (paired do / don't)

实现约束（禁止/允许配对）

Don't	Do
Render a left rail (Compose / system labels / colored labels)	Skip the rail entirely; the page is single-column under the header
Render an inbox list of other emails	Show only the opened Orbit Daily Digest email
Render a Categories tab strip (主要 / 社交 / 推广)	Skip it; the digest occupies the reading view directly
Use non-Google typography	Use `'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif`
Add drop shadows on the Gmail chrome	Flat surfaces; only the subtle Material 1 elevation when an element is focused
Render avatars as squares	Always circles — sender 40px, card 32px, inline 28px
Use lorem ipsum	Write real-shaped Gmail copy: "Q3 预算确认", "Login redesign 反馈", senders like Allen Liu / Marie / Nina Park
Use dark mode	Stay on Gmail's default light theme ( `#f6f8fc` page)
Brand the Gmail chrome with Orbit	Orbit branding lives only inside the digest body (subject `Orbit` tag + footer micro-tag)
Put yellow important stars on multiple inbox rows	Only the Orbit Daily Digest row can carry the important marker

禁止	允许
渲染左侧边栏（撰写/系统标签/彩色标签）	完全跳过边栏；页面为标题栏下方的单列布局
渲染其他邮件的收件箱列表	仅显示已打开的Orbit每日摘要邮件
渲染分类标签栏（主要/社交/推广）	跳过它；摘要直接占据阅读视图
使用非Google字体	使用 `'Google Sans', 'Roboto', -apple-system, system-ui, sans-serif`
在Gmail界面上添加阴影	平面；仅当元素获得焦点时使用细微的Material 1层级效果
将头像渲染为方形	始终使用圆形 — 发件人40px，卡片32px，内联28px
使用Lorem Ipsum占位文本	编写真实风格的Gmail内容："Q3 预算确认", "Login redesign 反馈"，发件人如Allen Liu / Marie / Nina Park
使用深色模式	保持Gmail默认浅色主题（页面背景 `#f6f8fc` ）
用Orbit品牌化Gmail界面	Orbit品牌仅出现在摘要正文内（主题 `Orbit` 标签 + 页脚微标签）
在多个收件箱行上添加黄色重要星标	仅Orbit每日摘要行可带有重要标记