` (页面关闭标签) **之后**导致弹窗不显示。必须在页面 div 内部。\n\n---\n\n### 经验2：JavaScript 语法错误会导致整个脚本块失效\n\n**问题现象**：修复弹窗位置后，按钮仍然无法点击\n\n**排查过程**：\n1. 使用 prototype-design 技能的调试方法\n2. 检查 div 平衡 → 发现页面 div 缺少闭合标签\n3. 修复 div 后检查脚本块 → 发现多余的 `}`\n\n**根本原因**：`submitNewException()` 函数后有一个**多余的闭合括号 `}`**，导致 JavaScript 语法错误，整个脚本块无法执行\n\n```javascript\n// ❌ 错误：函数后有多余的 }\nfunction submitNewException() {\n // ...表单提交逻辑\n}\n//} <-- 多余的括号导致语法错误\n\n// ✅ 正确：括号匹配\nfunction submitNewException() {\n // ...表单提交逻辑\n}\n```\n\n**教训**：修改 HTML 时要确保 div 平衡；修改 JS 时要确保括号匹配。使用 Python 脚本做精确替换比手动编辑更安全。\n\n---\n\n### 经验3：按钮必须手动绑定 onclick\n\n**问题现象**：新增弹窗后，弹窗中的按钮点击无反应\n\n**根本原因**：新增的弹窗按钮**没有 onclick 属性**\n\n**解决方案**：每个按钮都要显式绑定 onclick\n```html\n\n\n\n\n\n```\n\n**教训**：复制弹窗模板时，别忘了修改按钮的 onclick 属性。\n\n---\n\n### 经验4：按钮样式统一使用 CSS 类\n\n**问题现象**：各页面按钮样式不统一，有内联样式如 `style=\"padding:10px 24px;\"`\n\n**解决方案**：统一使用 CSS 类\n```html\n\n\n\n\n\n```\n\n**按钮样式规范**：\n| 元素 | 类名 | 样式 |\n|------|------|------|\n| 主按钮 | `.btn .btn-primary` | 黑色背景 `#111827`，胶囊形 |\n| 次按钮 | `.btn .btn-outline` | 白色背景，`#E5E7EB` 边框 |\n| 按钮尺寸 | `.btn-sm` | `padding: 6px 12px; font-size: 12px` |\n| 胶囊形状 | `border-radius: 50px` | 用于主、次按钮 |\n\n---\n\n### 经验5：Python 脚本精确替换避免手动错误\n\n**问题现象**：手动编辑 HTML 时容易出现 div 不平衡、括号遗漏等问题\n\n**解决方案**：使用 Python 脚本做精确文本替换\n\n```python\nwith open('index.html', 'r') as f:\n content = f.read()\n\n# 替换前先备份\n# ...\n\n# 精确替换一段 HTML\nold_text = ''''''\n\nnew_text = ''''''\n\ncontent = content.replace(old_text, new_text)\n\nwith open('index.html', 'w') as f:\n f.write(content)\n\n# 验证 div 平衡\nprint(f'opens={content.count(\"\")}, diff={content.count(\"\")}')\n```\n\n**教训**：用 Python 脚本做精确替换，比手动编辑更可靠，尤其是涉及多行 HTML 时。\n\n---\n\n### 经验6：系统管理模块弹窗字段设计\n\n**新增模块弹窗字段**：\n| 字段 | 类型 | 说明 |\n|------|------|------|\n| 模块编码 | text | 必填，如 SYS_010 |\n| 模块名称 | text | 必填 |\n| 上级模块 | select | 无（顶级模块）/系统管理/基础档案... |\n| 模块分类 | select | 系统管理/基础档案/作业配置... |\n| 菜单层级 | select | 一级/二级/三级菜单 |\n| 菜单图标 | text | emoji 格式 |\n| 路由路径 | text | 如 /system/module |\n| 排序 | number | 数字越小越靠前 |\n| 状态 | select | 启用/禁用 |\n| 备注 | textarea | 可选 |\n\n**新增组织弹窗字段**：\n| 字段 | 类型 | 说明 |\n|------|------|------|\n| 组织编码 | text | 必填，如 ORG_010 |\n| 组织名称 | text | 必填 |\n| 上级组织 | select | 母公司/北京仓/上海仓... |\n| 组织类型 | select | 公司/仓库/部门/作业组 |\n| 负责人 | text | 可选 |\n| 联系电话 | tel | 可选 |\n| 所在地区 | text | 如 北京市/朝阳区 |\n| 状态 | select | 启用/禁用 |\n| 组织地址 | textarea | 可选 |\n\n**新增用户弹窗字段**：\n| 字段 | 类型 | 说明 |\n|------|------|------|\n| 用户名 | text | 必填 |\n| 登录密码 | password | 必填，6位以上 |\n| 姓名 | text | 必填 |\n| 手机号 | tel | 必填 |\n| 邮箱 | email | 可选 |\n| 所属组织 | select | 必填，北京仓-收货组/上海仓... |\n| 用户角色 | select | 超级管理员/仓库管理员/作业员... |\n| 岗位 | text | 可选 |\n| 入职日期 | date | 可选 |\n| 状态 | select | 正常/禁用/待审核 |\n\n---\n\n### 经验7：数据统计报表页面丰富度提升\n\n**质量与异常报表增强**：\n- 异常趋势图（近7天柱状图）\n- 异常类型分布（货损42%/配送延误28%等）\n- 闭环率分析（96.8%闭环率、2.5h平均处理时长）\n\n**对账准确率监察增强**：\n- KPI 从 4 个扩展到 6 个\n- 新增已核销/核对中指标\n\n**作业报表增强**：\n- 新增时效达标率分析（拣货98.5%/上架97.8%等）\n\n**库存报表增强**：\n- 新增滞销库存预警（30天以上）\n- 新增安全库存预警\n\n---\n\n### 经验8：复合条件定位按钮\n\n**问题现象**：页面有多个相似按钮（如\"新增\"），用 `document.querySelector` 定位困难\n\n**解决方案**：使用复合条件或更精确的选择器\n\n```javascript\n// ❌ 困难：页面有多个 btn-primary\ndocument.querySelector('.btn.btn-primary')\n\n// ✅ 更好：使用 onclick 属性定位\ndocument.querySelector('button[onclick=\"openAddModuleModal()\"]')\n\n// ✅ 更好：在页面内部查找\ndocument.querySelector('#page-system_module button[onclick=\"openAddModuleModal()\"]')\n```\n\n---\n\n### 经验9：修改后立即验证\n\n**原则**：每次修改后立即验证，不要积累多个问题\n\n**验证清单**：\n```bash\n# 1. 检查 div 平衡\npython3 -c \"with open('index.html') as f: c=f.read(); print(f'opens={c.count(\\\"\\\")}, diff={c.count(\\\"\\\")}')\"\n\n# 2. 截图验证\nagent-browser goto http://localhost:8080/#page-name\nagent-browser eval \"openAddModal()\"\nagent-browser screenshot test-modal.png\nagent-browser close\n\n# 3. 提交代码\ngit add -A && git commit -m \"feat: 描述\"\n```\n\n---\n\n### 经验10：单页 HTML 项目的好处\n\n**为什么 WMS 原型用单页 HTML 没有问题**：\n1. **Compaction 只压缩对话历史**：不影响 HTML 文件本身\n2. **不是日志文件**：不会无限增长\n3. **每次修改同一个文件**：不是追加模式\n4. **3700+ divs 仍然高效**：文件体积适中，渲染快\n\n**什么时候该拆分成多文件**：\n- 单个文件超过 2MB\n- 需要多人协作（git merge 冲突）\n- 模块之间完全独立\n\nFile v1.0.2:README.md\n\n# prototype-design 通用页面原型设计技能\n\n## 简介\n\n基于 58种设计风格（默认figma） UI 的复杂业务系统 HTML 原型开发技能，适用于管理后台页面的快速原型设计。\n\n## 功能特性\n\n- 📋 标准页面结构（Header + 统计卡片 + 筛选条件 + 数据表格）\n- 🎨 支持 58+ 设计系统风格（Figma、Linear、Vercel、Notion 等）\n- 📝 弹窗设计规范（居中遮罩、表单项样式）\n- 📊 看板视图、Tab 切换\n- 📱 响应式适配\n\n## 适用场景\n\n1. 创建新的管理页面原型\n2. 对照业务文档实现功能模块\n3. 设计弹窗和详情页\n4. 构建带看板和列表视图的页面\n\n## 使用方法\n\n### 1. 选择设计系统\n\n默认使用 Figma 风格，可根据需求切换：\n\n| 风格 | 设计系统 | 特点 |\n|------|---------|------|\n| 默认 | `figma-DESIGN.md` | 多彩色、现代 |\n| 管理后台 | `linear-DESIGN.md` | 紫色主题、精致 |\n| 简约专业 | `vercel-DESIGN.md` | 黑白精准、极简 |\n| 温暖风格 | `notion-DESIGN.md` | 暖色极简 |\n| 企业级 | `stripe-DESIGN.md` | 紫色渐变、高级感 |\n\n### 2. 参考设计规范\n\n`references/design-systems/` 目录包含 58 种设计风格，参考其颜色、字体、间距等规范进行开发。\n\n### 3. 按照规范开发\n\n参考 SKILL.md 中的组件模板和样式规范进行开发。\n\n## 文件结构\n\n```\nprototype-design/\n├── SKILL.md # 技能核心文档\n├── README.md # 本文件\n└── references/\n ├── page-template.html # 页面模板参考\n ├── field-norms.md # 字段规范\n └── design-systems/ # 58种设计风格\n ├── figma-DESIGN.md\n ├── linear-DESIGN.md\n └── ...\n```\n\n## 设计系统列表\n\n详见 `design-systems/` 目录，包含：Figma、Linear、Stripe、Vercel、Notion、Airbnb、Spotify、Nvidia、Uber 等 58 种设计系统。\n\n## 注意事项\n\n1. 弹窗 HTML 必须放在页面 div 内部\n2. 按钮必须手动绑定 onclick\n3. 修改 pages/ 后需要同步到 index.html\n4. 使用 Python 脚本做精确替换，避免手动错误\n\n## 经验沉淀\n\n详见 SKILL.md 中的「经验沉淀」章节，包含 WMS 项目实战经验。\n\n---\n\n**版本**：1.0.0 \n**更新**：2026-04-17\n\nFile v1.0.2:_meta.json\n\n{\n \"ownerId\": \"kn7bmpw1281h8gd9detd862mbs851wde\",\n \"slug\": \"prototype-design\",\n \"version\": \"1.0.2\",\n \"publishedAt\": 1776422519959\n}\n\nFile v1.0.2:references/design-systems/airbnb-DESIGN.md\n\n# Design System Inspiration of Airbnb\n\n## 1. Visual Theme & Atmosphere\n\nAirbnb's website is a warm, photography-forward marketplace that feels like flipping through a travel magazine where every page invites you to book. The design operates on a foundation of pure white (`#ffffff`) with the iconic Rausch Red (`#ff385c`) — named after Airbnb's first street address — serving as the singular brand accent. The result is a clean, airy canvas where listing photography, category icons, and the red CTA button are the only sources of color.\n\nThe typography uses Airbnb Cereal VF — a custom variable font that's warm and approachable, with rounded terminals that echo the brand's \"belong anywhere\" philosophy. The font operates in a tight weight range: 500 (medium) for most UI, 600 (semibold) for emphasis, and 700 (bold) for primary headings. Slight negative letter-spacing (-0.18px to -0.44px) on headings creates a cozy, intimate reading experience rather than the compressed efficiency of tech companies.\n\nWhat distinguishes Airbnb is its palette-based token system (`--palette-*`) and multi-layered shadow approach. The primary card shadow uses a three-layer stack (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`) that creates a subtle, warm lift. Combined with generous border-radius (8px–32px), circular navigation controls (50%), and a category pill bar with horizontal scrolling, the interface feels tactile and inviting — designed for browsing, not commanding.\n\n**Key Characteristics:**\n- Pure white canvas with Rausch Red (`#ff385c`) as singular brand accent\n- Airbnb Cereal VF — custom variable font with warm, rounded terminals\n- Palette-based token system (`--palette-*`) for systematic color management\n- Three-layer card shadows: border ring + soft blur + stronger blur\n- Generous border-radius: 8px buttons, 14px badges, 20px cards, 32px large elements\n- Circular navigation controls (50% radius)\n- Photography-first listing cards — images are the hero content\n- Near-black text (`#222222`) — warm, not cold\n- Luxe Purple (`#460479`) and Plus Magenta (`#92174d`) for premium tiers\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Rausch Red** (`#ff385c`): `--palette-bg-primary-core`, primary CTA, brand accent, active states\n- **Deep Rausch** (`#e00b41`): `--palette-bg-tertiary-core`, pressed/dark variant of brand red\n- **Error Red** (`#c13515`): `--palette-text-primary-error`, error text on light\n- **Error Dark** (`#b32505`): `--palette-text-secondary-error-hover`, error hover\n\n### Premium Tiers\n- **Luxe Purple** (`#460479`): `--palette-bg-primary-luxe`, Airbnb Luxe tier branding\n- **Plus Magenta** (`#92174d`): `--palette-bg-primary-plus`, Airbnb Plus tier branding\n\n### Text Scale\n- **Near Black** (`#222222`): `--palette-text-primary`, primary text — warm, not cold\n- **Focused Gray** (`#3f3f3f`): `--palette-text-focused`, focused state text\n- **Secondary Gray** (`#6a6a6a`): Secondary text, descriptions\n- **Disabled** (`rgba(0,0,0,0.24)`): `--palette-text-material-disabled`, disabled state\n- **Link Disabled** (`#929292`): `--palette-text-link-disabled`, disabled links\n\n### Interactive\n- **Legal Blue** (`#428bff`): `--palette-text-legal`, legal links, informational\n- **Border Gray** (`#c1c1c1`): Border color for cards and dividers\n- **Light Surface** (`#f2f2f2`): Circular navigation buttons, secondary surfaces\n\n### Surface & Shadows\n- **Pure White** (`#ffffff`): Page background, card surfaces\n- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`): Three-layer warm lift\n- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`): Button hover elevation\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Airbnb Cereal VF`, fallbacks: `Circular, -apple-system, system-ui, Roboto, Helvetica Neue`\n- **OpenType Features**: `\"salt\"` (stylistic alternates) on specific caption elements\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Section Heading | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | Primary headings |\n| Card Heading | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | Category/card titles |\n| Card Heading Medium | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | Lighter variant |\n| Sub-heading | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | Bold sub-headings |\n| Feature Title | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | Feature headings |\n| UI Medium | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Nav, emphasized text |\n| UI Semibold | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | Strong emphasis |\n| Button | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | Button labels |\n| Body / Link | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | Standard body |\n| Body Medium | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | Medium body |\n| Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `\"salt\"` feature |\n| Small | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | Descriptions |\n| Tag | Airbnb Cereal VF | 12px (0.75rem) | 400–700 | 1.33 | normal | Tags, prices |\n| Badge | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `\"salt\"` feature |\n| Micro Uppercase | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |\n\n### Principles\n- **Warm weight range**: 500–700 dominate. No weight 300 or 400 for headings — Airbnb's type is always at least medium weight, creating a warm, confident voice.\n- **Negative tracking on headings**: -0.18px to -0.44px letter-spacing on display creates intimate, cozy headings rather than cold, compressed ones.\n- **\"salt\" OpenType feature**: Stylistic alternates on specific UI elements (badges, captions) create subtle glyph variations that add visual interest.\n- **Variable font precision**: Cereal VF enables continuous weight interpolation, though the design system uses discrete stops at 500, 600, and 700.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark**\n- Background: `#222222` (near-black, not pure black)\n- Text: `#ffffff`\n- Padding: 0px 24px\n- Radius: 8px\n- Hover: transitions to error/brand accent via `var(--accent-bg-error)`\n- Focus: `0 0 0 2px var(--palette-grey1000)` ring + scale(0.92)\n\n**Circular Nav**\n- Background: `#f2f2f2`\n- Text: `#222222`\n- Radius: 50% (circle)\n- Hover: shadow `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)\n- Active: 4px white border ring + focus shadow\n- Focus: scale(0.92) shrink animation\n\n### Cards & Containers\n- Background: `#ffffff`\n- Radius: 14px (badges), 20px (cards/buttons), 32px (large)\n- Shadow: `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` (three-layer)\n- Listing cards: full-width photography on top, details below\n- Carousel controls: circular 50% buttons\n\n### Inputs\n- Search: `#222222` text\n- Focus: `var(--palette-bg-primary-error)` background tint + `0 0 0 2px` ring\n- Radius: depends on context (search bar uses pill-like rounding)\n\n### Navigation\n- White sticky header with search bar centered\n- Airbnb logo (Rausch Red) left-aligned\n- Category filter pills: horizontal scroll below search\n- Circular nav controls for carousel navigation\n- \"Become a Host\" text link, avatar/menu right-aligned\n\n### Image Treatment\n- Listing photography fills card top with generous height\n- Image carousel with dot indicators\n- Heart/wishlist icon overlay on images\n- 8px–14px radius on contained images\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px\n\n### Grid & Container\n- Full-width header with centered search\n- Category pill bar: horizontal scrollable row\n- Listing grid: responsive multi-column (3–5 columns on desktop)\n- Full-width footer with link columns\n\n### Whitespace Philosophy\n- **Travel-magazine spacing**: Generous vertical padding between sections creates a leisurely browsing pace — you're meant to scroll slowly, like browsing a magazine.\n- **Photography density**: Listing cards are packed relatively tightly, but each image is large enough to feel immersive.\n- **Search bar prominence**: The search bar gets maximum vertical space in the header — finding your destination is the primary action.\n\n### Border Radius Scale\n- Subtle (4px): Small links\n- Standard (8px): Buttons, tabs, search elements\n- Badge (14px): Status badges, labels\n- Card (20px): Feature cards, large buttons\n- Large (32px): Large containers, hero elements\n- Circle (50%): Nav controls, avatars, icons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Card (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | Listing cards, search bar |\n| Hover (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | Button hover, interactive lift |\n| Active Focus (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + focus ring | Active/focused elements |\n\n**Shadow Philosophy**: Airbnb's three-layer shadow system creates a warm, natural lift. Layer 1 (`0px 0px 0px 1px` at 0.02 opacity) is an ultra-subtle border. Layer 2 (`0px 2px 6px` at 0.04) provides soft ambient shadow. Layer 3 (`0px 4px 8px` at 0.1) adds the primary lift. This graduated approach creates shadows that feel like natural light rather than CSS effects.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#222222` (warm near-black) for text — never pure `#000000`\n- Apply Rausch Red (`#ff385c`) only for primary CTAs and brand moments — it's the singular accent\n- Use Airbnb Cereal VF at weight 500–700 — the warm weight range is intentional\n- Apply the three-layer card shadow for all elevated surfaces\n- Use generous border-radius: 8px for buttons, 20px for cards, 50% for controls\n- Use photography as the primary visual content — listings are image-first\n- Apply negative letter-spacing (-0.18px to -0.44px) on headings for intimacy\n- Use circular (50%) buttons for carousel/navigation controls\n\n### Don't\n- Don't use pure black (`#000000`) for text — always `#222222` (warm)\n- Don't apply Rausch Red to backgrounds or large surfaces — it's an accent only\n- Don't use thin font weights (300, 400) for headings — 500 minimum\n- Don't use heavy shadows (>0.1 opacity as primary layer) — keep them warm and graduated\n- Don't use sharp corners (0–4px) on cards — the generous rounding (20px+) is core\n- Don't introduce additional brand colors beyond the Rausch/Luxe/Plus system\n- Don't override the palette token system — use `--palette-*` variables consistently\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Single column, compact search |\n| Mobile | 375–550px | Standard mobile listing grid |\n| Tablet Small | 550–744px | 2-column listings |\n| Tablet | 744–950px | Search bar expansion |\n| Desktop Small | 950–1128px | 3-column listings |\n| Desktop | 1128–1440px | 4-column grid, full header |\n| Large Desktop | 1440–1920px | 5-column grid |\n| Ultra-wide | >1920px | Maximum grid width |\n\n*Note: Airbnb has 61 detected breakpoints — one of the most granular responsive systems observed, reflecting their obsession with layout at every possible screen size.*\n\n### Touch Targets\n- Circular nav buttons: adequate 50% radius sizing\n- Listing cards: full-card tap target on mobile\n- Search bar: prominently sized for thumb interaction\n- Category pills: horizontally scrollable with generous padding\n\n### Collapsing Strategy\n- Listing grid: 5 → 4 → 3 → 2 → 1 columns\n- Search: expanded bar → compact bar → overlay\n- Category pills: horizontal scroll at all sizes\n- Navigation: full header → mobile simplified\n- Map: side panel → overlay/toggle\n\n### Image Behavior\n- Listing photos: carousel with swipe on mobile\n- Responsive image sizing with aspect ratio maintained\n- Heart overlay positioned consistently across sizes\n- Photo quality adjusts based on viewport\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#222222`)\n- Brand accent: Rausch Red (`#ff385c`)\n- Secondary text: `#6a6a6a`\n- Disabled: `rgba(0,0,0,0.24)`\n- Card border: `rgba(0,0,0,0.02) 0px 0px 0px 1px`\n- Card shadow: full three-layer stack\n- Button surface: `#f2f2f2`\n\n### Example Component Prompts\n- \"Create a listing card: white background, 20px radius. Three-layer shadow: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. Photo area on top (16:10 ratio), details below: 16px Airbnb Cereal VF weight 600 title, 14px weight 400 description in #6a6a6a.\"\n- \"Design search bar: white background, full card shadow, 32px radius on container. Search text at 14px Cereal VF weight 400. Red search button (#ff385c, 50% radius, white icon).\"\n- \"Build category pill bar: horizontal scrollable row. Each pill: 14px Cereal VF weight 600, #222222 text, bottom border on active. Circular prev/next arrows (#f2f2f2 bg, 50% radius).\"\n- \"Create a CTA button: #222222 background, white text, 8px radius, 16px Cereal VF weight 500, 0px 24px padding. Hover: brand red accent.\"\n- \"Design a heart/wishlist button: transparent background, 50% radius, white heart icon with dark shadow outline.\"\n\n### Iteration Guide\n1. Start with white — the photography provides all the color\n2. Rausch Red (#ff385c) is the singular accent — use sparingly for CTAs only\n3. Near-black (#222222) for text — the warmth matters\n4. Three-layer shadows create natural, warm lift — always use all three layers\n5. Generous radius: 8px buttons, 20px cards, 50% controls\n6. Cereal VF at 500–700 weight — no thin weights for any heading\n7. Photography is hero — every listing card is image-first\n\nFile v1.0.2:references/design-systems/airtable-DESIGN.md\n\n# Design System Inspiration of Airtable\n\n## 1. Visual Theme & Atmosphere\n\nAirtable's website is a clean, enterprise-friendly platform that communicates \"sophisticated simplicity\" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.\n\n**Key Characteristics:**\n- White canvas with deep navy text (`#181d26`)\n- Airtable Blue (`#1b61c9`) as primary CTA and link color\n- Haas + Haas Groot Disp dual font system\n- Positive letter-spacing on body text (0.08px–0.28px)\n- 12px radius buttons, 16px–32px for cards\n- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`\n- Semantic theme tokens: `--theme_*` CSS variable naming\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Deep Navy** (`#181d26`): Primary text\n- **Airtable Blue** (`#1b61c9`): CTA buttons, links\n- **White** (`#ffffff`): Primary surface\n- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`\n\n### Semantic\n- **Success Green** (`#006400`): `--theme_success-text`\n- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`\n- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`\n\n### Neutral\n- **Dark Gray** (`#333333`): Secondary text\n- **Mid Blue** (`#254fad`): Link/accent blue variant\n- **Border** (`#e0e2e6`): Card borders\n- **Light Surface** (`#f8fafc`): Subtle surface\n\n### Shadows\n- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)\n- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`\n- **Display**: `Haas Groot Disp`, fallback: `Haas`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Haas | 48px | 400 | 1.15 | normal |\n| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |\n| Section Heading | Haas | 40px | 400 | 1.25 | normal |\n| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |\n| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |\n| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |\n| Body | Haas | 18px | 400 | 1.35 | 0.18px |\n| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |\n| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |\n| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |\n\n## 4. Component Stylings\n\n### Buttons\n- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius\n- **White**: white bg, `#181d26` text, 12px radius, 1px border white\n- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)\n\n### Cards: `1px solid #e0e2e6`, 16px–24px radius\n### Inputs: Standard Haas styling\n\n## 5. Layout\n- Spacing: 1–48px (8px base)\n- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)\n\n## 6. Depth\n- Blue-tinted multi-layer shadow system\n- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`\n\n## 7. Do's and Don'ts\n### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons\n### Don't: Skip positive letter-spacing, use heavy shadows\n\n## 8. Responsive Behavior\nBreakpoints: 425–1664px (23 breakpoints)\n\n## 9. Agent Prompt Guide\n- Text: Deep Navy (`#181d26`)\n- CTA: Airtable Blue (`#1b61c9`)\n- Background: White (`#ffffff`)\n- Border: `#e0e2e6`\n\nFile v1.0.2:references/design-systems/apple-DESIGN.md\n\n# Design System Inspiration of Apple\n\n## 1. Visual Theme & Atmosphere\n\nApple's website is a masterclass in controlled drama — vast expanses of pure black and near-white serve as cinematic backdrops for products that are photographed as if they were sculptures in a gallery. The design philosophy is reductive to its core: every pixel exists in service of the product, and the interface itself retreats until it becomes invisible. This is not minimalism as aesthetic preference; it is minimalism as reverence for the object.\n\nThe typography anchors everything. San Francisco (SF Pro Display for large sizes, SF Pro Text for body) is Apple's proprietary typeface, engineered with optical sizing that automatically adjusts letterforms depending on point size. At display sizes (56px), weight 600 with a tight line-height of 1.07 and subtle negative letter-spacing (-0.28px) creates headlines that feel machined rather than typeset — precise, confident, and unapologetically direct. At body sizes (17px), the tracking loosens slightly (-0.374px) and line-height opens to 1.47, creating a reading rhythm that is comfortable without ever feeling slack.\n\nThe color story is starkly binary. Product sections alternate between pure black (`#000000`) backgrounds with white text and light gray (`#f5f5f7`) backgrounds with near-black text (`#1d1d1f`). This creates a cinematic pacing — dark sections feel immersive and premium, light sections feel open and informational. The only chromatic accent is Apple Blue (`#0071e3`), reserved exclusively for interactive elements: links, buttons, and focus states. This singular accent color in a sea of neutrals gives every clickable element unmistakable visibility.\n\n**Key Characteristics:**\n- SF Pro Display/Text with optical sizing — letterforms adapt automatically to size context\n- Binary light/dark section rhythm: black (`#000000`) alternating with light gray (`#f5f5f7`)\n- Single accent color: Apple Blue (`#0071e3`) reserved exclusively for interactive elements\n- Product-as-hero photography on solid color fields — no gradients, no textures, no distractions\n- Extremely tight headline line-heights (1.07-1.14) creating compressed, billboard-like impact\n- Full-width section layout with centered content — the viewport IS the canvas\n- Pill-shaped CTAs (980px radius) creating soft, approachable action buttons\n- Generous whitespace between sections allowing each product moment to breathe\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (`#000000`): Hero section backgrounds, immersive product showcases. The darkest canvas for the brightest products.\n- **Light Gray** (`#f5f5f7`): Alternate section backgrounds, informational areas. Not white — the slight blue-gray tint prevents sterility.\n- **Near Black** (`#1d1d1f`): Primary text on light backgrounds, dark button fills. Slightly warmer than pure black for comfortable reading.\n\n### Interactive\n- **Apple Blue** (`#0071e3`): `--sk-focus-color`, primary CTA backgrounds, focus rings. The ONLY chromatic color in the interface.\n- **Link Blue** (`#0066cc`): `--sk-body-link-color`, inline text links. Slightly darker than Apple Blue for text-level readability.\n- **Bright Blue** (`#2997ff`): Links on dark backgrounds. Higher luminance for contrast on black sections.\n\n### Text\n- **White** (`#ffffff`): Text on dark backgrounds, button text on blue/dark CTAs.\n- **Near Black** (`#1d1d1f`): Primary body text on light backgrounds.\n- **Black 80%** (`rgba(0, 0, 0, 0.8)`): Secondary text, nav items on light backgrounds. Slightly softened.\n- **Black 48%** (`rgba(0, 0, 0, 0.48)`): Tertiary text, disabled states, carousel controls.\n\n### Surface & Dark Variants\n- **Dark Surface 1** (`#272729`): Card backgrounds in dark sections.\n- **Dark Surface 2** (`#262628`): Subtle surface variation in dark contexts.\n- **Dark Surface 3** (`#28282a`): Elevated cards on dark backgrounds.\n- **Dark Surface 4** (`#2a2a2d`): Highest dark surface elevation.\n- **Dark Surface 5** (`#242426`): Deepest dark surface tone.\n\n### Button States\n- **Button Active** (`#ededf2`): Active/pressed state for light buttons.\n- **Button Default Light** (`#fafafc`): Search/filter button backgrounds.\n- **Overlay** (`rgba(210, 210, 215, 0.64)`): Media control scrims, overlays.\n- **White 32%** (`rgba(255, 255, 255, 0.32)`): Hover state on dark modal close buttons.\n\n### Shadows\n- **Card Shadow** (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`): Soft, diffused elevation for product cards. Offset and wide blur create a natural, photographic shadow.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `SF Pro Display`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`\n- **Body**: `SF Pro Text`, with fallbacks: `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`\n- SF Pro Display is used at 20px and above; SF Pro Text is optimized for 19px and below.\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | SF Pro Display | 56px (3.50rem) | 600 | 1.07 (tight) | -0.28px | Product launch headlines, maximum impact |\n| Section Heading | SF Pro Display | 40px (2.50rem) | 600 | 1.10 (tight) | normal | Feature section titles |\n| Tile Heading | SF Pro Display | 28px (1.75rem) | 400 | 1.14 (tight) | 0.196px | Product tile headlines |\n| Card Title | SF Pro Display | 21px (1.31rem) | 700 | 1.19 (tight) | 0.231px | Bold card headings |\n| Sub-heading | SF Pro Display | 21px (1.31rem) | 400 | 1.19 (tight) | 0.231px | Regular card headings |\n| Nav Heading | SF Pro Text | 34px (2.13rem) | 600 | 1.47 | -0.374px | Large navigation headings |\n| Sub-nav | SF Pro Text | 24px (1.50rem) | 300 | 1.50 | normal | Light sub-navigation text |\n| Body | SF Pro Text | 17px (1.06rem) | 400 | 1.47 | -0.374px | Standard reading text |\n| Body Emphasis | SF Pro Text | 17px (1.06rem) | 600 | 1.24 (tight) | -0.374px | Emphasized body text, labels |\n| Button Large | SF Pro Text | 18px (1.13rem) | 300 | 1.00 (tight) | normal | Large button text, light weight |\n| Button | SF Pro Text | 17px (1.06rem) | 400 | 2.41 (relaxed) | normal | Standard button text |\n| Link | SF Pro Text | 14px (0.88rem) | 400 | 1.43 | -0.224px | Body links, \"Learn more\" |\n| Caption | SF Pro Text | 14px (0.88rem) | 400 | 1.29 (tight) | -0.224px | Secondary text, descriptions |\n| Caption Bold | SF Pro Text | 14px (0.88rem) | 600 | 1.29 (tight) | -0.224px | Emphasized captions |\n| Micro | SF Pro Text | 12px (0.75rem) | 400 | 1.33 | -0.12px | Fine print, footnotes |\n| Micro Bold | SF Pro Text | 12px (0.75rem) | 600 | 1.33 | -0.12px | Bold fine print |\n| Nano | SF Pro Text | 10px (0.63rem) | 400 | 1.47 | -0.08px | Legal text, smallest size |\n\n### Principles\n- **Optical sizing as philosophy**: SF Pro automatically switches between Display and Text optical sizes. Display versions have wider letter spacing and thinner strokes optimized for large sizes; Text versions are tighter and sturdier for small sizes. This means the font literally changes its DNA based on context.\n- **Weight restraint**: The scale spans 300 (light) to 700 (bold) but most text lives at 400 (regular) and 600 (semibold). Weight 300 appears only on large decorative text. Weight 700 is rare, used only for bold card titles.\n- **Negative tracking at all sizes**: Unlike most systems that only track headlines, Apple applies subtle negative letter-spacing even at body sizes (-0.374px at 17px, -0.224px at 14px, -0.12px at 12px). This creates universally tight, efficient text.\n- **Extreme line-height range**: Headlines compress to 1.07 while body text opens to 1.47, and some button contexts stretch to 2.41. This dramatic range creates clear visual hierarchy through rhythm alone.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Blue (CTA)**\n- Background: `#0071e3` (Apple Blue)\n- Text: `#ffffff`\n- Padding: 8px 15px\n- Radius: 8px\n- Border: 1px solid transparent\n- Font: SF Pro Text, 17px, weight 400\n- Hover: background brightens slightly\n- Active: `#ededf2` background shift\n- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline\n- Use: Primary call-to-action (\"Buy\", \"Shop iPhone\")\n\n**Primary Dark**\n- Background: `#1d1d1f`\n- Text: `#ffffff`\n- Padding: 8px 15px\n- Radius: 8px\n- Font: SF Pro Text, 17px, weight 400\n- Use: Secondary CTA, dark variant\n\n**Pill Link (Learn More / Shop)**\n- Background: transparent\n- Text: `#0066cc` (light bg) or `#2997ff` (dark bg)\n- Radius: 980px (full pill)\n- Border: 1px solid `#0066cc`\n- Font: SF Pro Text, 14px-17px\n- Hover: underline decoration\n- Use: \"Learn more\" and \"Shop\" links — the signature Apple inline CTA\n\n**Filter / Search Button**\n- Background: `#fafafc`\n- Text: `rgba(0, 0, 0, 0.8)`\n- Padding: 0px 14px\n- Radius: 11px\n- Border: 3px solid `rgba(0, 0, 0, 0.04)`\n- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline\n- Use: Search bars, filter controls\n\n**Media Control**\n- Background: `rgba(210, 210, 215, 0.64)`\n- Text: `rgba(0, 0, 0, 0.48)`\n- Radius: 50% (circular)\n- Active: scale(0.9), background shifts\n- Focus: `2px solid var(--sk-focus-color, #0071e3)` outline, white bg, black text\n- Use: Play/pause, carousel arrows\n\n### Cards & Containers\n- Background: `#f5f5f7` (light) or `#272729`-`#2a2a2d` (dark)\n- Border: none (borders are rare in Apple's system)\n- Radius: 5px-8px\n- Shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` for elevated product cards\n- Content: centered, generous padding\n- Hover: no standard hover state — cards are static, links within them are interactive\n\n### Navigation\n- Background: `rgba(0, 0, 0, 0.8)` (translucent dark) with `backdrop-filter: saturate(180%) blur(20px)`\n- Height: 48px (compact)\n- Text: `#ffffff` at 12px, weight 400\n- Active: underline on hover\n- Logo: Apple logomark (SVG) centered or left-aligned, 17x48px viewport\n- Mobile: collapses to hamburger with full-screen overlay menu\n- The nav floats above content, maintaining its dark translucent glass regardless of section background\n\n### Image Treatment\n- Products on solid-color fields (black or white) — no backgrounds, no context, just the object\n- Full-bleed section images that span the entire viewport width\n- Product photography at extremely high resolution with subtle shadows\n- Lifestyle images confined to rounded-corner containers (12px+ radius)\n\n### Distinctive Components\n\n**Product Hero Module**\n- Full-viewport-width section with solid background (black or `#f5f5f7`)\n- Product name as the primary headline (SF Pro Display, 56px, weight 600)\n- One-line descriptor below in lighter weight\n- Two pill CTAs side by side: \"Learn more\" (outline) and \"Buy\" / \"Shop\" (filled)\n\n**Product Grid Tile**\n- Square or near-square card on contrasting background\n- Product image dominating 60-70% of the tile\n- Product name + one-line description below\n- \"Learn more\" and \"Shop\" link pair at bottom\n\n**Feature Comparison Strip**\n- Horizontal scroll of product variants\n- Each variant as a vertical card with image, name, and key specs\n- Minimal chrome — the products speak for themselves\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px\n- Notable characteristic: the scale is dense at small sizes (2-11px) with granular 1px increments, then jumps in larger steps. This allows precise micro-adjustments for typography and icon alignment.\n\n### Grid & Container\n- Max content width: approximately 980px (the recurring \"980px radius\" in pill buttons echoes this width)\n- Hero: full-viewport-width sections with centered content block\n- Product grids: 2-3 column layouts within centered container\n- Single-column for hero moments — one product, one message, full attention\n- No visible grid lines or gutters — spacing creates implied structure\n\n### Whitespace Philosophy\n- **Cinematic breathing room**: Each product section occupies a full viewport height (or close to it). The whitespace between products is not empty — it is the pause between scenes in a film.\n- **Vertical rhythm through color blocks**: Rather than using spacing alone to separate sections, Apple uses alternating background colors (black, `#f5f5f7`, white). Each color change signals a new \"scene.\"\n- **Compression within, expansion between**: Text blocks are tightly set (negative letter-spacing, tight line-heights) while the space surrounding them is vast. This creates a tension between density and openness.\n\n### Border Radius Scale\n- Micro (5px): Small containers, link tags\n- Standard (8px): Buttons, product cards, image containers\n- Comfortable (11px): Search inputs, filter buttons\n- Large (12px): Feature panels, lifestyle image containers\n- Full Pill (980px): CTA links (\"Learn more\", \"Shop\"), navigation pills\n- Circle (50%): Media controls (play/pause, arrows)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, solid background | Standard content sections, text blocks |\n| Navigation Glass | `backdrop-filter: saturate(180%) blur(20px)` on `rgba(0,0,0,0.8)` | Sticky navigation bar — the glass effect |\n| Subtle Lift (Level 1) | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | Product cards, floating elements |\n| Media Control | `rgba(210, 210, 215, 0.64)` background with scale transforms | Play/pause buttons, carousel controls |\n| Focus (Accessibility) | `2px solid #0071e3` outline | Keyboard focus on all interactive elements |\n\n**Shadow Philosophy**: Apple uses shadow extremely sparingly. The primary shadow (`3px 5px 30px` with 0.22 opacity) is soft, wide, and offset — mimicking a diffused studio light casting a natural shadow beneath a physical object. This reinforces the \"product as physical sculpture\" metaphor. Most elements have NO shadow at all; elevation comes from background color contrast (dark card on darker background, or light card on slightly different gray).\n\n### Decorative Depth\n- Navigation glass: the translucent, blurred navigation bar is the most recognizable depth element, creating a sense of floating UI above scrolling content\n- Section color transitions: depth is implied by the alternation between black and light gray sections rather than by shadows\n- Product photography shadows: the products themselves cast shadows in their photography, so the UI doesn't need to add synthetic ones\n\n## 7. Do's and Don'ts\n\n### Do\n- Use SF Pro Display at 20px+ and SF Pro Text below 20px — respect the optical sizing boundary\n- Apply negative letter-spacing at all text sizes (not just headlines) — Apple tracks tight universally\n- Use Apple Blue (`#0071e3`) ONLY for interactive elements — it must be the singular accent\n- Alternate between black and light gray (`#f5f5f7`) section backgrounds for cinematic rhythm\n- Use 980px pill radius for CTA links — the signature Apple link shape\n- Keep product imagery on solid-color fields with no competing visual elements\n- Use the translucent dark glass (`rgba(0,0,0,0.8)` + blur) for sticky navigation\n- Compress headline line-heights to 1.07-1.14 — Apple headlines are famously tight\n\n### Don't\n- Don't introduce additional accent colors — the entire chromatic budget is spent on blue\n- Don't use heavy shadows or multiple shadow layers — Apple's shadow system is one soft diffused shadow or nothing\n- Don't use borders on cards or containers — Apple almost never uses visible borders (except on specific buttons)\n- Don't apply wide letter-spacing to SF Pro — it is designed to run tight at every size\n- Don't use weight 800 or 900 — the maximum is 700 (bold), and even that is rare\n- Don't add textures, patterns, or gradients to backgrounds — solid colors only\n- Don't make the navigation opaque — the glass blur effect is essential to the Apple UI identity\n- Don't center-align body text — Apple body copy is left-aligned; only headlines center\n- Don't use rounded corners larger than 12px on rectangular elements (980px is for pills only)\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | <360px | Minimum supported, single column |\n| Mobile | 360-480px | Standard mobile layout |\n| Mobile Large | 480-640px | Wider single column, larger images |\n| Tablet Small | 640-834px | 2-column product grids begin |\n| Tablet | 834-1024px | Full tablet layout, expanded nav |\n| Desktop Small | 1024-1070px | Standard desktop layout begins |\n| Desktop | 1070-1440px | Full layout, max content width |\n| Large Desktop | >1440px | Centered with generous margins |\n\n### Touch Targets\n- Primary CTAs: 8px 15px padding creating ~44px touch height\n- Navigation links: 48px height with adequate spacing\n- Media controls: 50% radius circular buttons, minimum 44x44px\n- \"Learn more\" pills: generous padding for comfortable tapping\n\n### Collapsing Strategy\n- Hero headlines: 56px Display → 40px → 28px on mobile, maintaining tight line-height proportionally\n- Product grids: 3-column → 2-column → single column stacked\n- Navigation: full horizontal nav → compact mobile menu (hamburger)\n- Product hero modules: full-bleed maintained at all sizes, text scales down\n- Section backgrounds: maintain full-width color blocks at all breakpoints — the cinematic rhythm never breaks\n- Image sizing: products scale proportionally, never crop — the product silhouette is sacred\n\n### Image Behavior\n- Product photography maintains aspect ratio at all breakpoints\n- Hero product images scale down but stay centered\n- Full-bleed section backgrounds persist at every size\n- Lifestyle images may crop on mobile but maintain their rounded corners\n- Lazy loading for below-fold product images\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Apple Blue (`#0071e3`)\n- Page background (light): `#f5f5f7`\n- Page background (dark): `#000000`\n- Heading text (light): `#1d1d1f`\n- Heading text (dark): `#ffffff`\n- Body text: `rgba(0, 0, 0, 0.8)` on light, `#ffffff` on dark\n- Link (light bg): `#0066cc`\n- Link (dark bg): `#2997ff`\n- Focus ring: `#0071e3`\n- Card shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`\n\n### Example Component Prompts\n- \"Create a hero section on black background. Headline at 56px SF Pro Display weight 600, line-height 1.07, letter-spacing -0.28px, color white. One-line subtitle at 21px SF Pro Display weight 400, line-height 1.19, color white. Two pill CTAs: 'Learn more' (transparent bg, white text, 1px solid white border, 980px radius) and 'Buy' (Apple Blue #0071e3 bg, white text, 8px radius, 8px 15px padding).\"\n- \"Design a product card: #f5f5f7 background, 8px border-radius, no border, no shadow. Product image top 60% of card on solid background. Title at 28px SF Pro Display weight 400, letter-spacing 0.196px, line-height 1.14. Description at 14px SF Pro Text weight 400, color rgba(0,0,0,0.8). 'Learn more' and 'Shop' links in #0066cc at 14px.\"\n- \"Build the Apple navigation: sticky, 48px height, background rgba(0,0,0,0.8) with backdrop-filter: saturate(180%) blur(20px). Links at 12px SF Pro Text weight 400, white text. Apple logo left, links centered, search and bag icons right.\"\n- \"Create an alternating section layout: first section black bg with white text and centered product image, second section #f5f5f7 bg with #1d1d1f text. Each section near full-viewport height with 56px headline and two pill CTAs below.\"\n- \"Design a 'Learn more' link: text #0066cc on light bg or #2997ff on dark bg, 14px SF Pro Text, underline on hover. After the text, include a right-arrow chevron character (>). Wrap in a container with 980px border-radius for pill shape when used as a standalone CTA.\"\n\n### Iteration Guide\n1. Every interactive element gets Apple Blue (`#0071e3`) — no other accent colors\n2. Section backgrounds alternate: black for immersive moments, `#f5f5f7` for informational moments\n3. Typography optical sizing: SF Pro Display at 20px+, SF Pro Text below — never mix\n4. Negative letter-spacing at all sizes: -0.28px at 56px, -0.374px at 17px, -0.224px at 14px, -0.12px at 12px\n5. The navigation glass effect (translucent dark + blur) is non-negotiable — it defines the Apple web experience\n6. Products always appear on solid color fields — never on gradients, textures, or lifestyle backgrounds in hero modules\n7. Shadow is rare and always soft: `3px 5px 30px 0.22 opacity` or nothing at all\n8. Pill CTAs use 980px radius — this creates the signature Apple rounded-rectangle-that-looks-like-a-capsule shape\n\nFile v1.0.2:references/design-systems/bmw-DESIGN.md\n\n# Design System Inspiration of BMW\n\n## 1. Visual Theme & Atmosphere\n\nBMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.\n\nThe typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.\n\nWhat makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (`--site-context-highlight-color: #1c69d4`, `--site-context-focus-color: #0653b6`, `--site-context-metainfo-color: #757575`) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (`#1c69d4`) is BMW's signature blue — used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected — BMW's design is angular, sharp-cornered, and uncompromisingly geometric.\n\n**Key Characteristics:**\n- BMWTypeNextLatin Light (weight 300) uppercase for display — whispered authority\n- BMW Blue (`#1c69d4`) as singular accent — used only for interactive elements\n- Zero border-radius detected — angular, sharp-cornered, industrial geometry\n- Dark hero photography + white content sections — showroom lighting rhythm\n- CSS variable-driven theming: `--site-context-*` tokens for brand flexibility\n- Weight 900 for navigation emphasis — extreme contrast with 300 display\n- Tight line-heights (1.15–1.30) throughout — compressed, efficient, German engineering\n- Full-bleed automotive photography as primary visual content\n\n## 2. Color Palette & Roles\n\n### Primary Brand\n- **Pure White** (`#ffffff`): `--site-context-theme-color`, primary surface, card backgrounds\n- **BMW Blue** (`#1c69d4`): `--site-context-highlight-color`, primary interactive accent\n- **BMW Focus Blue** (`#0653b6`): `--site-context-focus-color`, keyboard focus and active states\n\n### Neutral Scale\n- **Near Black** (`#262626`): Primary text on light surfaces, dark link text\n- **Meta Gray** (`#757575`): `--site-context-metainfo-color`, secondary text, metadata\n- **Silver** (`#bbbbbb`): Tertiary text, muted links, footer elements\n\n### Interactive States\n- All links hover to white (`#ffffff`) — suggesting primarily dark-surface navigation\n- Text links use underline: none on hover — clean interaction\n\n### Shadows\n- Minimal shadow system — depth through photography and dark/light section contrast\n\n## 3. Typography Rules\n\n### Font Families\n- **Display Light**: `BMWTypeNextLatin Light`, fallbacks: `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`\n- **Body / UI**: `BMWTypeNextLatin`, same fallback stack\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (tight) | `text-transform: uppercase` |\n| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (tight) | Major section titles |\n| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (tight) | Navigation bold items |\n| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard body text |\n| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20–2.88 | CTA buttons |\n| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard buttons |\n\n### Principles\n- **Light display, heavy navigation**: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.\n- **Universal uppercase display**: The 60px hero is always uppercase — creating a monumental, architectural quality.\n- **Tight everything**: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes — every line is compressed, efficient, German-engineered.\n- **Single font family**: BMWTypeNextLatin handles everything from 60px display to 16px body — unity through one typeface at different weights.\n\n## 4. Component Stylings\n\n### Buttons\n- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary\n- Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)\n- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)\n- No border-radius — sharp rectangular buttons\n\n### Cards & Containers\n- No border-radius — all containers are sharp-cornered rectangles\n- White backgrounds on light sections\n- Dark backgrounds for hero/feature sections\n- No visible borders on most elements\n\n### Navigation\n- BMWTypeNextLatin 18px weight 900 for primary nav links\n- White text on dark header\n- BMW logo 54x54px\n- Hover: remains white, text-decoration none\n- \"Home\" text link in header\n\n### Image Treatment\n- Full-bleed automotive photography\n- Dark cinematic lighting\n- Edge-to-edge hero images\n- Car photography as primary visual content\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px\n\n### Grid & Container\n- Full-width hero photography\n- Centered content sections\n- Footer: multi-column link grid\n\n### Whitespace Philosophy\n- **Showroom pacing**: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.\n- **Compressed content**: Body text areas use tight line-heights and compact spacing — information-dense, no waste.\n\n### Border Radius Scale\n- **None detected.** BMW uses sharp corners exclusively — every element is a precise rectangle. This is the most angular design system analyzed.\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Photography (Level 0) | Full-bleed dark imagery | Hero backgrounds |\n| Flat (Level 1) | White surface, no shadow | Content sections |\n| Focus (Accessibility) | BMW Focus Blue (`#0653b6`) | Focus states |\n\n**Shadow Philosophy**: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections — the automotive lighting does the elevation work.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use BMWTypeNextLatin Light (300) uppercase for all display headings\n- Keep ALL corners sharp (0px radius) — angular geometry is non-negotiable\n- Use BMW Blue (`#1c69d4`) only for interactive elements — never decoratively\n- Apply weight 900 for navigation emphasis — the extreme weight contrast is intentional\n- Use full-bleed automotive photography for hero sections\n- Keep line-heights tight (1.15–1.30) throughout\n- Use `--site-context-*` CSS variables for theming\n\n### Don't\n- Don't round corners — zero radius is the BMW identity\n- Don't use BMW Blue for backgrounds or large surfaces — it's an accent only\n- Don't use medium font weights (500–600) — the system uses 300, 400, 700, 900 extremes\n- Don't add decorative elements — the photography and typography carry everything\n- Don't use relaxed line-heights — BMW text is always compressed\n- Don't lighten the dark hero sections — the contrast with white IS the design\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <375px | Minimum supported |\n| Mobile | 375–480px | Single column |\n| Mobile Large | 480–640px | Slight adjustments |\n| Tablet Small | 640–768px | 2-column begins |\n| Tablet | 768–920px | Standard tablet |\n| Desktop Small | 920–1024px | Desktop layout begins |\n| Desktop | 1024–1280px | Standard desktop |\n| Large Desktop | 1280–1440px | Expanded |\n| Ultra-wide | 1440–1600px | Maximum layout |\n\n### Collapsing Strategy\n- Hero: 60px → scales down, maintains uppercase\n- Navigation: horizontal → hamburger\n- Photography: full-bleed maintained at all sizes\n- Content sections: stack vertically\n- Footer: multi-column → stacked\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Pure White (`#ffffff`)\n- Text: Near Black (`#262626`)\n- Secondary text: Meta Gray (`#757575`)\n- Accent: BMW Blue (`#1c69d4`)\n- Focus: BMW Focus Blue (`#0653b6`)\n- Muted: Silver (`#bbbbbb`)\n\n### Example Component Prompts\n- \"Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere.\"\n- \"Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout.\"\n- \"Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface.\"\n- \"Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15.\"\n\n### Iteration Guide\n1. Zero border-radius — every corner is sharp, no exceptions\n2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav)\n3. BMW Blue for interactive only — never as background or decoration\n4. Photography carries emotion — the UI is pure precision\n5. Tight line-heights everywhere — 1.15 to 1.30 is the range\n\nFile v1.0.2:references/design-systems/claude-DESIGN.md\n\n# Design System Inspiration of Claude (Anthropic)\n\n## 1. Visual Theme & Atmosphere\n\nClaude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.\n\nThe signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (`#c96442`), black, and muted green, the visual language says \"thoughtful companion\" rather than \"powerful tool.\" The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.\n\nWhat makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.\n\n**Key Characteristics:**\n- Warm parchment canvas (`#f5f4ed`) evoking premium paper, not screens\n- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code\n- Terracotta brand accent (`#c96442`) — warm, earthy, deliberately un-tech\n- Exclusively warm-toned neutrals — every gray has a yellow-brown undertone\n- Organic, editorial illustrations replacing typical tech iconography\n- Ring-based shadow system (`0px 0px 0px 1px`) creating border-like depth without visible borders\n- Magazine-like pacing with generous section spacing and serif-driven hierarchy\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Anthropic Near Black** (`#141413`): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest \"black\" in any major tech brand.\n- **Terracotta Brand** (`#c96442`): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.\n- **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.\n\n### Secondary & Accent\n- **Error Crimson** (`#b53333`): A deep, warm red for error states — serious without being alarming.\n- **Focus Blue** (`#3898ec`): Standard blue for input focus rings — the only cool color in the entire system, used purely for accessibility.\n\n### Surface & Background\n- **Parchment** (`#f5f4ed`): The primary page background — a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.\n- **Ivory** (`#faf9f5`): The lightest surface — used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.\n- **Pure White** (`#ffffff`): Reserved for specific button surfaces and maximum-contrast elements.\n- **Warm Sand** (`#e8e6dc`): Button backgrounds and prominent interactive surfaces — a noticeably warm light gray.\n- **Dark Surface** (`#30302e`): Dark-theme containers, nav borders, and elevated dark elements — warm charcoal.\n- **Deep Dark** (`#141413`): Dark-theme page background and primary dark surface.\n\n### Neutrals & Text\n- **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces — the go-to dark-on-light text.\n- **Olive Gray** (`#5e5d59`): Secondary body text — a distinctly warm medium-dark gray.\n- **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized metadata.\n- **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.\n- **Warm Silver** (`#b0aea5`): Text on dark surfaces — a warm, parchment-tinted light gray.\n\n### Semantic & Accent\n- **Border Cream** (`#f0eee6`): Standard light-theme border — barely visible warm cream, creating the gentlest possible containment.\n- **Border Warm** (`#e8e6dc`): Prominent borders, section dividers, and emphasized containment on light surfaces.\n- **Border Dark** (`#30302e`): Standard border on dark surfaces — maintains the warm tone.\n- **Ring Warm** (`#d1cfc5`): Shadow ring color for button hover/focus states.\n- **Ring Subtle** (`#dedc01`): Secondary ring variant for lighter interactive surfaces.\n- **Ring Deep** (`#c2c0b6`): Deeper ring for active/pressed states.\n\n### Gradient System\n- Claude's design is **gradient-free** in the traditional sense. Depth and visual richness come from the interplay of warm surface tones, organic illustrations, and light/dark section alternation. The warm palette itself creates a \"gradient\" effect as the eye moves through cream → sand → stone → charcoal → black sections.\n\n## 3. Typography Rules\n\n### Font Family\n- **Headline**: `Anthropic Serif`, with fallback: `Georgia`\n- **Body / UI**: `Anthropic Sans`, with fallback: `Arial`\n- **Code**: `Anthropic Mono`, with fallback: `Arial`\n\n*Note: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui/Inter as the sans substitute.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (tight) | normal | Maximum impact, book-title presence |\n| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (tight) | normal | Feature section anchors |\n| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500 | 1.30 | normal | Secondary section markers |\n| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (tight) | normal | Card titles, feature names |\n| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500 | 1.20 | normal | Smaller section titles |\n| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | Small feature headings |\n| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (relaxed) | normal | Serif body text (editorial passages) |\n| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Intro paragraphs |\n| Body / Nav | Anthropic Sans | 17px (1.06rem) | 400–500 | 1.00–1.60 | normal | Navigation links, UI text |\n| Body Standard | Anthropic Sans | 16px (1rem) | 400–500 | 1.25–1.60 | normal | Standard body, button text |\n| Body Small | Anthropic Sans | 15px (0.94rem) | 400–500 | 1.00–1.60 | normal | Compact body text |\n| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |\n| Label | Anthropic Sans | 12px (0.75rem) | 400–500 | 1.25–1.60 | 0.12px | Badges, small labels |\n| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | Uppercase overline labels |\n| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | Smallest text |\n| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | Inline code, terminal |\n\n### Principles\n- **Serif for authority, sans for utility**: Anthropic Serif carries all headline content with medium weight (500), giving every heading the gravitas of a published title. Anthropic Sans handles all functional UI text — buttons, labels, navigation — with quiet efficiency.\n- **Single weight for serifs**: All Anthropic Serif headings use weight 500 — no bold, no light. This creates a consistent \"voice\" across all headline sizes, as if the same author wrote every heading.\n- **Relaxed body line-height**: Most body text uses 1.60 line-height — significantly more generous than typical tech sites (1.4–1.5). This creates a reading experience closer to a book than a dashboard.\n- **Tight-but-not-compressed headings**: Line-heights of 1.10–1.30 for headings are tight but never claustrophobic. The serif letterforms need breathing room that sans-serif fonts don't.\n- **Micro letter-spacing on labels**: Small sans text (12px and below) uses deliberate letter-spacing (0.12px–0.5px) to maintain readability at tiny sizes.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Warm Sand (Secondary)**\n- Background: Warm Sand (`#e8e6dc`)\n- Text: Charcoal Warm (`#4d4c48`)\n- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)\n- Radius: comfortably rounded (8px)\n- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)\n- The workhorse button — warm, unassuming, clearly interactive\n\n**White Surface**\n- Background: Pure White (`#ffffff`)\n- Text: Anthropic Near Black (`#141413`)\n- Padding: 8px 16px 8px 12px\n- Radius: generously rounded (12px)\n- Hover: shifts to secondary background color\n- Clean, elevated button for light surfaces\n\n**Dark Charcoal**\n- Background: Dark Surface (`#30302e`)\n- Text: Ivory (`#faf9f5`)\n- Padding: 0px 12px 0px 8px\n- Radius: comfortably rounded (8px)\n- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)\n- The inverted variant for dark-on-light emphasis\n\n**Brand Terracotta**\n- Background: Terracotta Brand (`#c96442`)\n- Text: Ivory (`#faf9f5`)\n- Radius: 8–12px\n- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)\n- The primary CTA — the only button with chromatic color\n\n**Dark Primary**\n- Background: Anthropic Near Black (`#141413`)\n- Text: Warm Silver (`#b0aea5`)\n- Padding: 9.6px 16.8px\n- Radius: generously rounded (12px)\n- Border: thin solid Dark Surface (`1px solid #30302e`)\n- Used on dark theme surfaces\n\n### Cards & Containers\n- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces; Dark Surface (`#30302e`) on dark\n- Border: thin solid Border Cream (`1px solid #f0eee6`) on light; `1px solid #30302e` on dark\n- Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media\n- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content\n- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states\n- Section borders: `1px 0px 0px` (top-only) for list item separators\n\n### Inputs & Forms\n- Text: Anthropic Near Black (`#141413`)\n- Padding: 1.6px 12px (very compact vertical)\n- Border: standard warm borders\n- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color moment\n- Radius: generously rounded (12px)\n\n### Navigation\n- Sticky top nav with warm background\n- Logo: Claude wordmark in Anthropic Near Black\n- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm (`#3d3d3a`)\n- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)\n- CTA: Terracotta Brand button or White Surface button\n- Hover: text shifts to foreground-primary, no decoration\n\n### Image Treatment\n- Product screenshots showing the Claude chat interface\n- Generous border-radius on media (16–32px)\n- Embedded video players with rounded corners\n- Dark UI screenshots provide contrast against warm light canvas\n- Organic, hand-drawn illustrations for conceptual sections\n\n### Distinctive Components\n\n**Model Comparison Cards**\n- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid\n- Each model gets a bordered card with name, description, and capability badges\n- Border Warm (`#e8e6dc`) separation between items\n\n**Organic Illustrations**\n- Hand-drawn-feeling vector illustrations in terracotta, black, and muted green\n- Abstract, conceptual rather than literal product diagrams\n- The primary visual personality — no other AI company uses this style\n\n**Dark/Light Section Alternation**\n- The page alternates between Parchment light and Near Black dark sections\n- Creates a reading rhythm like chapters in a book\n- Each section feels like a distinct environment\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px\n- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: generous (estimated 80–120px between major sections)\n\n### Grid & Container\n- Max container width: approximately 1200px, centered\n- Hero: centered with editorial layout\n- Feature sections: single-column or 2–3 column card grids\n- Model comparison: clean 3-column grid\n- Full-width dark sections breaking the container for emphasis\n\n### Whitespace Philosophy\n- **Editorial pacing**: Each section breathes like a magazine spread — generous top/bottom margins create natural reading pauses.\n- **Serif-driven rhythm**: The serif headings establish a literary cadence that demands more whitespace than sans-serif designs.\n- **Content island approach**: Sections alternate between light and dark environments, creating distinct \"rooms\" for each message.\n\n### Border Radius Scale\n- Sharp (4px): Minimal inline elements\n- Subtly rounded (6–7.5px): Small buttons, secondary interactive elements\n- Comfortably rounded (8–8.5px): Standard buttons, cards, containers\n- Generously rounded (12px): Primary buttons, input fields, nav elements\n- Very rounded (16px): Featured containers, video players, tab lists\n- Highly rounded (24px): Tag-like elements, highlighted containers\n- Maximum rounded (32px): Hero containers, embedded media, large cards\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Parchment background, inline text |\n| Contained (Level 1) | `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) | Standard cards, sections |\n| Ring (Level 2) | `0px 0px 0px 1px` ring shadows using warm grays | Interactive cards, buttons, hover states |\n| Whisper (Level 3) | `rgba(0,0,0,0.05) 0px 4px 24px` | Elevated feature cards, product screenshots |\n| Inset (Level 4) | `inset 0px 0px 0px 1px` at 15% opacity | Active/pressed button states |\n\n**Shadow Philosophy**: Claude communicates depth through **warm-toned ring shadows** rather than traditional drop shadows. The signature `0px 0px 0px 1px` pattern creates a border-like halo that's softer than an actual border — it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) — barely visible lifts that suggest floating rather than casting.\n\n### Decorative Depth\n- **Light/Dark alternation**: The most dramatic depth effect comes from alternating between Parchment (`#f5f4ed`) and Near Black (`#141413`) sections — entire sections shift elevation by changing the ambient light level.\n- **Warm ring halos**: Button and card interactions use ring shadows that match the warm palette — never cool-toned or generic gray.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Parchment (`#f5f4ed`) as the primary light background — the warm cream tone IS the Claude personality\n- Use Anthropic Serif at weight 500 for all headlines — the single-weight consistency is intentional\n- Use Terracotta Brand (`#c96442`) only for primary CTAs and the highest-signal brand moments\n- Keep all neutrals warm-toned — every gray should have a yellow-brown undertone\n- Use ring shadows (`0px 0px 0px 1px`) for interactive element states instead of drop shadows\n- Maintain the editorial serif/sans hierarchy — serif for content headlines, sans for UI\n- Use generous body line-height (1.60) for a literary reading experience\n- Alternate between light and dark sections to create chapter-like page rhythm\n- Apply generous border-radius (12–32px) for a soft, approachable feel\n\n### Don't\n- Don't use cool blue-grays anywhere — the palette is exclusively warm-toned\n- Don't use bold (700+) weight on Anthropic Serif — weight 500 is the ceiling for serifs\n- Don't introduce saturated colors beyond Terracotta — the palette is deliberately muted\n- Don't use sharp corners (< 6px radius) on buttons or cards — softness is core to the identity\n- Don't apply heavy drop shadows — depth comes from ring shadows and background color shifts\n- Don't use pure white (`#ffffff`) as a page background — Parchment (`#f5f4ed`) or Ivory (`#faf9f5`) are always warmer\n- Don't use geometric/tech-style illustrations — Claude's illustrations are organic and hand-drawn-feeling\n- Don't reduce body line-height below 1.40 — the generous spacing supports the editorial personality\n- Don't use monospace fonts for non-code content — Anthropic Mono is strictly for code\n- Don't mix in sans-serif for headlines — the serif/sans split is the typographic identity\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | <479px | Minimum layout, stacked everything, compact typography |\n| Mobile | 479–640px | Single column, hamburger nav, reduced heading sizes |\n| Large Mobile | 640–767px | Slightly wider content area |\n| Tablet | 768–991px | 2-column grids begin, condensed nav |\n| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |\n\n### Touch Targets\n- Buttons use generous padding (8–16px vertical minimum)\n- Navigation links adequately spaced for thumb navigation\n- Card surfaces serve as large touch targets\n- Minimum recommended: 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav collapses to hamburger on mobile\n- **Feature sections**: Multi-column → stacked single column\n- **Hero text**: 64px → 36px → ~25px progressive scaling\n- **Model cards**: 3-column → stacked vertical\n- **Section padding**: Reduces proportionally but maintains editorial rhythm\n- **Illustrations**: Scale proportionally, maintain aspect ratios\n\n### Image Behavior\n- Product screenshots scale proportionally within rounded containers\n- Illustrations maintain quality at all sizes\n- Video embeds maintain 16:9 aspect ratio with rounded corners\n- No art direction changes between breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand CTA: \"Terracotta Brand (#c96442)\"\n- Page Background: \"Parchment (#f5f4ed)\"\n- Card Surface: \"Ivory (#faf9f5)\"\n- Primary Text: \"Anthropic Near Black (#141413)\"\n- Secondary Text: \"Olive Gray (#5e5d59)\"\n- Tertiary Text: \"Stone Gray (#87867f)\"\n- Borders (light): \"Border Cream (#f0eee6)\"\n- Dark Surface: \"Dark Surface (#30302e)\"\n\n### Example Component Prompts\n- \"Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius.\"\n- \"Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px).\"\n- \"Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e).\"\n- \"Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px.\"\n- \"Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Reference specific color names — \"use Olive Gray (#5e5d59)\" not \"make it gray\"\n3. Always specify warm-toned variants — no cool grays\n4. Describe serif vs sans usage explicitly — \"Anthropic Serif for the heading, Anthropic Sans for the label\"\n5. For shadows, use \"ring shadow (0px 0px 0px 1px)\" or \"whisper shadow\" — never generic \"drop shadow\"\n6. Specify the warm background — \"on Parchment (#f5f4ed)\" or \"on Near Black (#141413)\"\n7. Keep illustrations organic and conceptual — describe \"hand-drawn-feeling\" style\n\nFile v1.0.2:references/design-systems/clay-DESIGN.md\n\n# Design System Inspiration of Clay\n\n## 1. Visual Theme & Atmosphere\n\nClay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.\n\nThe typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.\n\nWhat makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.\n\n**Key Characteristics:**\n- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical\n- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit\n- Roobert font with 5 OpenType stylistic sets — quirky geometric character\n- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow\n- Space Mono for code and technical labels\n- Generous border radius: 24px cards, 40px sections, 1584px pills\n- Mixed border styles: solid + dashed in the same interface\n- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`\n- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text\n- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas\n\n### Swatch Palette — Named Colors\n\n**Matcha (Green)**\n- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent\n- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green\n- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections\n\n**Slushie (Cyan)**\n- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent\n- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal\n\n**Lemon (Gold)**\n- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold\n- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold\n- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber\n- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber\n\n**Ube (Purple)**\n- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender\n- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple\n- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple\n\n**Pomegranate (Pink/Red)**\n- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink\n\n**Blueberry (Navy Blue)**\n- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy\n\n### Neutral Scale (Warm)\n- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links\n- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links\n- **Dark Charcoal** (`#333333`): Link text on light backgrounds\n\n### Surface & Border\n- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines\n- **Oat Light** (`#eee9df`): Secondary lighter border\n- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections\n- **Dark Border** (`#525a69`): Border on dark sections\n- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)\n\n### Badges\n- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface\n- **Badge Blue Text** (`#3859f9`): Vivid blue badge text\n- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator\n\n### Shadows\n- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature\n- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Roobert`, fallback: `Arial`\n- **Monospace**: `Space Mono`\n- **OpenType Features**: `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on all Roobert text (display uses all 5; body/UI uses `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |\n| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |\n| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |\n| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |\n| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |\n| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |\n| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |\n| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |\n| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |\n| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |\n| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |\n| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |\n| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |\n| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |\n| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |\n\n### Principles\n- **Five stylistic sets as identity**: The combination of `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.\n- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.\n- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.\n- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Transparent with Hover Animation)**\n- Background: transparent (`rgba(239, 241, 243, 0)`)\n- Text: `#000000`\n- Padding: 6.4px 12.8px\n- Border: none (or `1px solid #717989` for outlined variant)\n- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n**White Solid**\n- Background: `#ffffff`\n- Text: `#000000`\n- Padding: 6.4px\n- Hover: oat-200 swatch color, animated rotation + shadow\n- Use: Primary CTA on colored sections\n\n**Ghost Outlined**\n- Background: transparent\n- Text: `#000000`\n- Padding: 8px\n- Border: `1px solid #717989`\n- Radius: 4px\n- Hover: dragonfruit swatch color, white text, animated rotation\n\n### Cards & Containers\n- Background: `#ffffff` on cream canvas\n- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`\n- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)\n- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`\n- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)\n\n### Inputs & Forms\n- Text: `#000000`\n- Border: `1px solid #717989`\n- Radius: 4px\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n### Navigation\n- Sticky top nav on cream background\n- Roobert 15px weight 500 for nav links\n- Clay logo left-aligned\n- CTA buttons right-aligned with pill radius\n- Border bottom: `1px solid #dad4c8`\n- Mobile: hamburger collapse at 767px\n\n### Image Treatment\n- Product screenshots in white cards with oat borders\n- Colorful illustrated sections with swatch background colors\n- 8px–24px radius on images\n- Full-width colorful section backgrounds\n\n### Distinctive Components\n\n**Swatch Color Sections**\n- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)\n- White text on dark swatches, black text on light swatches\n- Each section tells a distinct product story through its color\n\n**Playful Hover Buttons**\n- Rotate -8deg + translate upward on hover\n- Hard offset shadow (`-7px 7px`) instead of soft blur\n- Background transitions to contrasting swatch color\n- Creates a physical, toy-like interaction quality\n\n**Dashed Border Elements**\n- Dashed borders (`1px dashed #dad4c8`) alongside solid borders\n- Used for secondary containers and decorative elements\n- Adds a hand-drawn, craft-like quality\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px\n\n### Grid & Container\n- Max content width centered\n- Feature sections alternate between white cards and colorful swatch backgrounds\n- Card grids: 2–3 columns on desktop\n- Full-width colorful sections break the grid\n- Footer with generous 40px radius container\n\n### Whitespace Philosophy\n- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.\n- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own \"room.\"\n- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.\n\n### Border Radius Scale\n- Sharp (4px): Ghost buttons, inputs\n- Standard (8px): Small cards, images, links\n- Badge (11px): Tag badges\n- Card (12px): Standard cards, buttons\n- Feature (24px): Feature cards, images, panels\n- Section (40px): Large sections, footer, containers\n- Pill (1584px): CTAs, pill-shaped buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, cream canvas | Page background |\n| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |\n| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |\n| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |\n\n**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a \"pressed into clay\" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.\n\n### Decorative Depth\n- Full-width swatch-colored sections create dramatic depth through color contrast\n- Dashed borders add visual texture alongside solid borders\n- Product illustrations with warm, organic art style\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity\n- Apply all 5 OpenType stylistic sets on Roobert headings: `\"ss01\", \"ss03\", \"ss10\", \"ss11\", \"ss12\"`\n- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds\n- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`\n- Use warm oat borders (`#dad4c8`) — not neutral gray\n- Mix solid and dashed borders for visual variety\n- Use generous radius: 24px for cards, 40px for sections\n- Use weight 600 exclusively for headings, 500 for UI, 400 for body\n\n### Don't\n- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable\n- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones\n- Don't mix more than 2 swatch colors in the same section\n- Don't skip the OpenType stylistic sets — they define Roobert's character\n- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction\n- Don't use small border radius (<12px) on feature cards — the generous rounding is structural\n- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset\n- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <479px | Single column, tight padding |\n| Mobile | 479–767px | Standard mobile, stacked layout |\n| Tablet | 768–991px | 2-column grids, condensed nav |\n| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |\n\n### Touch Targets\n- Buttons: minimum 6.4px + 12.8px padding for adequate touch area\n- Nav links: 15px font with generous spacing\n- Mobile: full-width buttons for easy tapping\n\n### Collapsing Strategy\n- Hero: 80px → 60px → smaller display text\n- Navigation: horizontal → hamburger at 767px\n- Feature sections: multi-column → stacked\n- Colorful sections: maintain full-width but compress padding\n- Card grids: 3-column → 2-column → single column\n\n### Image Behavior\n- Product screenshots scale proportionally\n- Colorful section illustrations adapt to viewport width\n- Rounded corners maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Warm Cream (`#faf9f7`)\n- Text: Clay Black (`#000000`)\n- Secondary text: Warm Silver (`#9f9b93`)\n- Border: Oat Border (`#dad4c8`)\n- Green accent: Matcha 600 (`#078a52`)\n- Cyan accent: Slushie 500 (`#3bd3fd`)\n- Gold accent: Lemon 500 (`#fbbd41`)\n- Purple accent: Ube 800 (`#43089f`)\n- Pink accent: Pomegranate 400 (`#fc7981`)\n\n### Example Component Prompts\n- \"Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989).\"\n- \"Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius.\"\n- \"Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px.\"\n- \"Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px.\"\n- \"Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'.\"\n\n### Iteration Guide\n1. Start with warm cream (#faf9f7) — never cool white\n2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube\n3. Oat borders (#dad4c8) everywhere — dashed variants for decoration\n4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert\n5. Hover animations are the signature — rotation + hard shadow, not subtle fades\n6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate\n7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles\n\nFile v1.0.2:references/design-systems/clickhouse-DESIGN.md\n\n# Design System Inspiration of ClickHouse\n\n## 1. Visual Theme & Atmosphere\n\nClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams \"speed\" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.\n\nThe typography is aggressively heavy — Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This \"database for AI\" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point — it mirrors the product's promise of extreme speed and performance.\n\nWhat makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (`#faff69` on `#000000`) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (`#166534`) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.\n\n**Key Characteristics:**\n- Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast\n- Extra-heavy display typography: Inter at weight 900 (Black) up to 96px\n- Dark charcoal card system with #414141 borders at 80% opacity\n- Forest green (#166534) secondary CTA buttons\n- Performance stats as oversized display numbers\n- Uppercase labels with wide letter-spacing (1.4px) for navigation structure\n- Active/pressed state shifts text to pale yellow (#f4f692)\n- All links hover to neon yellow-green — unified interactive signal\n- Inset shadows on select elements creating \"pressed into the surface\" depth\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Neon Volt** (`#faff69`): The signature brand color — a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.\n- **Forest Green** (`#166534`): Secondary CTA color — a deep, saturated green for \"Get Started\" and primary action buttons that need distinction from the neon.\n- **Dark Forest** (`#14572f`): A darker green variant for borders and secondary accents.\n\n### Secondary & Accent\n- **Pale Yellow** (`#f4f692`): Active/pressed state text color — a softer, more muted version of Neon Volt for state feedback.\n- **Border Olive** (`#4f5100`): A dark olive-yellow for ghost button borders — the neon's muted sibling.\n- **Olive Dark** (`#161600`): The darkest neon-tinted color for subtle brand text.\n\n### Surface & Background\n- **Pure Black** (`#000000`): The primary page background — absolute black for maximum contrast.\n- **Near Black** (`#141414`): Button backgrounds and slightly elevated dark surfaces.\n- **Charcoal** (`#414141`): The primary border color at 80% opacity — the workhorse for card and container containment.\n- **Deep Charcoal** (`#343434`): Darker border variant for subtle division lines.\n- **Hover Gray** (`#3a3a3a`): Button hover state background — slightly lighter than Near Black.\n\n### Neutrals & Text\n- **Pure White** (`#ffffff`): Primary text on dark surfaces.\n- **Silver** (`#a0a0a0`): Secondary body text and muted content.\n- **Mid Gray** (`#585858` at 28%): Subtle gray overlay for depth effects.\n- **Border Gray** (`#e5e7eb`): Light border variant (used in rare light contexts).\n\n### Gradient System\n- **None in the traditional sense.** ClickHouse uses flat color blocks and high-contrast borders. The \"gradient\" is the contrast itself — neon yellow-green against pure black creates a visual intensity that gradients would dilute.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter` (Next.js optimized variant `__Inter_d1b8ee`)\n- **Secondary Display**: `Basier` (`__basier_a58b65`), with fallbacks: `Arial, Helvetica`\n- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | Maximum impact, extra-heavy |\n| Display / Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | Section hero titles |\n| Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | Feature section anchors |\n| Sub-heading | Inter / Basier | 24px (1.5rem) | 600–700 | 1.17–1.38 | normal | Card headings |\n| Feature Title | Inter / Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | Small feature titles |\n| Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | Intro paragraphs, button text |\n| Body / Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | Standard body, nav, buttons |\n| Caption | Inter | 14px (0.88rem) | 400–700 | 1.43 | normal | Metadata, descriptions, links |\n| Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | Section overlines, wide-tracked |\n| Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | Code blocks, commands |\n| Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Smallest text |\n| Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | Tags, tiny labels |\n\n### Principles\n- **Weight 900 is the weapon**: The display headline uses Inter Black (900) — a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.\n- **Full weight spectrum**: The system uses 400, 500, 600, 700, and 900 — covering the full gamut. Weight IS hierarchy.\n- **Uppercase with maximum tracking**: Section overlines use 1.4px letter-spacing — wider than most systems — creating bold structural labels that stand out against the dense dark background.\n- **Dual sans-serif**: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between \"data/performance\" (Inter) and \"product/feature\" (Basier) contexts.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Neon Primary**\n- Background: Neon Volt (`#faff69`)\n- Text: Near Black (`#151515`)\n- Padding: 0px 16px\n- Radius: sharp (4px)\n- Border: `1px solid #faff69`\n- Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays\n- Active: text shifts to Pale Yellow (`#f4f692`)\n- The eye-catching CTA — neon on black\n\n**Dark Solid**\n- Background: Near Black (`#141414`)\n- Text: Pure White (`#ffffff`)\n- Padding: 12px 16px\n- Radius: 4px or 8px\n- Border: `1px solid #141414`\n- Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity\n- Active: text to Pale Yellow\n- The standard action button\n\n**Forest Green**\n- Background: Forest Green (`#166534`)\n- Text: Pure White (`#ffffff`)\n- Padding: 12px 16px\n- Border: `1px solid #141414`\n- Hover: same dark shift\n- Active: Pale Yellow text\n- The \"Get Started\" / primary conversion button\n\n**Ghost / Outlined**\n- Background: transparent\n- Text: Pure White (`#ffffff`)\n- Padding: 0px 32px\n- Radius: 4px\n- Border: `1px solid #4f5100` (olive-tinted)\n- Hover: dark bg shift\n- Active: Pale Yellow text\n- Secondary actions with neon-tinted border\n\n**Pill Toggle**\n- Background: transparent\n- Radius: pill (9999px)\n- Used for toggle/switch elements\n\n### Cards & Containers\n- Background: transparent or Near Black\n- Border: `1px solid rgba(65, 65, 65, 0.8)` — the signature charcoal containment\n- Radius: 4px (small elements) or 8px (cards, containers)\n- Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)\n- Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)\n- Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`) — the \"pressed\" effect\n- Neon-highlighted cards: selected/active cards get neon yellow-green border or accent\n\n### Navigation\n- Dark nav on black background\n- Logo: ClickHouse wordmark + icon in yellow/neon\n- Links: white text, hover to Neon Volt (#faff69)\n- CTA: Neon Volt button or Forest Green button\n- Uppercase labels for categories\n\n### Distinctive Components\n\n**Performance Stats**\n- Oversized numbers (72px+, weight 700–900)\n- Brief descriptions beneath\n- High-contrast neon accents on key metrics\n- The primary visual proof of performance claims\n\n**Neon-Highlighted Card**\n- Standard dark card with neon yellow-green border highlight\n- Creates \"selected\" or \"featured\" treatment\n- The accent border makes the card pop against the dark canvas\n\n**Code Blocks**\n- Dark surface with Inconsolata at weight 600\n- Neon and white syntax highlighting\n- Terminal-like aesthetic\n\n**Trust Bar**\n- Company logos on dark background\n- Monochrome/white logo treatment\n- Horizontal layout\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px\n- Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)\n- Section vertical spacing: generous (48–64px)\n\n### Grid & Container\n- Max container width: up to 2200px (extra-wide) with responsive scaling\n- Hero: full-width dark with massive typography\n- Feature sections: multi-column card grids with dark borders\n- Stats: horizontal metric bar\n- Full-dark page — no light sections\n\n### Whitespace Philosophy\n- **Dark void as canvas**: The pure black background provides infinite depth — elements float in darkness.\n- **Dense information**: Feature cards and stats are packed with data, reflecting the database product's performance focus.\n- **Neon highlights as wayfinding**: Yellow-green accents guide the eye through the dark interface like runway lights.\n\n### Border Radius Scale\n- Sharp (4px): Buttons, badges, small elements, code blocks\n- Comfortable (8px): Cards, containers, dividers\n- Pill (9999px): Toggle buttons, status indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Black background, text blocks |\n| Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |\n| Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |\n| Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |\n| Pressed/Inset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active/pressed elements — \"sunk into the surface\" |\n| Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured/selected cards, maximum emphasis |\n\n**Shadow Philosophy**: ClickHouse uses shadows on a black canvas, where they're barely visible — they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the **inset shadow** (Level 4), which creates a \"pressed into the surface\" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Neon Volt (#faff69) as the sole chromatic accent — it must pop against pure black\n- Use Inter at weight 900 for hero display text — the extreme weight IS the personality\n- Keep everything on pure black (#000000) — never use dark gray as the page background\n- Use charcoal borders (rgba(65,65,65,0.8)) for all card containment\n- Apply Forest Green (#166534) for primary CTA buttons — distinct from neon for action hierarchy\n- Show performance stats as oversized display numbers — it's the core visual argument\n- Use uppercase with wide letter-spacing (1.4px) for section labels\n- Apply Pale Yellow (#f4f692) for active/pressed text states\n- Link hovers should ALWAYS shift to Neon Volt — unified interactive feedback\n\n### Don't\n- Don't introduce additional colors — the palette is strictly black, neon, green, and gray\n- Don't use the neon as a background fill — it's an accent and border color only (except on CTA buttons)\n- Don't reduce display weight below 700 — heavy weight is core to the personality\n- Don't use light/white backgrounds anywhere — the entire experience is dark\n- Don't round corners beyond 8px — the sharp geometry reflects database precision\n- Don't use soft/diffused shadows on black — they're invisible. Use border-based depth instead\n- Don't skip the inset shadow on active states — the \"pressed\" effect is distinctive\n- Don't use warm neutrals — all grays are perfectly neutral\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <640px | Single column, stacked cards |\n| Small Tablet | 640–768px | Minor adjustments |\n| Tablet | 768–1024px | 2-column grids |\n| Desktop | 1024–1280px | Standard layout |\n| Large Desktop | 1280–1536px | Expanded content |\n| Ultra-wide | 1536–2200px | Maximum container width |\n\n### Touch Targets\n- Buttons with 12px 16px padding minimum\n- Card surfaces as touch targets\n- Adequate nav link spacing\n\n### Collapsing Strategy\n- **Hero text**: 96px → 72px → 48px → 36px\n- **Feature grids**: Multi-column → 2 → 1 column\n- **Stats**: Horizontal → stacked\n- **Navigation**: Full → hamburger\n\n### Image Behavior\n- Product screenshots maintain aspect ratio\n- Code blocks use horizontal scroll on narrow screens\n- All images on dark backgrounds\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand Accent: \"Neon Volt (#faff69)\"\n- Page Background: \"Pure Black (#000000)\"\n- CTA Green: \"Forest Green (#166534)\"\n- Card Border: \"Charcoal (rgba(65,65,65,0.8))\"\n- Primary Text: \"Pure White (#ffffff)\"\n- Secondary Text: \"Silver (#a0a0a0)\"\n- Active State: \"Pale Yellow (#f4f692)\"\n- Button Surface: \"Near Black (#141414)\"\n\n### Example Component Prompts\n- \"Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border).\"\n- \"Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border.\"\n- \"Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background.\"\n- \"Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity.\"\n- \"Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background.\"\n\n### Iteration Guide\n1. Keep everything on pure black — no dark gray alternatives\n2. Neon Volt (#faff69) is for accents and CTAs only — never large backgrounds\n3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body\n4. Active states use Pale Yellow (#f4f692) — not just opacity changes\n5. All links hover to Neon Volt — consistent interactive feedback\n6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism\n\nFile v1.0.2:references/design-systems/cohere-DESIGN.md\n\n# Design System Inspiration of Cohere\n\n## 1. Visual Theme & Atmosphere\n\nCohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.\n\nThe design language bridges two worlds with a dual-typeface system: CohereText, a custom display serif with tight tracking, gives headlines the gravitas of a technology manifesto, while Unica77 Cohere Web handles all body and UI text with geometric Swiss precision. This serif/sans pairing creates a \"confident authority meets engineering clarity\" personality that perfectly reflects an enterprise AI platform.\n\nColor is used with extreme restraint — the interface is almost entirely black-and-white with cool gray borders (`#d9d9dd`, `#e5e7eb`). Purple-violet appears only in photographic hero bands, gradient sections, and the interactive blue (`#1863dc`) that signals hover and focus states. This chromatic restraint means that when color DOES appear — in product screenshots, enterprise photography, and the deep purple section — it carries maximum visual weight.\n\n**Key Characteristics:**\n- Bright white canvas with cool gray containment borders\n- 22px signature border-radius — the distinctive \"Cohere card\" roundness\n- Dual custom typeface: CohereText (display serif) + Unica77 (body sans)\n- Enterprise-grade chromatic restraint: black, white, cool grays, minimal purple-blue accent\n- Deep purple/violet hero sections providing dramatic contrast\n- Ghost/transparent buttons that shift to blue on hover\n- Enterprise photography showing diverse real-world applications\n- CohereMono for code and technical labels with uppercase transforms\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Cohere Black** (`#000000`): Primary headline text and maximum-emphasis elements.\n- **Near Black** (`#212121`): Standard body link color — slightly softer than pure black.\n- **Deep Dark** (`#17171c`): A blue-tinted near-black for navigation and dark-section text.\n\n### Secondary & Accent\n- **Interaction Blue** (`#1863dc`): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.\n- **Ring Blue** (`#4c6ee6` at 50%): Tailwind ring color for keyboard focus indicators.\n- **Focus Purple** (`#9b60aa`): Input focus border color — a muted violet.\n\n### Surface & Background\n- **Pure White** (`#ffffff`): The primary page background and card surface.\n- **Snow** (`#fafafa`): Subtle elevated surfaces and light-section backgrounds.\n- **Lightest Gray** (`#f2f2f2`): Card borders and the softest containment lines.\n\n### Neutrals & Text\n- **Muted Slate** (`#93939f`): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.\n- **Border Cool** (`#d9d9dd`): Standard section and list-item borders — a cool, slightly purple-tinted gray.\n- **Border Light** (`#e5e7eb`): Lighter border variant — Tailwind's standard gray-200.\n\n### Gradient System\n- **Purple-Violet Hero Band**: Deep purple gradient sections that create dramatic contrast against the white canvas. These appear as full-width bands housing product screenshots and key messaging.\n- **Dark Footer Gradient**: The page transitions through deep purple/charcoal to the black footer, creating a \"dusk\" effect.\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `CohereText`, with fallbacks: `Space Grotesk, Inter, ui-sans-serif, system-ui`\n- **Body / UI**: `Unica77 Cohere Web`, with fallbacks: `Inter, Arial, ui-sans-serif, system-ui`\n- **Code**: `CohereMono`, with fallbacks: `Arial, ui-sans-serif, system-ui`\n- **Icons**: `CohereIconDefault` (custom icon font)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | Maximum impact, serif authority |\n| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | Large section headings |\n| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | Feature section titles |\n| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | Card headings, feature names |\n| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Smaller section titles |\n| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Intro paragraphs |\n| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |\n| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | Smaller buttons, emphasized labels |\n| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, descriptions |\n| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Uppercase section labels |\n| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Smallest text, footer links |\n| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |\n\n### Principles\n- **Serif for declaration, sans for utility**: CohereText carries the brand voice at display scale — its serif terminals give headlines the authority of published research. Unica77 handles everything functional with Swiss-geometric neutrality.\n- **Negative tracking at scale**: CohereText uses -1.2px to -1.44px letter-spacing at 60–72px, creating dense, impactful text blocks.\n- **Single body weight**: Nearly all Unica77 usage is weight 400. Weight 500 appears only for small button emphasis. The system relies on size and spacing, not weight contrast.\n- **Uppercase code labels**: CohereMono uses uppercase with positive letter-spacing (0.16–0.28px) for technical tags and section markers.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost / Transparent**\n- Background: transparent (`rgba(255, 255, 255, 0)`)\n- Text: Cohere Black (`#000000`)\n- No border visible\n- Hover: text shifts to Interaction Blue (`#1863dc`), opacity 0.8\n- Focus: solid 2px outline in Interaction Blue\n- The primary button style — invisible until interacted with\n\n**Dark Solid**\n- Background: dark/black\n- Text: Pure White\n- For CTA on light surfaces\n- Pill-shaped or standard radius\n\n**Outlined**\n- Border-based containment\n- Used in secondary actions\n\n### Cards & Containers\n- Background: Pure White (`#ffffff`)\n- Border: thin solid Lightest Gray (`1px solid #f2f2f2`) for subtle cards; Cool Border (`#d9d9dd`) for emphasized\n- Radius: **22px** — the signature Cohere radius for primary cards, images, and dialog containers. Also 4px, 8px, 16px, 20px for smaller elements\n- Shadow: minimal — Cohere relies on background color and borders rather than shadows\n- Special: `0px 0px 22px 22px` radius (bottom-only rounding) for section containers\n- Dialog: 8px radius for modal/dialog boxes\n\n### Inputs & Forms\n- Text: white on dark input, black on light\n- Focus border: Focus Purple (`#9b60aa`) with `1px solid`\n- Focus shadow: red ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — likely for error state indication\n- Focus outline: Interaction Blue solid 2px\n\n### Navigation\n- Clean horizontal nav on white or dark background\n- Logo: Cohere wordmark (custom SVG)\n- Links: Dark text at 16px Unica77\n- CTA: Dark solid button\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Enterprise photography with diverse subjects and environments\n- Purple-tinted hero photography for dramatic sections\n- Product UI screenshots on dark surfaces\n- Images with 22px radius matching card system\n- Full-bleed purple gradient sections\n\n### Distinctive Components\n\n**22px Card System**\n- The 22px border-radius is Cohere's visual signature\n- All primary cards, images, and containers use this radius\n- Creates a cloud-like, organic softness that's distinctive from the typical 8–12px\n\n**Enterprise Trust Bar**\n- Company logos displayed in a horizontal strip\n- Demonstrates enterprise adoption\n- Clean, monochrome logo treatment\n\n**Purple Hero Bands**\n- Full-width deep purple sections housing product showcases\n- Create dramatic visual breaks in the white page flow\n- Product screenshots float within the purple environment\n\n**Uppercase Code Tags**\n- CohereMono in uppercase with letter-spacing\n- Used as section markers and categorization labels\n- Creates a technical, structured information hierarchy\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px\n- Button padding varies by variant\n- Card internal padding: approximately 24–32px\n- Section vertical spacing: generous (56–60px between sections)\n\n### Grid & Container\n- Max container width: up to 2560px (very wide) with responsive scaling\n- Hero: centered with dramatic typography\n- Feature sections: multi-column card grids\n- Enterprise sections: full-width purple bands\n- 26 breakpoints detected — extremely granular responsive system\n\n### Whitespace Philosophy\n- **Enterprise clarity**: Each section presents one clear proposition with breathing room between.\n- **Photography as hero**: Large photographic sections provide visual interest without requiring decorative design elements.\n- **Card grouping**: Related content is grouped into 22px-rounded cards, creating natural information clusters.\n\n### Border Radius Scale\n- Sharp (4px): Navigation elements, small tags, pagination\n- Comfortable (8px): Dialog boxes, secondary containers, small cards\n- Generous (16px): Featured containers, medium cards\n- Large (20px): Large feature cards\n- Signature (22px): Primary cards, hero images, main containers — THE Cohere radius\n- Pill (9999px): Buttons, tags, status indicators\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background, text blocks |\n| Bordered (Level 1) | `1px solid #f2f2f2` or `#d9d9dd` | Standard cards, list separators |\n| Purple Band (Level 2) | Full-width dark purple background | Hero sections, feature showcases |\n\n**Shadow Philosophy**: Cohere is nearly shadow-free. Depth is communicated through **background color contrast** (white cards on purple bands, white surface on snow),\n\nArchive v1.0.1: 63 files, 382820 bytes\n\nFiles: README.md (2328b), references/design-systems/airbnb-DESIGN.md (14051b), references/design-systems/airtable-DESIGN.md (3559b), references/design-systems/apple-DESIGN.md (20418b), references/design-systems/bmw-DESIGN.md (9812b), references/design-systems/claude-DESIGN.md (20296b), references/design-systems/clay-DESIGN.md (17332b), references/design-systems/clickhouse-DESIGN.md (15394b), references/design-systems/cohere-DESIGN.md (14757b), references/design-systems/coinbase-DESIGN.md (5008b), references/design-systems/composio-DESIGN.md (20914b), references/design-systems/cursor-DESIGN.md (19081b), references/design-systems/elevenlabs-DESIGN.md (15192b), references/design-systems/expo-DESIGN.md (18680b), references/design-systems/ferrari-DESIGN.md (25490b), references/design-systems/figma-DESIGN.md (11617b), references/design-systems/framer-DESIGN.md (17570b), references/design-systems/hashicorp-DESIGN.md (15639b), references/design-systems/ibm-DESIGN.md (19555b), references/design-systems/intercom-DESIGN.md (6421b), references/design-systems/kraken-DESIGN.md (4353b), references/design-systems/lamborghini-DESIGN.md (21122b), references/design-systems/linear-DESIGN.md (22449b), references/design-systems/linear.app-DESIGN.md (16555b), references/design-systems/lovable-DESIGN.md (17387b), references/design-systems/minimax-DESIGN.md (14285b), references/design-systems/mintlify-DESIGN.md (17429b), references/design-systems/miro-DESIGN.md (4797b), references/design-systems/mistral.ai-DESIGN.md (15635b), references/design-systems/mongodb-DESIGN.md (15015b), references/design-systems/notion-DESIGN.md (18349b), references/design-systems/nvidia-DESIGN.md (17093b), references/design-systems/ollama-DESIGN.md (15521b), references/design-systems/opencode.ai-DESIGN.md (15529b), references/design-systems/pinterest-DESIGN.md (11921b), references/design-systems/posthog-DESIGN.md (18561b), references/design-systems/raycast-DESIGN.md (18487b), references/design-systems/renault-DESIGN.md (24297b), references/design-systems/replicate-DESIGN.md (14161b), references/design-systems/resend-DESIGN.md (18431b), references/design-systems/revolut-DESIGN.md (8622b), references/design-systems/runwayml-DESIGN.md (14356b), references/design-systems/sanity-DESIGN.md (21234b), references/design-systems/sentry-DESIGN.md (14753b), references/design-systems/spacex-DESIGN.md (11323b), references/design-systems/spotify-DESIGN.md (12958b), references/design-systems/stripe-DESIGN.md (17801b), references/design-systems/supabase-DESIGN.md (14803b), references/design-systems/superhuman-DESIGN.md (18928b), references/design-systems/tesla-DESIGN.md (22215b), references/design-systems/together.ai-DESIGN.md (14287b), references/design-systems/uber-DESIGN.md (18657b), references/design-systems/vercel-DESIGN.md (19457b), references/design-systems/voltagent-DESIGN.md (26323b), references/design-systems/warp-DESIGN.md (16671b), references/design-systems/webflow-DESIGN.md (4122b), references/design-systems/wise-DESIGN.md (8467b), references/design-systems/x.ai-DESIGN.md (16285b), references/design-systems/zapier-DESIGN.md (18743b), references/field-norms.md (8413b), references/page-template.html (13339b), SKILL.md (37333b), _meta.json (135b)\n\nArchive v1.0.0: 63 files, 382801 bytes\n\nFiles: README.md (2294b), references/design-systems/airbnb-DESIGN.md (14051b), references/design-systems/airtable-DESIGN.md (3559b), references/design-systems/apple-DESIGN.md (20418b), references/design-systems/bmw-DESIGN.md (9812b), references/design-systems/claude-DESIGN.md (20296b), references/design-systems/clay-DESIGN.md (17332b), references/design-systems/clickhouse-DESIGN.md (15394b), references/design-systems/cohere-DESIGN.md (14757b), references/design-systems/coinbase-DESIGN.md (5008b), references/design-systems/composio-DESIGN.md (20914b), references/design-systems/cursor-DESIGN.md (19081b), references/design-systems/elevenlabs-DESIGN.md (15192b), references/design-systems/expo-DESIGN.md (18680b), references/design-systems/ferrari-DESIGN.md (25490b), references/design-systems/figma-DESIGN.md (11617b), references/design-systems/framer-DESIGN.md (17570b), references/design-systems/hashicorp-DESIGN.md (15639b), references/design-systems/ibm-DESIGN.md (19555b), references/design-systems/intercom-DESIGN.md (6421b), references/design-systems/kraken-DESIGN.md (4353b), references/design-systems/lamborghini-DESIGN.md (21122b), references/design-systems/linear-DESIGN.md (22449b), references/design-systems/linear.app-DESIGN.md (16555b), references/design-systems/lovable-DESIGN.md (17387b), references/design-systems/minimax-DESIGN.md (14285b), references/design-systems/mintlify-DESIGN.md (17429b), references/design-systems/miro-DESIGN.md (4797b), references/design-systems/mistral.ai-DESIGN.md (15635b), references/design-systems/mongodb-DESIGN.md (15015b), references/design-systems/notion-DESIGN.md (18349b), references/design-systems/nvidia-DESIGN.md (17093b), references/design-systems/ollama-DESIGN.md (15521b), references/design-systems/opencode.ai-DESIGN.md (15529b), references/design-systems/pinterest-DESIGN.md (11921b), references/design-systems/posthog-DESIGN.md (18561b), references/design-systems/raycast-DESIGN.md (18487b), references/design-systems/renault-DESIGN.md (24297b), references/design-systems/replicate-DESIGN.md (14161b), references/design-systems/resend-DESIGN.md (18431b), references/design-systems/revolut-DESIGN.md (8622b), references/design-systems/runwayml-DESIGN.md (14356b), references/design-systems/sanity-DESIGN.md (21234b), references/design-systems/sentry-DESIGN.md (14753b), references/design-systems/spacex-DESIGN.md (11323b), references/design-systems/spotify-DESIGN.md (12958b), references/design-systems/stripe-DESIGN.md (17801b), references/design-systems/supabase-DESIGN.md (14803b), references/design-systems/superhuman-DESIGN.md (18928b), references/design-systems/tesla-DESIGN.md (22215b), references/design-systems/together.ai-DESIGN.md (14287b), references/design-systems/uber-DESIGN.md (18657b), references/design-systems/vercel-DESIGN.md (19457b), references/design-systems/voltagent-DESIGN.md (26323b), references/design-systems/warp-DESIGN.md (16671b), references/design-systems/webflow-DESIGN.md (4122b), references/design-systems/wise-DESIGN.md (8467b), references/design-systems/x.ai-DESIGN.md (16285b), references/design-systems/zapier-DESIGN.md (18743b), references/field-norms.md (8413b), references/page-template.html (13339b), SKILL.md (37333b), _meta.json (135b)","readmeExcerpt":"Skill: 原型设计技能 Owner: contsun Summary: 通用页面原型设计技能。基于 58种设计风格（默认Figma 风格） UI 的复杂业务系统 HTML 原型开发， 包括标准页面结构、统计卡片、筛选条件、数据表格、弹窗设计。 适用场景：(1) 创建新的管理页面原型 (2) 对照业务文档实现功能模块 (3) 设计弹窗和详情页 (4) 构建带看板和列表视图的页面。 **... Tags: design:1.0.0, html:1.0.0, latest:1.0.2, prototype:1.0.0 Version history: v1.0.2 | 2026-04-17T10:41:59.959Z | auto prototype-design 1.0.2 - 更新技能描述，更突出58种内置设计风格与复杂业务系统适用场景。 - 明确默认采用Figma风格，强调多设计系统切换能力。 - 其他内容与结构保持一致，无","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"mkdir -p project/{pages,styles,scripts}\ncd project"},{"language":"text","snippet":"project/\n├── index.html # 单页应用入口\n├── pages/ # 页面模块\n│ ├── dashboard.html\n│ ├── staff.html\n│ └── ...\n├── styles/\n│ └── main.css # 全局样式\n└── scripts/\n └── main.js # 全局脚本"},{"language":"bash","snippet":"cat references/design-systems/figma-DESIGN.md"},{"language":"html","snippet":"