focus-ai-brand

Focus.AI 设计系统

一套设计系统，将瑞士国际主义风格的结构严谨性与 Focus.AI 的品牌形象相结合。采用温暖的纸张背景、编辑式字体、严谨的网格、充足的留白、基于不透明度的层级，以及克制的强调色。

六大原则

1. 网格优先。 每种布局都采用 12 列网格（编辑式页面使用 3 列非对称变体）。间距以 8px 为基础单位。
2. 始终移动端优先。 先针对 320px 设计，再逐步扩展。系统地使用 sm:、md:、lg: 前缀。
3. 留白就是结构。 充足的内边距和外边距是设计的一部分，而非浪费。
4. 用不透明度创建层级。 切勿通过引入第二种文本颜色来表示权重。请对主文本颜色使用不透明度。
5. 最多使用两种强调色，并且要克制。 主强调色用于 CTA 和导航。次强调色仅用于装饰性突出显示。
6. 清晰胜于装饰。 每个元素都要有存在的理由。如果它不能帮助读者聚焦重要内容，就将其移除。

---

品牌架构

The Focus.AI
├── Focus.AI (Client)     → Services, products, client-facing work
│   Aesthetic: Editorial magazine, polished, confident
│   Palette: Paper, Ink, Petrol, Vermilion
│
└── Focus.AI Labs         → Research, experiments, public content
    Aesthetic: Bell Labs research report, curious, generous
    Palette: Paper, Void, Rand-Blue, Alert-Red

经验法则：客户项目或销售服务 → Client 品牌。分享经验或探索 → Labs 品牌。

---

快速参考

字体排版

字体系列	字体	用途
展示	Source Serif 4	封面标题、H1（分页报告）、引言摘录、统计数字
无衬线	Inter	章节标题（h2–h4）、正文、UI、导航
等宽	Courier Prime	标签、元数据、代码、页码

字重规则：

• 标题：使用 font-black（900）或 font-bold（700），并采用负字间距
• 正文：使用 font-normal（400）或 font-medium（500），行高为 1.6
• 标签：使用 font-mono、大写字母和较宽字间距

颜色速览

角色	Client	Labs
背景	Paper #faf9f6	Paper #f3f2ea
主文本	Ink #161616	Void #1a1a1a
次要文本	ink/70 不透明度	void/70 不透明度
三级文本	ink/40 不透明度	void/40 不透明度
主强调色	Petrol #0e3b46	Rand-Blue #0055aa
次强调色	Vermilion #c3471d	Alert-Red #d93025
边框	#d4d3cf	rgba(26,26,26,0.2)

背景中切勿使用纯 #ffffff 或 #000000。

不透明度层级（核心规则）

降低不透明度以弱化视觉效果——切勿更改色相：

Full:     text-[ink]           → primary content
Softer:   text-[ink]/70        → secondary labels, supporting text
Quiet:    text-[ink]/40        → captions, metadata
Ghosted:  text-[ink]/20        → disabled, placeholder

间距

基础单位：8px。所有间距值均为 8 的倍数。

上下文	值	用途
紧凑	8px	行内间距、图标间距
默认	16px	组件内部间距
组件间	32px	组件之间的间距
章节	48–64px	章节内边距（移动端/平板）
章节	96–128px	章节内边距（桌面端）

布局

两种布局模式：

1. 12 列网格 — 通用布局，Tailwind grid grid-cols-12 gap-8
2. 非对称编辑式布局 — [144px label] [1fr content, max 740px] [192px marginalia]

正文最大宽度：60ch。切勿超过此宽度。

---

品牌选择指南

场景	品牌
客户提案、案例研究、服务页面	Client
产品营销、落地页	Client
会议分析、研究报告	Labs
实验、技术博客文章	Labs
开源项目	Labs

---

命令

/report — 生成报告 / PDF

将 Markdown 转换为带样式的 HTML 报告，并智能分页。

# Open in browser (Cmd+P to print)
/report file:./my-document.md style:labs

# Generate PDF directly via chrome-driver
/report file:./proposal.md style:client output:./proposal.pdf

# Force paged template in browser
/report file:./analysis.md style:client paged:true

完整了解 paged.js 系统、智能分页规则和组件库，请参阅 references/print.md。

/deck — 生成演示文稿（.pptx）

将 Markdown 转换为品牌风格的 PowerPoint 演示文稿。

/deck file:./content.md style:client output:./presentation.pptx
/deck file:./research.md style:labs output:./research-deck.pptx

了解幻灯片母版、组件模式和设计规则，请参阅 references/presentations.md。

---

何时阅读参考文件

任务	文件
完整的颜色令牌、字体比例、CSS 属性、深色模式	references/design-system.md
12 列网格、不对称布局、版块间距、装饰元素	references/grid-and-layout.md
移动优先断点、流体字体、响应式检查清单	references/responsive.md
Tailwind 组件模式：按钮、卡片、导航、表单	references/components.md
可直接粘贴的 Tailwind v3/v4 配置、Google Fonts 链接标签	references/tailwind-config.md
/report 命令、paged.js、智能分页、PDF 工作流	references/print.md
/deck 命令、幻灯片母版、PptxGenJS 模式	references/presentations.md
AI 图像生成风格（文艺复兴、贝尔实验室）	references/imagery.md
语气与风格指南、反面模式、示例改写	references/voice.md
发布前审核清单	references/checklist.md

---

注意事项

• 切勿使用纯白或纯黑——使用纸张色调和墨色／虚空色。
• 标题切勿单独使用 font-bold——使用 font-black（900）和紧凑的负字距。
• 正文文本最多 60ch——栏宽过大会影响易读性。
• 版块内边距要宽裕——至少使用 py-12（48px），标准为 py-16–py-24（64–96px）。
• 标签始终使用等宽字体——Courier Prime、大写字母、较宽的字间距。
• 边框圆角要克制——卡片／按钮使用 4–8px。大型容器切勿使用全圆角。
• 使用透明度，而非灰色色阶——使用 text-ink/70，而非 text-gray-500。
• 背景采用暖色调——深色模式也应使用暖炭灰，而非冷黑色。
• Source Serif 4 仅用于展示文字——切勿用于正文或 h2–h4。仅用于封面标题、分页报告中的 h1、引言和统计数字。
• 最多使用两种强调色——主色用于操作／链接，辅色仅少量用于装饰性强调。
• 所有布局都要适用于移动设备——默认类适用于移动设备。始终添加 md: / lg: 变体。