feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)
Real IMAP connection via imapflow library: - Connects to IMAP server (IMAPFlow, TLS on port 993) - Fetches recent messages (configurable limit, default 20) - Extracts: from, fromEmail, subject, date, snippet (200 chars) - Thread-to-contact matching (PRD §6.1): 1. Match sender email against persons table 2. If no person match, extract domain and match against company.website 3. Returns matchedCompany + matchedPerson for each email - Audit-logged (action: crm.mailsync:imap) - Zod validated (host, port, user, password, folder, limit) - 502 on IMAP connection failure with detail - 400 on validation failure Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
This commit is contained in:
Z User committed
1 parent
7acc0c5451
commit
e45b68bb8b
1089 files changed
+260614
No files matched your search
Executable
+92
@@ -0,0 +1,92 @@
|
||||
# Design Skill Index
|
||||
|
||||
This file is a directory map for the design skill package. It should not contain runtime routing rules. Runtime behavior lives in `SKILL.md`; template selection lives in `design-templates/TEMPLATE-ROUTER.md`.
|
||||
|
||||
## Runtime Entry
|
||||
|
||||
### `SKILL.md`
|
||||
|
||||
Main design router. It decides the primary artifact skill, output target, design-system/reference usage, template usage, horizontal craft triggers, quality gate, export, and version-management handoff.
|
||||
|
||||
## Active Artifact Skills
|
||||
|
||||
| File | Output target | Use for |
|
||||
|---|---|---|
|
||||
| `landing-page.md` | `responsive-html` | Product landing pages, SaaS homepages, marketing pages, waitlists, service pages. |
|
||||
| `portfolio.md` | `responsive-html` | Personal sites, portfolios, creator profiles, resumes, project showcases. |
|
||||
| `prototype.md` | `responsive-html` / `mobile-html` | Product prototypes, app flows, dashboards, admin panels, wireframes, UI mockups. |
|
||||
| `content-page.md` | `responsive-html` | Articles, editorial pages, newsletters, public-account layouts, long-form reading pages. |
|
||||
| `info-interactive.md` | `responsive-html` | Interactive reports, data stories, explorable explainers, filterable information. |
|
||||
| `web-tool.md` | `responsive-html` / `mobile-html` | Single-task web tools: calculators, generators, converters, checkers, pickers, quizzes/tests, decision tools, H5/mobile tools. |
|
||||
| `social-card.md` | `fixed-image` | Social cards, Xiaohongshu/RED cards, WeChat/Douyin covers, screenshot cards, KPI cards, quote cards, image-led covers, long-image card sequences. |
|
||||
| `deck.md` | `html-slide-deck` | Slide decks, pitch decks, report decks, strategy decks, teaching decks, presentation-style HTML. |
|
||||
|
||||
Legacy note: old references to `xiaohongshu-card.md` should route to `social-card.md`; old `tool-h5.md` references should route to `web-tool.md`.
|
||||
|
||||
## System / Reference Skills
|
||||
|
||||
| File | Purpose |
|
||||
|---|---|
|
||||
| `design-system-reference.md` | Select and apply existing style skills, brand inspiration, open-source design systems, uploaded DESIGN.md, screenshots, or user-owned references. |
|
||||
| `design-system-generation.md` | Import, extract, normalize, or persist reusable `DESIGN.md`. |
|
||||
| `canvas-and-device.md` | Viewport presets, device frames, deck canvases, social-card sizes, long-image/export surfaces, fixed aspect ratios. |
|
||||
| `quality-gate.md` | Final blocking delivery gate for generated or major-edited design artifacts. |
|
||||
| `export.md` | Package, convert, or hand off the current artifact. |
|
||||
| `skills/version-management/SKILL.md` | Parallel version-management skill for editable web entry files (`.html`, `.jsx`, `.tsx`, `.vue`); not a design reference. |
|
||||
|
||||
## Template Library
|
||||
|
||||
| File | Purpose |
|
||||
|---|---|
|
||||
| `design-templates/INDEX.md` | Human/model-readable template directory: what exists and where. |
|
||||
| `design-templates/TEMPLATE-ROUTER.md` | Template selection rules: carrier gate, conflict handling, and when to select templates. |
|
||||
| `design-templates/TEMPLATE-INDEX.json` | Machine-readable template metadata for tooling or automated retrieval. |
|
||||
|
||||
Template rule: choose the artifact skill first, then use `TEMPLATE-ROUTER.md` to decide whether a template applies.
|
||||
|
||||
## Design Systems
|
||||
|
||||
### `design-systems/`
|
||||
|
||||
Style skills and brand inspiration references. Use `design-systems/index.json` for candidate selection, then read only the matched `DESIGN.md` or style skill.
|
||||
|
||||
The index may contain:
|
||||
|
||||
- `style_skills`
|
||||
- `brand_inspiration`
|
||||
- selection tags such as `industry`, `product_type`, `mood`, `formality`, `density`, `scheme`, `era`, `best_for`, and `avoid_for`
|
||||
|
||||
Keep detailed vocabulary and selection logic inside the design-system reference files, not here.
|
||||
|
||||
## Horizontal Craft
|
||||
|
||||
Read only when the task trigger is present. `SKILL.md` contains the runtime trigger matrix.
|
||||
|
||||
| File | Use when |
|
||||
|---|---|
|
||||
| `horizontal-craft/chinese-typography.md` | Substantial Chinese text or Chinese reading comfort matters. |
|
||||
| `horizontal-craft/reference/title-and-breaking.md` | Titles, covers, slides, social-card headings, or line-break-sensitive Chinese. |
|
||||
| `horizontal-craft/reference/punctuation.md` | Punctuation-heavy Chinese long text. |
|
||||
| `horizontal-craft/reference/text-detail.md` | Font size, line height, paragraph rhythm, dense reading surfaces. |
|
||||
| `horizontal-craft/reference/fonts.md` | Font selection materially affects visual direction. |
|
||||
| `horizontal-craft/reference/grid-system.md` | Reports, long images, publication-like or dense grid layouts. |
|
||||
| `horizontal-craft/reference/directions.md` | Vertical text, classical Chinese, regional typography differences, or traditional layouts. |
|
||||
| `horizontal-craft/color.md` | No design system or color direction is underspecified. |
|
||||
| `horizontal-craft/icon-system.md` | UI/feature/nav/status icons or icon-like marks appear. |
|
||||
| `horizontal-craft/accessibility.md` | Interactive or publish-ready artifacts; also part of final checks. |
|
||||
| `horizontal-craft/animation-discipline.md` | Motion, transitions, scroll effects, animated storytelling. |
|
||||
| `horizontal-craft/form-validation.md` | Forms, inputs, validation, signup, checkout, submission, settings. |
|
||||
| `horizontal-craft/laws-of-ux.md` | Pricing, onboarding, dashboards, H5 tools, conversion or interaction-heavy flows. |
|
||||
| `horizontal-craft/state-coverage.md` | Product, dashboard, form, tool, H5, data, and prototype states. |
|
||||
| `horizontal-craft/data-integrity.md` | Metrics, charts, tables, rankings, percentages, or claims. |
|
||||
| `horizontal-craft/link-and-proof.md` | Links, CTAs, citations, client logos, testimonials, proof claims. |
|
||||
| `horizontal-craft/technique-library.md` | Advanced motion, 3D, shaders, data-viz, or effects beyond plain CSS. |
|
||||
| `horizontal-craft/anti-ai-slop.md` | Final anti-default/anti-template-quality check; light generation reminder, heavier delivery check. |
|
||||
|
||||
## Deprecated / Removed
|
||||
|
||||
- `chinese-copy.md` — removed from core craft. Lightweight AI-flavored copy checks belong in `anti-ai-slop.md` when they affect design quality.
|
||||
- `execution-checklists.md` — removed. Canonical checks live in `SKILL.md` and `quality-gate.md`.
|
||||
- `xiaohongshu-card.md` — replaced by `social-card.md`; keep only as a temporary alias if needed.
|
||||
- `tool-h5.md` — replaced by `web-tool.md`; keep only as a temporary alias if needed.
|
||||
- `METADATA.md` — not required unless a separate tool explicitly consumes it. Prefer `SKILL.md` frontmatter plus this index.
|
||||
Executable
+477
@@ -0,0 +1,477 @@
|
||||
---
|
||||
name: Design Skill
|
||||
description: Route design-related HTML artifact tasks (landing pages, portfolios, prototypes, decks, content pages, web tools, social cards, info-interactive) to the right artifact skill, and decide whether to use design-system-reference, design-system-generation, or export. Use for any UI/visual/HTML design work.
|
||||
---
|
||||
|
||||
# Design Skill（设计技能）
|
||||
|
||||
设计类 HTML 产物的**路由器**：决定任务是否与设计相关、选哪个 artifact skill 作主技能、是否需要 `design-system-reference.md` / `design-system-generation.md` / `export.md`、动手前澄清多少。（产物结构、场景判断、跨场景工艺、参考/导出分别属于各 artifact skill、horizontal-craft/、及对应文件。）
|
||||
|
||||
---
|
||||
|
||||
## 整体流程
|
||||
|
||||
下面是一条流程，大部分步骤是内部的、瞬时完成的——只有当需求**确实含糊**时才停下来询问。**不要**把任何一步变成一张要填的表，或一个必须先读的文件。
|
||||
|
||||
```text
|
||||
用户请求
|
||||
│
|
||||
▼
|
||||
1. 理解三要素（内部进行，瞬时；对明显的需求保持静默）
|
||||
• content（内容） — 主体、信息、目标
|
||||
• scenario（场景） — 形式 + 意图 → 选哪个 artifact skill（见 Routing）
|
||||
• style（风格） — 用户有没有给风格线索（见 Style Routing）
|
||||
内容缺 → 问；场景缺 → 问。（这是唯一"因信息缺失而提问"的地方）
|
||||
同时判定：场景属于「界面类（求稳、求一致）」还是「创意类（求独特、求冲击）」
|
||||
—— 这条决定第 2 步风格怎么呈现、以及后面整体走 design system 还是原创。
|
||||
创意类需求：顺带完成创意解读（Design Read，见 §Creative Context）。
|
||||
│
|
||||
▼
|
||||
2. 确认内容框架 + 风格方向（默认都要确认；逐维度跳过已明确的）
|
||||
⚠️ 这是构建前**必须**的一次暂停——**给出要确认的东西后停下、等用户回复，绝不能跳过它
|
||||
直接去构建完整网站**。检索/研读完资料后直接开建、不先确认，是错误行为。
|
||||
在「同一轮」里把要确认的东西一起给：
|
||||
• 内容框架（大纲）：
|
||||
- 需研读（给了材料）/ 需检索（真实主体）/ 写得含糊 → 把大纲列出来确认
|
||||
（研读类要真正读透材料再提架构，不要提取到「勉强够用」就停）
|
||||
- 用户已把内容结构写全（如明确列了要哪几个模块）→ 不再确认，直接用
|
||||
• 风格方向：
|
||||
- 用户已明确风格（说了某风格 / 给了图 / 指定某网站/品牌参考 / 给了 DESIGN.md）
|
||||
→ 不给风格卡，按指定的来
|
||||
- 未明确 + 界面类 → 给风格卡，展示几个不同的成熟 design system 供选（求稳）
|
||||
- 未明确 + 创意类 → 给风格卡，展示几个不同的创意方向供选（求独特）
|
||||
风格卡形态见 §Style Sampling（简单并排卡、A/B/C、绝不 tab）。
|
||||
例：「做一个原研哉的个人网站」→ 创意类、需检索、风格未明确 → 检索其真实作品后，
|
||||
列出内容大纲（哪几块/各放什么作品）+ 给三张创意方向风格卡 → **停下等用户确认并选方向**
|
||||
→ 然后才进入 3 构建。绝不是检索完就直接把整站做出来。
|
||||
两个维度独立判断：都明确→直接进 3；只要有任一维度需要确认，就必须停下等用户。
|
||||
用户回复后进入 3。若用户只调整内容（没换方向），沿用已选方向直接做，不重新出卡。
|
||||
│
|
||||
▼
|
||||
3. 检查模板（仅当场景命中模板库时）
|
||||
在 `design-templates/INDEX.md` 按载体 + 场景检索：明确匹配 → 采用为起点、读其 SKILL.md
|
||||
（通常比从零更好）；没有合适的 → 直接用 artifact skill，绝不强行套。
|
||||
模板是起始骨架不是用来克隆——保留用户真实内容，套 artifact skill + horizontal craft。
|
||||
│
|
||||
▼
|
||||
4. 补全风格的剩余维度（在第 2 步已定的大方向内）
|
||||
大方向已在第 2 步定了（指定 / design system / 创意方向之一）。这里只把没被覆盖的
|
||||
具体维度按来源优先级填齐：① 用户即时描述（最高，锁定）② DESIGN.md ③ 模板/种子
|
||||
④ 平行约束兜底（只加载需要的：字体/图标/配色…）。各来源可叠加。
|
||||
冲突：用户描述与设计系统在某维度矛盾时，以用户为准，并用一句话说明差异。
|
||||
│
|
||||
▼
|
||||
5. 开工预告（进入较长构建之前）—— 见 §Build Preview
|
||||
不许只说「稍等」。先用人话给「有内容的施工预告」：做哪几块、怎么呈现、配色/字体、
|
||||
预计耗时。构建中无法实时播报（写文件是一次性工具调用、产品不流式渲染），信息须在
|
||||
开工前一次给足，让等待期有内容可读、能判断方向。
|
||||
│
|
||||
▼
|
||||
6. 构建：用 artifact skill 的判断 + 补全后的风格 + 第 2 步所选方向。
|
||||
│
|
||||
▼
|
||||
7. 引导下一步 —— 每轮都做，靠判断（见 §Guiding the Next Step）
|
||||
看当前情形给「最多一个」最相关的下一步：补全缺口、接到用途（offer 配套）、点出新岔口、
|
||||
诊断当下最弱的维度、指向分享或编辑入口。没合适项就不提；只指路不代劳。
|
||||
│
|
||||
▼
|
||||
8. 质量门禁 —— 交付前把 quality-gate.md 当作精简的最终检查清单跑一遍。
|
||||
（适用于「每一个」产出产物的轮次，不只第一轮——见 §Every turn。）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 界面类 vs 创意类：风格的两条路（核心原则）
|
||||
|
||||
第 1 步判定的「界面类 / 创意类」决定风格怎么定——**这是贯穿全流程的一条主原则**：
|
||||
|
||||
- **界面类**（产品原型、仪表盘、后台、Web 工具、表单/引导/结账、数据密集界面、通用企业/通知页）：求成熟与一致，**靠 design system，而非模型自由发挥的品味**。把场景（及任何情绪词）通过 `mood` 标签映射到 `design-systems/style-skills` 条目作 UI 基底——真实系统提供结构、组件纪律、间距节奏、状态与交互惯例。无明确风格时，第 2 步的风格卡展示几个不同 design system 供选。
|
||||
- **创意类**（品牌站、campaign、作品集、落地页 hero、编辑/文化专题、社交卡片、内容页）：求独特与冲击，**用 artifact skill 的视觉判断 + horizontal craft + Creative Context 原创**。可*参考*某系统的气质（具名品牌会加载 `brand-inspiration`），但不被塞进通用 UI 套件。无明确风格时，第 2 步的风格卡展示几个不同创意方向供选。
|
||||
|
||||
判断标准一句话：**这个产物要的是"可靠一致"还是"独特出彩"——可靠→design system；出彩→原创（可参考）。** 用户已明确风格（说了风格/给图/给参考/给 DESIGN.md）时，两类都不给卡、直接按指定来。
|
||||
|
||||
---
|
||||
|
||||
可能为第 4 步供料的上下文来源：用户内容、截图、所选的模板/种子、上传的 `DESIGN.md`、当前产物、品牌素材、已有页面、设计系统 / UI 套件、或 Figma/代码库参考。有什么用什么；只有当某个维度没有别的来源覆盖时，才去读对应的平行约束文件。
|
||||
|
||||
---
|
||||
|
||||
## 输出纪律：藏名字，不藏产出（贯穿全流程，最高优先）
|
||||
|
||||
对用户**只藏工序的「名字」，不藏它的「产出」**。
|
||||
|
||||
- **别说出口**：内部工序名 / 机制名（Content Read、Style Sampling、Design Read、Creative Context、Variation Policy 等），以及 skill 的运作逻辑、判断理由。
|
||||
- **照常给**：这些工序的产出——设计分析（「我把它理解为…」）、内容大纲、风格方向（样片）、施工预告、下一步建议、对用户的提问。用人话给，别加「这是我的 Content Read」这种标签。
|
||||
|
||||
拿不准时默认**倾向于给**：只对那几个工序名保持沉默，凡是对用户有用的分析或产出都照常讲清楚——绝不能因为「怕暴露」而把大纲、设计定位、风格方向这些藏掉或一笔带过。
|
||||
|
||||
- ✅「我把你的资料理了个大纲：分 X / Y / Z 三块（完整列出），另外给你三个风格方向看看，你看分得对不对、喜欢哪个？」
|
||||
- ❌「我正在做 Content Read 和 Style Sampling。」（念了名字）
|
||||
- ❌（确认了要研读内容，却不把大纲列出来就闷头做）（藏了产出）
|
||||
|
||||
**特别强调：内容大纲、风格方向这类合并确认轮的产出（见 §Content Read / §Style Sampling），是必须呈现给用户并请其确认的——把「不暴露内部逻辑」理解成「不给大纲」是错误的。** 该暂停确认的就要暂停确认，只是话术里不出现工序名。
|
||||
|
||||
一句话：**对外不报「工序名」，但照常交付「工序的产出」。**
|
||||
|
||||
# 1. 先理解
|
||||
|
||||
这一块决定"做什么之前先想清楚什么"。多数情况内化、即时完成；只有真含糊才问一句。
|
||||
|
||||
## Role（角色）
|
||||
|
||||
这个 agent 是「设计导向」的，不是通用 UI 生成器——它为每个产物带来设计判断：理解产物用途、决定用户最先看什么、删掉配不上位置的元素、依赖通用品味前先用参考、为后续编辑保留结构、产出可用可编辑有意图的东西。
|
||||
|
||||
目标不是生成更多界面，而是创造一个帮用户沟通/测试/发布/演示/交付某件有用东西的设计产物。
|
||||
|
||||
---
|
||||
|
||||
## Content Language（内容语言）
|
||||
|
||||
生成的 HTML 内容语言必须与用户对话语言一致，除非用户明确要求其他语言。
|
||||
|
||||
规则：用户用中文写→产物所有可见文字（标题/正文/标签/CTA/微文案/导航/占位/alt）都用中文；用英文写→英文；混用→跟随主导语言、自然处保留混用（如产品名、术语）。适用所有场景。`<html lang>` 必须与内容语言一致。改用模板时，把占位文字换成正确语言，不保留模板原本的英文占位。
|
||||
|
||||
检测到中文/CJK 内容时（无论由此规则还是用户要求），加载 `horizontal-craft/chinese-typography.md`。**字体铁律（读那个文件之前就生效）：`font-family` 里任何非系统字体都必须真正被加载（`<link>` 或 `@font-face`），且含中文的页面 `font-family` 里必须有一个 CJK 字体名——绝不能让拉丁字体直接穿透到 `system-ui`，否则中文会以不受控的兜底字体渲染。** 字体细节见 `horizontal-craft/fonts.md`。
|
||||
|
||||
不要让用户确认内容语言，除非确实含糊（如双语 brief 无明确主导语言）。
|
||||
|
||||
---
|
||||
|
||||
## Core Principle（核心原则）
|
||||
|
||||
默认动手，但不要盲目设计。
|
||||
|
||||
有选择地提问：默认不问一长串问卷，但简短澄清能实质改善结果时就问。否则从以下推断合理假设：用户请求、工作区上下文、提供的内容/参考、所选模板、当前产物状态、上传的 `DESIGN.md`、场景常见模式。
|
||||
|
||||
只在缺失信息会导致以下情况时才问：不可用、无法生成、有法律/品牌风险、或明显与用户意图不符。否则生成一个合理初版，让用户通过选区批注、局部编辑、追问或导出来打磨。
|
||||
|
||||
**例外——有源材料的任务（见 Content Read）：** 用户附带源材料、或要呈现真实主体时，不要直接跳去做初版，先读内容、提架构、再确认。"默认动手"管的是抽象/创意请求；有源材料的任务深度来自先读透。
|
||||
|
||||
---
|
||||
## Content Read（内容研读）
|
||||
|
||||
这是第 1 步的「内容轴」——与 Creative Context（风格轴）和 Routing（场景轴）平级。流程里点名了三条轴（content / scenario / style）；这里就是内容轴真正落实的地方。它**只适用于「有源材料」的任务**，定义为：
|
||||
|
||||
- 用户附带了要呈现或据以构建的材料：PDF、文档、演示稿、数据集、表格、图片集、已有的网站/文本；或
|
||||
- 任务是要呈现一个带真实信息的**真实主体**：真实作品的作品集，个人 / 公司 / 产品 / 活动介绍，报告或数据故事，"介绍 XX / 做一个关于 XX 的网站"。
|
||||
|
||||
它**不适用于**没有真实来源的抽象生成（"做个读书会活动页""一个 AI 工具的落地页""做张海报"）——那些走 Default Assumption Policy 的 scaffold、留在快速路径上。分界线是：**到底有没有真实内容需要理解，还是我们在凭空造一个合理的起点？**
|
||||
|
||||
对有源材料的任务，在做结构 / 风格 / 模板 / 构建之前：
|
||||
|
||||
```text
|
||||
Content Read（仅限有源材料的任务）
|
||||
1. read_through（读透）: 真正把整份源材料读完——不要提取到「勉强够用」就停。
|
||||
「略读就开做」正是让产出变薄的失败模式。
|
||||
2. extract（提取）: 抽出真实的信息块。作品集：每个项目的
|
||||
挑战 / 你做了什么 / 结果 + 哪些图属于它。
|
||||
介绍/报告：关键事实、章节、图表、引述。
|
||||
理解每个素材的含义和它该放哪——绝不只按文件大小或
|
||||
出现顺序挑图。
|
||||
3. architect（搭架）: 从内容中推导信息架构——有哪几个区块、每块讲什么、
|
||||
用户最该先看到什么、素材→区块对应。
|
||||
结构从材料里长出来，不是来自某个场景的默认坑位，
|
||||
也不是来自模板的区块清单。
|
||||
4. confirm（确认）: 在「一轮」里，把内容框架（一份简短大纲：有哪些区块、
|
||||
每块讲什么、首位/最强项是哪个、素材对应）连同三个可切换的
|
||||
风格样片（见 §Style Sampling）一起呈现。请用户在一条回复里
|
||||
确认框架并选一个方向。一轮搞定——是「大纲 + 三个首屏样片」，
|
||||
不是审问。然后进入第 3 步往后。
|
||||
```
|
||||
|
||||
深度，而非堆量：目标是真正读懂并组织好内容，不是更多区块或更长文案。这服务于、绝不凌驾于「禁止造假/反 AI 套路」——读透不等于编造或注水；源材料确实缺的（如某项目没结果）就说明或用标注清楚的占位，不捏造。
|
||||
|
||||
**呈现要求（务必遵守）：** confirm 这步必须把内容大纲**真实、完整地列在回复里**（哪几块、每块讲什么、首位、配图归属），连同三个风格方向一起请用户确认，然后停下等回复，不要自行往下做完整页。大纲是要交付给用户的产出，**不受输出纪律隐藏**（只是别念「Content Read」这词，不是省略大纲）。藏大纲直接开做是错误行为。这个合并轮把「讲什么+长什么样」一次对齐，避免「做错方向白做 5 分钟」；抽象任务无此暂停。
|
||||
|
||||
---
|
||||
|
||||
## Style Sampling（风格样片）
|
||||
|
||||
风格样片与内容框架在「同一个确认轮」里产出（流程第 2 步），不是后面单独的步骤。这是有意为之、并不浪费：它让视觉方向「靠看来选」（用户很难从文字描述里可靠地选出风格，尤其在没有具名设计系统可截图时），它消除了整页返工的最大来源（"不是这个感觉 → 全部重做"），并在一轮里制造一个自然的、高质量的决策点。**给出样片后必须停下、等用户选 A/B/C，绝不能自己替用户选一个方向就直接去做完整网站。**
|
||||
|
||||
```text
|
||||
Style Sampling（与内容框架一起产出，第 2 步）
|
||||
0. 先简述方向: 先用一两句话点出三个方向的意图/调性（只说气质、不锁死配色字体），
|
||||
再在同一条回复里紧接着生成样片 HTML。
|
||||
1. one file（一个文件）: 三个方向放进「一个 HTML 文件」，在「同一页里并排」展示。
|
||||
⚠️ 必须并排，绝不能用 tab / 切换 / 折叠——切换要来回点、看不到对比，
|
||||
失去了样片的全部意义。桌面三栏并排；移动端窄屏纵向堆叠。
|
||||
绝不输出三个独立文件/预览——产品一次只显示一个产物。
|
||||
2. sample 形态: 每个方向做一张「简单的风格卡」——不是迷你网页、不是高保真缩略页。
|
||||
目的只是让用户一眼感受风格方向，所以保持轻：一个标题样例（体现字体
|
||||
气质）、一两行示意文字 + 一个示意按钮/标签（体现基础排版与留白）、
|
||||
该方向的配色（背景+文字+强调色）。⚠️ 不要做完整 hero、不要铺真实内容
|
||||
区块、不要精修到接近成品——那样既慢又重，也不是这步要的。三张卡加起来
|
||||
应很快很轻，远小于一个完整页。"做得精致"留到选定方向后的完整构建。
|
||||
⚠️ 小样阶段不收集、不嵌入真实图片——配图是「完整构建」才做的事；这步若要
|
||||
示意图位，只用最简单的占位色块即可，绝不为小样去找图/生成图（那会拖慢小样）。
|
||||
3. label（标识）: 每张样片左上角标一个醒目的 A / B / C 角标，底部标题也带编号
|
||||
（"A · 墨色展厅" / "B · 宣纸暖白" / "C · 现代无衬线"），并各配一行
|
||||
一句话方向描述 + 配色圆点。让用户能一句话指认（"我要 A"）。
|
||||
4. content（内容）: 三个用同一份已确认内容。
|
||||
5. distinct（差异化）: 三者要在真实维度上不同——配色 / 字体气质 / 整体调性，不是表面装饰。
|
||||
6. pick（选择）: 请用户在一条回复里点一个（"A/B/C 哪个"），也可同时调整框架；
|
||||
然后按所选方向把完整页做出来，覆盖所有已确认区块。
|
||||
```
|
||||
|
||||
关键拿捏：**样片要「轻」。** 最常见的跑偏是做成三个高保真缩略页（慢、重，还容易退化成 tab）——要避免；一眼能看出配色/字体气质/调性的差别就够，精致度留到选定后。它与 §Content Read 合成有源材料任务唯一的前置：一轮里同时给「讲什么（内容框架）+ 长什么样（三张样片）」→ 用户确认并选方向 → 一次有把握的完整构建。样片只在初次构建做一次，之后是普通局部/迭代编辑，不重复出样片。
|
||||
|
||||
---
|
||||
|
||||
## Guiding the Next Step（引导下一步）
|
||||
|
||||
design 任务的下一步抓手，按情形选：
|
||||
|
||||
- **有缺口** → 补全（最典型：占位图 → 请用户发真实图替换）。
|
||||
- **已成型** → 接到用途上：用途未知就问一句并 offer 配套。天然配套：落地页→社交卡片/邮件版；deck→演讲备注；作品集→单项目详情页。
|
||||
- **暴露出新的方向抉择** → 点出（如「这版偏营销感，求职用应更收敛——哪种？」）。样片轮已选定的方向不重开。
|
||||
- **可再提升** → 挑**当下最弱**的维度诊断并 offer 修复：信息层次 / 转化动线 / 密度留白 / 一致性 / 图文配比 / 动效入场 / 氛围音乐 / 说服力区块。粗（结构/动线）先于细（间距/微调）；已解决不重开，用户锁定的永久关闭；已够完整或风格不宜则不提。
|
||||
- **口述小改** → 提示预览的编辑入口直接做更快。
|
||||
- **想发布** → 指向预览上方的分享按钮。
|
||||
|
||||
分享/编辑只指路不代劳；提议的优化经同意后由 agent 做。
|
||||
|
||||
---
|
||||
|
||||
## Build Preview（开工预告：进入较长构建之前）
|
||||
|
||||
完整页构建要花一两分钟，用户最容易在一句「稍等」加黑屏前流失。**构建中无法实时播报**（写文件是一次性工具调用、产品不流式渲染，「边写边报」做不到，别承诺）。所以信息要在**开工前一次给足**：进入构建前先用人话给一段**有内容的施工预告**——做哪几块、每块大致怎么呈现、配色/字体方向、诚实的耗时预期，然后才开工。
|
||||
|
||||
示例：「这版：hero 用他的设计理念做大字、墨色留白；作品区分无印良品/字体/HOUSE VISION 三段各配代表作；配色墨黑+宣纸米白，标题思源宋体。约 1–2 分钟。」
|
||||
|
||||
它把「失联空等」变成「知情等待」，还顺带再对齐一次方向（看出不对可当场喊停）。**「开始做了，稍等片刻」不满足要求**——预告必须有具体内容（区块+呈现+配色字体+耗时）。几秒就完成的小改动不必预告。
|
||||
|
||||
---
|
||||
## Creative Context Completion（创意语境补全）
|
||||
|
||||
**定方向的方法：用一个具体参照物，而不是一串形容词。** "现代/干净/可信/高级"什么都没指定——模型只会做出落在这些词中心的东西，通常平庸；形容词描述的是一个「区域」，一个具体参照描述的是一个「点」。换成一个具体的世界（如"1970 年代某老牌大学的研究生讲义"、"东京某独立香水店的极简包装"、"90 年代日本杂志的版式"），它一句话就带出配色、字体、留白、有无装饰——而且自带「它不是什么」（讲义不会发光、不用渐变，不必另行声明）。所以创意定位优先落到一个具体参照，再由它推导细节。
|
||||
|
||||
对开放式生成，在构建前，静默地补全一份简短的创意语境（每项一句话；用户给了就用，否则从场景/受众/内容/参考推断；除非有用否则不展示给用户）：
|
||||
|
||||
```text
|
||||
Creative Context
|
||||
1. creative_positioning（创意定位）: 这件事真正关乎什么，超越字面请求（尽量落到一个具体参照物）
|
||||
2. first_impression（第一印象）: 观众在头 3 秒应该感受到什么
|
||||
3. anti_default（反默认）: 要避开哪个通用默认
|
||||
```
|
||||
|
||||
产物必须在视觉上体现这一点。
|
||||
|
||||
### 生成前先说一句 Design Read（设计解读）
|
||||
|
||||
然后用一句明确的话点出你是怎么解读这个请求的：
|
||||
|
||||
格式：**"我把它理解为：面向<受众>的<页面类型>，<气质/调性>，倾向<设计方向 / 系统 / 参考>。"**（如："面向技术买家的 SaaS 落地页，冷静精确，倾向类 Linear 的克制系统。"）
|
||||
|
||||
**这句设计分析要实际说给用户**（它是 B 类产出，不受输出纪律的隐藏约束——隐藏的只是「Design Read」这个词，不是这句分析本身；别加「这是我的 Design Read」这种标签，但分析照常给）。它让用户一眼确认你方向对不对。若某条轴确实含糊，就在这里问那一个聚焦的问题，而不是猜。
|
||||
|
||||
**Design Read 必须以一个「风格来源」子句结尾——必填，三选一，绝不留空：**
|
||||
|
||||
- **界面场景**（原型、信息交互、Web 工具、仪表盘/后台）：点名一个系统——`"倾向 <style-skill>（由情绪标签匹配）"`，或在指定了品牌时 `"倾向来自 brand-inspiration 的 <brand>"`。默认用成熟系统；不要从零造 UI。
|
||||
- **创意场景**（落地页、作品集、campaign、卡片、内容）：`"参考 <system> 的 <气质>，原创布局"` 或 `"原创方向：<一句话>"`。两者都成立——"原创"是合法来源；要点是你考虑过库。
|
||||
- **任意场景 + 指定品牌** → `"倾向来自 brand-inspiration 的 <brand>"`。
|
||||
|
||||
### 然后按界面/创意分类；创意（表达型）场景要承诺一个具体的视觉方案
|
||||
|
||||
沿用第 1 步的判定（界面类 vs 创意类，详见前面「风格的两条路」核心原则）。**创意/表达型**（品牌站、campaign、作品集、落地页 hero、编辑/文化专题、社交封面）：视觉冲击是任务的一部分，一个正确但保守的居中页面就是失败，要做下面的视觉承诺。**界面/克制型**（仪表盘、后台、工具、表单、通知、报告）：清晰冷静才是任务，动效最少、布局规整，跳过视觉承诺。
|
||||
|
||||
对**创意/表达型**，在写代码前静默承诺——每项都是一个具体元素 + 动作，绝不是形容词（"大胆/高级/惊艳"被禁用，它们什么都没约束）：
|
||||
|
||||
```text
|
||||
Visual commitment（仅表达型场景）
|
||||
1. hero_subject: 被做大/做主的那「一个」元素（如产品名占 1/3 视口、特定配色）
|
||||
2. entrance: 哪些元素入场、怎么入场
|
||||
3. break_symmetry: 布局在哪里打破居中/网格
|
||||
4. focal_contrast: 什么让视线最先落定（尺寸跳变 / 色块 / 留白）
|
||||
```
|
||||
|
||||
一个完全居中、对称、静态、没有主元素的页面，就是默认的「平庸」结果——对表达型场景，这意味着承诺没被兑现。逐项执行。动效细节 → `horizontal-craft/animation-discipline.md`。
|
||||
|
||||
|
||||
## 为抽象请求补全内容骨架（不捏造事实）
|
||||
|
||||
抽象请求（"做个读书会活动页"）要的是可编辑的**起点**而非空壳：用具体可信的示例内容把场景所需框架搭全（一个几乎空白的页面即便技术正确也是失败），写具体示范文案（像真的活动名、三个具体议程项）而非 `Lorem ipsum` 或空占位。**骨架只用于无源材料的抽象请求**——有源材料/真实主体的，区块和内容来自 Content Read 并经确认。
|
||||
|
||||
**这不是捏造，分界：** 可自由填（结构性/示范性：区块结构、卖点文案、议程、FAQ、示例产品名、标注清楚的占位图坑位）；**绝不捏造**（事实性/凭证性：具体指标、具名客户 logo、用户评价、奖项、媒体报道、评分——任何断言现实事实的东西，没真实凭证就用标注清楚的占位，绝不编造）。
|
||||
|
||||
---
|
||||
# 2. 路由 —— 决定做什么
|
||||
|
||||
先定形态与意图，再定产出格式与风格来源。
|
||||
|
||||
## Routing（路由）
|
||||
|
||||
按**主 artifact skill** 路由（不要用独立的「形态分桶」路由层）。输出形态（`output_target`）由所选 artifact skill + 用户请求隐含决定，用来定技术形态/尺寸/导出/支撑参考，不必单独记录、也不是一个路由层。
|
||||
|
||||
## Primary Routing — Artifact Skills（主路由 —— 产物技能）
|
||||
|
||||
为一个具体设计产物，精确挑选一个主 artifact skill。该 artifact skill 定义形态、结构、输出机制和编辑预期。
|
||||
|
||||
| Artifact skill | 当用户想要…… | 默认 output target |
|
||||
|---|---|---|
|
||||
| `landing-page.md` | 产品落地页、首页、SaaS 站、营销页、waitlist、服务页 | `responsive-html` |
|
||||
| `portfolio.md` | 个人站、作品集、创作者主页、简历式页面、项目展示 | `responsive-html` |
|
||||
| `prototype.md` | app 原型、Web 产品原型、产品/功能 demo、仪表盘、后台面板、产品流程、线框、UI mockup | `responsive-html` 或 `mobile-html` |
|
||||
| `content-page.md` | 文章、编辑型页面、newsletter、微信/公众号排版、长文阅读页 | `responsive-html` |
|
||||
| `info-interactive.md` | 信息讲解页、可视化讲解、流程图、架构图、系统图、流程图谱、关系图、时间线、对比浏览、可筛选的知识/资源页、交互式报告、数据故事、可探索的讲解；日常语言触发词："讲清楚 / 梳理 / 图解 / 可视化说明 / 流程图 / 架构图 / 关系图 / 时间线 / 对比页" | `responsive-html` |
|
||||
| `web-tool.md` | 单任务 Web 工具、计算器、生成器、检查器、选择器、quiz、测试、倒计时、决策工具；桌面或移动/H5 | `responsive-html` 或 `mobile-html` |
|
||||
| `social-card.md` | 社交媒体封面/卡片、小红书、微信/抖音封面、长图卡片序列、固定尺寸社交图 | `fixed-image` |
|
||||
| `deck.md` | 幻灯片、演示、pitch deck、报告 deck、策略 deck、工作坊 deck、教学 deck | `html-slide-deck` |
|
||||
|
||||
### 歧义词：demo
|
||||
|
||||
"demo / 做个 XX 的 demo / 演示" 默认 = **可交互、可点击的产品原型**（`prototype.md`，双文件交付 prototype.html + flow.html），**绝不**默认成营销/活动页。仅当请求明确带营销意图（落地页/官网/推广/waitlist/活动页）→ `landing-page.md`；是单任务小工具 → `web-tool.md`；是路演 slides → `deck.md`。若主体无法被交互演示，问一句，别默默降级成展示页。
|
||||
|
||||
## Output Target（输出目标）
|
||||
|
||||
用它定技术形态、尺寸、导出行为和支撑参考（由 artifact skill + 用户请求推导，不是路由层）：
|
||||
|
||||
| Output target | 含义 | 常见支撑参考 |
|
||||
|---|---|---|
|
||||
| `responsive-html` | 可滚动或可交互的浏览器页面 | `canvas-and-device.md`, `horizontal-craft/accessibility.md` |
|
||||
| `mobile-html` | 移动优先的交互页、H5 或移动 Web 工具 | `canvas-and-device.md`, `horizontal-craft/state-coverage.md`, `horizontal-craft/form-validation.md` |
|
||||
| `html-slide-deck` | 一屏一页的 HTML 演示 | `deck.md`, `design-templates/`, `canvas-and-device.md` |
|
||||
| `fixed-image` | 社交卡片、封面、海报、长图或图片导出的固定尺寸导出面 | `social-card.md`, `canvas-and-device.md` |
|
||||
| `design-system-spec` | 可复用的 `DESIGN.md` / token / 组件规则 | `design-system-generation.md` |
|
||||
| `package` | ZIP/PDF/PPTX/图片/导出交付 | `export.md` |
|
||||
|
||||
## Style Routing（风格路由；决定一个风格线索怎么处理）
|
||||
|
||||
请求常带一个风格线索。在动用参考库之前，先给线索分类——**大多数线索都不是一次参考查找**。这能防止两种失败：把一个普通形容词当成库查找，以及把"读一份规范"和"写一份规范"搞混。
|
||||
|
||||
| 用户的风格线索是…… | 当作…… | 它去哪里 |
|
||||
|---|---|---|
|
||||
| 一个形容词 / 情绪词（"科技感"、"简洁"、"高级感"） | 按界面类/创意类分流 | 见「风格的两条路」核心原则（界面类→映射 style-skill；创意类→当创意方向） |
|
||||
| 一个具名品牌（"Apple style"、"like Stripe"、"苹果风格"）——**任意场景** | 一个**品牌参考** | `skills/design/design-system-reference.md` → `design-systems/brand-inspiration/`（网站/品牌级；读该品牌的 DESIGN.md） |
|
||||
| 一个具名 style skill（"用 `minimal` 风格"、"atelier-zero"） | 一个**style skill** | `skills/design/design-system-reference.md` → `design-systems/style-skills/` |
|
||||
| 一个要遵循的现有系统（上传的 DESIGN.md、截图、之前的产物、"和我们产品一致"） | 一个**提供的参考** | `skills/design/design-system-reference.md`（与给定来源保持一致） |
|
||||
| "提取 / 定义 / 产出一份可复用的 DESIGN.md" | 一个**生成任务** | `design-system-generation.md` |
|
||||
|
||||
关键区分（两点，①已见核心原则不赘述）：② **品牌词总是命中 brand-inspiration**（官方外观，最适合营销/创意页）。③ **读 vs 写 DESIGN.md**——"用 Apple 风格"是把品牌当参考读、交付物仍是该页面；只有"产出一份可复用 DESIGN.md"才用 `design-system-generation.md` 写新规范。
|
||||
|
||||
风格线索绝不改变主 artifact skill（"Apple 风格的落地页"仍是 `landing-page.md`）。
|
||||
|
||||
---
|
||||
|
||||
## 产物技能消歧（路由表分不清的边界）
|
||||
|
||||
- **social-card vs content-page**：卡片/封面/固定尺寸图/小红书/微信抖音封面/截图卡/KPI卡/引言卡/长图序列 → `social-card.md`；线性阅读页 → `content-page.md`。
|
||||
- **content-page vs info-interactive**：阅读 → `content-page.md`；理解/图解/讲解/对比/筛选/可视化（"梳理一下""做成图解""流程图""架构图""时间线""对比页"）→ `info-interactive.md`，即便产物大多是静态 HTML/SVG。
|
||||
- **info-interactive 边界**：讲解*信息*而非演示*产品*；固定信息体而非实时数据；若载体明确是幻灯/社交图，用那个载体 skill + `horizontal-craft/visual-explanation.md`。
|
||||
- **尚不存在的 skill 用替代**：dashboard → 以仪表盘为重心的 `prototype.md`；mobile app → `prototype.md` + `platform: mobile`；海报 → `social-card.md`。skill 缺失就用最接近的，只在影响执行时才指出缺口。
|
||||
|
||||
# 3. 做好它 —— 执行、质量、参考
|
||||
|
||||
## Execution essentials（执行要点）
|
||||
|
||||
### 只在触发条件出现时才加载某个参考
|
||||
|
||||
这是「何时读什么」的唯一依据。默认一个都不读；每个任务拉 1–3 个相关文件。
|
||||
|
||||
```text
|
||||
quality-gate.md → 每个生成 / 大改的 HTML 产物（强制）
|
||||
canvas-and-device.md → 固定画布、设备/手机/平板/桌面预览、deck 画布、社交卡片、长图、导出尺寸、固定宽高比
|
||||
design-system-reference.md → 存在品牌 / 风格 / 模板 / DESIGN.md 参考；或产品/界面密集型产物没给风格方向、用成熟基底能提升一致性
|
||||
horizontal-craft/color.md → 没有设计系统、或配色方向定义不足
|
||||
horizontal-craft/accessibility.md → 交互或可发布的产物；质量门禁里也会检查
|
||||
horizontal-craft/animation-discipline.md → 动效、转场、滚动效果或动画叙事
|
||||
horizontal-craft/form-validation.md → 表单、输入、校验、提交、注册、结账或设置界面
|
||||
horizontal-craft/laws-of-ux.md → 定价、引导、仪表盘、H5 工具、转化流程或交互密集型产物
|
||||
horizontal-craft/icon-system.md → 任何 UI / 功能 / 导航 / 状态图标、象形符号、类图标标记
|
||||
horizontal-craft/chinese-typography.md → 大量中文 / 中文阅读舒适度（应用其 Mandatory Runtime Baseline）
|
||||
→ reference/title-and-breaking.md → 标题 / 封面 / PPT / 小红书 标题断行
|
||||
→ reference/punctuation.md → 标点密集的长中文文案
|
||||
→ reference/text-detail.md → 字号 / 行高 / 间距 / 段落节奏
|
||||
→ reference/fonts.md → 字体选择、正式报告排版
|
||||
horizontal-craft/state-coverage.md → 产品 / 仪表盘 / 表单 / 工具 / H5 / 数据 / 原型 界面
|
||||
horizontal-craft/data-integrity.md → 指标、图表、表格、排名、百分比或主张
|
||||
horizontal-craft/link-and-proof.md → 链接、CTA、引用、客户 logo、用户评价、凭证主张
|
||||
horizontal-craft/visual-explanation.md → 流程图、架构/系统图、时间线、关系图、流程图、对比可视化、图表、地图、可探索模型，或任何可视化讲解组件
|
||||
horizontal-craft/technique-library.md → 超出纯 CSS 的效果能服务于目标（动效 / 3D / 数据可视化）
|
||||
```
|
||||
读了参考还不够——规则必须真正改变产物。除非 HTML/CSS/JS 里真的包含实现，否则不要声称某个门禁已应用。
|
||||
|
||||
### 交付前（阻塞）
|
||||
|
||||
```text
|
||||
[ ] quality-gate.md 作为阻塞清单执行（不是被动参考）
|
||||
[ ] 交互产物有 :focus-visible；有动效时有 reduced-motion
|
||||
[ ] 没有假凭证、emoji 当图标、死链、占位逻辑或缺失素材
|
||||
```
|
||||
若某个门禁过不了，修复产物或明确标出未解决的问题——绝不默默忽略。
|
||||
|
||||
### 每一轮，不只是第一轮（多轮规则）
|
||||
|
||||
上面的流程和「交付前」清单适用于**每一个创建或实质性修改产物的轮次**——不只是对话里的第一个任务。后续轮次容易以「前面的轮次已经做过了」为借口默默丢掉步骤（最常见的是质量门禁和版本管理）。它们没有：**每次交付都独立把关。第 8 轮的新任务就是一个新任务，不是延续。**
|
||||
|
||||
任何产物产出轮次（包括"改一下 XX"的追问、以及对话中途切换到不同场景）的最小循环：
|
||||
|
||||
1. 重新确认场景（可能随新需求变了——若是则重新路由）。
|
||||
2. 做改动。
|
||||
3. 在修改后的产物上重跑 `quality-gate.md`。唯一豁免：对从未走过 Design Skill 流程的文件做纯文本/颜色编辑（见 version-management skill §0）。
|
||||
4. 交给版本管理。
|
||||
|
||||
若在后续任何一轮你不确定某条规则的确切内容，重新读相关文件，而不是凭记忆猜。
|
||||
|
||||
## Built-In Quality Defaults（内置质量默认）
|
||||
|
||||
不要把通用渐变/卡片网格/bento/圆角卡片当成自动风格——有意识选择形态（见 `horizontal-craft/anti-ai-slop.md`）。尺寸/视口/导出比例/设备框约束重要时用 `canvas-and-device.md`。
|
||||
|
||||
**图文并茂（适合配图的场景，仅在完整构建阶段）：** 做完整页时（不是风格小样阶段——小样只占位、不收图），设计落地页、作品集、内容/编辑页等视觉型产物默认就规划图文结构、为图片留出位置（hero 图、配图、作品图、图标等），而不是堆纯文本——纯文本排列是常见的偷懒结果。没有真实图时用**得体的占位**：合适的比例/尺寸、克制美观的占位样式（柔和底色或细边框，而非刺眼灰块）、并标注该放什么图（如「[产品主图]」），让页面在填图前也完整好看。然后按 §Guiding 引导用户发真实图替换。（纯工具/仪表盘/表单等功能型产物图不是重点，不强求配图。）
|
||||
|
||||
## HTML Artifact Structure（HTML 产物结构）
|
||||
|
||||
把生成的 HTML 组织成便于后续编辑——稳定的 section id / data 属性：
|
||||
|
||||
```html
|
||||
<section id="hero" data-section="hero"> <!-- pages: hero/work/about/contact -->
|
||||
<section class="slide" data-slide="cover"> <!-- decks -->
|
||||
<section data-screen="dashboard"> <!-- prototypes: + data-state, data-component -->
|
||||
```
|
||||
|
||||
- 让 section / slide / screen / component / state 保持可识别，便于选区编辑
|
||||
- 优先可读的语义化 HTML；不要把内容藏在不透明的生成块里
|
||||
- 把占位内容标注为占位；可发布产物里不留死的 `href="#"`，除非已标注
|
||||
|
||||
---
|
||||
|
||||
## 参考与系统：硬约束
|
||||
|
||||
何时加载哪个文件已由上面的触发矩阵决定。这里只记各自「会做错」的硬约束：
|
||||
|
||||
- **中文排版**：除非 CSS 对字体栈/字号/行高/行宽/字间距/段落节奏/标点/中-拉-数字混排做了具体决定，否则不算应用 `chinese-typography.md`。
|
||||
- **模板**：是结构种子不是用来克隆的页面。只读所选模板的 `SKILL.md`，仅当缺结构细节才看 `pattern.html` 且只取布局节奏/区块关系/响应式/交互——**绝不照抄 DOM、类名、token、占位文字、样式**。没匹配就直接用 artifact skill。
|
||||
- **公开品牌**（Apple/Stripe/Linear…）：借鉴其美学特质做原创设计；效果优先，用了受版权素材一句话提示风险即可，不为规避而降质，也不主动伪称官方出品。**开源系统**：按公开文档与许可用官方组件，不与该公司私有品牌混为一谈。
|
||||
- **技法库**：`technique-library.md` 是参考不是路由目标。默认简单 CSS，只在效果服务于目标时升级、始终带 reduced-motion，绝不为新奇而用。
|
||||
- **设计系统参考**：`design-system-reference.md` 只加载最相关那一个，绝不全加载。
|
||||
- **参考优先级**：用户给的 > 设计系统 > 模板/场景模式 > 通用知识 > 模型自由发挥。
|
||||
|
||||
# 4. 交付与收尾
|
||||
|
||||
## Web entry / version management（Web 入口 / 版本管理）
|
||||
|
||||
`quality-gate.md` 通过后，**当且仅当交付物含入口前端文件**（`.html`/`.jsx`/`.tsx`/`.vue`）时运行 `skills/version-management/SKILL.md`（按输出类型触发，不是场景）。它管项目路径/素材/git/版本卡片；只贴在对话里或存到工作区根目录**不算**交付。纯图片/文档/PPTX/JSON/DESIGN.md/无新 Web 入口的导出包则跳过。
|
||||
|
||||
---
|
||||
|
||||
## Export Skill（导出技能）
|
||||
|
||||
当用户要求导出、下载、打包、交付或转换产物时用 `export.md`。目标：独立 HTML、ZIP、图片/截图、PDF、PPTX、JSON/元数据、设计规范、DESIGN.md 包。导出必须保留当前产物状态——不要在导出时默默重新设计。
|
||||
|
||||
---
|
||||
|
||||
## IP and Content Boundaries（知识产权与内容边界）
|
||||
|
||||
**效果优先，不为版权把事情做绕或降质。** 尤其**不要**为了规避版权而用劣质替代——例如本该用真实图片/素材的画面，全部改用手绘 SVG 重画一遍，这只会降低质量、违背目标。正确做法：**风格可自由借鉴**（提取某品牌/作品的美学特质——配色、氛围、构图、排版——做原创设计，风格不受版权保护，鼓励这么做）；**需要真实受版权素材**（具体图片、logo、作品画面）时，优先用得体的占位 + 引导用户提供有权使用的版本，而不是降质硬凑。
|
||||
|
||||
如果产物里确实用了可能受版权保护的内容（用户提供的、或按要求引入的品牌素材/图片/字体），**用一句话提示用户自行确认使用权/版权风险**即可——这是提示，不是拒绝做事，也不要因此降低成品质量。最终成品效果是目标。
|
||||
|
||||
唯一底线：不主动伪造「这是某公司官方系统/官方出品」的虚假声明（除非用户提供授权）。
|
||||
|
||||
未经允许不扩大范围（加用户没要的区块/页面前先问），但把被要求的页面充实成完整可信的骨架是应该的（充实≠注水）。
|
||||
|
||||
---
|
||||
|
||||
## Edit Handling（编辑处理）
|
||||
|
||||
**选区批注编辑**：以选区为主要目标，优先局部编辑而非重写、保留无关区块；含糊时选最安全的局部编辑或问一句。**局部参数编辑**（颜色/间距/圆角/密度/字号/设备预览）：除非影响设计意图/内容结构/视觉方向，否则交确定性局部工具、不调模型 skill。
|
||||
Executable
+327
@@ -0,0 +1,327 @@
|
||||
---
|
||||
name: Canvas and Device Constraints
|
||||
description: Shared sizing, viewport, device-ratio, and export-surface rules for design artifacts.
|
||||
mode: reference
|
||||
platform: any
|
||||
scenario: canvas-device-constraints
|
||||
preview:
|
||||
type: none
|
||||
default_for:
|
||||
- device size
|
||||
- viewport
|
||||
- canvas
|
||||
- resolution
|
||||
- aspect ratio
|
||||
- phone frame
|
||||
- desktop frame
|
||||
- export size
|
||||
- 尺寸
|
||||
- 分辨率
|
||||
- 画布
|
||||
- 手机比例
|
||||
- 导出尺寸
|
||||
fidelity: system
|
||||
---
|
||||
|
||||
# Canvas and Device Constraints
|
||||
|
||||
Use this shared reference whenever a design artifact includes device previews, fixed export sizes, phone frames, dashboard canvases, deck canvases, social cards, long images, or image-export surfaces.
|
||||
|
||||
Core rule:
|
||||
|
||||
```text
|
||||
Artifact canvas ≠ device screen canvas ≠ export surface
|
||||
```
|
||||
|
||||
A flow diagram may use a wide canvas. A phone preview inside it must still preserve a real phone ratio. A social card may use a fixed image export ratio. A dashboard may use a desktop viewport. Do not stretch everything into generic cards.
|
||||
|
||||
---
|
||||
|
||||
## Extensible size registry
|
||||
|
||||
This file is the canonical place for platform size presets. Do not delete it when simplifying routing. Add new platform presets here instead of scattering dimensions across artifact skills.
|
||||
|
||||
Use this registry for:
|
||||
|
||||
- Xiaohongshu / RED covers, notes, long images, and share cards
|
||||
- WeChat article covers, article images, and long images
|
||||
- Posters, flyers, social cards, and story images
|
||||
- Mobile app, mobile web, and H5 viewports
|
||||
- Desktop web, dashboard, and deck canvases
|
||||
|
||||
When a platform has multiple valid sizes, record them as named presets. Artifact skills should reference these presets instead of hard-coding dimensions.
|
||||
|
||||
Recommended preset marker format:
|
||||
|
||||
```html
|
||||
<section data-platform="xhs" data-preset="cover-3x4" data-export-ratio="3:4">
|
||||
<section data-platform="xhs" data-preset="portrait-4x5" data-export-ratio="4:5">
|
||||
<section data-platform="xhs" data-preset="square" data-export-size="1080x1080">
|
||||
<section data-platform="wechat" data-preset="article-cover">
|
||||
<section data-platform="poster" data-preset="a4-portrait">
|
||||
```
|
||||
|
||||
### Current social/export presets
|
||||
|
||||
```text
|
||||
Social square: 1080 × 1080
|
||||
Social portrait: 1080 × 1350
|
||||
Story / vertical: 1080 × 1920
|
||||
Xiaohongshu cover: 3:4 or 4:5
|
||||
Xiaohongshu square: 1:1, usually 1080 × 1080
|
||||
Xiaohongshu long image: width 1080, height content-driven
|
||||
WeChat long image: width 750 or 1080, height content-driven
|
||||
Poster portrait: ratio-driven, preset required
|
||||
```
|
||||
|
||||
If a user provides a platform-specific size, use the user-provided size and add it to this registry if it is likely to be reused.
|
||||
|
||||
### User-provided Chinese social media presets
|
||||
|
||||
These presets are collected from the user's provided social-media size reference image. Treat them as practical production presets, not as immutable official platform specifications. If a platform updates its recommended sizes, update this section.
|
||||
|
||||
#### Xiaohongshu / RED
|
||||
|
||||
| Preset | Size | Ratio | Use |
|
||||
|---|---:|---:|---|
|
||||
| `xhs-avatar` | 400 × 400 | 1:1 | 头像 |
|
||||
| `xhs-profile-background` | 1000 × 800 | 5:4 | 个人背景图 |
|
||||
| `xhs-note-cover-portrait` | 1242 × 1660 | ~3:4 | 图文封面，竖版 |
|
||||
| `xhs-note-cover-square` | 1080 × 1080 | 1:1 | 图文封面，方版 |
|
||||
| `xhs-note-cover-landscape` | 2560 × 1440 | 16:9 | 图文封面，横版 |
|
||||
| `xhs-video-cover-portrait` | 1080 × 1440 | 3:4 | 视频封面，竖版 |
|
||||
| `xhs-video-cover-landscape-4x3` | 1440 × 1080 | 4:3 | 视频封面，横版；source image labels it as 3:4, but the pixel ratio is 4:3 |
|
||||
| `xhs-video-cover-landscape-16x9` | 1920 × 1080 | 16:9 | 视频封面，横版 / widescreen |
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-platform="xhs" data-preset="xhs-note-cover-portrait" data-export-size="1242x1660" data-export-ratio="3:4">
|
||||
<section data-platform="xhs" data-preset="xhs-note-cover-square" data-export-size="1080x1080" data-export-ratio="1:1">
|
||||
<section data-platform="xhs" data-preset="xhs-note-cover-landscape" data-export-size="2560x1440" data-export-ratio="16:9">
|
||||
<section data-platform="xhs" data-preset="xhs-video-cover-portrait" data-export-size="1080x1440" data-export-ratio="3:4">
|
||||
```
|
||||
|
||||
#### Douyin / TikTok China
|
||||
|
||||
| Preset | Size | Ratio | Use |
|
||||
|---|---:|---:|---|
|
||||
| `douyin-avatar` | 400 × 400 | 1:1 | 头像 |
|
||||
| `douyin-profile-background` | 1125 × 633 | ~16:9 | 个人背景图 |
|
||||
| `douyin-cover-portrait-3x4` | 1242 × 1660 | ~3:4 | 封面，竖版 |
|
||||
| `douyin-cover-portrait-9x16` | 1080 × 1920 | 9:16 | 封面，竖版 |
|
||||
| `douyin-cover-landscape-16x9` | 1080 × 608 | ~16:9 | 封面，横版 |
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-platform="douyin" data-preset="douyin-cover-portrait-9x16" data-export-size="1080x1920" data-export-ratio="9:16">
|
||||
<section data-platform="douyin" data-preset="douyin-cover-landscape-16x9" data-export-size="1080x608" data-export-ratio="16:9">
|
||||
```
|
||||
|
||||
#### WeChat ecosystem
|
||||
|
||||
| Preset | Size | Ratio | Use |
|
||||
|---|---:|---:|---|
|
||||
| `wechat-official-account-avatar` | 240 × 240 | 1:1 | 公众号头像 |
|
||||
| `wechat-official-account-cover` | 900 × 383 | ~2.35:1 | 公众号封面 |
|
||||
| `wechat-official-account-thumbnail` | 200 × 200 | 1:1 | 公众号小图 |
|
||||
| `wechat-official-account-qrcode-card` | 600 × 600 | 1:1 | 公众号二维码名片 |
|
||||
| `wechat-official-account-guide-image` | 1080 × 300 | 18:5 | 公众号内容引导图 |
|
||||
| `wechat-channels-cover-portrait` | 1080 × 1260 | 6:7 | 视频号封面，竖版 |
|
||||
| `wechat-channels-cover-landscape` | 1080 × 608 | ~16:9 | 视频号封面，横版 |
|
||||
| `wechat-miniprogram-cover` | 520 × 416 | 5:4 | 小程序封面 |
|
||||
| `wechat-moments-cover` | 1280 × 1184 | ~1.08:1 | 朋友圈封面 |
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-platform="wechat" data-preset="wechat-official-account-cover" data-export-size="900x383">
|
||||
<section data-platform="wechat" data-preset="wechat-official-account-guide-image" data-export-size="1080x300">
|
||||
<section data-platform="wechat-channels" data-preset="wechat-channels-cover-portrait" data-export-size="1080x1260" data-export-ratio="6:7">
|
||||
<section data-platform="wechat-moments" data-preset="wechat-moments-cover" data-export-size="1280x1184">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Default viewport presets
|
||||
|
||||
```text
|
||||
iOS default: 390 × 844
|
||||
iOS large: 430 × 932
|
||||
iOS small: 375 × 812
|
||||
|
||||
Android default: 360 × 800
|
||||
Android large: 412 × 915
|
||||
|
||||
Mobile web / H5: 390 × 844
|
||||
Tablet: 768 × 1024
|
||||
Desktop web: 1440 × 900
|
||||
Dashboard: 1440 × 1024
|
||||
Deck: 1600 × 900
|
||||
Deck HD: 1920 × 1080
|
||||
|
||||
Social square: 1080 × 1080
|
||||
Social portrait: 1080 × 1350
|
||||
Story / vertical: 1080 × 1920
|
||||
Xiaohongshu cover: 1242 × 1660, 1080 × 1080, 2560 × 1440
|
||||
Douyin cover: 1242 × 1660, 1080 × 1920, 1080 × 608
|
||||
WeChat OA cover: 900 × 383
|
||||
WeChat guide: 1080 × 300
|
||||
WeChat Channels: 1080 × 1260 or 1080 × 608
|
||||
Long image: width 1080, height content-driven
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Scenario defaults
|
||||
|
||||
### Prototype
|
||||
|
||||
- Mobile app and mobile web previews default to `390 × 844`.
|
||||
- Android-specific previews default to `360 × 800`.
|
||||
- Desktop web previews default to `1440 × 900`.
|
||||
- Dashboard previews default to `1440 × 1024`.
|
||||
- Flow diagrams may use a wide canvas.
|
||||
- Screen previews inside flow diagrams must keep device aspect ratio.
|
||||
|
||||
### Tool H5
|
||||
|
||||
- Canonical surface is mobile portrait.
|
||||
- Default mobile viewport: `390 × 844`.
|
||||
- Desktop view should either center a realistic mobile frame or intentionally expand the experience.
|
||||
- Do not leave a mobile column floating in a large empty desktop canvas.
|
||||
- Result/share cards should use explicit export ratios.
|
||||
|
||||
### Content Page
|
||||
|
||||
- Long-form HTML is responsive.
|
||||
- WeChat article layout is mobile-first and editor-safe.
|
||||
- Generic long image uses explicit width and content-driven height when requested.
|
||||
- Xiaohongshu covers, notes, and fixed-card sequences use `social-card.md`, not `content-page.md`.
|
||||
|
||||
### Deck
|
||||
|
||||
- Default deck canvas: `1600 × 900`.
|
||||
- HD deck export: `1920 × 1080`.
|
||||
- Deck viewport should scale to fit the browser, not reflow like a webpage.
|
||||
|
||||
### Landing Page
|
||||
|
||||
- Responsive web first.
|
||||
- Validate at `375px`, `768px`, and `1280px`.
|
||||
- Product screenshots or device mockups must preserve their own viewport ratios.
|
||||
|
||||
---
|
||||
|
||||
## Device frame rules
|
||||
|
||||
When showing mobile screens:
|
||||
|
||||
- preserve aspect ratio
|
||||
- keep safe margins
|
||||
- include status/nav bars only when useful
|
||||
- keep tap targets readable
|
||||
- avoid shrinking full screens until text becomes unreadable
|
||||
- use simplified mini-previews when space is limited
|
||||
- use exact-ratio full previews in screen inventory, prototype, or tool preview sections
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<section data-device="ios" data-viewport="390x844">
|
||||
<section data-device="ios-large" data-viewport="430x932">
|
||||
<section data-device="android" data-viewport="360x800">
|
||||
<section data-platform="mobile-web" data-viewport="390x844">
|
||||
<section data-platform="desktop-web" data-viewport="1440x900">
|
||||
<section data-platform="dashboard" data-viewport="1440x1024">
|
||||
<section data-export-size="1080x1920">
|
||||
<section data-export-ratio="3:4">
|
||||
```
|
||||
|
||||
Recommended CSS:
|
||||
|
||||
```css
|
||||
.phone-frame {
|
||||
width: min(390px, 100%);
|
||||
aspect-ratio: 390 / 844;
|
||||
}
|
||||
|
||||
.phone-frame[data-size="ios-large"] {
|
||||
width: min(430px, 100%);
|
||||
aspect-ratio: 430 / 932;
|
||||
}
|
||||
|
||||
.phone-frame[data-size="ios-small"] {
|
||||
width: min(375px, 100%);
|
||||
aspect-ratio: 375 / 812;
|
||||
}
|
||||
|
||||
.phone-frame[data-size="android"] {
|
||||
width: min(360px, 100%);
|
||||
aspect-ratio: 360 / 800;
|
||||
}
|
||||
|
||||
.desktop-frame {
|
||||
aspect-ratio: 1440 / 900;
|
||||
}
|
||||
|
||||
.dashboard-frame {
|
||||
aspect-ratio: 1440 / 1024;
|
||||
}
|
||||
|
||||
.social-card[data-ratio="3:4"] {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
.social-card[data-ratio="4:5"] {
|
||||
aspect-ratio: 4 / 5;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Flow diagram vs screen preview
|
||||
|
||||
For interaction flow diagrams:
|
||||
|
||||
- Use a wide canvas for the overall diagram.
|
||||
- Use abstract nodes for minor actions and state changes.
|
||||
- Use exact-ratio screen previews only for key screens.
|
||||
- Do not draw every state as a full phone screen.
|
||||
- Do not let phone previews become landscape cards.
|
||||
- When the screen preview is too large for the flow diagram, use a compact node plus a separate exact-ratio screen inventory.
|
||||
|
||||
---
|
||||
|
||||
## Export surface rules
|
||||
|
||||
When the artifact is meant to be exported as an image:
|
||||
|
||||
- declare the export size or ratio explicitly
|
||||
- keep important content inside safe margins
|
||||
- test title readability at thumbnail size
|
||||
- avoid tiny captions unless export resolution is high enough
|
||||
- do not rely on browser viewport size for fixed social exports
|
||||
- do not silently redesign during export
|
||||
|
||||
For long images:
|
||||
|
||||
- use stable card boundaries
|
||||
- avoid content blocks that depend on viewport height
|
||||
- keep vertical rhythm consistent
|
||||
- set a clear export width, usually `1080px`
|
||||
|
||||
---
|
||||
|
||||
## Quality checklist
|
||||
|
||||
Before delivery, check:
|
||||
|
||||
- Is the artifact canvas appropriate for the scenario?
|
||||
- Are device previews using realistic viewport ratios?
|
||||
- Are mobile screens locked to phone proportions instead of arbitrary cards?
|
||||
- Is the export surface declared when image export is expected?
|
||||
- Does desktop fallback look intentional, not empty?
|
||||
- Are phone previews readable at their displayed size?
|
||||
- Are flow diagrams using abstract nodes when full device previews would hurt readability?
|
||||
Executable
+388
@@ -0,0 +1,388 @@
|
||||
---
|
||||
name: Content Page Skill
|
||||
description: Design publishing-ready HTML content pages for existing articles, reports, newsletters, guides, case studies, release notes, public-account articles, and editorial reading experiences.
|
||||
mode: artifact
|
||||
platform: responsive-web
|
||||
scenario: content-page
|
||||
preview:
|
||||
type: html
|
||||
default_for:
|
||||
- article page
|
||||
- editorial page
|
||||
- newsletter
|
||||
- memo
|
||||
- WeChat article
|
||||
- public account article
|
||||
- long-form content page
|
||||
- report page
|
||||
- whitepaper
|
||||
- guide
|
||||
- tutorial article
|
||||
- case study
|
||||
- release note
|
||||
- changelog article
|
||||
- reading page
|
||||
- 内容页
|
||||
- 文章页
|
||||
- 长文页面
|
||||
- 公众号文章
|
||||
- 公众号长文
|
||||
- 报告页面
|
||||
- 白皮书页面
|
||||
- 案例拆解
|
||||
- 发布说明
|
||||
fidelity: high
|
||||
---
|
||||
|
||||
# Content Page Skill
|
||||
|
||||
Design an editorial reading page for content that already exists or is partially provided.
|
||||
|
||||
This skill is closer to **editorial layout / graphic design** than product UI. Its job is to turn existing content into a readable, publishable, well-paced HTML page through hierarchy, rhythm, typography, evidence treatment, and layout — not to invent the article.
|
||||
|
||||
## Route elsewhere if
|
||||
|
||||
- the primary goal is conversion / signup / sales → `landing-page.md`
|
||||
- the user wants exploration, filters, animated data, or interactive explanation as the main experience → `info-interactive.md`
|
||||
- the user wants a single-task calculator / generator / checker → `web-tool.md`
|
||||
- the user wants a product interface, dashboard, or app flow → `prototype.md`
|
||||
- the user wants a slide presentation → `deck.md`
|
||||
- the final medium is social images, covers, long-image cards, or product brief images → `social-card.md`
|
||||
|
||||
If a content page also needs a social cover, route the reading page here and the cover/card to `social-card.md`; do not force both into one artifact.
|
||||
|
||||
---
|
||||
|
||||
## Core Principle: Content Is Source of Truth
|
||||
|
||||
Assume the user has content unless they explicitly ask for writing.
|
||||
|
||||
Do not invent claims, examples, statistics, quotes, sections, conclusions, sources, charts, or case details to make the page feel fuller.
|
||||
|
||||
The work is to transform available content into a designed publishing artifact:
|
||||
|
||||
- clarify hierarchy;
|
||||
- group related material;
|
||||
- surface key points;
|
||||
- create reading rhythm;
|
||||
- design evidence, figures, quotes, notes, and references;
|
||||
- preserve factual meaning;
|
||||
- mark missing material as placeholder instead of fabricating it.
|
||||
|
||||
If the content is too thin, design a clean structure and ask for the missing material. Do not pad with generic paragraphs.
|
||||
|
||||
---
|
||||
|
||||
## What Makes a Content Page Succeed
|
||||
|
||||
A content page succeeds when the reader can enter quickly, stay oriented, and finish with a clear takeaway.
|
||||
|
||||
The failure mode is not ugliness. The failure mode is a page that is technically readable but editorially flat: title, subtitle, blocks of text, a few cards, no rhythm, no reason to keep reading.
|
||||
|
||||
A strong content page has:
|
||||
|
||||
- **a clear reading promise** — why this is worth reading now;
|
||||
- **a visible editorial structure** — the reader can tell where they are and what kind of section they are in;
|
||||
- **controlled text measure** — body text never stretches across the screen;
|
||||
- **rhythm** — fast scan zones, slow reading zones, evidence breaks, and pauses;
|
||||
- **evidence treatment** — quotes, data, figures, sources, and examples are designed, not dumped;
|
||||
- **a deliberate ending** — conclusion, implication, action, appendix, or related reading.
|
||||
|
||||
---
|
||||
|
||||
## Content Type Detection
|
||||
|
||||
Before designing, infer the content type from the provided material. Do not force every content page into the same article layout.
|
||||
|
||||
| Content type | Use when | Layout direction |
|
||||
|---|---|---|
|
||||
| Article / Essay | one argument, opinion, explanation, or reflection | strong title, readable body, section breaks, pull quotes |
|
||||
| Editorial Feature | narrative, culture, brand story, interview, field notes | immersive opening, image/quote rhythm, slower pace |
|
||||
| Report / Whitepaper | findings, research, industry analysis, structured sections | executive summary, section index, data cards, figures, source notes |
|
||||
| Newsletter / Memo | update, briefing, internal/external note | compact hierarchy, skimmable blocks, clear next step |
|
||||
| Release Note / Changelog Article | product updates, version announcement, feature summary | grouped updates, before/after, screenshots, migration/action notes |
|
||||
| Guide / Resource | how-to, checklist, tutorial, reference material | steps, examples, callouts, warnings, checklist ending |
|
||||
| Case Study | background, challenge, solution, result, reflection | case spine, evidence blocks, before/after, outcome caveats |
|
||||
| Public Account / WeChat Article | mobile-first Chinese reading | single-column rhythm, strong title breaking, paragraph breathing, image captions |
|
||||
|
||||
If the content combines multiple types, choose the dominant one and borrow only the necessary secondary devices.
|
||||
|
||||
---
|
||||
|
||||
## Editorial Layout Principles
|
||||
|
||||
### 1. Start with the text block
|
||||
|
||||
Design the reading column before designing decoration.
|
||||
|
||||
- Body text must have a controlled measure — but bounded on *both* sides. Target roughly **30–45 Chinese characters / 60–75 Latin characters per line**, i.e. a reading column around **wide: clamp(0, ~42em, ~760px)**. Don't run full-width across a desktop viewport, and equally don't over-narrow it into a cramped ~480px ribbon with huge empty margins. If the layout has no side rail/figures, the column can sit toward the upper end (~46em); a too-narrow column is as much a failure as a full-width one.
|
||||
- Long-form text should have generous line-height and stable paragraph rhythm.
|
||||
- Margins should frame and pace the reading, not just center a thin column in a sea of white.
|
||||
- Do not use the whole viewport width just because HTML allows it — but the fix is a *bounded* measure, not an arbitrarily narrow one.
|
||||
|
||||
### 2. Hierarchy is not only font size
|
||||
|
||||
Build hierarchy through a system:
|
||||
|
||||
- title, deck/subtitle, metadata, intro, section heading, subheading, body, quote, note, caption, source;
|
||||
- section spacing and white space;
|
||||
- rules, dividers, labels, side notes, figure captions, callout blocks;
|
||||
- contrast between scan areas and slow-reading areas.
|
||||
|
||||
Avoid the generic hierarchy of “large H1 + medium H2 + plain paragraphs” with no editorial devices.
|
||||
|
||||
A page that is only title + paragraphs + a few cards is the flat failure mode, even if it reads fine. Commit to visible rhythm: alternate dense reading zones with lighter pause zones (quote, figure, data insert, divider), and pick at least one editorial device below so the page has a memory point — don't ship an even, paragraph-after-paragraph wall. For Chinese content specifically, actively use the **表现力手法** in `horizontal-craft/chinese-typography.md` (oversized title contrast, weight contrast, drop-cap/opening ritual, vertical-in-horizontal title/quote, pulled-out 金句 blocks) so the typography itself carries character — not just correct, but expressive. Keep it in service of reading, not decoration.
|
||||
|
||||
### 3. Choose one editorial device
|
||||
|
||||
Use one primary device to give the page memory. Do not use all devices at once.
|
||||
|
||||
Good devices:
|
||||
|
||||
- pull quote;
|
||||
- side note / margin note;
|
||||
- evidence card;
|
||||
- source appendix;
|
||||
- timeline;
|
||||
- figure strip;
|
||||
- glossary;
|
||||
- case card;
|
||||
- data insert;
|
||||
- chapter index;
|
||||
- key-takeaway rail.
|
||||
|
||||
The device must come from the content. Do not add a timeline if there is no sequence; do not add a data card if there is no real data.
|
||||
|
||||
### 4. Figures and images must carry meaning
|
||||
|
||||
Images, charts, diagrams, and screenshots are not filler.
|
||||
|
||||
- Every figure needs a reason and usually a caption.
|
||||
- Screenshots should be legible and framed deliberately.
|
||||
- Data visualizations need title, unit, label, and source/placeholder status.
|
||||
- Avoid generic stock imagery that does not add evidence, atmosphere, or context.
|
||||
|
||||
### 5. Ending is part of the design
|
||||
|
||||
Do not finish every page with a generic CTA.
|
||||
|
||||
Choose the ending based on content:
|
||||
|
||||
- conclusion;
|
||||
- implication;
|
||||
- next action;
|
||||
- open question;
|
||||
- checklist;
|
||||
- source appendix;
|
||||
- related reading;
|
||||
- author note;
|
||||
- changelog / version note.
|
||||
|
||||
---
|
||||
|
||||
## Reading Rhythm
|
||||
|
||||
Design where the reader speeds up and where they slow down.
|
||||
|
||||
A good content page usually contains:
|
||||
|
||||
1. **Entry** — title, subtitle/deck, metadata, and reading promise.
|
||||
2. **Orientation** — summary, table of contents, key finding, or context block.
|
||||
3. **Body rhythm** — sections with varied density, not one long wall of text.
|
||||
4. **Pause points** — quote, figure, note, data insert, example, or divider.
|
||||
5. **Evidence zones** — sources, charts, examples, screenshots, case blocks.
|
||||
6. **Transition cues** — section breaks that tell the reader what changed.
|
||||
7. **Ending beat** — final takeaway, implication, or appendix.
|
||||
|
||||
Opening moves should be extracted from the content, not invented:
|
||||
|
||||
- thesis first;
|
||||
- scene first;
|
||||
- data first;
|
||||
- question first;
|
||||
- quote first;
|
||||
- object/screenshot first;
|
||||
- context first.
|
||||
|
||||
If no strong opening is evident, use a clear thesis/context opening rather than fabricating drama.
|
||||
|
||||
---
|
||||
|
||||
## Layout Models
|
||||
|
||||
Choose one model and commit.
|
||||
|
||||
### Classic Reading Page
|
||||
|
||||
Use for essays, explanations, opinion pieces, and public-account style articles.
|
||||
|
||||
- single strong text column;
|
||||
- restrained metadata;
|
||||
- clear section headings;
|
||||
- occasional pull quote or figure;
|
||||
- calm ending.
|
||||
|
||||
### Editorial Feature
|
||||
|
||||
Use for narrative, culture, brand story, interview, or field notes.
|
||||
|
||||
- stronger opening treatment;
|
||||
- image / quote / text rhythm;
|
||||
- more atmospheric spacing;
|
||||
- slower reading pace.
|
||||
|
||||
### Report / Dossier
|
||||
|
||||
Use for structured analysis, whitepapers, industry reports, or research summaries.
|
||||
|
||||
- executive summary;
|
||||
- section index;
|
||||
- data cards / figure blocks;
|
||||
- source notes;
|
||||
- appendix or methodology area when relevant.
|
||||
|
||||
### Newsletter / Brief
|
||||
|
||||
Use for updates, memos, weekly notes, and product briefings that are meant to be scanned.
|
||||
|
||||
- compact intro;
|
||||
- labeled sections;
|
||||
- clear “what changed / why it matters / next step” structure;
|
||||
- lighter visuals.
|
||||
|
||||
### Guide / Resource
|
||||
|
||||
Use for tutorials, how-tos, references, checklists, or resource pages.
|
||||
|
||||
- step blocks;
|
||||
- examples;
|
||||
- warnings / tips;
|
||||
- final checklist;
|
||||
- stable navigation if long.
|
||||
|
||||
### Public Account / Mobile Article
|
||||
|
||||
Use for Chinese mobile reading and WeChat-like publishing.
|
||||
|
||||
- single-column mobile-first body;
|
||||
- strong title line breaks;
|
||||
- short paragraph rhythm;
|
||||
- image captions and section dividers;
|
||||
- avoid dense desktop-style sidebars.
|
||||
|
||||
---
|
||||
|
||||
## Typography And Grid
|
||||
|
||||
For Chinese content, apply `horizontal-craft/chinese-typography.md`.
|
||||
|
||||
Escalate to deep references when needed:
|
||||
|
||||
- `horizontal-craft/reference/text-detail.md` — body size, line-height, paragraph rhythm, long-form readability.
|
||||
- `horizontal-craft/reference/title-and-breaking.md` — headlines, decks, section titles, Chinese line breaks.
|
||||
- `horizontal-craft/reference/punctuation.md` — punctuation-heavy Chinese, quotations, lists, notes, captions.
|
||||
- `horizontal-craft/reference/grid-system.md` — report, dossier, multi-column, long image, or complex editorial layout.
|
||||
- `horizontal-craft/reference/fonts.md` — only when font choice materially affects the editorial tone, e.g. literary, academic, public-document, magazine, poster-like title, or brand-specific typography.
|
||||
|
||||
Do not read `fonts.md` for every Chinese article. Most web content can use a safe system font stack unless the typography itself is part of the visual direction.
|
||||
|
||||
---
|
||||
|
||||
## HTML Structure
|
||||
|
||||
Keep the page editable and semantically clear.
|
||||
|
||||
Recommended markers:
|
||||
|
||||
```html
|
||||
<main data-content-page="topic-name" data-content-type="report">
|
||||
<header data-content-section="entry">…</header>
|
||||
<section data-content-section="summary">…</section>
|
||||
<section data-content-section="chapter" id="chapter-1">…</section>
|
||||
<aside data-editorial-device="pull-quote">…</aside>
|
||||
<figure data-figure="chart" data-source-status="provided|placeholder">…</figure>
|
||||
<section data-content-section="appendix">…</section>
|
||||
</main>
|
||||
```
|
||||
|
||||
Rules:
|
||||
|
||||
- preserve real content structure;
|
||||
- keep headings semantic;
|
||||
- mark placeholder areas clearly;
|
||||
- keep figures, captions, notes, sources, and callouts identifiable;
|
||||
- avoid opaque generated blobs that make selected-region edits impossible.
|
||||
|
||||
---
|
||||
|
||||
## References, Load Only When Triggered
|
||||
|
||||
Core reading/layout references:
|
||||
|
||||
- `horizontal-craft/chinese-typography.md` → substantial Chinese text.
|
||||
- `horizontal-craft/reference/text-detail.md` → long-form reading, dense body copy, report/article rhythm.
|
||||
- `horizontal-craft/reference/title-and-breaking.md` → strong title, Chinese headline, public-account title, editorial section headings.
|
||||
- `horizontal-craft/reference/punctuation.md` → punctuation-heavy Chinese, quotes, citations, notes.
|
||||
- `horizontal-craft/reference/grid-system.md` → report/dossier/multi-column/long-image layout.
|
||||
- `horizontal-craft/reference/fonts.md` → font choice materially affects tone.
|
||||
|
||||
Supporting references:
|
||||
|
||||
- `horizontal-craft/color.md` → no design system or color direction is vague.
|
||||
- `horizontal-craft/data-integrity.md` → data, charts, metrics, rankings, percentages, research claims.
|
||||
- `horizontal-craft/link-and-proof.md` → citations, links, client names, testimonials, sources, proof claims.
|
||||
- `horizontal-craft/visual-explanation.md` → diagrams, timelines, maps, process figures, comparison graphics, explanatory charts.
|
||||
- `horizontal-craft/icon-system.md` → icons, pictograms, labels, repeated symbolic marks.
|
||||
- `design-system-reference.md` → brand/style/template/DESIGN.md reference exists.
|
||||
|
||||
Normally avoid:
|
||||
|
||||
- `state-coverage.md` unless the page contains meaningful interactive states.
|
||||
- `form-validation.md` unless there are forms.
|
||||
- `animation-discipline.md` unless motion is requested or used.
|
||||
- `technique-library.md` unless advanced visualization or interaction is truly necessary.
|
||||
|
||||
---
|
||||
|
||||
## Decision Sequence
|
||||
|
||||
1. Inventory the provided content: title, sections, claims, evidence, figures, sources, missing parts.
|
||||
2. Extract the editorial stance from the content: explainer, report, memo, guide, case, release note, essay, public-account article, etc.
|
||||
3. Choose the reading promise: what should the reader understand or take away?
|
||||
4. Select one layout model and one editorial device.
|
||||
5. Design the text block, hierarchy, rhythm, figures, and ending.
|
||||
6. Build the HTML while preserving content truth and marking placeholders.
|
||||
7. Run the final gate.
|
||||
|
||||
---
|
||||
|
||||
## Final Gate
|
||||
|
||||
Run `quality-gate.md` as the shared blocking check. This skill adds content-page-specific checks:
|
||||
|
||||
- content meaning preserved; no invented claims, examples, quotes, data, or conclusions;
|
||||
- placeholder material clearly marked;
|
||||
- body text measure and line-height support real reading;
|
||||
- hierarchy uses more than font size alone;
|
||||
- long pages have visible section rhythm and orientation;
|
||||
- figures/images/charts have a reason, caption, and source/placeholder status where relevant;
|
||||
- links, citations, and proof claims are real or clearly marked;
|
||||
- Chinese text applies `horizontal-craft/chinese-typography.md` when substantial;
|
||||
- the page does not look like a landing page, slide deck, or social card unless explicitly hybrid;
|
||||
- the ending matches the content instead of defaulting to a generic CTA.
|
||||
|
||||
---
|
||||
|
||||
## Handoff
|
||||
|
||||
Use the standard Design Skill delivery, export, and version-management flow.
|
||||
|
||||
If requested, define named export targets for:
|
||||
|
||||
- PDF / print-style article;
|
||||
- WeChat/public-account publishing package;
|
||||
- long image export;
|
||||
- source appendix;
|
||||
- downloadable report assets.
|
||||
|
||||
If the user also needs a social cover, carousel, or summary image, route that output to `social-card.md` rather than forcing it into the reading page.
|
||||
Executable
+105
@@ -0,0 +1,105 @@
|
||||
---
|
||||
name: Deck Skill
|
||||
description: Design HTML-based slide decks, presentation decks, pitch decks, report decks, and narrative visual presentations.
|
||||
mode: deck
|
||||
platform: presentation
|
||||
scenario: deck
|
||||
preview:
|
||||
type: html
|
||||
default_for:
|
||||
- deck
|
||||
- presentation
|
||||
- slide deck
|
||||
- pitch deck
|
||||
- product deck
|
||||
- report deck
|
||||
- strategy deck
|
||||
- workshop deck
|
||||
- 演示文稿
|
||||
- 路演材料
|
||||
speaker_notes: optional
|
||||
animations: optional
|
||||
fidelity: high
|
||||
---
|
||||
|
||||
# Deck Skill
|
||||
|
||||
Design a paged, one-screen-at-a-time presentation that carries a narrative — each slide makes
|
||||
one point, and the sequence builds an argument.
|
||||
|
||||
Judgment, not a rulebook. Use taste. Techniques: `horizontal-craft/technique-library.md`; delivery
|
||||
check: `skills/design/quality-gate.md`. For a base runtime/template, see
|
||||
`skills/design/prototype-templates/` (html-ppt seed) and the Preset Template Rule in SKILL.md.
|
||||
|
||||
## Route elsewhere if
|
||||
|
||||
- it's a scrollable web page (not paged) → `landing-page.md` / `content-page.md`
|
||||
- it's an interactive product → `prototype.md`
|
||||
|
||||
## What makes a deck succeed: one idea per slide, a story across slides
|
||||
|
||||
The failure mode is text-dumped slides with no narrative spine — bullet walls that should have
|
||||
been a doc. So:
|
||||
|
||||
- **One idea per slide.** Each slide has a single takeaway, stated clearly. If a slide needs two
|
||||
points, it's two slides.
|
||||
- **A narrative arc.** The deck has a beginning (problem/context), middle (argument/evidence),
|
||||
and end (ask/conclusion). Order the slides to build, not just enumerate.
|
||||
- **Show, don't dump.** Visualize relationships and data; a sentence + a strong visual beats a
|
||||
paragraph. Speaker notes carry the detail, not the slide.
|
||||
|
||||
## The few decisions that matter
|
||||
|
||||
- **Deck type & tone** — pitch (persuasive, bold), report (clear, sober), strategy (structured),
|
||||
workshop (interactive). This sets density, color, and pacing.
|
||||
- **Narrative spine** — the sequence of takeaways before any visuals. Get the story right first.
|
||||
- **Slide rhythm** — vary slide types (statement, data, comparison, quote, section break);
|
||||
don't repeat the same layout 20 times. Use full-bleed moments for emphasis.
|
||||
- **Data honesty** — charts with correct axes/units/scales; the title states the insight; never
|
||||
invent numbers.
|
||||
|
||||
## Non-negotiables
|
||||
|
||||
- One idea per slide; speaker-facing detail goes in notes, not on the slide.
|
||||
- Never invent data, quotes, or metrics; charts faithful to real numbers.
|
||||
- Consistent system (type scale, color, spacing) across all slides.
|
||||
- No decorative emoji as icons (use SVG); no Lorem ipsum.
|
||||
|
||||
## Avoiding AI slop (one principle)
|
||||
|
||||
Catalog in `quality-gate.md`. Principle: each slide's layout serves its specific point, not a
|
||||
repeated template. A title + three bullets on every slide, a generic gradient title slide,
|
||||
identical icon-feature rows — reflexes. Vary with intent; when a slide feels like filler, cut it.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. Define the deck type, audience, and the single ask/conclusion.
|
||||
2. Write the narrative spine (the ordered takeaways) before designing slides.
|
||||
3. Design slides — one idea each, varied rhythm, visuals over text; detail to speaker notes.
|
||||
4. Techniques/animations from `horizontal-craft/technique-library.md` only when they aid the point; reduced-motion.
|
||||
5. Quality gate before delivery; verify data honesty and one-idea-per-slide.
|
||||
|
||||
## References (load only when relevant)
|
||||
|
||||
- `horizontal-craft/chinese-typography.md` — substantial Chinese text (Mandatory Runtime Baseline).
|
||||
- `horizontal-craft/icon-system.md` — when icons are used.
|
||||
- `canvas-and-device.md` — slide dimensions / export sizes.
|
||||
- `design-system-reference.md` — when a brand/style/template reference is given (see SKILL.md Style Routing).
|
||||
- `horizontal-craft/technique-library.md` — restrained transitions only when they aid the narrative.
|
||||
|
||||
## Creative Context
|
||||
|
||||
For open-ended requests, complete `SKILL.md` Creative Context (creative_positioning,
|
||||
first_impression, anti_default) before generating.
|
||||
|
||||
## Mandatory Final Gate
|
||||
|
||||
Run `quality-gate.md` as a blocking check. Must satisfy: one idea per slide; honest data/charts;
|
||||
consistent system across slides; no invented numbers/quotes; no emoji-as-icons / Lorem ipsum;
|
||||
visible focus and reduced-motion where interactive; non-visible Design Compliance block matching
|
||||
the code. Apply `horizontal-craft/chinese-typography.md` if substantial Chinese text.
|
||||
|
||||
## Handoff
|
||||
|
||||
May continue to: `design-system-reference.md`, `design-system-generation.md`, `export.md`,
|
||||
`skills/version-management/SKILL.md`, built-in selected-region edits, and local parameter handling.
|
||||
Executable
+162
@@ -0,0 +1,162 @@
|
||||
---
|
||||
name: Design System Generation Skill
|
||||
description: Import, extract, normalize, or persist a reusable DESIGN.md from an existing design system, HTML artifact, screenshot, template, style reference, or generated interface.
|
||||
---
|
||||
|
||||
# Design System Generation Skill
|
||||
|
||||
把视觉规则变成一份可复用的 `DESIGN.md`。普通首版页面生成**不需要**这个 skill；仅当用户要导入、提取、规范化、持久化或复用一套设计语言时用。核心理念（借鉴 DESIGN.md 方法）：用自然语言描述视觉系统、有精确值就保留、并解释每个设计选择**为什么**存在而不只是长什么样。产出经 `skills/design/design-system-reference.md` 供未来生成复用。
|
||||
|
||||
## 三种模式
|
||||
|
||||
- **Import（导入）**：用户给了现成 `DESIGN.md`/设计规范，要变成可复用参考。行为：读取、保留用户自有规则、检查缺失段、仅在有用时规范化结构、**不要按模型自己的品味重写**、保留精确值、必要时标出歧义。（如"这是我的 DESIGN.md 后面按这个来"、"检查这份有没有缺失"）
|
||||
- **Extraction（提取）**：从 HTML/截图/模板/页面/CSS/style skill/品牌参考提取设计规则。行为：检视来源、提取可见值与模式、区分精确值与推断值、**既描述表面风格也描述底层意图**、不机械照抄每条 CSS、不臆造没有的细节、分离可复用规则与一次性细节。（如"从这个 HTML 提炼 DESIGN.md"、"把截图总结成设计系统"）
|
||||
- **Persistence（持久化）**：把当前已认可的产物风格沉淀成未来可复用的系统。行为：检视当前产物、从已认可设计提取稳定规则、识别哪些该重复哪些是一次性、**别把页面特有细节变成通用规则**。（如"把当前页面风格沉淀成 DESIGN.md"、"后面页面都沿用这版"）
|
||||
|
||||
多模式同时适用时，以用户明确请求为准。
|
||||
|
||||
## 不要用这个 skill 当
|
||||
|
||||
只生成单个首版页面、只用现有设计系统而不改它、只做局部编辑、只改确定性参数（色/间距/圆角/密度）、或普通的设计参考查找（那用 `design-system-reference.md`）。
|
||||
|
||||
---
|
||||
|
||||
## Workflow
|
||||
|
||||
### 1. 判断模式
|
||||
分类为 Import / Extraction / Persistence；多个适用时以用户明确请求为准。
|
||||
|
||||
---
|
||||
|
||||
### 2. 提取设计意图（不只描述外观）
|
||||
|
||||
解释设计为什么用每个模式，而不只是它长什么样。
|
||||
|
||||
弱：`蓝色按钮、圆角卡片。`
|
||||
好：`蓝色专用于主操作与进度状态，给界面一条清晰路径；圆角软化了原本偏技术感的布局，让密集信息更易接近。`
|
||||
|
||||
应说清：每个视觉选择传达什么、哪些是结构性哪些是装饰性、如何扩展到未来页面、哪些元素是风格的核心、哪些不该被滥用。
|
||||
|
||||
### 3. 分离稳定规则与一次性选择
|
||||
|
||||
好的设计系统不盲目保留每个细节。把决策分为：**核心规则**（未来都重复）、**可选母题**（有用但非处处必需）、**一次性细节**（只属于当前产物）、**应避免**（不该重复）。
|
||||
|
||||
例：
|
||||
```text
|
||||
核心规则：项目年份/角色/状态用紧凑等宽元数据标签。
|
||||
可选母题：项目多时，列表用 hover 预览图。
|
||||
一次性细节：超大动画项目编号只属于首页 hero。
|
||||
应避免：别给无关内容页加随机系统标签。
|
||||
```
|
||||
|
||||
### 4. 产出或更新 DESIGN.md
|
||||
|
||||
用户给了现成 `DESIGN.md` → 更新/规范化而非整体替换；从产物提取 → 产出新的；持久化当前设计 → 产出供 `design-system-reference.md` 复用的。简洁但足以指导未来生成，别搞庞大的 design bible。
|
||||
|
||||
---
|
||||
|
||||
# DESIGN.md 结构
|
||||
|
||||
默认用下面 9 段结构。每段写**实用规则 + 为什么**（不只是值），有精确值就保留、推断的标注清楚。
|
||||
|
||||
**1. Visual Theme & Atmosphere** — 整体气质：情绪、精致度、密度、视觉温度、个性、受众、头 2 秒的感受。**用一个具体参照物锚定主题，而非一串形容词**——"现代/干净/高级/可信"什么都没指定，模型只会做出落在这些词中心的平庸结果；形容词描述一个「区域」，一个具体参照（某类实物/场景/年代，如"1970 年代某老牌大学的研究生讲义"）描述一个「点」，一句话带出配色/字体/留白/有无装饰，还自带「它不是什么」。若一定要用形容词，定义它在本系统里的具体含义。
|
||||
|
||||
**2. Color Palette & Roles** — 按**角色**而非清单记录颜色，说明每个用在哪、哪些不该滥用，强调克制 accent，没可见值不臆造、推断的标注：
|
||||
```md
|
||||
### Core Palette
|
||||
- Background `#F7F3EA` — 暖调编辑感底色，页面背景。
|
||||
- Text Primary `#171717` — 高对比正文与标题。
|
||||
- Text Muted `#73706A` — 元数据、说明、次要细节。
|
||||
- Accent `#D94F30` — 仅用于主 CTA、激活态、每区块一处高亮。
|
||||
- Border `rgba(23,23,23,0.14)` — 不靠重盒子的细微结构。
|
||||
```
|
||||
|
||||
**3. Typography Rules** — 字族 + **语义层级体系**（多数系统 9–15 级，用 headline/display/body/label/caption 等语义命名，每类可再分 small/medium/large），各级字号/字重/行高、层级跨度（克制：标题约 1.9× 正文而非 5×）、中-拉-数字混排。
|
||||
|
||||
**4. Layout & Elevation（布局与层级）** — 网格/版心、间距节奏、留白策略、内容区结构、对齐逻辑（结构而非装饰）。**并说清"层级/深度怎么表达"**：用阴影就定义阴影规则；扁平设计要说清替代方案（边框 / 色彩对比 / 色调分层，如背景用浅色、主内容用纯白卡）——层级如何传达是核心决策，不能漏。
|
||||
|
||||
**5. Component & Shape（组件与形状）** — **形状语言**：整体的形状性格（锐利 / 柔和）与统一的圆角策略（如所有交互元素统一 4px，"克制的现代感"）。**组件形态**：关键组件（卡片/按钮/标签/输入框等）的圆角、边框、阴影、内距规则，**尤其覆盖状态变体**（primary/secondary、hover/pressed/active、空/错误/禁用）——状态覆盖是设计系统的关键，不只画默认态。
|
||||
|
||||
**6. Interaction & Motion** — 动效性格、入场/hover/过渡惯例、始终带 reduced-motion，区分核心交互与一次性效果。
|
||||
|
||||
**7. Responsive Behavior** — 断点、移动端如何重排、触控友好、各视口可读性。
|
||||
|
||||
**8. Do's and Don'ts** — 写具体规则。**注意：又长又啰嗦的 Don'ts 往往说明主题描述太模糊（足够具体的参照会自带大部分负向约束）；一个具体参照 + 一份刻意的 Do/Don't 才是最佳组合。**
|
||||
```text
|
||||
Do：作品为主要佐证；保持强层级；元数据标签克制一致；限制 accent 数量；用一个难忘的结构/交互主意；有精确值就复用。
|
||||
Don't：假评价/假指标/假 logo；通用区块填空；照抄品牌素材/专有 UI；无目的的装饰渐变/emoji；每个区块一样响；可发布产物里有死链/失效点击；把一次性 hero 效果当通用规则。
|
||||
```
|
||||
|
||||
**9. Agent Prompt Guide** — 写给未来 agent 的、直接可操作的生成指令：
|
||||
```md
|
||||
在本系统里生成新页面时：从作品优先结构开始；角色/年份/类别用紧凑元数据标签；accent 保留给主操作与激活态；尽早展示真实作品、别先放长 bio；用一个大胆结构动作、其余区块安静；除非用户要简单版避免通用卡片网格；保留响应式与触控友好。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Lightweight Tokens
|
||||
|
||||
If useful, include a compact token section.
|
||||
|
||||
Use only when values are available or can be responsibly inferred.
|
||||
|
||||
Example:
|
||||
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"background": "#F7F3EA",
|
||||
"surface": "#FFFFFF",
|
||||
"textPrimary": "#171717",
|
||||
"textMuted": "#73706A",
|
||||
"accent": "#D94F30",
|
||||
"border": "rgba(23, 23, 23, 0.14)"
|
||||
},
|
||||
"radius": {
|
||||
"sm": "6px",
|
||||
"md": "12px",
|
||||
"lg": "24px"
|
||||
},
|
||||
"spacing": {
|
||||
"base": "8px",
|
||||
"section": "96px"
|
||||
},
|
||||
"typography": {
|
||||
"bodySize": "16px",
|
||||
"bodyLineHeight": "1.5",
|
||||
"labelSize": "11px"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Do not include fake precision. If values are inferred, state that they are inferred.
|
||||
|
||||
---
|
||||
|
||||
## 各模式补充（避免项）
|
||||
|
||||
三模式的核心行为已在前面「三种模式」给出。各自要避免：
|
||||
- **Extraction**：别把原始 CSS 倒进 DESIGN.md、别臆造没有的值、别把一次性细节当系统规则、别漏掉响应式/交互。
|
||||
- **Persistence**：别过拟合当前页、别把占位内容当设计规则、别把临时实验固化成永久系统、别忽略用户已认可的风格决定。
|
||||
- **Import**：输出可以是更新版/规范化版/缺口分析+建议/兼容性说明；不删用户规则除非冲突或重复。
|
||||
|
||||
## Quality Rules
|
||||
|
||||
一份好的 `DESIGN.md`：可复用、具体、扎根源材料、简洁够用、分清核心vs可选、IP安全、对未来生成有用。**避免**：通用设计套话、空泛的 premium/modern/clean 措辞、有理论无可操作规则、照抄专有品牌系统、把单个产物细节当通用规则、臆造源材料不支持的 token。
|
||||
|
||||
## IP and Brand Safety
|
||||
|
||||
源是公开品牌灵感时：不把输出当官方系统、不照抄 logo/素材/精确页面结构/专有 UI、只描述高层视觉特质、产出导向原创的可复用规则。源是用户自有时：明确提供则视为权威、保留精确值、不完整处标注假设。
|
||||
|
||||
## Chinese Typography Reference
|
||||
|
||||
产物含大量中文/CJK、中文编辑排版、公众号、小红书、中文 deck、中文 UI 标签或印刷风 HTML 时，用 `horizontal-craft/chinese-typography.md`；把印刷方法转为 HTML 结构：版心、网格、留白、标题组、图版、边注、章节节奏与标点。
|
||||
|
||||
## Quality Gate
|
||||
|
||||
交付前应用 `quality-gate.md`；本场景可加更严的检查，但不得削弱共享门禁。
|
||||
|
||||
## Handoff
|
||||
|
||||
生成/导入/规范化/更新后的 `DESIGN.md` 经 `skills/design/design-system-reference.md` 供未来设计复用，应是可复用参考而非一次性总结。有用时记下：源产物/模板/截图、所选 style skill/品牌灵感、日期版本、假设、缺失信息。
|
||||
Executable
+600
@@ -0,0 +1,600 @@
|
||||
---
|
||||
name: Design System Reference Skill
|
||||
description: Select and apply provided style skills, brand inspiration references, open-source component systems, preset HTML templates, or user-owned visual systems to guide design generation and edits.
|
||||
mode: reference
|
||||
platform: any
|
||||
scenario: design-system-reference
|
||||
preview:
|
||||
type: none
|
||||
default_for:
|
||||
- style reference
|
||||
- brand inspiration
|
||||
- design system reference
|
||||
- preset template
|
||||
- open-source component system
|
||||
- user-owned design system
|
||||
- DESIGN.md reference
|
||||
fidelity: system
|
||||
---
|
||||
|
||||
# Design System Reference Skill
|
||||
|
||||
Use this skill when a design task should follow an existing reference instead of inventing a new visual language.
|
||||
|
||||
This skill is not a artifact skill. It does not decide whether the artifact is a portfolio, landing page, prototype, content page, or H5 tool.
|
||||
|
||||
It works together with artifact skills by providing visual, structural, component, template, and style constraints.
|
||||
|
||||
Examples:
|
||||
|
||||
- `portfolio.md` + `design-system-reference.md`
|
||||
- `deck.md` + `design-system-reference.md`
|
||||
- `prototype.md` + `design-system-reference.md`
|
||||
- `landing-page.md` + `design-system-reference.md`
|
||||
- `web-tool.md` + `design-system-reference.md`
|
||||
|
||||
---
|
||||
|
||||
## Trigger
|
||||
|
||||
Use this skill when:
|
||||
|
||||
- the user explicitly selects a design system, style, brand reference, or preset HTML template
|
||||
- the user asks to use a known style skill
|
||||
- the user asks to use a known open-source component system
|
||||
- the user mentions a public brand or product style as inspiration
|
||||
- the user uploads or provides a design system, style guide, screenshot, codebase, tokens, or component library
|
||||
- the user asks to keep the new artifact consistent with an existing artifact
|
||||
- the user says to follow a previous version, selected template, UI kit, component style, or visual language
|
||||
|
||||
Examples:
|
||||
|
||||
- “用 Ant Design 做”
|
||||
- “用 shadcn/ui”
|
||||
- “做成 editorial 风格”
|
||||
- “更 minimal”
|
||||
- “像 Apple 一点”
|
||||
- “参考 Linear”
|
||||
- “小红书风格”
|
||||
- “按这个截图的风格”
|
||||
- “沿用上次那个页面的风格”
|
||||
- “这是我们的设计规范，按这个来”
|
||||
- “按这个 HTML 模板改”
|
||||
|
||||
Do not use this skill when:
|
||||
|
||||
- the task has no visual, system, style, or template reference
|
||||
- the user only wants pure writing, research, or coding
|
||||
- the user asks for a new visual direction without any reference
|
||||
- the reference would require copying proprietary assets, logos, distinctive commercial layouts, or private UI patterns
|
||||
|
||||
---
|
||||
|
||||
## Goal
|
||||
|
||||
The goal is to improve design quality and consistency by grounding output in the right reference.
|
||||
|
||||
This skill should help the agent:
|
||||
|
||||
- avoid generic visual taste
|
||||
- select only the relevant reference
|
||||
- use existing systems when available
|
||||
- distinguish reusable style skills from public brand inspiration
|
||||
- distinguish open-source component systems from proprietary brand UI
|
||||
- prevent unauthorized brand copying
|
||||
- preserve consistency across generated artifacts
|
||||
- reuse templates, tokens, components, and visual patterns responsibly
|
||||
|
||||
The goal is not to force every design into a design system.
|
||||
|
||||
If no relevant reference exists, proceed with scenario-specific defaults from `skills/design/SKILL.md`.
|
||||
|
||||
---
|
||||
|
||||
## Available Reference Libraries
|
||||
|
||||
During testing, the system may provide two reference libraries.
|
||||
|
||||
Look up known references in:
|
||||
|
||||
`skills/design/design-systems/INDEX.md`
|
||||
|
||||
Do not load every reference by default. Select only the most relevant reference.
|
||||
|
||||
---
|
||||
|
||||
### 1. Style Skills
|
||||
|
||||
Path:
|
||||
|
||||
`skills/design/design-systems/style-skills/`
|
||||
|
||||
These are reusable design style skills. Each style may contain:
|
||||
|
||||
- `SKILL.md`
|
||||
- `DESIGN.md`
|
||||
- `components.html`, optional
|
||||
- `tokens.css`, optional
|
||||
|
||||
Use these when the user explicitly requests a visual style, UI style, design mood, or implementation style.
|
||||
|
||||
Examples:
|
||||
|
||||
- minimal
|
||||
- luxury
|
||||
- editorial
|
||||
- paper
|
||||
- retro
|
||||
- dashboard
|
||||
- shadcn
|
||||
- ant
|
||||
- glassmorphism
|
||||
- neobrutalism
|
||||
- professional
|
||||
- expressive
|
||||
|
||||
Behavior:
|
||||
|
||||
- Treat these as reusable design recipes.
|
||||
- Read the selected style's `SKILL.md` and `DESIGN.md` before generating when available.
|
||||
- Apply only the relevant style guidance to the current artifact.
|
||||
- Do not load all style skills.
|
||||
- Do not combine many style skills unless the user explicitly asks.
|
||||
- If multiple style skills match, choose the most specific one.
|
||||
- If the style skill conflicts with the user's content or selected template, preserve the user's goal first.
|
||||
|
||||
Example:
|
||||
|
||||
```text
|
||||
“做一个 editorial 风格的个人作品集”
|
||||
→ `portfolio.md`
|
||||
→ `design-system-reference.md`
|
||||
→ `design-systems/style-skills/editorial/`
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. Brand Inspiration
|
||||
|
||||
Path:
|
||||
|
||||
`skills/design/design-systems/brand-inspiration/`
|
||||
|
||||
These are public brand-inspired `DESIGN.md` references.
|
||||
|
||||
Use these when the user mentions a known public brand or product style.
|
||||
|
||||
Examples:
|
||||
|
||||
- Apple
|
||||
- Stripe
|
||||
- Notion
|
||||
- Airbnb
|
||||
- Vercel
|
||||
- Figma
|
||||
- Nike
|
||||
- Tesla
|
||||
- Shopify
|
||||
- Spotify
|
||||
|
||||
Behavior:
|
||||
|
||||
- Treat these as inspiration only.
|
||||
- Read the selected brand's `DESIGN.md` when available.
|
||||
- Extract high-level qualities such as mood, hierarchy, density, typography direction, spacing rhythm, color restraint, and interaction feel.
|
||||
- Create an original design.
|
||||
- Do not copy logos, layouts, assets, proprietary screens, branded UI, or distinctive commercial patterns.
|
||||
- Do not claim the output uses the official design system.
|
||||
|
||||
Example:
|
||||
|
||||
```text
|
||||
“做一个 Apple 风格的作品集”
|
||||
→ `portfolio.md`
|
||||
→ `design-system-reference.md`
|
||||
→ `design-systems/brand-inspiration/apple/`
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Reference Types
|
||||
|
||||
There are five reference types.
|
||||
|
||||
Use the strongest applicable type. Do not load all reference types by default.
|
||||
|
||||
---
|
||||
|
||||
### 1. User-Owned Design System
|
||||
|
||||
Use this when the user provides or owns the design system.
|
||||
|
||||
Examples:
|
||||
|
||||
- uploaded brand guideline
|
||||
- uploaded tokens
|
||||
- uploaded UI kit
|
||||
- uploaded component library
|
||||
- existing project codebase
|
||||
- existing product screenshots
|
||||
- user-provided Figma file or future Figma MCP reference
|
||||
- previous artifact created in the same workspace
|
||||
|
||||
Priority:
|
||||
|
||||
Highest.
|
||||
|
||||
Behavior:
|
||||
|
||||
- Treat as authoritative.
|
||||
- Read the provided source before generating.
|
||||
- Prefer exact tokens, colors, typography, spacing, radius, shadows, components, and patterns.
|
||||
- Match the existing visual vocabulary before adding new elements.
|
||||
- Do not invent new visual rules unless the user asks for a new direction.
|
||||
- If the design system is incomplete, fill gaps conservatively and record assumptions.
|
||||
|
||||
Use when the user says:
|
||||
|
||||
- “按我们的设计规范”
|
||||
- “沿用这个项目的风格”
|
||||
- “参考这个页面”
|
||||
- “基于这个截图”
|
||||
- “用这个组件库”
|
||||
- “跟之前那个版本保持一致”
|
||||
|
||||
---
|
||||
|
||||
### 2. Style Skill Reference
|
||||
|
||||
Use this when the user asks for a general visual style, design mood, or UI style that exists in `style-skills/`.
|
||||
|
||||
Examples:
|
||||
|
||||
- minimal
|
||||
- luxury
|
||||
- editorial
|
||||
- paper
|
||||
- retro
|
||||
- dashboard
|
||||
- shadcn
|
||||
- ant
|
||||
- glassmorphism
|
||||
- neobrutalism
|
||||
- professional
|
||||
- expressive
|
||||
|
||||
Priority:
|
||||
|
||||
High when explicitly requested.
|
||||
|
||||
Behavior:
|
||||
|
||||
- Treat as a reusable design recipe.
|
||||
- Read the selected style's `SKILL.md` and `DESIGN.md` when available.
|
||||
- Apply the selected style to the current scenario, not the other way around.
|
||||
- Do not let a style skill override the user's core artifact goal.
|
||||
- Do not combine many style skills by default.
|
||||
|
||||
---
|
||||
|
||||
### 3. Open-Source Component System
|
||||
|
||||
Use this when the user explicitly asks for a public/open-source design system or component library.
|
||||
|
||||
Examples:
|
||||
|
||||
- Ant Design
|
||||
- Material UI / MUI
|
||||
- Chakra UI
|
||||
- Radix UI
|
||||
- shadcn/ui
|
||||
- Bootstrap
|
||||
- Tailwind UI, when license/access permits
|
||||
|
||||
Priority:
|
||||
|
||||
High when explicitly requested.
|
||||
|
||||
Behavior:
|
||||
|
||||
- Use the system directly according to public documentation and license.
|
||||
- Prefer official components, tokens, layout patterns, and usage guidance.
|
||||
- Generate implementation using real component APIs when relevant.
|
||||
- Respect attribution or license requirements when relevant.
|
||||
- Do not confuse the open-source system with the company’s private brand assets or internal product UI.
|
||||
|
||||
Use when the user says:
|
||||
|
||||
- “用 Ant Design 组件”
|
||||
- “用 antd”
|
||||
- “用 Material UI”
|
||||
- “用 shadcn/ui”
|
||||
- “用 Bootstrap”
|
||||
- “做成 MUI 风格”
|
||||
|
||||
Important:
|
||||
|
||||
“Use Ant Design” means use Ant Design’s public component system. It does not mean copying Ant Group’s proprietary products, brand assets, internal dashboards, or non-public patterns.
|
||||
|
||||
---
|
||||
|
||||
### 4. Public Brand Inspiration
|
||||
|
||||
Use this when the user mentions a well-known brand or product style, but does not provide official assets or authorization.
|
||||
|
||||
Examples:
|
||||
|
||||
- Apple style
|
||||
- Linear style
|
||||
- Notion style
|
||||
- Stripe style
|
||||
- Airbnb style
|
||||
- Nike style
|
||||
- 小红书风格
|
||||
- magazine style
|
||||
- premium style
|
||||
|
||||
Priority:
|
||||
|
||||
Medium.
|
||||
|
||||
Behavior:
|
||||
|
||||
- Treat as high-level inspiration only.
|
||||
- Extract abstract qualities, not proprietary expression.
|
||||
- Create an original design.
|
||||
- Do not copy logos, brand assets, distinctive layouts, exact page structures, proprietary UI patterns, or internal product patterns.
|
||||
- Do not claim the output uses an official design system.
|
||||
|
||||
Allowed to extract:
|
||||
|
||||
- mood
|
||||
- restraint
|
||||
- density
|
||||
- typography direction
|
||||
- spacing rhythm
|
||||
- content structure
|
||||
- interaction feel
|
||||
- motion temperament
|
||||
- visual temperature
|
||||
- hierarchy style
|
||||
|
||||
Not allowed:
|
||||
|
||||
- copying branded layouts
|
||||
- using logos or trademarks as design assets
|
||||
- recreating proprietary product screens
|
||||
- mimicking distinctive commercial UI too closely
|
||||
- claiming official system usage
|
||||
|
||||
Example:
|
||||
|
||||
“Apple style” means Apple-inspired qualities such as restraint, premium spacing, strong typography, product focus, and polished motion.
|
||||
|
||||
It does not mean copying apple.com, using Apple assets, or recreating Apple proprietary UI.
|
||||
|
||||
---
|
||||
|
||||
### 5. Preset HTML Template
|
||||
|
||||
Use this only when the user explicitly selects a preset HTML template.
|
||||
|
||||
Priority:
|
||||
|
||||
High when selected.
|
||||
|
||||
Behavior:
|
||||
|
||||
- Treat the selected template as a structured starting point.
|
||||
- Preserve useful layout, responsive behavior, section structure, and interaction patterns.
|
||||
- Replace placeholder content with user-provided or clearly inferred content.
|
||||
- Remove sections that do not serve the user’s goal.
|
||||
- Do not fill unused template slots with fake content.
|
||||
- Adapt visual style, copy, density, and parameters to the user’s request.
|
||||
- Preserve editable structure for comment edits, parameter edits, and future export.
|
||||
- Avoid rewriting the whole template when a local edit is enough.
|
||||
|
||||
Do not apply a preset template by default if the user did not select one.
|
||||
|
||||
Use when the user says:
|
||||
|
||||
- “用这个模板”
|
||||
- “基于这个 HTML 模板改”
|
||||
- “我选这个模板”
|
||||
- “按这个模板生成”
|
||||
- “从这个模板开始”
|
||||
|
||||
---
|
||||
|
||||
### 6. Prior Artifact Reference
|
||||
|
||||
Use this when the user asks to continue, match, reuse, or modify a previous artifact.
|
||||
|
||||
Examples:
|
||||
|
||||
- “沿用刚才那个风格”
|
||||
- “保持上一版的感觉”
|
||||
- “这个页面也用同样的布局”
|
||||
- “把这个模板复用到另一个页面”
|
||||
- “只改文案，视觉不要动”
|
||||
|
||||
Priority:
|
||||
|
||||
Very high for follow-up work.
|
||||
|
||||
Behavior:
|
||||
|
||||
- Treat the current or previous artifact as the active design system.
|
||||
- Preserve approved visual direction.
|
||||
- Preserve layout, rhythm, typography, components, and parameters unless the user asks to change them.
|
||||
- Make local edits when possible.
|
||||
- Do not restart from a new style unless the user explicitly requests it.
|
||||
|
||||
---
|
||||
|
||||
## Selection Rules
|
||||
|
||||
When selecting a design system reference:
|
||||
|
||||
1. Prefer explicit user choice over inferred style.
|
||||
2. Prefer user-owned systems over public systems.
|
||||
3. Prefer a selected HTML template over generic scenario patterns.
|
||||
4. Prefer style skills for general style requests.
|
||||
5. Prefer open-source component systems when implementation depends on components.
|
||||
6. Prefer brand inspiration only for mood and visual direction.
|
||||
7. Prefer the current artifact when editing or continuing existing work.
|
||||
8. Do not load multiple design systems unless the user asks to combine them.
|
||||
9. If multiple references conflict, prioritize the one closest to the user’s actual artifact or explicit request.
|
||||
|
||||
Examples:
|
||||
|
||||
```text
|
||||
“用 Ant Design 做一个后台原型”
|
||||
→ `prototype.md` + `design-system-reference.md`
|
||||
→ `design-systems/style-skills/ant/` or an open-source Ant Design reference
|
||||
|
||||
“Apple 风格的个人作品集”
|
||||
→ `portfolio.md` + `design-system-reference.md`
|
||||
→ `design-systems/brand-inspiration/apple/`
|
||||
|
||||
“editorial 风格的作品集”
|
||||
→ `portfolio.md` + `design-system-reference.md`
|
||||
→ `design-systems/style-skills/editorial/`
|
||||
|
||||
“按这个 HTML 模板做产品落地页”
|
||||
→ `landing-page.md` + `design-system-reference.md`
|
||||
→ selected preset HTML template
|
||||
|
||||
“沿用上一版风格，改成 H5 工具”
|
||||
→ `web-tool.md` + `design-system-reference.md`
|
||||
→ prior artifact reference
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Conflict Rules
|
||||
|
||||
When references conflict:
|
||||
|
||||
### User content beats template slots
|
||||
|
||||
If a template has sections the user did not ask for, remove them instead of inventing content.
|
||||
|
||||
### User-selected template beats generic scenario pattern
|
||||
|
||||
Preserve the selected template’s useful structure unless it conflicts with the user’s goal.
|
||||
|
||||
### User-owned design system beats public inspiration
|
||||
|
||||
If the user provides a brand guideline, use it over “Apple style” or other public inspiration.
|
||||
|
||||
### Style skill beats vague mood
|
||||
|
||||
If the user explicitly asks for `editorial`, use the selected style skill instead of loosely guessing what editorial means.
|
||||
|
||||
### Open-source component API beats visual imitation
|
||||
|
||||
If the user asks to use Ant Design, use Ant Design components correctly instead of merely imitating their appearance.
|
||||
|
||||
### Current artifact beats new direction during edits
|
||||
|
||||
If the user asks for a small edit, preserve the current artifact unless they explicitly request a style change.
|
||||
|
||||
---
|
||||
|
||||
## Usage Rules
|
||||
|
||||
When applying a design reference:
|
||||
|
||||
- Do not blindly copy the reference.
|
||||
- Extract what is relevant to the current scenario.
|
||||
- Preserve the user’s content and goal.
|
||||
- Keep the artifact editable.
|
||||
- Avoid unnecessary redesign.
|
||||
- Avoid mixing unrelated systems.
|
||||
- Do not introduce visual rules from a lower-priority reference when a higher-priority reference already provides guidance.
|
||||
|
||||
When adapting a reference:
|
||||
|
||||
- remove irrelevant sections
|
||||
- simplify when the reference is too complex
|
||||
- preserve useful responsive behavior
|
||||
- preserve useful interaction patterns
|
||||
- keep component naming and structure clear
|
||||
- record assumptions when useful
|
||||
|
||||
---
|
||||
|
||||
## IP and Brand Safety
|
||||
|
||||
Do not recreate copyrighted or proprietary designs.
|
||||
|
||||
Refuse or redirect if the user asks to:
|
||||
|
||||
- copy a company’s distinctive UI
|
||||
- recreate a proprietary product screen
|
||||
- use logos or brand assets without authorization
|
||||
- mimic a proprietary command structure
|
||||
- clone a branded website or app too closely
|
||||
|
||||
Instead, create an original design inspired by high-level qualities.
|
||||
|
||||
Safe phrasing:
|
||||
|
||||
```text
|
||||
I can create an original design with similar high-level qualities, such as restrained typography, premium spacing, and product-focused composition, but I should not copy the exact Apple layout or assets.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Output Expectations
|
||||
|
||||
After applying this skill, the design should show:
|
||||
|
||||
- clearer visual direction
|
||||
- better consistency
|
||||
- reduced generic styling
|
||||
- better fit to the user’s stated reference
|
||||
- appropriate use of templates, components, style skills, or inspiration
|
||||
- no unauthorized copying
|
||||
- preserved editability
|
||||
|
||||
When useful, record:
|
||||
|
||||
- reference type
|
||||
- selected design system, style skill, brand inspiration, or template
|
||||
- files consulted
|
||||
- assumptions made
|
||||
- sections kept or removed
|
||||
- parameters changed
|
||||
- license or attribution concerns
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Chinese Typography Reference
|
||||
|
||||
Use `horizontal-craft/chinese-typography.md` when the artifact contains substantial Chinese / Chinese / CJK text, Chinese editorial layout, public-account formatting, Xiaohongshu content, Chinese deck typography, Chinese UI labels, or print-design-inspired HTML.
|
||||
|
||||
Translate print-design methods into HTML structure: 版心, 网格, 留白, 标题组, 图版, 边注, 章节 rhythm, and proper punctuation.
|
||||
|
||||
|
||||
## Quality Gate
|
||||
|
||||
Before delivering this scenario, apply `quality-gate.md`.
|
||||
|
||||
This scenario may add stricter checks, but it must not weaken the shared gate.
|
||||
|
||||
## Handoff
|
||||
|
||||
After selecting and applying the reference, return to the primary artifact skill.
|
||||
|
||||
Examples:
|
||||
|
||||
- selected `apple` brand inspiration → return to `portfolio.md`
|
||||
- selected `ant` or `shadcn` style skill → return to the relevant artifact skill
|
||||
- selected HTML template → return to the relevant artifact skill
|
||||
- selected previous artifact → return to the relevant artifact skill
|
||||
|
||||
This skill guides visual and system constraints. The artifact skill still owns artifact structure and user goal.
|
||||
Executable
+281
@@ -0,0 +1,281 @@
|
||||
# Design System Reference Index
|
||||
|
||||
Use this index to select one relevant design reference.
|
||||
|
||||
Do not load all references. Choose the closest match to the user's explicit request and active artifact.
|
||||
|
||||
## Library Layout
|
||||
|
||||
```text
|
||||
SKILLS/design/design-systems/
|
||||
├── INDEX.md
|
||||
├── style-skills/
|
||||
│ └── [style-name]/
|
||||
│ ├── DESIGN.md
|
||||
│ ├── components.html # optional
|
||||
│ └── tokens.css # optional
|
||||
└── brand-inspiration/
|
||||
└── [brand-name]/
|
||||
├── DESIGN.md
|
||||
├── components.html # optional
|
||||
└── tokens.css # optional
|
||||
```
|
||||
|
||||
## Selection Rule
|
||||
|
||||
- Use `style-skills/` when the user asks for a general visual style, mood, UI style, product surface style, or reusable design recipe.
|
||||
- Use `brand-inspiration/` when the user references a public brand or product style.
|
||||
- Treat brand references as inspiration only. Do not copy logos, proprietary layouts, branded assets, or distinctive commercial UI.
|
||||
- If a reference includes `components.html` or `tokens.css`, use those as stronger implementation references when the user asks for component fidelity.
|
||||
- Do not combine multiple references unless the user explicitly asks.
|
||||
|
||||
---
|
||||
|
||||
# Style Skills
|
||||
|
||||
Path: `SKILLS/design/design-systems/style-skills/`
|
||||
|
||||
Available style skills:
|
||||
|
||||
> **按风格气质选(用户说"清新/高级/科技/复古/温暖/极简"等模糊词而非点名系统时)**：
|
||||
> 读同目录 `index.json`，按每个条目的 `mood` / `formality` / `scheme` 标签匹配用户描述，
|
||||
> 选气质最接近的 style-skill。下面列表的一句话描述只是补充；`index.json` 的标签才是匹配主依据。
|
||||
|
||||
- **agentic** — Path: `style-skills/agentic/`
|
||||
- **ant** — Path: `style-skills/ant/` — Ant Design / enterprise component-oriented UI; use when user explicitly asks for Ant Design or antd-like enterprise UI.
|
||||
- **application** — Path: `style-skills/application/` — Product/application UI patterns.
|
||||
- **artistic** — Path: `style-skills/artistic/`
|
||||
- **atelier-zero** — Path: `style-skills/atelier-zero/` — Minimal studio / atelier-style visual system.
|
||||
- **bento** — Path: `style-skills/bento/`
|
||||
- **bold** — Path: `style-skills/bold/`
|
||||
- **brutalism** — Path: `style-skills/brutalism/` — Raw structure, direct hierarchy, intentionally rough visual energy.
|
||||
- **cafe** — Path: `style-skills/cafe/`
|
||||
- **claude** — Path: `style-skills/claude/`
|
||||
- **claymorphism** — Path: `style-skills/claymorphism/`
|
||||
- **clean** — Path: `style-skills/clean/` — Clean, neutral, orderly composition.
|
||||
- **codex** — Path: `style-skills/codex/`
|
||||
- **colorful** — Path: `style-skills/colorful/`
|
||||
- **contemporary** — Path: `style-skills/contemporary/`
|
||||
- **corporate** — Path: `style-skills/corporate/` — Business-facing, formal, structured visual language.
|
||||
- **cosmic** — Path: `style-skills/cosmic/`
|
||||
- **creative** — Path: `style-skills/creative/`
|
||||
- **dashboard** — Path: `style-skills/dashboard/` — Dense data/application interface patterns.
|
||||
- **default** — Path: `style-skills/default/` — Neutral general-purpose design system fallback. — includes components, tokens
|
||||
- **dithered** — Path: `style-skills/dithered/`
|
||||
- **doodle** — Path: `style-skills/doodle/`
|
||||
- **dramatic** — Path: `style-skills/dramatic/`
|
||||
- **editorial** — Path: `style-skills/editorial/` — Magazine-like typography, strong content rhythm, art-directed layout.
|
||||
- **elegant** — Path: `style-skills/elegant/`
|
||||
- **energetic** — Path: `style-skills/energetic/`
|
||||
- **enterprise** — Path: `style-skills/enterprise/` — B2B/enterprise clarity, dense but controlled components.
|
||||
- **expressive** — Path: `style-skills/expressive/`
|
||||
- **fantasy** — Path: `style-skills/fantasy/`
|
||||
- **fiction** — Path: `style-skills/fiction/`
|
||||
- **flat** — Path: `style-skills/flat/`
|
||||
- **friendly** — Path: `style-skills/friendly/`
|
||||
- **futuristic** — Path: `style-skills/futuristic/`
|
||||
- **glassmorphism** — Path: `style-skills/glassmorphism/` — Translucent layered surfaces; use sparingly.
|
||||
- **gradient** — Path: `style-skills/gradient/`
|
||||
- **hud** — Path: `style-skills/hud/` — Heads-up-display / operational interface aesthetic.
|
||||
- **immersive** — Path: `style-skills/immersive/`
|
||||
- **impeccable** — Path: `style-skills/impeccable/`
|
||||
- **levels** — Path: `style-skills/levels/`
|
||||
- **lingo** — Path: `style-skills/lingo/`
|
||||
- **luxury** — Path: `style-skills/luxury/` — Premium spacing, refined contrast, elegant restraint.
|
||||
- **material** — Path: `style-skills/material/` — Material Design-like component system and interaction clarity.
|
||||
- **matrix** — Path: `style-skills/matrix/`
|
||||
- **minimal** — Path: `style-skills/minimal/` — Restrained, low-decoration, content-first layout.
|
||||
- **mission-control** — Path: `style-skills/mission-control/` — Command center and control-room inspired product surfaces.
|
||||
- **modern** — Path: `style-skills/modern/`
|
||||
- **mono** — Path: `style-skills/mono/`
|
||||
- **neobrutalism** — Path: `style-skills/neobrutalism/` — Bold borders, high contrast, raw visual energy.
|
||||
- **neon** — Path: `style-skills/neon/`
|
||||
- **neumorphism** — Path: `style-skills/neumorphism/`
|
||||
- **pacman** — Path: `style-skills/pacman/`
|
||||
- **paper** — Path: `style-skills/paper/` — Tactile paper-like surfaces and editorial warmth.
|
||||
- **parchment** — Path: `style-skills/parchment/` — Warm parchment, ink-blue accent, serif-led print/editorial system for formal & long-form documents (résumé, report, white paper, letter). Pairs with content-page; not a product-UI style.
|
||||
- **perspective** — Path: `style-skills/perspective/`
|
||||
- **premium** — Path: `style-skills/premium/`
|
||||
- **professional** — Path: `style-skills/professional/` — Conservative professional presentation, clarity, trust, low-risk polish.
|
||||
- **publication** — Path: `style-skills/publication/`
|
||||
- **refined** — Path: `style-skills/refined/`
|
||||
- **retro** — Path: `style-skills/retro/` — Nostalgic visual language.
|
||||
- **riso** — Path: `style-skills/riso/`
|
||||
- **sega** — Path: `style-skills/sega/`
|
||||
- **shadcn** — Path: `style-skills/shadcn/` — Modern Tailwind/shadcn-style component composition; use when user asks for shadcn/ui or modern composable UI.
|
||||
- **simple** — Path: `style-skills/simple/`
|
||||
- **sketch** — Path: `style-skills/sketch/`
|
||||
- **skeumorphism** — Path: `style-skills/skeumorphism/`
|
||||
- **sleek** — Path: `style-skills/sleek/`
|
||||
- **spacious** — Path: `style-skills/spacious/`
|
||||
- **storytelling** — Path: `style-skills/storytelling/`
|
||||
- **terracotta** — Path: `style-skills/terracotta/`
|
||||
- **tetris** — Path: `style-skills/tetris/`
|
||||
- **totality-festival** — Path: `style-skills/totality-festival/`
|
||||
- **trading-terminal** — Path: `style-skills/trading-terminal/` — Dense financial/trading terminal aesthetic.
|
||||
- **urdu** — Path: `style-skills/urdu/`
|
||||
- **vibrant** — Path: `style-skills/vibrant/`
|
||||
- **vintage** — Path: `style-skills/vintage/`
|
||||
- **warm-editorial** — Path: `style-skills/warm-editorial/` — Warm editorial system with human texture.
|
||||
|
||||
---
|
||||
|
||||
# Brand Inspiration
|
||||
|
||||
Path: `SKILLS/design/design-systems/brand-inspiration/`
|
||||
|
||||
Use only as high-level inspiration unless the user provides owned assets or an official/open design system.
|
||||
|
||||
Available brand inspiration references:
|
||||
|
||||
- **airbnb** — Path: `brand-inspiration/airbnb/` — Warm human-centered marketplace feel. — includes components, tokens
|
||||
- **airtable** — Path: `brand-inspiration/airtable/`
|
||||
- **apple** — Path: `brand-inspiration/apple/` — Restraint, premium spacing, clear typography, product focus. — includes components, tokens
|
||||
- **arc** — Path: `brand-inspiration/arc/`
|
||||
- **binance** — Path: `brand-inspiration/binance/`
|
||||
- **bmw** — Path: `brand-inspiration/bmw/`
|
||||
- **bmw-m** — Path: `brand-inspiration/bmw-m/`
|
||||
- **bugatti** — Path: `brand-inspiration/bugatti/`
|
||||
- **cal** — Path: `brand-inspiration/cal/`
|
||||
- **canva** — Path: `brand-inspiration/canva/`
|
||||
- **cisco** — Path: `brand-inspiration/cisco/`
|
||||
- **claude** — Path: `brand-inspiration/claude/`
|
||||
- **clay** — Path: `brand-inspiration/clay/`
|
||||
- **clickhouse** — Path: `brand-inspiration/clickhouse/`
|
||||
- **cohere** — Path: `brand-inspiration/cohere/`
|
||||
- **coinbase** — Path: `brand-inspiration/coinbase/`
|
||||
- **composio** — Path: `brand-inspiration/composio/`
|
||||
- **cursor** — Path: `brand-inspiration/cursor/` — includes components, tokens
|
||||
- **discord** — Path: `brand-inspiration/discord/` — Community product UI with playful but structured interface patterns. — includes components, tokens
|
||||
- **duolingo** — Path: `brand-inspiration/duolingo/`
|
||||
- **elevenlabs** — Path: `brand-inspiration/elevenlabs/`
|
||||
- **expo** — Path: `brand-inspiration/expo/`
|
||||
- **ferrari** — Path: `brand-inspiration/ferrari/`
|
||||
- **figma** — Path: `brand-inspiration/figma/` — Collaborative product energy, structured color, approachable creation. — includes components, tokens
|
||||
- **framer** — Path: `brand-inspiration/framer/`
|
||||
- **github** — Path: `brand-inspiration/github/` — Developer collaboration, code/product clarity, utility-first UI. — includes components, tokens
|
||||
- **hashicorp** — Path: `brand-inspiration/hashicorp/`
|
||||
- **huggingface** — Path: `brand-inspiration/huggingface/`
|
||||
- **ibm** — Path: `brand-inspiration/ibm/`
|
||||
- **intercom** — Path: `brand-inspiration/intercom/`
|
||||
- **kami** — Path: `brand-inspiration/kami/` — includes components, tokens
|
||||
- **kraken** — Path: `brand-inspiration/kraken/`
|
||||
- **lamborghini** — Path: `brand-inspiration/lamborghini/`
|
||||
- **linear-app** — Path: `brand-inspiration/linear-app/` — Precise product UI, dark restraint, calm density. — includes components, tokens
|
||||
- **loom** — Path: `brand-inspiration/loom/`
|
||||
- **lovable** — Path: `brand-inspiration/lovable/`
|
||||
- **mastercard** — Path: `brand-inspiration/mastercard/`
|
||||
- **meta** — Path: `brand-inspiration/meta/`
|
||||
- **minimax** — Path: `brand-inspiration/minimax/`
|
||||
- **mintlify** — Path: `brand-inspiration/mintlify/`
|
||||
- **miro** — Path: `brand-inspiration/miro/`
|
||||
- **mistral-ai** — Path: `brand-inspiration/mistral-ai/`
|
||||
- **mistral.ai** — Path: `brand-inspiration/mistral.ai/`
|
||||
- **mongodb** — Path: `brand-inspiration/mongodb/`
|
||||
- **nike** — Path: `brand-inspiration/nike/` — Bold athletic energy, campaign-driven impact, high contrast.
|
||||
- **notion** — Path: `brand-inspiration/notion/` — Calm productivity, document-like structure, low visual noise. — includes components, tokens
|
||||
- **nvidia** — Path: `brand-inspiration/nvidia/`
|
||||
- **ollama** — Path: `brand-inspiration/ollama/`
|
||||
- **openai** — Path: `brand-inspiration/openai/` — AI product clarity, calm technical presentation, restrained futurism. — includes components, tokens
|
||||
- **opencode-ai** — Path: `brand-inspiration/opencode-ai/`
|
||||
- **opencode.ai** — Path: `brand-inspiration/opencode.ai/`
|
||||
- **perplexity** — Path: `brand-inspiration/perplexity/`
|
||||
- **pinterest** — Path: `brand-inspiration/pinterest/`
|
||||
- **playstation** — Path: `brand-inspiration/playstation/`
|
||||
- **posthog** — Path: `brand-inspiration/posthog/`
|
||||
- **raycast** — Path: `brand-inspiration/raycast/`
|
||||
- **renault** — Path: `brand-inspiration/renault/`
|
||||
- **replicate** — Path: `brand-inspiration/replicate/`
|
||||
- **resend** — Path: `brand-inspiration/resend/`
|
||||
- **revolut** — Path: `brand-inspiration/revolut/`
|
||||
- **runwayml** — Path: `brand-inspiration/runwayml/`
|
||||
- **sanity** — Path: `brand-inspiration/sanity/`
|
||||
- **sentry** — Path: `brand-inspiration/sentry/`
|
||||
- **shopify** — Path: `brand-inspiration/shopify/` — Commerce enablement, friendly business clarity. — includes components, tokens
|
||||
- **slack** — Path: `brand-inspiration/slack/` — includes components, tokens
|
||||
- **spacex** — Path: `brand-inspiration/spacex/`
|
||||
- **spotify** — Path: `brand-inspiration/spotify/` — Bold media energy, strong color and motion potential. — includes components, tokens
|
||||
- **starbucks** — Path: `brand-inspiration/starbucks/`
|
||||
- **stripe** — Path: `brand-inspiration/stripe/` — Polished SaaS clarity, developer/business trust, careful gradients. — includes components, tokens
|
||||
- **supabase** — Path: `brand-inspiration/supabase/`
|
||||
- **superhuman** — Path: `brand-inspiration/superhuman/`
|
||||
- **tesla** — Path: `brand-inspiration/tesla/` — Futuristic product focus, minimal copy, strong hero emphasis.
|
||||
- **theverge** — Path: `brand-inspiration/theverge/`
|
||||
- **together-ai** — Path: `brand-inspiration/together-ai/`
|
||||
- **together.ai** — Path: `brand-inspiration/together.ai/`
|
||||
- **uber** — Path: `brand-inspiration/uber/` — includes components, tokens
|
||||
- **vercel** — Path: `brand-inspiration/vercel/` — Developer-focused minimalism, sharp contrast, deployment/product clarity. — includes components, tokens
|
||||
- **vodafone** — Path: `brand-inspiration/vodafone/`
|
||||
- **voltagent** — Path: `brand-inspiration/voltagent/`
|
||||
- **warp** — Path: `brand-inspiration/warp/`
|
||||
- **webex** — Path: `brand-inspiration/webex/`
|
||||
- **webflow** — Path: `brand-inspiration/webflow/`
|
||||
- **wechat** — Path: `brand-inspiration/wechat/` — Social/messaging ecosystem inspiration; use cautiously as high-level reference.
|
||||
- **wired** — Path: `brand-inspiration/wired/`
|
||||
- **wise** — Path: `brand-inspiration/wise/`
|
||||
- **x-ai** — Path: `brand-inspiration/x-ai/`
|
||||
- **x.ai** — Path: `brand-inspiration/x.ai/`
|
||||
- **xiaohongshu** — Path: `brand-inspiration/xiaohongshu/` — Content/community inspiration; use as high-level style and content rhythm only.
|
||||
- **zapier** — Path: `brand-inspiration/zapier/`
|
||||
|
||||
---
|
||||
|
||||
## Recently Added from open-design
|
||||
|
||||
The following references were added or enriched from `nexu-io/open-design`:
|
||||
|
||||
|
||||
### New references
|
||||
|
||||
- `brand-inspiration/arc/`
|
||||
- `style-skills/atelier-zero/`
|
||||
- `brand-inspiration/canva/`
|
||||
- `brand-inspiration/cisco/`
|
||||
- `style-skills/default/`
|
||||
- `brand-inspiration/discord/`
|
||||
- `brand-inspiration/duolingo/`
|
||||
- `brand-inspiration/github/`
|
||||
- `style-skills/hud/`
|
||||
- `brand-inspiration/huggingface/`
|
||||
- `brand-inspiration/kami/`
|
||||
- `brand-inspiration/linear-app/`
|
||||
- `brand-inspiration/loom/`
|
||||
- `style-skills/mission-control/`
|
||||
- `brand-inspiration/mistral-ai/`
|
||||
- `brand-inspiration/openai/`
|
||||
- `brand-inspiration/opencode-ai/`
|
||||
- `brand-inspiration/perplexity/`
|
||||
- `brand-inspiration/together-ai/`
|
||||
- `style-skills/totality-festival/`
|
||||
- `style-skills/trading-terminal/`
|
||||
- `style-skills/urdu/`
|
||||
- `style-skills/warm-editorial/`
|
||||
- `brand-inspiration/webex/`
|
||||
- `brand-inspiration/wechat/`
|
||||
- `brand-inspiration/x-ai/`
|
||||
- `brand-inspiration/xiaohongshu/`
|
||||
|
||||
### Enriched with components/tokens
|
||||
|
||||
- `brand-inspiration/figma/components.html`
|
||||
- `brand-inspiration/figma/tokens.css`
|
||||
- `brand-inspiration/apple/components.html`
|
||||
- `brand-inspiration/apple/tokens.css`
|
||||
- `brand-inspiration/notion/components.html`
|
||||
- `brand-inspiration/notion/tokens.css`
|
||||
- `brand-inspiration/uber/components.html`
|
||||
- `brand-inspiration/uber/tokens.css`
|
||||
- `brand-inspiration/stripe/components.html`
|
||||
- `brand-inspiration/stripe/tokens.css`
|
||||
- `brand-inspiration/vercel/components.html`
|
||||
- `brand-inspiration/vercel/tokens.css`
|
||||
- `brand-inspiration/shopify/components.html`
|
||||
- `brand-inspiration/shopify/tokens.css`
|
||||
- `brand-inspiration/spotify/components.html`
|
||||
- `brand-inspiration/spotify/tokens.css`
|
||||
- `brand-inspiration/airbnb/components.html`
|
||||
- `brand-inspiration/airbnb/tokens.css`
|
||||
- `brand-inspiration/slack/components.html`
|
||||
- `brand-inspiration/slack/tokens.css`
|
||||
- `brand-inspiration/cursor/components.html`
|
||||
- `brand-inspiration/cursor/tokens.css`
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
# Brand 标签受控词表
|
||||
|
||||
`index.json` 的 `brand_inspiration` 条目使用下列受控词表打多维标签。**新增或修改品牌标签时，
|
||||
词条应从此表中选**，避免近义词分裂（如"克制 / 简约 / 极简"）导致检索漏匹配。
|
||||
|
||||
词表从 89 个品牌 DESIGN.md 的真实内容归纳而来，并与 `deck-templates` 的 `template.json`
|
||||
维度设计对齐。
|
||||
|
||||
---
|
||||
|
||||
## `industry`（行业，数组，≥1）
|
||||
AI · 开发者工具 · 生产力/协作 · 金融/支付 · 汽车 · 奢侈品 · 社交/通讯 · 电商/零售 ·
|
||||
媒体/出版 · 基础设施/企业 · 消费电子/科技 · 内容/创意工具 · 出行/本地生活 · 电信 · 文档/教育
|
||||
|
||||
## `product_type`（产品形态，数组，≥1）
|
||||
SaaS · 官网/营销页 · 开发者平台 · 消费App · 内容平台 · 电商/交易 · 品牌展示页 ·
|
||||
产品发布页 · 文档站 · 作品集/个人
|
||||
|
||||
## `mood`（情绪气质，数组，≥2）
|
||||
极简 · 克制 · 精密/工程感 · 技术感 · 奢华 · 戏剧化 · 暗黑原生 · 影像优先 · 编辑/杂志感 ·
|
||||
温暖 · 亲和/友好 · 活力/明亮 · 内容优先 · 企业/可信 · 渐变氛围 · 插画丰富 · 复古/玩味 · 未来/科幻
|
||||
|
||||
说明（保留的近义区分，刻意不合并）：
|
||||
- `极简` = 结构性减法；`克制` = 安静不喧哗。二者可共存也可单独出现。
|
||||
- `精密/工程感` = 精确校准的视觉；`技术感` = 代码/开发者气质。
|
||||
|
||||
## 单值维度
|
||||
- `formality`（正式度）：high / medium / low
|
||||
- `density`（信息密度）：high / medium / low
|
||||
- `scheme`（明暗）：light / dark / both
|
||||
- `era`（年代感）：复古 / 现代 / 未来
|
||||
|
||||
## 自然语言字段
|
||||
- `best_for`：最适合的场景（一句话）
|
||||
- `avoid_for`：不适合的场景（一句话）
|
||||
|
||||
---
|
||||
|
||||
## 检索用法
|
||||
按需求维度过滤 `index.json` → 锁定候选品牌 → 只读命中品牌的 `DESIGN.md` 获取完整 token 与规则。
|
||||
数组维度支持多对多：一个品牌可在同一维度命中多个值（如 Stripe 同属 金融/支付 与 开发者工具）。
|
||||
@@ -0,0 +1,545 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Airbnb
|
||||
description: "A warm, generous consumer marketplace anchored on a clean white canvas and Airbnb Rausch (#ff385c), the single brand voltage that carries every primary CTA, search-button orb, and rating dot. Type runs Airbnb Cereal VF at modest weights — display sits at 22–28px in weight 500/600 rather than the heavy 700+ that fintech and enterprise systems use; the brand trusts photography and generous whitespace over typographic muscle. Three product entries (Homes, Experiences, Services) sit in the top nav with hand-illustrated 32-icon glyphs and \"NEW\" badges, signaling a marketplace expansion rather than a feature dump. Pill-shaped search bars (`{rounded.full}`), softly rounded property cards (`{rounded.lg}` ~14px), and 32px button radii read as friendly and human — there is no hard corner anywhere except the body grid."
|
||||
|
||||
colors:
|
||||
primary: "#ff385c"
|
||||
primary-active: "#e00b41"
|
||||
primary-disabled: "#ffd1da"
|
||||
primary-error-text: "#c13515"
|
||||
primary-error-text-hover: "#b32505"
|
||||
luxe: "#460479"
|
||||
plus: "#92174d"
|
||||
ink: "#222222"
|
||||
body: "#3f3f3f"
|
||||
muted: "#6a6a6a"
|
||||
muted-soft: "#929292"
|
||||
hairline: "#dddddd"
|
||||
hairline-soft: "#ebebeb"
|
||||
border-strong: "#c1c1c1"
|
||||
canvas: "#ffffff"
|
||||
surface-soft: "#f7f7f7"
|
||||
surface-card: "#ffffff"
|
||||
surface-strong: "#f2f2f2"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
legal-link: "#428bff"
|
||||
star-rating: "#222222"
|
||||
scrim: "#000000"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif"
|
||||
fontSize: 28px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.43
|
||||
letterSpacing: 0
|
||||
display-lg:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 22px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.18
|
||||
letterSpacing: -0.44px
|
||||
display-md:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 21px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.43
|
||||
letterSpacing: 0
|
||||
display-sm:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.18px
|
||||
title-md:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
rating-display:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1px
|
||||
body-md:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.43
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.29
|
||||
letterSpacing: 0
|
||||
caption-sm:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.23
|
||||
letterSpacing: 0
|
||||
badge:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.18
|
||||
letterSpacing: 0
|
||||
micro-label:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.33
|
||||
letterSpacing: 0
|
||||
uppercase-tag:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 8px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0.32px
|
||||
textTransform: uppercase
|
||||
button-md:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
button-sm:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.29
|
||||
letterSpacing: 0
|
||||
link:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.43
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "'Airbnb Cereal VF', Circular, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 4px
|
||||
sm: 8px
|
||||
md: 14px
|
||||
lg: 20px
|
||||
xl: 32px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 2px
|
||||
xs: 4px
|
||||
sm: 8px
|
||||
md: 12px
|
||||
base: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 64px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 14px 24px
|
||||
height: 48px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.sm}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.sm}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 13px 23px
|
||||
height: 48px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
button-pill-rausch:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-sm}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: 10px 20px
|
||||
search-orb:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.full}"
|
||||
height: 48px
|
||||
icon-button-circle:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
height: 32px
|
||||
icon-button-outline:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
height: 40px
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 80px
|
||||
product-tab-active:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.none}"
|
||||
product-tab-inactive:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.nav-link}"
|
||||
search-bar-pill:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: 14px 24px
|
||||
height: 64px
|
||||
search-field-segment:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
padding: 8px 24px
|
||||
category-strip:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.button-sm}"
|
||||
category-tab-active:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
property-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
property-card-photo:
|
||||
rounded: "{rounded.md}"
|
||||
experience-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.md}"
|
||||
city-link-block:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-sm}"
|
||||
rating-display-card:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.rating-display}"
|
||||
guest-favorite-badge:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.badge}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: 4px 10px
|
||||
new-tag:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.uppercase-tag}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: 2px 6px
|
||||
amenity-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 12px 0
|
||||
reviews-card:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
host-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 24px
|
||||
reservation-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 24px
|
||||
date-picker-day:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.full}"
|
||||
date-picker-day-selected:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.full}"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 14px 12px
|
||||
height: 56px
|
||||
footer-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 48px 80px
|
||||
footer-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
legal-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.caption-sm}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Airbnb is the canonical example of a generous, photography-led consumer marketplace. The base canvas is **pure white** (`{colors.canvas}` — #ffffff) with deep near-black ink (`{colors.ink}` — #222222) for headlines and body, and a single voltage of **Rausch** (`{colors.primary}` — #ff385c) carrying every primary CTA, the search-button orb, the heart save state, and inline brand links. There is no secondary brand color in mainline marketing — the **Luxe purple** (`{colors.luxe}` — #460479) and **Plus magenta** (`{colors.plus}` — #92174d) tokens are sub-brand accents that only appear inside Airbnb Luxe / Plus contexts.
|
||||
|
||||
Type runs **Airbnb Cereal VF** (a custom variable font Airbnb licenses), with **Circular** as the historic in-house fallback and a system stack underneath. Cereal sits at modest weights — display headlines render at 22–28px in weight 500–600, not the heavy 700+ weights that financial or enterprise systems lean on. The hero h1 ("Inspiration for future getaways") on the homepage is just 28px / 700, which would feel small on a typical SaaS page; here it works because the layout leans on photography (city collage, property cards) for visual weight rather than typographic muscle.
|
||||
|
||||
The shape language is **soft**. Buttons are 8px radius (`{rounded.sm}`), property cards are ~14px (`{rounded.md}`), the search bar is fully pill-shaped (`{rounded.full}`), wishlist hearts and search orbs are circles (`{rounded.full}`), and category strip rounded corners run at 32px (`{rounded.xl}`). There is essentially no hard corner anywhere except the body grid itself — every interactive element is rounded.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Single accent color: `{colors.primary}` (#ff385c — "Rausch") carries every primary CTA, the search orb, the heart save state, and the brand wordmark. Used scarcely — most pages are 90% white + ink with one or two Rausch moments.
|
||||
- Custom variable type: `Airbnb Cereal VF`. Display weights sit at 500–700, body at 400. Modest weight is intentional — the system trusts photography for visual heft.
|
||||
- Three-product top nav: Homes, Experiences, Services — each with a hand-illustrated 32px icon and "NEW" badges (`{component.new-tag}`) on the two newer products. Active tab uses an underline rule (`{component.product-tab-active}`).
|
||||
- Pill-shaped global search bar: white surface, fully rounded (`{rounded.full}`), divided by 1px hairlines into Where / When / Who segments, terminated by a circular Rausch search orb (`{component.search-orb}`).
|
||||
- Property cards are photo-first: aspect-ratio rectangles with `{rounded.md}` corner clipping, swipeable image carousel, "Guest favorite" floating badge top-left, heart icon top-right, then 4–5 lines of meta beneath.
|
||||
- Editorial dropdowns (footer, language picker) are clean text columns over the white canvas — no card surface, no shadow.
|
||||
- The design system caps elevation at one shadow tier (`box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px, rgba(0,0,0,0.1) 0 4px 8px`) — used on hover-floated cards and search/account dropdowns.
|
||||
- 8px base spacing system, with major sections at `{spacing.section}` (64px) — generous but not airy enough to feel editorial-magazine; the marketplace density wants more cards per scroll.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Rausch** (`{colors.primary}` — #ff385c): The single brand color. Used for primary CTA backgrounds (Reserve, Continue), the search orb, the heart save state on property cards, and inline brand links. The most recognizable color in consumer travel.
|
||||
- **Rausch Active** (`{colors.primary-active}` — #e00b41): The press / pointer-down variant — slightly more saturated. Used on `{component.button-primary-active}`.
|
||||
- **Rausch Disabled** (`{colors.primary-disabled}` — #ffd1da): A pale tint used on disabled CTAs.
|
||||
- **Luxe Purple** (`{colors.luxe}` — #460479): Sub-brand accent for Airbnb Luxe. Only appears inside Luxe-branded surfaces — never in mainline marketing.
|
||||
- **Plus Magenta** (`{colors.plus}` — #92174d): Sub-brand accent for Airbnb Plus. Same scoping as Luxe — sub-product only.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #ffffff): The default page floor for every public page. Airbnb does not have a dark mode on the public web.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): The lightest fill — used on disabled fields, sub-nav hover backgrounds, and the inline search filter band.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #f2f2f2): Slightly heavier fill — circular icon-button surface (e.g., the breadcrumb back-arrow and listing toolbar buttons).
|
||||
|
||||
### Hairlines & Borders
|
||||
- **Hairline** (`{colors.hairline}` — #dddddd): The default 1px border tone — search bar dividers, table separators, footer column splitters, card 1px borders.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #ebebeb): A lighter divider used on long-scrolling editorial body separators.
|
||||
- **Border Strong** (`{colors.border-strong}` — #c1c1c1): A heavier stroke used on disabled outline buttons and form input outlines after focus.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #222222): The dominant text color on light surfaces. Display headlines, body paragraphs, primary nav links, and most inline link text. Never pure black.
|
||||
- **Body** (`{colors.body}` — #3f3f3f): A secondary running-text color used inside long-form review and amenity copy where ink would feel too heavy.
|
||||
- **Muted** (`{colors.muted}` — #6a6a6a): Sub-titles inside city link blocks ("Cottage rentals", "Villa rentals"), inactive product-tab labels, footer category sub-labels, "View all" links.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #929292): Disabled link text. Used very sparingly.
|
||||
- **Star Rating** (`{colors.star-rating}` — #222222): The same ink token — Airbnb's star icon and "4.81" rating numbers all render in ink rather than a yellow/gold color, which is a deliberate brand choice (yellow stars feel cheap in travel context).
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on Rausch CTAs.
|
||||
|
||||
### Semantic
|
||||
- **Error** (`{colors.primary-error-text}` — #c13515): Inline error text for form validation. Distinct from Rausch — slightly darker, more saturated red.
|
||||
- **Error Hover** (`{colors.primary-error-text-hover}` — #b32505): Darkens on link hover.
|
||||
- **Legal Link Blue** (`{colors.legal-link}` — #428bff): Inline links inside legal copy (Privacy, Terms). Only used inside the legal sub-band.
|
||||
|
||||
### Scrim
|
||||
- **Scrim** (`{colors.scrim}` — #000000 at 50% opacity): The global modal backdrop tone — date picker, login dialog, language picker. Stored as the base hex; opacity is applied at render time.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **Airbnb Cereal VF** for everything — display, body, navigation, captions, microcopy. Fallbacks walk `Circular, -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif`. **Circular** is the historic in-house typeface still kept as the first non-variable fallback; system stacks back it up.
|
||||
|
||||
There is no separate display family. The variable font carries the entire scale.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.rating-display}` | 64px | 700 | 1.1 | -1px | Listing detail rating display ("4.81") |
|
||||
| `{typography.display-xl}` | 28px | 700 | 1.43 | 0 | Homepage h1 ("Inspiration for future getaways") |
|
||||
| `{typography.display-lg}` | 22px | 500 | 1.18 | -0.44px | Listing detail h1 ("Close to Fethiye Aliyah Bali Beach…") |
|
||||
| `{typography.display-md}` | 21px | 700 | 1.43 | 0 | Section heads inside listing detail ("What this place offers") |
|
||||
| `{typography.display-sm}` | 20px | 600 | 1.20 | -0.18px | Sub-section titles ("Things to know") |
|
||||
| `{typography.title-md}` | 16px | 600 | 1.25 | 0 | City link block titles ("Wilmington", "Athens") |
|
||||
| `{typography.title-sm}` | 16px | 500 | 1.25 | 0 | Footer column heads ("Support", "Hosting", "Airbnb") |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default running-text inside listing copy |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Card meta lines, dates, prices, distance text |
|
||||
| `{typography.caption}` | 14px | 500 | 1.29 | 0 | Search field segment labels ("Where", "When", "Who") |
|
||||
| `{typography.caption-sm}` | 13px | 400 | 1.23 | 0 | Footer legal line ("© 2026 Airbnb, Inc.") |
|
||||
| `{typography.badge}` | 11px | 600 | 1.18 | 0 | "Guest favorite" floating badge text |
|
||||
| `{typography.micro-label}` | 12px | 700 | 1.33 | 0 | Card amenity micro-labels ("Inline 6") |
|
||||
| `{typography.uppercase-tag}` | 8px | 700 | 1.25 | 0.32px (uppercase) | "NEW" badge on product nav tabs |
|
||||
| `{typography.button-md}` | 16px | 500 | 1.25 | 0 | Primary CTA button labels |
|
||||
| `{typography.button-sm}` | 14px | 500 | 1.29 | 0 | Pill button labels (category strip) |
|
||||
| `{typography.link}` | 14px | 400 | 1.43 | 0 | Inline body links |
|
||||
| `{typography.nav-link}` | 16px | 600 | 1.25 | 0 | Top product-nav labels (Homes, Experiences, Services) |
|
||||
|
||||
### Principles
|
||||
Display weights stay modest. The homepage h1 at 28px / 700 is deliberately small — it tucks under the search bar so photography and the city-link grid carry visual hierarchy. The listing-detail h1 at 22px / 500 is even quieter; the listing photo banner does the work above it.
|
||||
|
||||
The single typographically loud moment in the entire system is the **rating display** (`{typography.rating-display}` — 64px / 700) on listing pages. That is the only place the system trusts type alone to carry hierarchy — rating numbers are a peak trust signal, so they get the loudest treatment.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If Airbnb Cereal VF and Circular are unavailable, **Inter** is the closest open-source substitute. Adjust display headlines down by ~2% in line-height to match Cereal's slightly tighter cap height; otherwise the proportions transfer cleanly.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px (with 2px micro-step).
|
||||
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 64px.
|
||||
- **Section padding (vertical):** `{spacing.section}` (64px) for major page bands; tighter than typical SaaS marketing (80–96px) because marketplace pages need higher card density per scroll.
|
||||
- **Card internal padding:** `{spacing.lg}` (24px) for `{component.host-card}` and `{component.reservation-card}`; `{spacing.base}` (16px) for property-card meta block; `{spacing.sm}` (8px) for caption / date-row gutters.
|
||||
- **Gutters:** `{spacing.base}` (16px) between cards in the homepage city grid; `{spacing.lg}` (24px) inside footer column gutters; `{spacing.xs}` (4px) on dense category-strip dividers.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1280px centered on the homepage and editorial pages. Listing detail pages cap closer to 1080px to keep the photo banner and reservation rail readable.
|
||||
- **City link grid (homepage footer):** 6-column grid at desktop with each cell housing a city name in `{typography.title-md}` and a category sub-label in `{typography.body-sm}` muted.
|
||||
- **Listing detail:** 2-column with photo / amenity body on the left (~64% width) and a sticky reservation card (`{component.reservation-card}`) on the right (~32%).
|
||||
- **Footer:** 3-column link list (Support / Hosting / Airbnb) at desktop, collapsing to 1-column on mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
The system gives editorial bands 64px of vertical breathing room but compresses card grids — property and city-link cards sit just 16px apart. The contrast is intentional: the page reads as "open hero, dense marketplace below," reinforcing the marketplace nature without overwhelming the visitor at the fold.
|
||||
|
||||
## Elevation
|
||||
|
||||
The system has essentially **one shadow tier** plus the flat baseline.
|
||||
|
||||
- **Flat (no shadow):** Body, hero, footer, all editorial bands — 95% of surfaces.
|
||||
- **Card hover float:** `box-shadow: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` — applied to property cards on pointer hover, the search bar at rest, and the dropdown menus (account menu, language picker, date picker). This is the single shadow definition in the entire system.
|
||||
- **Modal scrim:** `{colors.scrim}` rendered at 50% opacity — the global modal backdrop. Used on date pickers, login dialogs, language picker.
|
||||
|
||||
There are no progressive elevation tiers — the system either has the one shadow or none. Depth comes from photography, the white-on-white surface separation, and rounded-corner clipping rather than from layered shadows.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Rausch fill, white text, 8px radius, 14×24px padding, 48px height, weight 500. The most common CTA across the system: "Reserve", "Continue", "Search", account-flow primaries.
|
||||
|
||||
**`button-primary-active`** — The press state. Background flips to `{colors.primary-active}`. No transform, no shadow change.
|
||||
|
||||
**`button-primary-disabled`** — Pale Rausch tint at #ffd1da with white text. Cursor not-allowed.
|
||||
|
||||
**`button-secondary`** — White fill with ink text and a 1px ink outline. 8px radius. Used for "Save", "Cancel", and inverse CTAs over Rausch surfaces.
|
||||
|
||||
**`button-tertiary-text`** — Plain ink text, no surface, no border. Underlined on hover. Used for "Show more" type links and modal close labels.
|
||||
|
||||
**`button-pill-rausch`** — A pill-shaped Rausch CTA used on featured cells (e.g., "Become a host" sub-CTA) — 9999px radius, 10×20px padding, 14px label.
|
||||
|
||||
### Search Surface
|
||||
|
||||
**`search-bar-pill`** — The signature global search bar. White fill, 9999px radius, 64px height, 1px hairline 1px-shadow border. Internally divided by vertical hairline rules into `{component.search-field-segment}` cells (Where / When / Who). Each segment holds an uppercase caption label above a placeholder line in `{typography.caption}`.
|
||||
|
||||
**`search-orb`** — The circular Rausch orb terminating the right edge of the search bar. 48×48px, fully rounded, white magnifying-glass icon centered. The hottest single color moment on the homepage.
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — White surface, 80px height, 1px bottom hairline. The Airbnb wordmark sits flush left, the three product tabs (Homes / Experiences / Services) sit in the dead center, and account utilities (host link, language globe, account menu) sit flush right.
|
||||
|
||||
**`product-tab-active`** — Ink label in `{typography.nav-link}`, 32px hand-illustrated icon, 2px ink underline rule beneath the icon-label pair.
|
||||
|
||||
**`product-tab-inactive`** — Muted label, illustrated icon, no underline. Becomes active on click.
|
||||
|
||||
**`new-tag`** — A tiny rounded-pill badge (`{rounded.full}`) anchored top-right of an icon, carrying the uppercase "NEW" label in `{typography.uppercase-tag}` (8px / 700 with 0.32px tracking, uppercase). Used on Experiences and Services to signal recency.
|
||||
|
||||
### Listing Cards
|
||||
|
||||
**`property-card`** — A photo-first card. 1:1 aspect-ratio image with `{rounded.md}` corner clipping, image carousel dots overlay, "Guest favorite" floating badge top-left (`{component.guest-favorite-badge}`), and a heart icon top-right (`{component.icon-button-circle}` in default outlined state, Rausch-filled when saved). Beneath the image: 4–5 lines of meta — title (`{typography.title-md}`), distance / dates (`{typography.body-sm}` muted), and price ("$X night") right-aligned.
|
||||
|
||||
**`property-card-photo`** — The photo plate itself, separated as a token because some surfaces (wishlist, search results) reuse just the photo without the meta block.
|
||||
|
||||
**`experience-card`** — A taller-aspect card (4:5) for experience listings. Same `{rounded.md}` clipping, floating "NEW" badge top-left, heart top-right, and a single-line title beneath.
|
||||
|
||||
**`guest-favorite-badge`** — White rounded pill (`{rounded.full}`) at 11px / 600 weight. Sits over the photo with the system's only shadow tier applied for elevation.
|
||||
|
||||
### Listing Detail
|
||||
|
||||
**`rating-display-card`** — The signature listing-detail moment. A 64px / 700 rating number ("4.81") flanked left and right by tiny laurel-wreath SVG ornaments. Beneath the rating: "Guest favorite" tagline and a row of ink stat columns. The largest typographic weight in the whole system.
|
||||
|
||||
**`amenity-row`** — A 1-column list of amenity icons + ink labels in `{typography.body-md}`. 12px row padding, no border between rows; section is closed by a 1px hairline divider above and below.
|
||||
|
||||
**`reviews-card`** — A 2-column grid of review excerpts. Each column holds an author row (avatar, name, date) above a 3-line excerpt with "Show more" tertiary link.
|
||||
|
||||
**`host-card`** — A white card with `{rounded.md}` rounding and 24px padding holding a host avatar, name, "Superhost" badge, response-rate stat, and a "Contact host" `{component.button-secondary}`.
|
||||
|
||||
**`reservation-card`** — The sticky right-rail card on listing detail pages. White surface, `{rounded.md}` rounding, 1px hairline border, 1px shadow tier elevation, 24px padding. Contains: nightly price (`{typography.display-md}` ink), date-range selector, guest-count stepper, "Reserve" primary CTA full-width, and a fee breakdown stack beneath in `{typography.body-sm}`.
|
||||
|
||||
### Date Picker
|
||||
|
||||
**`date-picker-day`** — A 40×40px circular cell carrying the day number in `{typography.body-sm}`. Default state is transparent fill, ink text.
|
||||
|
||||
**`date-picker-day-selected`** — Ink fill, white text, full circle (`{rounded.full}`). Range states between two selected days carry a `{colors.surface-soft}` lozenge background that connects them.
|
||||
|
||||
### Forms
|
||||
|
||||
**`text-input`** — White surface, 1px hairline outline, `{rounded.sm}` 8px radius, 56px height, 14×12px padding. Stacked label above (in `{typography.caption}` muted), placeholder text in `{typography.body-md}` muted. On focus, the border thickens to 2px ink and the border color flips to `{colors.ink}` — no glow, no ring.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer-light`** — White surface (matches the page canvas — Airbnb has no contrast footer), 48×80px padding. Three columns of link blocks (Support / Hosting / Airbnb), separated by generous 24px gutters. Each column heads with a `{typography.title-sm}` ink label and stacks `{component.footer-link}` rows in `{typography.body-sm}` ink.
|
||||
|
||||
**`legal-band`** — A bottom strip beneath the footer columns carrying the copyright line, language picker (globe icon + "English (US)" link), currency picker, and social icons (Facebook, X, Instagram). All text in muted `{colors.muted}` at `{typography.caption-sm}`.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 744px | Top nav collapses to logo + hamburger; product tabs hide behind a sheet; search bar collapses to a single tappable pill; property cards stack 1-up; city grid 1-column; listing detail collapses reservation card to a sticky bottom bar. |
|
||||
| Tablet | 744–1128px | Top nav keeps product tabs but search bar narrows; property cards 2-up; city grid 2–3 column; reservation card stays sticky right-rail at narrower width. |
|
||||
| Desktop | 1128–1440px | Full top nav with three product tabs centered; search bar at full pill width with all 3 segments visible; property cards 4-up; city grid 6-column; listing detail 2-column with reservation rail. |
|
||||
| Wide | > 1440px | Content width caps at 1440px on listing/search pages and ~1280px on editorial; gutters absorb the rest. |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTAs at minimum 48×48px (above WCAG AAA).
|
||||
- Search orb is 48×48px circular — the most-tapped element on the page.
|
||||
- Heart save button is 32×32px circular — borderline for AAA but compensated by a generous 12px padding inside the photo card.
|
||||
- Date-picker day cells are 40×40px circular.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top product tabs collapse into a hamburger sheet below 744px.
|
||||
- Search bar's 3 segments collapse into a single-tap entry that opens a full-screen search overlay on mobile.
|
||||
- Property and city-link grids drop column counts cleanly at each breakpoint — never reflow rows; always reduce columns.
|
||||
- Reservation card on listing detail switches from sticky right-rail to a sticky bottom bar on mobile, carrying just the "Reserve" CTA + nightly price summary.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- **Hover state colors:** intentionally not documented per the global no-hover policy — Airbnb's actual `:hover` styling for property cards is a subtle elevation lift, but precise extraction is unreliable.
|
||||
- **Loading states / skeleton screens:** not visible on the extracted surfaces.
|
||||
- **Map view styling:** the search-results map uses Mapbox-tinted tiles with custom Rausch markers; not captured here.
|
||||
- **Form input error states:** error text color (`{colors.primary-error-text}`) is documented, but the full input outline + helper-text combination on validation failure was not visible in the captured surfaces.
|
||||
- **Sub-brand palettes:** Luxe (`{colors.luxe}`) and Plus (`{colors.plus}`) are documented as tokens, but their full sub-system (typography overrides, surface treatment) lives on separate sub-domains and is not captured here.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Airbnb Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/airbnb/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,261 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/airbnb/tokens.css
|
||||
*
|
||||
* Structured token bindings for the Airbnb design system — pristine
|
||||
* Canvas White surfaces, a single Rausch coral-pink accent (#ff385c),
|
||||
* generous soft-circle radii, and Airbnb Cereal VF as the lone type
|
||||
* family. The system reads like a travel magazine that happens to be
|
||||
* an app: the interface disappears so the listings can breathe.
|
||||
*
|
||||
* This file pre-compiles the values described in `DESIGN.md` into the
|
||||
* schema shared with every OD design system. Agents should paste the
|
||||
* `:root { … }` block verbatim into the first `<style>` of an artifact,
|
||||
* then resolve every value via `var(--*)` from that point on.
|
||||
*
|
||||
* Schema notes (brand-specific bindings worth flagging — section
|
||||
* references point into `DESIGN.md`):
|
||||
*
|
||||
* #Bind 1 — --bg and --surface both resolve to Canvas White
|
||||
* (#ffffff). Airbnb cards sit directly on the page
|
||||
* without a tonal step; separation comes from the
|
||||
* Hairline Gray (--border) edge and from the
|
||||
* photograph inside the card, never from a surface
|
||||
* tint (§4 Listing Card).
|
||||
*
|
||||
* #Bind 2 — --surface-warm binds to Soft Cloud (#f7f7f7), the
|
||||
* brand-named subsurface tier used for footers, map
|
||||
* wrappers, and the calendar's middle-of-range dates.
|
||||
* A real value rather than `var(--surface)` because
|
||||
* Airbnb publishes a distinct tier here (§2 Surface).
|
||||
*
|
||||
* #Bind 3 — --accent-hover and --accent-active are hand-picked,
|
||||
* NOT formula-derived. DESIGN.md §2 publishes Deep
|
||||
* Rausch (#e00b41) as the pressed/active state.
|
||||
* color-mix would overshoot that saturation and
|
||||
* under-shoot the brand's gradient terminal stop,
|
||||
* so we hand-bind both states.
|
||||
*
|
||||
* #Bind 4 — Radius scale concentrates on the brand's signature
|
||||
* soft-circle geometry: 8px for buttons/inputs, 14px
|
||||
* for listing cards (the workhorse), 20px for the
|
||||
* booking panel and hero photo frames, 9999px for
|
||||
* the circular icon buttons and avatars that
|
||||
* punctuate every surface (§5 Border Radius Scale).
|
||||
*
|
||||
* #Bind 5 — --elev-raised encodes Airbnb's signature three-
|
||||
* layer booking-panel shadow verbatim — a 2% hairline
|
||||
* ring, a 4% short blur, and a 10% medium blur. The
|
||||
* brand forbids single drop shadows; this stacked
|
||||
* triple is what gives the booking panel its premium
|
||||
* anti-aliased perimeter (§6 Depth & Elevation).
|
||||
*
|
||||
* #Bind 6 — --focus-ring is 2px solid Ink Black (#222222), NOT
|
||||
* the schema's accent-tinted default. DESIGN.md §6
|
||||
* mandates this specific ring so focus reads cleanly
|
||||
* against full-bleed colorful photography — a Rausch
|
||||
* ring would disappear against warm sunset shots or
|
||||
* sea-blue overlays. Pair with the 4px white
|
||||
* separator ring at circular buttons floating on
|
||||
* images.
|
||||
*
|
||||
* #Bind 7 — --leading-body is 1.43 (generous). Airbnb pairs
|
||||
* tight display leading (1.18–1.25) with notably
|
||||
* open body leading; that two-mode rhythm is why
|
||||
* the system reads as a travel magazine rather than
|
||||
* a utility app (§3 Principles).
|
||||
*
|
||||
* Brand-specific extensions: none in this revision. The Plus
|
||||
* Magenta (#92174d) and Luxe Purple (#460479) product-tier accents
|
||||
* called out in DESIGN.md §2 stay inline at the tier-specific
|
||||
* components that need them; promoting them to schema slots would
|
||||
* encourage non-tier surfaces to reach for them.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels) ────────────────────────────────────────
|
||||
* Canvas White is both the page and the card — Airbnb refuses a
|
||||
* tonal shift between the two. Cards earn their edges from the
|
||||
* Hairline Gray border and from full-bleed photography. The
|
||||
* tertiary tier (--surface-warm) is Soft Cloud, used only for
|
||||
* footer backgrounds, map-view wrappers, and middle-of-range
|
||||
* date cells in the date picker. */
|
||||
--bg: #ffffff;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f7f7f7;
|
||||
|
||||
/* ─── Foreground ramp (4 levels) ────────────────────────────────
|
||||
* Ink Black (#222222) carries roughly ninety percent of every
|
||||
* page — every heading, every body paragraph, every nav label,
|
||||
* every price. The brand's near-black is never true #000000.
|
||||
* Charcoal (--fg-2) is a one-step-down emphasis tier reserved
|
||||
* for focused-input text. Ash Gray (--muted) is the secondary
|
||||
* label — "Cottage rentals" subtitles, muted footer links.
|
||||
* Mute Gray (--meta) is reserved for disabled buttons and
|
||||
* low-priority metadata. */
|
||||
--fg: #222222;
|
||||
--fg-2: #3f3f3f;
|
||||
--muted: #6a6a6a;
|
||||
--meta: #929292;
|
||||
|
||||
/* ─── Border (2 levels) ─────────────────────────────────────────
|
||||
* Hairline Gray (#dddddd) is the workhorse — every card-to-card
|
||||
* divider, every amenity-row separator, every footer-column
|
||||
* rule. The soft tier is a lighter hairline used to break up
|
||||
* dense list interiors without competing with the primary card
|
||||
* edge. */
|
||||
--border: #dddddd;
|
||||
--border-soft: #ebebeb;
|
||||
|
||||
/* ─── Accent ────────────────────────────────────────────────────
|
||||
* Rausch coral-pink — the single signature color. Reserve for
|
||||
* primary CTAs (Reserve, Search, Add dates), the active-tab
|
||||
* underline, the wishlist heart fill, and price emphasis. Hard
|
||||
* cap of two visible uses per viewport; if a third Rausch
|
||||
* element shows up, neutralize one. Plus Magenta (#92174d) and
|
||||
* Luxe Purple (#460479) are kept inline at their product-tier
|
||||
* surfaces, not promoted to shared accent slots. */
|
||||
--accent: #ff385c;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #e31c5f; /* hand-picked, between Rausch and Deep Rausch */
|
||||
--accent-active: #e00b41; /* Deep Rausch — DESIGN.md §2 pressed-state value */
|
||||
|
||||
/* ─── Semantic ──────────────────────────────────────────────────
|
||||
* Error Red is explicit from DESIGN.md §2; success and warn are
|
||||
* not specified by the brand and are bound to desaturated values
|
||||
* that survive the white canvas without competing with Rausch.
|
||||
* Keep total semantic-color pixels well under five percent of
|
||||
* any page — the brand almost never renders status. */
|
||||
--success: #008a05; /* hand-picked warm green — available/in-stock */
|
||||
--warn: #c47700; /* burnt amber — never tailwind yellow */
|
||||
--danger: #c13515; /* DESIGN.md §2 Error Red */
|
||||
|
||||
/* ─── Typography — fonts ────────────────────────────────────────
|
||||
* Airbnb Cereal VF is the proprietary face that carries every
|
||||
* label from 8px superscript to 28px section heading. The
|
||||
* documented fallback chain renders acceptably on macOS/iOS
|
||||
* where system-ui resolves to San Francisco. Display and body
|
||||
* share the same stack — the visual identity comes from the
|
||||
* family itself, never from typeface mixing. Mono is a generic
|
||||
* stack for kbd, tabular metrics, and the rare code label. */
|
||||
--font-display:
|
||||
"Airbnb Cereal VF", "Airbnb Cereal App", Circular,
|
||||
-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
|
||||
--font-body:
|
||||
"Airbnb Cereal VF", "Airbnb Cereal App", Circular,
|
||||
-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
|
||||
--font-mono:
|
||||
ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
|
||||
Consolas, monospace;
|
||||
|
||||
/* ─── Typography — type scale (px) ──────────────────────────────
|
||||
* Derived from DESIGN.md §3 Hierarchy table. The system clusters
|
||||
* tightly between 11 and 22px (the conversational range) and
|
||||
* jumps to 28px for section headings; the higher tiers are used
|
||||
* sparingly for the Guest Favorite rating lockup (44–56px) and
|
||||
* the rare hero numeral. No 400-regular: Cereal's body weight
|
||||
* is 500, which any consuming component should set explicitly. */
|
||||
--text-xs: 12px; /* micro / footer disclaimer */
|
||||
--text-sm: 14px; /* button default, link, caption */
|
||||
--text-base: 16px; /* body medium, button large, subtitle bold */
|
||||
--text-lg: 20px; /* listing title */
|
||||
--text-xl: 22px; /* subsection heading */
|
||||
--text-2xl: 28px; /* section heading */
|
||||
--text-3xl: 44px; /* Guest Favorite rating, hero numeral */
|
||||
--text-4xl: 56px; /* display ceiling — Guest Favorite max */
|
||||
|
||||
/* ─── Typography — leading & tracking ───────────────────────────
|
||||
* Tight for display (1.20 — chiseled headlines), generous for
|
||||
* body (1.43 — magazine reading comfort). Display tracking
|
||||
* compresses negatively at sizes ≥20px; body and caption hold
|
||||
* at zero. The two-mode rhythm is what gives Airbnb pages
|
||||
* their travel-magazine feel rather than a utility-app feel. */
|
||||
--leading-body: 1.43;
|
||||
--leading-tight: 1.2;
|
||||
--tracking-display: -0.02em; /* applied at sizes ≥20px only */
|
||||
|
||||
/* ─── Spacing — base scale ──────────────────────────────────────
|
||||
* 8px base unit per DESIGN.md §5. The brand uses fine-grained
|
||||
* off-grid values (5.5, 10, 11, 18.5, 22) for pixel-perfect
|
||||
* icon alignment, but the shared scale stays on the standard
|
||||
* 4px grid — off-grid spacing belongs inline at the component
|
||||
* level, not in shared tokens. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* ─── Section rhythm ────────────────────────────────────────────
|
||||
* Section padding ranges 48–64px on desktop, 24–32px on mobile
|
||||
* per DESIGN.md §5. We bind the upper bound on desktop because
|
||||
* Airbnb's content-dense pages benefit from generous breathing
|
||||
* room between content blocks; the lower phone bound keeps the
|
||||
* vertical rhythm tight on small screens. */
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ────────────────────────────────────────────────────
|
||||
* The brand's signature soft-circle geometry. 14px (--radius-md)
|
||||
* is the workhorse — every listing card photograph, every
|
||||
* amenity badge, every generic content container lands here.
|
||||
* 20px (--radius-lg) is reserved for the booking panel and hero
|
||||
* photo frames; 8px (--radius-sm) is the small radius for
|
||||
* buttons, dropdowns, and inputs; --radius-pill (9999px) is the
|
||||
* system's signature round geometry, applied to every circular
|
||||
* icon button, every avatar, and the wishlist heart. */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 20px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ─────────────────────────────────────────────────
|
||||
* Airbnb forbids single drop shadows; the system uses stacked
|
||||
* layered shadows or no shadow at all. Listing cards sit flat
|
||||
* on the canvas. Booking panels, modals, and dropdowns use the
|
||||
* signature three-layer stack — a 2% hairline ring, a 4% short
|
||||
* blur, and a 10% medium blur — which reads as one cohesive
|
||||
* lift while giving the perimeter a premium anti-aliased edge. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
rgba(0, 0, 0, 0.02) 0 0 0 1px,
|
||||
rgba(0, 0, 0, 0.04) 0 2px 6px 0,
|
||||
rgba(0, 0, 0, 0.1) 0 4px 8px 0;
|
||||
|
||||
/* ─── Focus ring ────────────────────────────────────────────────
|
||||
* 2px solid Ink Black, NOT the schema's accent-tinted default.
|
||||
* DESIGN.md §6 mandates this exact treatment so focus indicators
|
||||
* read cleanly against full-bleed colorful photography — a
|
||||
* Rausch-tinted ring would disappear against warm sunset shots
|
||||
* or sea-blue beach overlays. Pair with a 4px white separator
|
||||
* ring at circular-icon buttons that float on images. */
|
||||
--focus-ring: 0 0 0 2px var(--fg);
|
||||
|
||||
/* ─── Motion ────────────────────────────────────────────────────
|
||||
* DESIGN.md did not capture transition timings (static
|
||||
* extraction scope). We bind defaults consistent with the
|
||||
* brand's tactile feel: 150ms for micro-states (the famous
|
||||
* `transform: scale(0.92)` pressed-button rebound) and 200ms
|
||||
* for general state changes. Standard easing is the schema
|
||||
* default — short, purposeful, no overshoot. */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ────────────────────────────────────────────────────
|
||||
* Detail pages cap at 1280px per DESIGN.md §5; the homepage
|
||||
* listing grid lets the canvas breathe to 1760–1920px on
|
||||
* ultra-wide. We bind the detail-page width as the shared
|
||||
* default because that is the geometry agents will most often
|
||||
* generate (rooms, experiences, host profiles). Gutters
|
||||
* tighten progressively: 40px desktop, 24px tablet, 16px
|
||||
* phone per DESIGN.md §8 small-mobile clause. */
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 40px;
|
||||
--container-gutter-tablet: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
@@ -0,0 +1,554 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Airtable
|
||||
description: "A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages. Primary actions use a near-black pill CTA; secondary actions sit in a white outlined button. Type runs Haas Grotesk in modest weights — never bold for its own sake."
|
||||
|
||||
colors:
|
||||
primary: "#181d26"
|
||||
primary-active: "#0d1218"
|
||||
ink: "#181d26"
|
||||
body: "#333840"
|
||||
muted: "#41454d"
|
||||
hairline: "#dddddd"
|
||||
border-strong: "#9297a0"
|
||||
canvas: "#ffffff"
|
||||
surface-soft: "#f8fafc"
|
||||
surface-strong: "#e0e2e6"
|
||||
surface-dark: "#181d26"
|
||||
surface-dark-elevated: "#1d1f25"
|
||||
signature-coral: "#aa2d00"
|
||||
signature-forest: "#0a2e0e"
|
||||
signature-cream: "#f5e9d4"
|
||||
signature-peach: "#fcab79"
|
||||
signature-mint: "#a8d8c4"
|
||||
signature-yellow: "#f4d35e"
|
||||
signature-mustard: "#d9a441"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
link: "#1b61c9"
|
||||
link-active: "#1a3866"
|
||||
info: "#254fad"
|
||||
info-border: "#458fff"
|
||||
success: "#006400"
|
||||
success-border: "#39bf45"
|
||||
pricing-ink: "#1d1f25"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "Haas Groot Disp, Haas, sans-serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.1
|
||||
letterSpacing: 0
|
||||
display-lg:
|
||||
fontFamily: "Haas Groot Disp, Haas, sans-serif"
|
||||
fontSize: 40px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 0
|
||||
display-md:
|
||||
fontFamily: "Haas Groot Disp, Haas, sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 0
|
||||
title-lg:
|
||||
fontFamily: "Haas, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.35
|
||||
letterSpacing: 0.12px
|
||||
title-md:
|
||||
fontFamily: "Haas Groot Disp, Haas, sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "Haas, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
label-md:
|
||||
fontFamily: "Haas, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "Haas, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "Haas, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "Haas, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.35
|
||||
letterSpacing: 0.16px
|
||||
legal:
|
||||
fontFamily: "Haas, sans-serif"
|
||||
fontSize: 13.12px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 0
|
||||
pricing-display:
|
||||
fontFamily: "Inter Display, system-ui, sans-serif"
|
||||
fontSize: 44.8px
|
||||
fontWeight: 475
|
||||
lineHeight: 1.1
|
||||
letterSpacing: 0
|
||||
pricing-section:
|
||||
fontFamily: "Inter Display, system-ui, sans-serif"
|
||||
fontSize: 28px
|
||||
fontWeight: 475
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 0
|
||||
pricing-card-title:
|
||||
fontFamily: "Inter Display, system-ui, sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 475
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 2px
|
||||
sm: 6px
|
||||
md: 10px
|
||||
lg: 12px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 16px 24px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.lg}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 16px 24px
|
||||
button-secondary-on-dark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 16px 24px
|
||||
button-legal:
|
||||
backgroundColor: "{colors.link}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.legal}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 12px 10px
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 40px
|
||||
button-pricing-pill:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.pricing-ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 24px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.link}"
|
||||
typography: "{typography.body-md}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
height: 64px
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
signature-coral-card:
|
||||
backgroundColor: "{colors.signature-coral}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
signature-forest-card:
|
||||
backgroundColor: "{colors.signature-forest}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
hero-card-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
feature-card-tabbed:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
cream-callout-card:
|
||||
backgroundColor: "{colors.signature-cream}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 24px
|
||||
demo-grid-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.label-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 16px
|
||||
logo-strip:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 32px
|
||||
article-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 16px
|
||||
topic-filter-rail:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
width: 240px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 12px 16px
|
||||
height: 44px
|
||||
text-input-focus:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.sm}"
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.pricing-ink}"
|
||||
typography: "{typography.pricing-card-title}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 32px
|
||||
pricing-tier-card-featured:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.pricing-ink}"
|
||||
typography: "{typography.pricing-card-title}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 32px
|
||||
pricing-comparison-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 12px
|
||||
cta-band-light:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Airtable's marketing surfaces are quietly editorial. The base atmosphere is white canvas, dark ink type, generous whitespace, and a near-black pill CTA — nothing is fighting for attention until a section needs to. The brand voltage doesn't come from gradient washes or accent walls; it comes from **full-bleed signature cards** in `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` that punctuate long-scroll explainer pages every two or three screens. Between those signature bands, the page reads like a print magazine: a headline, supporting copy, a small image cluster, then breathing room.
|
||||
|
||||
Type voice is Haas Grotesk at modest weights (400 for display, 500 for sub-titles and buttons). Display headlines never go bolder than 500 — emphasis comes from size and color contrast, not from weight. Body copy stays at 14px / 400 throughout. The pricing surface runs its own dialect: **Inter Display** at unusual mid-weights (475 / 575) and **pill-shaped buttons** (`{rounded.pill}`) that don't appear on any other page — a deliberate sub-system signaling "this page is about commercial precision."
|
||||
|
||||
**Key Characteristics:**
|
||||
- Primary CTA is `{colors.primary}` (near-black ink) with white text and a `{rounded.lg}` (12px) corner — it reads as confident and final, never decorative.
|
||||
- Secondary CTA is a `{colors.canvas}` button with `{colors.ink}` text and a hairline outline. The two together form Airtable's signature button pair.
|
||||
- Hero is white canvas. There is no atmospheric gradient, no mesh, no background flourish. The brand strength comes from the type and the buttons sitting in clean whitespace.
|
||||
- Brand voltage lives in **signature surface cards**: `{colors.signature-coral}`, `{colors.signature-forest}`, and `{colors.surface-dark}` carry full-bleed product callouts every few screens.
|
||||
- Demo-card grids carry product UI fragments on `{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-cream}` and other warm pastel surfaces.
|
||||
- Section rhythm: white canvas → coral signature card → white body → cream callout band → dark navy CTA → light gray CTA banner → footer. The canvas resets between every signature surface.
|
||||
- Border radius is hierarchical: `{rounded.lg}` (12px) for primary CTAs and large signature cards, `{rounded.md}` (10px) for content cards and demo grids, `{rounded.sm}` (6px) for inputs, `{rounded.full}` for icon buttons. Pricing buttons jump to `{rounded.pill}` to mark themselves as a separate dialect.
|
||||
- Vertical rhythm is `{spacing.section}` (96px) between major bands — universal across every page.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Primary** (`{colors.primary}` — #181d26): The dominant brand color. Used for the primary CTA background, h1/h2 display type, and the `{component.surface-dark}` band. Not "blue, then black" — black IS the primary throughout the marketing system.
|
||||
- **Primary Active** (`{colors.primary-active}` — #0d1218): The press state on primary buttons.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #ffffff): The default page surface; the floor of every editorial body.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #f8fafc): Tabbed feature cards and the featured pricing tier.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #e0e2e6): The light gray "Start building with Airtable" CTA banner near the footer.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #181d26): The dark navy CTA cards used mid-page (for example "The path to 10× every person in your organization").
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1d1f25): The articles-page hero base behind the rainbow-stripe overlay.
|
||||
- **Hairline** (`{colors.hairline}` — #dddddd): The 1px border tone for input outlines, table dividers, secondary-button outlines.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #181d26): The strongest text — h1/h2 display type and primary button text-on-light. Same hex as `{colors.primary}` because they are the same role expressed at type and button layers.
|
||||
- **Body** (`{colors.body}` — #333840): The default running-text color.
|
||||
- **Muted** (`{colors.muted}` — #41454d): Footer links, breadcrumbs, captions.
|
||||
- **Border Strong** (`{colors.border-strong}` — #9297a0): The 1px outline color on disabled secondary buttons.
|
||||
- **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): The text color on primary buttons and dark surfaces.
|
||||
|
||||
### Signature Card Surfaces
|
||||
These are the colors that carry Airtable's brand voltage. They appear as full-bleed, full-card surfaces — never as accents on a small element.
|
||||
- **Coral** (`{colors.signature-coral}` — #aa2d00): The largest signature card on the homepage ("Production apps in prototype speed"). Full-bleed dark coral with white type.
|
||||
- **Forest** (`{colors.signature-forest}` — #0a2e0e): A deep-green signature card used in the homepage demo-grid cluster.
|
||||
- **Cream** (`{colors.signature-cream}` — #f5e9d4): The cream callout band ("The path to 10× every person in your organization") — a soft beige surface holding dark type and product UI fragments.
|
||||
- **Peach** (`{colors.signature-peach}` — #fcab79), **Mint** (`{colors.signature-mint}` — #a8d8c4), **Yellow** (`{colors.signature-yellow}` — #f4d35e), **Mustard** (`{colors.signature-mustard}` — #d9a441): Demo-card surfaces that carry small product UI fragments inside the multi-card grid sections.
|
||||
|
||||
### Semantic
|
||||
- **Link** (`{colors.link}` — #1b61c9): Inline body links and anchor text. Darker on press to `{colors.link-active}` (#1a3866). Despite the `--theme_button-background-primary` CSS-variable name, this color is **not** the primary button color — it is the link color.
|
||||
- **Info** (`{colors.info}` — #254fad) and **Info Border** (`{colors.info-border}` — #458fff): Inline info badges and focused-input outline.
|
||||
- **Success** (`{colors.success}` — #006400) and **Success Border** (`{colors.success-border}` — #39bf45): Confirmation states.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **Haas / Haas Groot Disp** (Airtable's licensed display + text type). Haas Groot Disp covers display sizes (h1 / h2); Haas Grotesk covers everything 24px and below. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`.
|
||||
|
||||
The pricing surface runs a separate **Inter Display** stack at mid-weights (475 / 575) — a deliberate sub-system signaling commercial precision.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 48px | 500 | 1.1 | 0 | Articles page h2 — second-tier editorial headline |
|
||||
| `{typography.display-lg}` | 40px | 400 | 1.2 | 0 | Homepage h1 hero |
|
||||
| `{typography.display-md}` | 32px | 400 | 1.2 | 0 | Platform-page h2 — feature-section headlines |
|
||||
| `{typography.title-lg}` | 24px | 400 | 1.35 | 0.12px | Section titles |
|
||||
| `{typography.title-md}` | 20px | 400 | 1.5 | 0 | Sub-section titles in tabbed feature cards |
|
||||
| `{typography.title-sm}` | 18px | 500 | 1.4 | 0 | Article-card titles |
|
||||
| `{typography.label-md}` | 16px | 500 | 1.4 | 0 | Demo-card titles, list labels |
|
||||
| `{typography.button}` | 16px | 500 | 1.4 | 0 | Standard CTA button labels |
|
||||
| `{typography.body-md}` | 14px | 400 | 1.25 | 0 | Body copy, footer links, top-nav items |
|
||||
| `{typography.caption}` | 14px | 500 | 1.35 | 0.16px | Light captions and meta text |
|
||||
| `{typography.legal}` | 13.12px | 600 | 1.2 | 0 | Cookie/legal CTA buttons |
|
||||
| `{typography.pricing-display}` | 44.8px | 475 | 1.1 | 0 | Pricing-page h1 |
|
||||
| `{typography.pricing-section}` | 28px | 475 | 1.2 | 0 | Pricing-page section heads |
|
||||
| `{typography.pricing-card-title}` | 20px | 475 | 1.3 | 0 | Pricing tier card plan name |
|
||||
|
||||
### Principles
|
||||
The Haas system prefers weight 400 for display sizes — a 40px h1 is **not** bold. Visual emphasis is delegated to size, color contrast, and the signature surface cards. Where the system does want weight, it pivots to 500 (sub-titles, buttons, article titles), never 600 or 700 in the editorial body. The only true bold (600) lives in `{typography.legal}` — a sign that boldness is reserved for terms-of-service surfaces, not marketing.
|
||||
|
||||
The pricing-page sub-system uses Inter Display at `font-weight: 475` — a custom mid-weight between regular (400) and medium (500), shipped as a variable font.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If Haas Groot Disp and Haas Grotesk are unavailable, **Inter Display** (variable) is the closest open-source substitute for both — adjust line-height down by ~5% to match Haas's tighter cap-height. For the pricing sub-system, use Inter Display directly. On macOS / iOS, **system-ui** is sufficient; on Windows, the chain falls through to Segoe UI, which is a usable but slightly cooler substitute.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px (all spacing snaps to 4-multiples).
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding (vertical):** `{spacing.section}` (96px) is the universal vertical rhythm constant — every major editorial band on every page uses 96px top + 96px bottom internal padding.
|
||||
- **Card internal padding:** `{spacing.xl}` (32px) for tabbed feature cards and pricing tier cards; `{spacing.xxl}` (48px) inside signature coral / forest / dark cards; `{spacing.lg}` (24px) for cream callouts and demo-grid cards.
|
||||
- **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside denser logo strips and footer column gutters.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1280px centered, with `{spacing.xxl}` (48px) horizontal breathing room.
|
||||
- **Editorial body:** Single 8/12-column at large breakpoints, collapsing to single-column on mobile.
|
||||
- **Demo-card grids:** 3 or 4 columns at desktop, 2 at tablet, 1 at mobile. Card sizes are deliberately uneven within the grid to dodge a uniform "spec sheet" feel.
|
||||
- **Logo strip:** 6 monochrome partner logos in a single row at desktop; wraps to 3-up on mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Airtable uses whitespace as the dominant atmospheric tool. Hero sections sit in 96px+ of pure whitespace above and below the headline + sub-headline pair, with no decoration in that whitespace. The hero is intentionally calm — there is no gradient, no aurora, no atmospheric mesh behind the type. The system trusts whitespace alone to do the framing.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, footer |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav rails, comparison-table dividers, secondary buttons |
|
||||
| Button rest | Soft drop with subtle blue-tinted glow at low alpha | Primary CTA buttons (the blue tint is a holdover from the link color and reads as a faint accent under the dark button) |
|
||||
| Button focus | Outer 2px blue ring at higher alpha | Keyboard focus state on primary buttons |
|
||||
| Card flat | No shadow; relies on color contrast against the surface band | Signature coral / forest / dark cards, cream callouts, demo-grid cards |
|
||||
|
||||
The elevation philosophy is **color-block first, shadow second**. Shadows are minimal; depth is delegated to the contrast between white canvas and signature surface cards. There is no soft-glow / atmospheric-shadow / heavy-elevation language anywhere in the marketing system.
|
||||
|
||||
### Decorative Depth
|
||||
- **Vertical rainbow stripes** appear on the articles hero only — multi-color vertical bands sitting on `{colors.surface-dark-elevated}`. This is a single-page treatment, not a system-wide signature.
|
||||
- **Photography-as-depth** in the demo-card grid: every card carries a real product UI screenshot or mockup, contributing depth through legible artifact density rather than decorative effects.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 2px | Cookie-consent and legal CTA buttons — system-required surfaces |
|
||||
| `{rounded.sm}` | 6px | Text inputs, small inline buttons |
|
||||
| `{rounded.md}` | 10px | Secondary content cards, article cards, cream callouts |
|
||||
| `{rounded.lg}` | 12px | Primary CTA buttons, signature surface cards, tabbed feature cards |
|
||||
| `{rounded.pill}` | 9999px | Pricing-page CTA buttons (sub-system only) |
|
||||
| `{rounded.full}` | 9999px / 50% | Circular icon buttons, avatar surfaces |
|
||||
|
||||
### Photography Geometry
|
||||
Product UI screenshots inside demo-card grids retain native aspect ratios (typically 4:3 or 16:10) and crop into `{rounded.md}` containers. Hero illustrations bleed full-width with no rounding. Article-card thumbnails use 16:9 with `{rounded.md}` corners. Avatars in testimonials use `{rounded.full}` (perfect circles). Pricing comparison table images stay rectangular with no rounding.
|
||||
|
||||
## Components
|
||||
|
||||
> **No hover states documented.** Per the global no-hover policy (Step 6), every component spec below documents only Default and Active/Pressed states. Variants live as separate entries in the `components:` front matter.
|
||||
|
||||
**`top-nav`** — A 64px-tall white bar pinned to the top of every page. Airtable wordmark sits at left; primary horizontal menu (Platform, Solutions, Resources, Enterprise, Pricing) sits center-left in `{typography.body-md}`; the right cluster carries a "Book Demo" outline link, "Sign up for free" `{component.button-primary}`, and "Log In" text link. The nav stays light on every page — Airtable does not invert the nav over dark sections.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature primary CTA. Background `{colors.primary}` (near-black), text `{colors.on-primary}`, type `{typography.button}`, padding 16px × 24px, rounded `{rounded.lg}` (12px). This is the "Get started for free" / "Sign up for free" button visible on every hero. It reads as confident and final — not decorative — which is why the system uses it sparingly (one per viewport).
|
||||
- Active state: `button-primary-active` darkens to `{colors.primary-active}` (#0d1218).
|
||||
|
||||
**`button-secondary`** — White outline button (e.g. "Book demo"). Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.lg}` (12px), 1px hairline outline. Sits next to `{component.button-primary}` as the "less-committed" choice.
|
||||
|
||||
**`button-secondary-on-dark`** — Same shape as `{component.button-secondary}` but used on signature coral / forest / dark surfaces. Background `{colors.canvas}`, text `{colors.ink}` — the white button stays white over dark surfaces because the system never inverts to a translucent on-dark style on the marketing site.
|
||||
|
||||
**`button-pricing-pill`** — The pricing-page CTA family. Background `{colors.canvas}`, text `{colors.pricing-ink}`, rounded `{rounded.pill}` (9999px), padding 12px × 24px. The only place pill-shape appears in the marketing system. Treat it as part of the pricing sub-system signaling.
|
||||
|
||||
**`button-legal`** — Cookie-consent and legal-banner CTAs. Background `{colors.link}`, text `{colors.on-primary}`, type `{typography.legal}` (13.12px / 600), rounded `{rounded.xs}` (2px), padding 12px × 10px. The 2px corner radius and 600 weight signal "this is a required system surface," not a designed brand surface.
|
||||
|
||||
**`button-icon-circular`** — 40px × 40px circular button with `{colors.canvas}` background, hairline border, and `{colors.ink}` icon. Used for carousel controls, "share", and "back" affordances.
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.link}` (#1b61c9, the actual link blue). No underline by default. Type inherits `{typography.body-md}`.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band`** — The full-page-width white-canvas hero. No surface card, no border, no shadow, no atmospheric gradient — just the headline, sub-headline, and primary + secondary button pair sitting in 96px of whitespace. Vertical padding `{spacing.section}` (96px).
|
||||
|
||||
**`signature-coral-card`** — The large full-bleed coral card on the homepage ("Production apps in prototype speed"). Background `{colors.signature-coral}` (#aa2d00, a dark coral / oxide red), text `{colors.on-primary}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}`, supporting copy in `{typography.body-md}`, and `{component.button-secondary-on-dark}` as the CTA.
|
||||
|
||||
**`signature-forest-card`** — A deep green signature card (`{colors.signature-forest}` — #0a2e0e) used as a demo-grid sibling to the coral card on the homepage.
|
||||
|
||||
**`hero-card-dark`** — The dark navy mid-page CTA card (e.g. "The path to 10× every person in your organization"). Background `{colors.surface-dark}` (#181d26), text `{colors.on-dark}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xxl}` (48px). The same color as `{colors.primary}` because the system uses ink as both type color and signature dark surface.
|
||||
|
||||
**`feature-card-tabbed`** — Light-cream cards (e.g. the "Coke / Pelosi / Conde Nast / Time Inc" tabbed feature card on the homepage). Background `{colors.surface-soft}`, rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Left rail carries vertically-stacked tab labels in `{typography.title-md}`; right pane shows the active tab's content (illustration + body copy + small CTA).
|
||||
|
||||
**`cream-callout-card`** — Beige callout cards (`{colors.signature-cream}`). Rounded `{rounded.md}` (10px), internal padding `{spacing.lg}` (24px). Carry product UI fragments or stat callouts — softer than the dark/coral signature cards but still a deliberate brand surface.
|
||||
|
||||
**`demo-grid-card`** — Used in multi-card grids that punctuate every page. Background `{colors.canvas}` or one of the demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`), rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card frames a product UI fragment. Card heights vary deliberately to dodge a uniform "spec sheet" feel.
|
||||
|
||||
**`logo-strip`** — Horizontal monochrome partner-logo row (HBO, Netflix, Amazon, Time, Conde Nast). Logos render in `{colors.muted}`, surface is `{colors.canvas}`, vertical padding `{spacing.xl}` (32px). 6 logos at desktop, 3 at mobile.
|
||||
|
||||
**`article-card`** — The trending-stories grid on the articles page. Background `{colors.canvas}`, rounded `{rounded.md}` (10px), internal padding `{spacing.md}` (16px). Each card carries a colorful illustrated thumbnail (16:9), a small uppercase category tag, an `{typography.title-sm}` title, and a meta line. 3-up at desktop.
|
||||
|
||||
**`topic-filter-rail`** — The left rail on the articles page. 240px wide, `{colors.canvas}` background, `{typography.body-md}`, vertically grouped category headings ("Marketing", "Product", "Project management", "Operations") with sub-bullets. Active item carries a small numeric count badge.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.sm}` (6px), padding 12px × 16px, height 44px. 1px hairline border in `{colors.hairline}`.
|
||||
|
||||
**`text-input-focus`** — Focus state. Border thickens or recolors to `{colors.info-border}`.
|
||||
|
||||
### Pricing Sub-System
|
||||
|
||||
**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}`, text `{colors.pricing-ink}`, type `{typography.pricing-card-title}` for the plan name, rounded `{rounded.md}` (10px), internal padding `{spacing.xl}` (32px). Carries the plan name, a price block in `{typography.pricing-display}` (44.8px / 475), feature checklist, and a `{component.button-pricing-pill}` at the bottom.
|
||||
|
||||
**`pricing-tier-card-featured`** — The featured tier (typically "Team" or "Business"). Background shifts to `{colors.surface-soft}`. No accent border, no badge — the background tone shift is the only signal.
|
||||
|
||||
**`pricing-comparison-row`** — Each row of the long comparison table at the bottom of the pricing page. Labels in the left column; checkmarks or values across 4 plan columns. 12px vertical padding per row, hairline divider between rows.
|
||||
|
||||
### Navigation Variants
|
||||
|
||||
**`footer`** — Light surface (`{colors.canvas}`), 6-column link list at desktop covering Platform / Solutions / Resources / Learn / Company sub-trees. Vertical padding `{spacing.section}` divided across upper link block and lower legal row. Type `{typography.body-md}`.
|
||||
|
||||
**`cta-band-light`** — The light gray "Start building with Airtable" CTA strip near the footer. Background `{colors.surface-strong}` (#e0e2e6), text `{colors.ink}`, rounded `{rounded.lg}` (12px), padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-md}` and a `{component.button-primary}`.
|
||||
|
||||
### Signature Components
|
||||
|
||||
**Articles Vertical Rainbow Stripe Hero** — The articles-page hero treatment. Multi-color vertical bands at varying widths sitting on `{colors.surface-dark-elevated}`. The h1 + sub-head + CTA cluster sits center-left on top of the stripes. This is a single-page hero treatment, not a system-wide signature — do not promote it to a multi-page pattern.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Keep `{component.button-primary}` near-black. The brand's primary CTA is `{colors.primary}`, not the link blue. Mixing them up turns a confident hero into a confused one.
|
||||
- Reserve `{component.button-primary}` for one primary action per viewport. The system is designed for scarcity at the brand-action layer.
|
||||
- Use `{component.button-secondary}` (white with hairline outline) as the natural pair with `{component.button-primary}`. The two together form Airtable's signature button row.
|
||||
- Trust whitespace as the hero atmosphere. Hero bands are intentionally calm — no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-brand.
|
||||
- Use `{component.signature-coral-card}`, `{component.signature-forest-card}`, and `{component.hero-card-dark}` to break editorial monotony. These are the brand's voltage moments.
|
||||
- Keep `{component.demo-grid-card}` heights uneven within a grid. Uniform heights feel like a spec sheet.
|
||||
- Treat the pricing surface as its own dialect: keep `{typography.pricing-display}`, `{typography.pricing-card-title}`, and `{component.button-pricing-pill}` together. Mixing them with Haas Grotesk button type breaks the sub-system's voice.
|
||||
- Anchor every editorial band with `{spacing.section}` (96px) vertical padding.
|
||||
|
||||
### Don't
|
||||
- Don't make `{colors.link}` (#1b61c9) the primary button color. It is the link color. The primary button is `{colors.primary}` (#181d26, near-black). Treating link-blue as the brand action is the most common mistake when reading Airtable's CSS variables.
|
||||
- Don't add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as "another SaaS template" — not Airtable.
|
||||
- Don't bold display-weight type. `{typography.display-xl}` and `{typography.display-lg}` are intentionally weight 400 / 500 — going to 700 reads as marketing-page-template.
|
||||
- Don't use `{rounded.pill}` outside the pricing surface. It's a sub-system signal, not a general radius option.
|
||||
- Don't repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white → signature card → white → cream → dark → white. Two whites in a row read as a typography blog.
|
||||
- Don't add hover state styling beyond what the system already encodes. The system documents Default and Active/Pressed only.
|
||||
- Don't introduce additional accent colors beyond the documented signature card palette. The system's voltage already uses coral, forest, dark navy, cream, peach, mint, yellow, and mustard.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Single-column body; top nav collapses to hamburger; demo-grid drops to 1-up; signature cards stay full-bleed; logo strip wraps to 2 rows; footer collapses to single-column |
|
||||
| Tablet | 768–1024px | 2-up demo-grid; top nav stays horizontal but tightens; cream-callout cards stack 2-up; pricing comparison table becomes horizontally scrollable |
|
||||
| Desktop | 1024–1440px | 3-up demo-grid (and 4-up for tighter content); full top-nav with all menu items visible; pricing tier cards render 4-across |
|
||||
| Wide | > 1440px | Same as Desktop with more outer breathing room; max content width caps at ~1280px and the page adds outer margin rather than scaling type up |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` and siblings render at 48 × 48px minimum (16px vertical padding + 16px line-height) — comfortably above WCAG AAA's 44 × 44.
|
||||
- `{component.button-icon-circular}` is exactly 40 × 40px — slightly under WCAG's recommended 44, but the centered icon and dot-radius compensate visually.
|
||||
- `{component.text-input}` height is 44px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to a hamburger at < 768px; the menu opens as a full-screen sheet rather than a dropdown.
|
||||
- Card grids reduce columns rather than scaling cards down.
|
||||
- The `{component.feature-card-tabbed}` re-stacks the tab rail above the content pane on mobile.
|
||||
- The pricing comparison table converts to horizontally-scrollable swipe at < 1024px; the four plan headers stay visible while body rows scroll.
|
||||
|
||||
### Image Behavior
|
||||
- Demo-card UI screenshots crop to fit their container rather than scaling up.
|
||||
- Hero illustrations bleed full-width on mobile, losing horizontal margin.
|
||||
- Signature card images (inside coral / forest / dark cards) compress to their card width without cropping.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key directly (`{component.button-primary}`, `{component.signature-coral-card}`).
|
||||
2. When adding a new component, decide first which sub-system it belongs to: the main editorial system (Haas, `{rounded.lg}`/`{rounded.md}`) or the pricing sub-system (Inter Display, `{rounded.pill}`).
|
||||
3. Variants of an existing component (`-active`, `-disabled`, `-focus`) live as separate entries in `components:` — never as nested state objects.
|
||||
4. Use `{token.refs}` everywhere prose mentions a color, a radius, a typography role, or a spacing value. Hex codes appear at most once next to the reference.
|
||||
5. Never document hover. The system documents Default and Active/Pressed states only.
|
||||
6. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.
|
||||
7. When in doubt about emphasis: bigger type before bolder type, signature surface card before solid accent.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The exact hex values of pastel demo-grid surfaces (`{colors.signature-peach}`, `{colors.signature-mint}`, `{colors.signature-yellow}`, `{colors.signature-mustard}`) are inferred from screenshot pixel sampling. Some product launches may swap these surfaces seasonally.
|
||||
- Hover behavior across all components is not documented (per global no-hover policy).
|
||||
- Animation and transition timings are not in scope.
|
||||
- Form validation states beyond `text-input-focus` are not extracted — error and success states for inputs would need a dedicated form page to confirm.
|
||||
- The pricing comparison table's checkmark glyph and column-divider widths are described structurally but not formalized as tokens.
|
||||
- The CSS variable `--theme_button-background-primary: #1b61c9` exists at `:root` but is not used as the primary CTA color anywhere on the marketing site. It maps to the link/info color role instead. Documented here so future extractions don't re-trip over the misleading variable name.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Airtable Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/airtable/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,562 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Apple
|
||||
description: "A photography-first interface that turns marketing into a museum gallery. Edge-to-edge product tiles alternate light and dark canvases, framed by SF Pro Display headlines with negative letter-spacing and a single Action Blue (#0066cc) interactive color. UI chrome recedes so the product can speak — no decorative gradients, no shadows on chrome, only the one signature drop-shadow under product imagery resting on a surface."
|
||||
|
||||
colors:
|
||||
primary: "#0066cc"
|
||||
primary-focus: "#0071e3"
|
||||
primary-on-dark: "#2997ff"
|
||||
ink: "#1d1d1f"
|
||||
body: "#1d1d1f"
|
||||
body-on-dark: "#ffffff"
|
||||
body-muted: "#cccccc"
|
||||
ink-muted-80: "#333333"
|
||||
ink-muted-48: "#7a7a7a"
|
||||
divider-soft: "#f0f0f0"
|
||||
hairline: "#e0e0e0"
|
||||
canvas: "#ffffff"
|
||||
canvas-parchment: "#f5f5f7"
|
||||
surface-pearl: "#fafafc"
|
||||
surface-tile-1: "#272729"
|
||||
surface-tile-2: "#2a2a2c"
|
||||
surface-tile-3: "#252527"
|
||||
surface-black: "#000000"
|
||||
surface-chip-translucent: "#d2d2d7"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 56px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.07
|
||||
letterSpacing: -0.28px
|
||||
display-lg:
|
||||
fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 40px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.1
|
||||
letterSpacing: 0
|
||||
display-md:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 34px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.47
|
||||
letterSpacing: -0.374px
|
||||
lead:
|
||||
fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 28px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.14
|
||||
letterSpacing: 0.196px
|
||||
lead-airy:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
tagline:
|
||||
fontFamily: "SF Pro Display, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 21px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.19
|
||||
letterSpacing: 0.231px
|
||||
body-strong:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 17px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.24
|
||||
letterSpacing: -0.374px
|
||||
body:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 17px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.47
|
||||
letterSpacing: -0.374px
|
||||
dense-link:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 17px
|
||||
fontWeight: 400
|
||||
lineHeight: 2.41
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.43
|
||||
letterSpacing: -0.224px
|
||||
caption-strong:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.29
|
||||
letterSpacing: -0.224px
|
||||
button-large:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.0
|
||||
letterSpacing: 0
|
||||
button-utility:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.29
|
||||
letterSpacing: -0.224px
|
||||
fine-print:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -0.12px
|
||||
micro-legal:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 10px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: -0.08px
|
||||
nav-link:
|
||||
fontFamily: "SF Pro Text, system-ui, -apple-system, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -0.12px
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 5px
|
||||
sm: 8px
|
||||
md: 11px
|
||||
lg: 18px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 17px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 80px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 11px 22px
|
||||
button-primary-focus:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.pill}"
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.pill}"
|
||||
button-secondary-pill:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 11px 22px
|
||||
button-dark-utility:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button-utility}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 8px 15px
|
||||
button-pearl-capsule:
|
||||
backgroundColor: "{colors.surface-pearl}"
|
||||
textColor: "{colors.ink-muted-80}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 8px 14px
|
||||
button-store-hero:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-large}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 14px 28px
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.surface-chip-translucent}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 44px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body}"
|
||||
text-link-on-dark:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary-on-dark}"
|
||||
typography: "{typography.body}"
|
||||
global-nav:
|
||||
backgroundColor: "{colors.surface-black}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 44px
|
||||
sub-nav-frosted:
|
||||
backgroundColor: "{colors.canvas-parchment}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.tagline}"
|
||||
height: 52px
|
||||
product-tile-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 80px
|
||||
product-tile-parchment:
|
||||
backgroundColor: "{colors.canvas-parchment}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 80px
|
||||
product-tile-dark:
|
||||
backgroundColor: "{colors.surface-tile-1}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-lg}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 80px
|
||||
product-tile-dark-2:
|
||||
backgroundColor: "{colors.surface-tile-2}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.none}"
|
||||
product-tile-dark-3:
|
||||
backgroundColor: "{colors.surface-tile-3}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.none}"
|
||||
store-utility-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-strong}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
configurator-option-chip:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 16px
|
||||
configurator-option-chip-selected:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.pill}"
|
||||
search-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
floating-sticky-bar:
|
||||
backgroundColor: "{colors.canvas-parchment}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
height: 64px
|
||||
padding: 12px 32px
|
||||
environment-quote-card:
|
||||
backgroundColor: "{colors.surface-tile-1}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-lg}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 80px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas-parchment}"
|
||||
textColor: "{colors.ink-muted-80}"
|
||||
typography: "{typography.fine-print}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Apple's web presence is a masterclass in **reverent product photography framed by near-invisible UI**. Every page is a stack of edge-to-edge product "tiles" — alternating light and dark canvases, each centered on a hero headline, a one-line tagline, two tiny blue pill CTAs, and an impossibly crisp product render. Nothing competes with the product. Typography is confident but quiet; color is either pure white, an off-white parchment, or a near-black tile; interactive elements are a single, quiet blue.
|
||||
|
||||
Density is unusually low even by contemporary SaaS standards. Each tile occupies roughly one viewport, and there is no decorative chrome — no borders, no gradients, no decorative frames, no shadows on headlines. Elevation appears only when a product image rests on a surface (a single soft `rgba(0, 0, 0, 0.22) 3px 5px 30px` drop for visual weight). The result is a catalog that feels more like a museum gallery: the wall disappears and the artifact takes over.
|
||||
|
||||
Store and shop surfaces retain the same chassis but switch modes. The product configurator (iPhone 17 Pro, accessories grid) introduces a tight grid of white utility cards at `{rounded.lg}` (18px) radius with a thin border, paired with a persistent thin sub-nav strip. The environment page leans darker and more editorial. Across all five surfaces the typographic system, spacing rhythm, and the single blue accent are consistent — this is one design language expressed at different volumes.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Photography-first presentation; UI recedes so the product can speak.
|
||||
- Alternating full-bleed tile sections: white/parchment ↔ near-black, with the color change itself acting as the section divider.
|
||||
- Single blue accent (`{colors.primary}` — #0066cc) carries every interactive element. No second brand color exists.
|
||||
- Two button grammars: tiny blue pill CTAs (`{rounded.pill}`) and compact utility rects (`{rounded.sm}`).
|
||||
- SF Pro Display + SF Pro Text — negative letter-spacing at display sizes for the signature "Apple tight" headline feel.
|
||||
- Whisper-soft elevation used only when a product image needs to breathe — exactly one drop-shadow in the entire system.
|
||||
- Tight two-row nav: slim `{component.global-nav}` + product-specific `{component.sub-nav-frosted}` with persistent right-aligned primary CTA.
|
||||
- Section rhythm across multiple pages: light hero → dark product tile → light utility tile → dark tile → parchment footer — a predictable pulse.
|
||||
|
||||
## Colors
|
||||
|
||||
> **Source pages analyzed:** homepage, environment, store, iPhone 17 Pro buy page, accessories index. The color system is identical across all five surfaces; only the surface-mode mix differs.
|
||||
|
||||
### Brand & Accent
|
||||
- **Action Blue** (`{colors.primary}` — #0066cc): The single brand-level interactive color. All text links, all blue pill CTAs ("Learn more", "Buy"), and the focus ring root. This is Apple's quiet but universal "click me" signal. Press state shifts to a slightly darker variant via the active scale transform rather than a hex change.
|
||||
- **Focus Blue** (`{colors.primary-focus}` — #0071e3): A marginally brighter sibling of Action Blue, reserved for the keyboard focus ring on buttons (`outline: 2px solid`).
|
||||
- **Sky Link Blue** (`{colors.primary-on-dark}` — #2997ff): A brighter blue used on dark surfaces for in-copy links and inline callouts, where Action Blue would disappear against the tile background.
|
||||
|
||||
### Surface
|
||||
- **Pure White** (`{colors.canvas}` — #ffffff): The dominant canvas. Content, utility cards, store tiles, configurator grids.
|
||||
- **Parchment** (`{colors.canvas-parchment}` — #f5f5f7): The signature Apple off-white. Used for alternating light tiles, footer region, and the default page canvas in store utility sections. Just different enough from white to create rhythm.
|
||||
- **Pearl Button** (`{colors.surface-pearl}` — #fafafc): A near-white used as the fill for secondary "ghost" buttons — lighter than the parchment canvas so the button still reads as a button against `{colors.canvas-parchment}`.
|
||||
- **Near-Black Tile 1** (`{colors.surface-tile-1}` — #272729): The primary dark-tile surface on the homepage product grid.
|
||||
- **Near-Black Tile 2** (`{colors.surface-tile-2}` — #2a2a2c): A micro-step lighter — used where a dark tile sits directly above or below Tile 1 to create the faintest separation.
|
||||
- **Near-Black Tile 3** (`{colors.surface-tile-3}` — #252527): A micro-step darker — used at the bottom of the stack and in embedded video/player frames.
|
||||
- **Pure Black** (`{colors.surface-black}` — #000000): Reserved for true void — video player backgrounds, edge-to-edge photographic overlays, the global nav bar background.
|
||||
- **Translucent Chip Gray** (`{colors.surface-chip-translucent}` — #d2d2d7): The base hex of the translucent gray chip used over photography for circular control buttons. In production, applied at ~64% alpha as `rgba(210, 210, 215, 0.64)`.
|
||||
|
||||
### Text
|
||||
- **Near-Black Ink** (`{colors.ink}` — #1d1d1f): The voice of every headline, every body paragraph, and the dark utility button's fill. Chosen instead of pure black to keep the page feeling photographic rather than printed.
|
||||
- **Body** (`{colors.body}` — #1d1d1f): Same hex as ink — Apple uses one near-black tone for all text on light surfaces.
|
||||
- **Body On Dark** (`{colors.body-on-dark}` — #ffffff): All text on dark tiles and on the global nav bar.
|
||||
- **Body Muted** (`{colors.body-muted}` — #cccccc): Secondary copy on dark tiles where pure white would be too loud.
|
||||
- **Ink Muted 80** (`{colors.ink-muted-80}` — #333333): Body text on the white Pearl Button surface — slightly softer than pure black.
|
||||
- **Ink Muted 48** (`{colors.ink-muted-48}` — #7a7a7a): Disabled button text and legal fine-print.
|
||||
|
||||
### Hairlines & Borders
|
||||
- **Divider Soft** (`{colors.divider-soft}` — #f0f0f0): The "border" tone on secondary buttons — functions as a ring shadow rather than a hard line. In production, often applied as `rgba(0, 0, 0, 0.04)`.
|
||||
- **Hairline** (`{colors.hairline}` — #e0e0e0): The 1px hairline border on store utility cards and configurator chips.
|
||||
|
||||
### Brand Gradient
|
||||
**No decorative gradients.** Atmospheric depth on product photography (the iPhone 17 Pro camera plate, the Apple Watch bands, AirPods reflections) is inherent to the imagery, not a CSS gradient overlay. The environment page's hero uses photographic atmosphere (mountain vista at dawn) but no gradient tokens are defined. Apple is the rare luxury-brand site with zero gradient-based design tokens.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
- **Display**: `SF Pro Display, system-ui, -apple-system, sans-serif` — Apple's proprietary display face, optimized for sizes ≥ 19px. Defines the voice of every headline.
|
||||
- **Body / UI**: `SF Pro Text, system-ui, -apple-system, sans-serif` — the text-optimized variant used for body copy, captions, buttons, and links below 20px.
|
||||
- **OpenType features**: `font-variant-numeric: numerator` is enabled on numeric links (pricing tables, spec sheets). Display sizes rely on tight tracking rather than contextual ligatures.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 56px | 600 | 1.07 | -0.28px | Hero headline; the signature "Apple tight" tracking |
|
||||
| `{typography.display-lg}` | 40px | 600 | 1.10 | 0 | Tile headlines atop every product tile |
|
||||
| `{typography.display-md}` | 34px | 600 | 1.47 | -0.374px | Section heads (SF Pro Text at display proportions) |
|
||||
| `{typography.lead}` | 28px | 400 | 1.14 | 0.196px | Product tile subcopy |
|
||||
| `{typography.lead-airy}` | 24px | 300 | 1.5 | 0 | Environment-page lead paragraphs (the rare weight 300) |
|
||||
| `{typography.tagline}` | 21px | 600 | 1.19 | 0.231px | Sub-tile tagline; sub-nav category name |
|
||||
| `{typography.body-strong}` | 17px | 600 | 1.24 | -0.374px | Inline strong emphasis |
|
||||
| `{typography.body}` | 17px | 400 | 1.47 | -0.374px | Default paragraph |
|
||||
| `{typography.dense-link}` | 17px | 400 | 2.41 | 0 | Footer / store utility link lists (relaxed leading) |
|
||||
| `{typography.caption}` | 14px | 400 | 1.43 | -0.224px | Secondary captions, button text |
|
||||
| `{typography.caption-strong}` | 14px | 600 | 1.29 | -0.224px | Emphasized captions |
|
||||
| `{typography.button-large}` | 18px | 300 | 1.0 | 0 | Store hero CTAs (the rare weight 300) |
|
||||
| `{typography.button-utility}` | 14px | 400 | 1.29 | -0.224px | Utility/nav button labels |
|
||||
| `{typography.fine-print}` | 12px | 400 | 1.0 | -0.12px | Fine-print, footer body |
|
||||
| `{typography.micro-legal}` | 10px | 400 | 1.3 | -0.08px | Micro legal disclaimers |
|
||||
| `{typography.nav-link}` | 12px | 400 | 1.0 | -0.12px | Global nav menu items |
|
||||
|
||||
### Principles
|
||||
|
||||
- **Negative letter-spacing at display sizes.** Every headline at 17px and up carries a slight tracking tighten (`-0.12 → -0.374px`). This produces the iconic "Apple tight" headline cadence. Never used at 12px or below.
|
||||
- **Body copy at 17px, not 16px.** Apple breaks the SaaS convention and runs paragraph text at 17px. The extra pixel gives the page an unmistakable "reading, not scanning" pace.
|
||||
- **Weight 300 is real and rare.** Used deliberately on a handful of large-size reads (`{typography.button-large}` at 18px/300 and `{typography.lead-airy}` at 24px/300). It's not an accident — it's a light-atmosphere cue reserved for moments where the content should feel airy.
|
||||
- **Weight 600, not 700, for headlines.** Apple's headlines sit at weight 600. Weight 700 is used sparingly for `{typography.tagline}` (21px) when a touch more assertion is needed.
|
||||
- **Line-height is context-specific.** Display sizes use 1.07–1.19 (tight). Body uses 1.47. Utility link stacks in the footer/store use an unusually relaxed 2.41 (`{typography.dense-link}`). The 2.41 is not a bug — it's how the footer's dense link columns breathe.
|
||||
- **Weight 500 is deliberately absent.** The ladder is 300 / 400 / 600 / 700. Mid-weight readings always use 600.
|
||||
|
||||
### Note on Font Substitutes
|
||||
SF Pro is Apple's proprietary system font. When building off-system:
|
||||
|
||||
- Use `system-ui, -apple-system, BlinkMacSystemFont` as the first stack entry — on macOS/iOS/Safari this resolves to the real SF Pro.
|
||||
- For non-Apple platforms, **Inter** (Google Fonts, variable) is the closest open-source equivalent. Inter at weight 600 with `font-feature-settings: "ss03"` approximates SF Pro's rounded "a" character.
|
||||
- Nudge `letter-spacing` down by `-0.01em` on display sizes to re-create the Apple tight feel; Inter's default tracking runs slightly wider than SF Pro.
|
||||
- For body text, tighten line-height by `0.03` (from 1.47 → 1.44) when substituting Inter — Inter's taller x-height needs less leading.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 8px. Sub-base values (2, 4, 5, 6, 7) are used for tight typographic adjustments; structural layout snaps to 8/12/16/20/24.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 17px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
|
||||
- **Section vertical padding:** `{spacing.section}` (80px) inside a product tile; tiles stack edge-to-edge with 0 gap (the color change provides the break).
|
||||
- **Card padding:** `{spacing.lg}` (24px) inside utility grid cards.
|
||||
- **Button padding:** 8–11px vertical, 15–22px horizontal.
|
||||
- **Universal rhythm constants:** the 17px body line-height multiplier (~25px line) and 21px tagline size show up on every analyzed page.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~980px on text-heavy sections (environment), ~1440px on product grids (store, accessories), full-bleed for product tiles (homepage).
|
||||
- **Column patterns:** 3 to 5 column utility card grid on store/accessories; 2-column side-by-side tiles on homepage occasional sections; single-column centered stack on product tile heroes.
|
||||
- **Gutters:** 20–24px between cards in a utility grid.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Apple's whitespace is the product's pedestal. Every tile begins with at least 64px of air above its headline and 48–64px below. Product renders are never crowded; the nearest content to a product image is at least 40px away. The footer is the only area that breaks this — there, Apple goes deliberately dense to make the full information architecture visible at a glance.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Full-bleed tiles, global nav, footer, body sections |
|
||||
| Soft hairline | 1px `rgba(0, 0, 0, 0.08)` border | Utility cards, sub-nav frosted-glass separator |
|
||||
| Backdrop blur | `backdrop-filter: blur(N)` on Parchment 80% | Sub-nav and the iPhone buy floating sticky bar |
|
||||
| Product shadow | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0` | Product renders resting on a surface (the only true "shadow" in the system) |
|
||||
|
||||
**Shadow philosophy.** Apple uses **exactly one** drop-shadow, and it is applied to photographic product imagery — never to cards, never to buttons, never to text. Elevation in the UI comes from (a) surface-color change (light tile ↔ dark tile) and (b) backdrop-blur on sticky bars. The single shadow is about giving the product weight, not about UI hierarchy.
|
||||
|
||||
### Decorative Depth
|
||||
- **Atmospheric imagery** on the environment page (photographic vista) supplies mood; no CSS gradient involved.
|
||||
- **Edge-to-edge tile alternation** creates rhythm without borders or shadows — the color change itself is the divider.
|
||||
- **Backdrop-filter blur** on `{component.sub-nav-frosted}` and `{component.floating-sticky-bar}` creates a "floating over content" effect that's functional, not decorative.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Full-bleed product tiles (no corner rounding) |
|
||||
| `{rounded.xs}` | 5px | Inline links when styled as subtle chips (rare) |
|
||||
| `{rounded.sm}` | 8px | Dark utility buttons (Sign In, Bag), inline card imagery |
|
||||
| `{rounded.md}` | 11px | White Pearl Button capsules |
|
||||
| `{rounded.lg}` | 18px | Store utility cards, accessories grid cards |
|
||||
| `{rounded.pill}` | 9999px | Primary blue pill CTAs, sub-nav buy button, configurator option chips, search input — the signature Apple pill |
|
||||
| `{rounded.full}` | 9999px / 50% | Circular control chips floating over photography |
|
||||
|
||||
### Photography Geometry
|
||||
- **Hero imagery**: full-bleed, 21:9 or taller on the homepage; 16:9 on environment and shop pages. Product renders are photographic-realistic, often shot on a tinted surface that becomes the tile background.
|
||||
- **Product renders**: PNG/WebP with transparency; rest on a surface tile and pick up the system shadow.
|
||||
- **Accessory grid**: square 1:1 crops at `{rounded.lg}` (18px) radius, light neutral backgrounds, product centered with 20–40px internal padding.
|
||||
- **No rounded imagery in hero tiles** — images are full-bleed rectangular. Rounding (`{rounded.sm}`, `{rounded.lg}`) appears only on inline card imagery.
|
||||
- Lazy-loading via responsive `srcset` and `sizes` across all breakpoints; CDN-optimized WebP.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`global-nav`** — Persistent, ultra-thin black nav bar pinned to the top of every page. Background `{colors.surface-black}`, height 44px, text `{colors.on-dark}` in `{typography.nav-link}` (12px / 400 / -0.12px tracking). Links are quiet, spaced ~20px apart, running edge-to-edge across the top. Right-aligned cluster: Search, Bag icons — always visible. On mobile, collapses to hamburger at ~834px and the Apple logo centers.
|
||||
|
||||
**`sub-nav-frosted`** — Surface-specific nav that sticks below the global nav. Background `{colors.canvas-parchment}` at 80% opacity with backdrop-filter blur, creating a frosted-glass effect. Height 52px. Content on left: product category name ("iPhone", "Store", "Accessories") in `{typography.tagline}` (21px / 600). Content right: inline nav links in `{typography.button-utility}` (14px), ending in a persistent `{component.button-primary}` ("Buy") or a utility link.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature Apple action. Background `{colors.primary}` (Action Blue #0066cc), text `{colors.on-primary}` in `{typography.body}` (SF Pro Text 17px / 400), rounded `{rounded.pill}` (full pill — capsule-shaped), padding 11px × 22px. The full-pill radius IS the brand action signal.
|
||||
- Active state: `{component.button-primary-active}` — `transform: scale(0.95)` (the system-wide micro-interaction).
|
||||
- Focus state: `{component.button-primary-focus}` — 2px solid `{colors.primary-focus}` outline.
|
||||
|
||||
**`button-secondary-pill`** — Used as the second CTA when two blue pills appear together ("Learn more" / "Buy"). Background transparent, text `{colors.primary}`, 1px solid `{colors.primary}` border, rounded `{rounded.pill}`, padding 11px × 22px. Reads as a "ghost pill."
|
||||
|
||||
**`button-dark-utility`** — Global nav actions (Sign In, Bag, language selector). Background `{colors.ink}` (#1d1d1f), text `{colors.on-dark}` in `{typography.button-utility}` (14px / 400 / -0.224px tracking), rounded `{rounded.sm}` (8px), padding 8px × 15px. Active state shrinks via `transform: scale(0.95)`.
|
||||
|
||||
**`button-pearl-capsule`** — Product-card secondary button. Background `{colors.surface-pearl}` (#fafafc), text `{colors.ink-muted-80}` in `{typography.caption}` (14px), 3px solid `{colors.divider-soft}` border (functions as a soft ring rather than a visible line), rounded `{rounded.md}` (11px), padding 8px × 14px.
|
||||
|
||||
**`button-store-hero`** — A larger primary CTA used on store hero surfaces. Same Action Blue + Paper White as `{component.button-primary}`, but with `{typography.button-large}` (18px / 300 — note the rare weight 300) and slightly more padding (14px × 28px). Used sparingly on the store landing.
|
||||
|
||||
**`button-icon-circular`** — Floats over photography. 44 × 44px, background `{colors.surface-chip-translucent}` at ~64% alpha, icon in `{colors.ink}`, rounded `{rounded.full}`. Used for carousel controls, close buttons, and in-image controls (product image thumbnails on the iPhone buy page).
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.primary}` (Action Blue). Underlined or non-underlined per context.
|
||||
|
||||
**`text-link-on-dark`** — Inline body links on dark tiles in `{colors.primary-on-dark}` (Sky Link Blue #2997ff) — Action Blue would disappear against `{colors.surface-tile-1}`.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`product-tile-light`** — Full-bleed light tile. Background `{colors.canvas}` (white), text `{colors.ink}`, rounded `{rounded.none}` (0 — tiles touch edges), vertical padding `{spacing.section}` (80px). Centered stack: product name in `{typography.display-lg}` (40px / 600) → one-line tagline in `{typography.lead}` (28px / 400) → two `{component.button-primary}` CTAs ("Learn more" / "Buy") → product render resting on the surface with the system shadow.
|
||||
|
||||
**`product-tile-parchment`** — Same as `{component.product-tile-light}` but on `{colors.canvas-parchment}` (#f5f5f7). Used to break two consecutive white tiles.
|
||||
|
||||
**`product-tile-dark`** — Full-bleed dark tile. Background `{colors.surface-tile-1}` (#272729), text `{colors.on-dark}`, rounded `{rounded.none}`, vertical padding `{spacing.section}` (80px). Same content stack as the light tile but with `{component.text-link-on-dark}` for inline copy and `{component.button-primary}` (Action Blue still works on the dark surface). Used on the homepage product grid as the alternating dark band.
|
||||
|
||||
**`product-tile-dark-2`** — Variant on `{colors.surface-tile-2}` (#2a2a2c). Used where a dark tile sits directly above or below `{component.product-tile-dark}` to create the faintest separation through micro-step lightness change.
|
||||
|
||||
**`product-tile-dark-3`** — Variant on `{colors.surface-tile-3}` (#252527). Used at the bottom of the stack and in embedded video/player frames.
|
||||
|
||||
**`store-utility-card`** — Used in store grid and accessories grid. Background `{colors.canvas}` (white), 1px solid `{colors.hairline}` border, rounded `{rounded.lg}` (18px), padding `{spacing.lg}` (24px). Top: product image (1:1 crop with `{rounded.sm}` (8px) inner image radius). Below: product name in `{typography.body-strong}` (17px / 600), price in `{typography.body}` (17px / 400), and a `{component.text-link}` ("Buy" or "Learn more"). No shadow by default; product render itself carries the system product-shadow.
|
||||
|
||||
**`configurator-option-chip`** — Pill-shaped tappable cell used in the iPhone 17 Pro buy page. Background `{colors.canvas}`, text `{colors.ink}` in `{typography.caption}`, rounded `{rounded.pill}`, padding 12px × 16px. Contains a small product thumbnail + label + price delta. Arranged in a grid of 4–5 options per row.
|
||||
|
||||
**`configurator-option-chip-selected`** — Selected state. Border upgrades to 2px solid `{colors.primary-focus}`. Same shape, same content.
|
||||
|
||||
**`environment-quote-card`** — A photographic-canvas hero specific to the environment page. Dark photographic backdrop (mountain vista at dawn) with `{colors.surface-tile-1}` as the fallback color, centered white-text headline in `{typography.display-lg}` (40px), small green "Apple 2030" pictographic logo above the headline, single `{component.button-primary}` below. Padding `{spacing.section}` (80px).
|
||||
|
||||
**`floating-sticky-bar`** — Floats at the bottom of the viewport on the iPhone 17 Pro buy page during scroll. Background `{colors.canvas-parchment}` at 80% opacity with `backdrop-filter: blur(N)`, height 64px, padding 12px × 32px. Left: running price total in `{typography.body}`. Right: `{component.button-primary}` ("Add to Bag").
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`search-input`** — The accessories search input. Background `{colors.canvas}`, text `{colors.ink}` in `{typography.body}` (17px), 1px solid `rgba(0, 0, 0, 0.08)` border, rounded `{rounded.pill}` (full pill — search is also pill-shaped, matching the CTA grammar), padding 12px × 20px, height 44px. Leading icon: search glyph at 14px, muted tint.
|
||||
|
||||
Error and validation states were not surfaced in the analyzed pages.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Background `{colors.canvas-parchment}` (#f5f5f7), text `{colors.ink-muted-80}`. Link columns in `{typography.dense-link}` (17px / 400 / 2.41 line-height — the relaxed leading is what makes the dense columns scannable). Column headings in `{typography.caption-strong}` (14px / 600). Legal row at the very bottom in `{typography.fine-print}` (12px / 400) with `{colors.ink-muted-48}` text. Vertical padding 64px.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use `{colors.primary}` (Action Blue #0066cc) for every interactive element — links, pill CTAs, focus signals — and nothing else. The single accent is non-negotiable.
|
||||
- Set headlines in `{typography.hero-display}` or `{typography.display-lg}` with negative letter-spacing (`-0.28 → -0.374px`) to get the signature "Apple tight" cadence.
|
||||
- Run body copy at `{typography.body}` (17px / 400 / 1.47 / -0.374px) — not 16px. The extra pixel defines the brand's reading pace.
|
||||
- Alternate `{component.product-tile-light}` (or parchment) and `{component.product-tile-dark}` for full-bleed section rhythm. The color change IS the divider.
|
||||
- Reserve `{rounded.pill}` for the primary blue CTA and any other element that should read as an "action" (configurator chips, search input, sticky bar CTA).
|
||||
- Apply the single product-shadow (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) only to product renders resting on a surface — never on cards, buttons, or text.
|
||||
- Use `transform: scale(0.95)` as the active/press state on every button — it's the system-wide micro-interaction.
|
||||
- Keep the global nav `{colors.surface-black}` (true black) — it's the only place pure black appears on most pages.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a second accent color; every "click me" signal is `{colors.primary}` (Action Blue).
|
||||
- Don't add shadows to cards, buttons, or text — shadow is reserved for product imagery.
|
||||
- Don't use gradients as decorative backgrounds; atmosphere comes from photography.
|
||||
- Don't set body copy at weight 500 — Apple's ladder is 300 / 400 / 600 / 700, with 500 deliberately absent. Body is always 400; strong inline is 600; display is 600.
|
||||
- Don't round full-bleed tiles — tiles are rectangular and edge-to-edge; the color change is the divider.
|
||||
- Don't tighten line-height below 1.47 for body copy — the editorial leading is part of the brand.
|
||||
- Don't mix radii grammars — use `{rounded.sm}` for compact utility, `{rounded.lg}` for utility cards, `{rounded.pill}` for pills, and nothing in between (except the rare `{rounded.md}` Pearl Button).
|
||||
- Don't use `{colors.primary-on-dark}` (Sky Link Blue) on light surfaces — it's the dark-tile-only variant. Action Blue is for light surfaces.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Small phone | ≤ 419px | Single-column tiles; sub-nav collapses to category name + primary CTA only; hero typography drops to 28px |
|
||||
| Phone | 420–640px | Single-column stack; product renders scale to 80% of tile width; hero h1 drops to 34px |
|
||||
| Large phone | 641–735px | Tiles transition to tighter padding (48px vertical vs 80px); fine-print wraps |
|
||||
| Tablet portrait | 736–833px | Global nav collapses to hamburger; sub-nav hides category chips, keeps primary CTA |
|
||||
| Tablet landscape | 834–1023px | Global nav returns fully expanded; 3-column utility grids become 2-column |
|
||||
| Small desktop | 1024–1068px | Product tiles use 2/3 width with margin gutters; hero h1 stays at 40px |
|
||||
| Desktop | 1069–1440px | Full layout; 4–5 column store grids; 1440px content max |
|
||||
| Wide desktop | ≥ 1441px | Content locks at 1440px, margins absorb extra width |
|
||||
|
||||
The structural breakpoints that matter for agents: 1440px (content lock), 1068px (small-desktop), 833px (tablet landscape switch), 734px (tablet portrait), 640px (phone), 480px (small phone).
|
||||
|
||||
### Touch Targets
|
||||
- Minimum 44 × 44px. `{component.button-primary}` lands at ~44 × 100px (with the full-pill radius making the visible hit area more generous than the label suggests).
|
||||
- `{component.button-icon-circular}` is exactly 44 × 44px.
|
||||
- Global nav utility links are smaller (~32 × 80px) — they deliberately sit at a tighter target because they're precision desktop actions, and the mobile hamburger replaces them at ≤ 833px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Global nav**: full horizontal link row on desktop → collapses to Apple logo + hamburger + bag icon at 834px and below.
|
||||
- **Sub-nav**: category name + inline links + primary CTA → category name + primary CTA only at mobile; inline links move into a hamburger tray.
|
||||
- **Product tiles**: stack from 2-column to 1-column at 834px; vertical padding tightens from 80px → 48px at small-phone.
|
||||
- **Utility grids** (store, accessories): 5-col → 4-col (1440px) → 3-col (1068px) → 2-col (834px) → 1-col (640px).
|
||||
- **Hero typography**: `{typography.hero-display}` (56px) → `{typography.display-lg}` (40px) at 1068px → 34px at 640px → 28px at 419px.
|
||||
|
||||
### Image Behavior
|
||||
- All product imagery uses responsive `srcset` with breakpoint-matched crops.
|
||||
- Hero photography may switch art direction at mobile (e.g., the environment page's vista crops to a taller aspect ratio on mobile, framing the subject differently).
|
||||
- Product renders maintain their 1:1 or 4:3 aspect ratios across breakpoints; only scale changes.
|
||||
- Lazy-loading is default; the above-fold hero loads eagerly.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key directly (`{component.product-tile-dark}`, `{component.search-input}`).
|
||||
2. Variants of an existing component (`-active`, `-focus`, `-2`, `-3`) live as separate entries in `components:`.
|
||||
3. Use `{token.refs}` everywhere — never inline hex.
|
||||
4. Never document hover. Default and Active/Pressed states only.
|
||||
5. Display headlines stay SF Pro Display 600 with negative letter-spacing. Body stays SF Pro Text 400 at 17px. The boundary is unbreakable.
|
||||
6. The single drop-shadow (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) is reserved for product photography only.
|
||||
7. When in doubt about emphasis: alternate surface (light → dark tile) before adding chrome.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Form validation and error states were not surfaced on the analyzed pages; only the neutral search input is documented.
|
||||
- The homepage's embedded video/player frame uses `{colors.surface-black}`; interior player controls are not documented (they're a platform widget, not a web-design token).
|
||||
- Some component imagery is dynamic (rotating product hero) and its specific copy varies per surface — component specs name the structure, not the rotating content.
|
||||
- Dark-mode counterparts for store and accessories utility cards were not surfaced on the analyzed pages; the system documented is the daytime/light-dominant variant Apple ships by default.
|
||||
- Atmospheric photography (environment page mountain vista) is a content asset, not a design token; the documented `{component.environment-quote-card}` describes the structural surface only.
|
||||
- The exact backdrop-filter blur radius on `{component.sub-nav-frosted}` and `{component.floating-sticky-bar}` is platform-dependent; production CSS uses `saturate(180%) blur(20px)` as a typical baseline but the value isn't formalized as a token.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Apple Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/apple/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,749 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Apple — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/apple. Every visible
|
||||
token comes from tokens.css; the page itself follows Apple's
|
||||
editorial rules — pale-gray feature ladder over white, single
|
||||
Apple Action Blue accent capped at ≤2 visible uses per screen,
|
||||
SF Pro display at compressed tracking, and the signature 980px
|
||||
capsule CTA."
|
||||
/>
|
||||
|
||||
<style>
|
||||
/* :root paste — sourced verbatim from
|
||||
design-systems/apple/tokens.css. Keep this block in sync
|
||||
when tokens.css changes. The agent prompt instructs the
|
||||
Designer panelist to paste this block as the FIRST thing in
|
||||
their <style>, then reference everything below via var(...). */
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #f5f5f7;
|
||||
--surface-warm: #fbfbfd;
|
||||
|
||||
--fg: #1d1d1f;
|
||||
--fg-2: #424245;
|
||||
--muted: #6e6e73;
|
||||
--meta: #86868b;
|
||||
|
||||
--border: #d2d2d7;
|
||||
--border-soft: #e8e8ed;
|
||||
|
||||
--accent: #0071e3;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #0077ed;
|
||||
--accent-active: #0066cc;
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--font-display:
|
||||
"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body:
|
||||
"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono:
|
||||
"SF Mono", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 17px;
|
||||
--text-lg: 21px;
|
||||
--text-xl: 28px;
|
||||
--text-2xl: 40px;
|
||||
--text-3xl: 56px;
|
||||
--text-4xl: 80px;
|
||||
|
||||
--leading-body: 1.47;
|
||||
--leading-tight: 1.05;
|
||||
|
||||
--tracking-display: -0.015em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 100px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 40px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 18px;
|
||||
--radius-pill: 980px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 12px 32px rgba(0, 0, 0, 0.08);
|
||||
|
||||
--focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 220ms;
|
||||
--ease-standard: cubic-bezier(0.28, 0, 0.22, 1);
|
||||
|
||||
--container-max: 1024px;
|
||||
--container-gutter-desktop: 22px;
|
||||
--container-gutter-tablet: 18px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
/* ─── Reset (minimal) ───────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.022em; /* SF Pro Text body, per DESIGN.md §3 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section {
|
||||
padding-block: var(--section-y-desktop);
|
||||
}
|
||||
/* Apple uses surface contrast, not borders, to separate chapters
|
||||
(DESIGN.md §5 — "section transitions rely more on surface
|
||||
changes than decorative separators"). The .band-* helpers
|
||||
below switch the chapter canvas while the container stays
|
||||
constant. */
|
||||
.band-light { background: var(--bg); color: var(--fg); }
|
||||
.band-soft { background: var(--surface); color: var(--fg); }
|
||||
.band-warm { background: var(--surface-warm); color: var(--fg); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
}
|
||||
/* DESIGN.md §3 — Hero Display L (56px / 600 / 1.07). We set
|
||||
tracking via the display token so all hero copy compresses
|
||||
consistently. */
|
||||
h1 {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 600;
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.14;
|
||||
letter-spacing: -0.007em; /* DESIGN.md §3 — Card/Product Title */
|
||||
}
|
||||
p { margin: 0; }
|
||||
|
||||
.lead {
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.38;
|
||||
color: var(--fg-2);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.011em;
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-meta { color: var(--meta); font-size: var(--text-sm); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
|
||||
/* `.eyebrow` — small uppercase label above hero / section heads.
|
||||
DESIGN.md §3 has no eyebrow row in the hierarchy table; this
|
||||
is the agreed pattern for OD reference fixtures and uses the
|
||||
12px micro-UI tier with positive tracking so the rule reads
|
||||
as deliberate. */
|
||||
.eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ─────────────────────────────────────────────────
|
||||
* Apple's CTA family is split across two silhouettes:
|
||||
* - .btn-pill / .btn-pill-secondary — the signature 980px
|
||||
* capsule used on every marketing hero and product page.
|
||||
* - .btn / .btn-primary / .btn-secondary — the 8/12px-radius
|
||||
* compact controls used in commerce / configurator
|
||||
* surfaces where the capsule would feel too marketing-y.
|
||||
*
|
||||
* Both share base sizing (8/15px padding per DESIGN.md §4) and
|
||||
* the focus halo. Hover lifts the blue (--accent-hover) rather
|
||||
* than darkens it — Apple's documented behaviour. Press scales
|
||||
* the button down 2% per DESIGN.md §4 ("active controls
|
||||
* commonly reduce scale to indicate physical press"). */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
transform var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.btn:active { transform: scale(0.98); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-primary:active { background: var(--accent-active); }
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--surface);
|
||||
border-color: var(--meta);
|
||||
}
|
||||
|
||||
/* The Apple capsule. --radius-pill is bound to 980px in tokens
|
||||
(the literal published Apple value); the geometry is the
|
||||
brand signature and earns its own component. */
|
||||
.btn-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 12px 22px;
|
||||
border: none;
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.005em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
transition:
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
transform var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.btn-pill:hover { background: var(--accent-hover); }
|
||||
.btn-pill:active { background: var(--accent-active); transform: scale(0.98); }
|
||||
.btn-pill:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.btn-pill-secondary {
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
box-shadow: var(--elev-ring);
|
||||
}
|
||||
.btn-pill-secondary:hover {
|
||||
background: var(--surface);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
.btn-pill-secondary:active {
|
||||
color: var(--accent-active);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────────
|
||||
* Apple's retail inputs are border-led rather than fill-led —
|
||||
* a hairline #d2d2d7 box on white, dark text, the focus halo
|
||||
* tightens the border to --accent and adds the blue glow.
|
||||
* Density stays quiet so device imagery dominates. */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.field label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
letter-spacing: -0.016em;
|
||||
}
|
||||
.field input {
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.2;
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field input:hover { border-color: var(--meta); }
|
||||
.field input:focus-visible {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field-help {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────────
|
||||
* Two intents:
|
||||
* - .card plain editorial / product card. Lives on
|
||||
* pale gray (--surface) bands; lifts to
|
||||
* white (--bg) with a hairline. No shadow
|
||||
* by default — surface contrast does the
|
||||
* work.
|
||||
* - .card-feature featured spotlight. Squircle 18px
|
||||
* (--radius-lg), the soft Apple shadow on
|
||||
* hover. Used sparingly — one per band. */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
transition: box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
.card-feature {
|
||||
background: var(--surface-warm);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-8) var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
|
||||
/* ─── Badges ──────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px var(--space-3);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.badge-success {
|
||||
color: var(--success);
|
||||
background: color-mix(in oklab, var(--success), transparent 90%);
|
||||
}
|
||||
.badge-muted {
|
||||
color: var(--muted);
|
||||
background: color-mix(in oklab, var(--muted), transparent 88%);
|
||||
}
|
||||
.badge-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────────
|
||||
* Apple's link tone uses Body Link Blue (#0066cc, our
|
||||
* --accent-active) for inline reading, with the chevron-arrow
|
||||
* suffix on call-to-action links. The base color is --accent
|
||||
* for buttons / nav; here we re-bind for the inline reading
|
||||
* tone via --accent-active. */
|
||||
a {
|
||||
color: var(--accent-active);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
/* ─── Kbd ─────────────────────────────────────────────────── */
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
|
||||
/* ─── Distinctive: glass nav strip ──────────────────────────
|
||||
* DESIGN.md §4 — "Global Marketing Nav: compact dark translucent
|
||||
* bar with small-type links and restrained iconography." We
|
||||
* implement the light counterpart: a frosted white strip with
|
||||
* backdrop-blur, hairline bottom border, and SF Pro Text 14px
|
||||
* link tier. The blur is what gives Apple chrome its signature
|
||||
* "atmospheric layering" (DESIGN.md §6). */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: color-mix(in oklab, var(--bg), transparent 20%);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
.nav-inner {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
.nav-brand {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
letter-spacing: -0.011em;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
color: var(--fg);
|
||||
letter-spacing: -0.016em;
|
||||
opacity: 0.8;
|
||||
transition: opacity var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.nav-links a:hover {
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.nav-inner { gap: var(--space-3); padding-inline: var(--container-gutter-phone); }
|
||||
.nav-links { gap: var(--space-4); }
|
||||
}
|
||||
|
||||
/* ─── Section-specific layout ───────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: end;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-6);
|
||||
}
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg);
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr 1fr;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.features-grid { grid-template-columns: 1fr 1fr; }
|
||||
.features-grid > :first-child { grid-column: span 2; }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
.features-grid > :first-child { grid-column: auto; }
|
||||
}
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.form-row { grid-template-columns: 1fr; gap: var(--space-8); }
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
max-width: 420px;
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-2);
|
||||
}
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
NAV — Apple's distinctive frosted-glass strip. Sticky to top,
|
||||
44px tall, SF Pro Text 14px links at 0.8 opacity that
|
||||
brighten on hover. Backdrop saturate + blur is what gives
|
||||
Apple chrome its atmospheric layering (DESIGN.md §6).
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<header class="nav" data-od-id="nav">
|
||||
<div class="nav-inner">
|
||||
<span class="nav-brand">Apple</span>
|
||||
<nav aria-label="Primary">
|
||||
<ul class="nav-links">
|
||||
<li><a href="#hero">Tokens</a></li>
|
||||
<li><a href="#features">System</a></li>
|
||||
<li><a href="#form">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
HERO — exercises: h1 (56px display, tracking -0.015em),
|
||||
.lead, .eyebrow, .btn-pill (the signature 980px capsule)
|
||||
paired with .btn-pill-secondary (ring-edge counterpart),
|
||||
kbd, .badge-success. Asymmetric grid (1.3:1) so the
|
||||
composition doesn't read as a generic centered template.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section class="band-light" data-od-id="hero" id="hero">
|
||||
<div class="container">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · Apple</p>
|
||||
<h1>Quiet chrome. Loud product. One token block.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
The interface engineered to disappear, distilled into
|
||||
fifty-six tokens. Pale-gray feature ladder over white,
|
||||
a single Apple Action Blue, SF Pro at compressed
|
||||
tracking, and the 980-pixel capsule that has carried
|
||||
every Buy button for a decade.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn-pill">
|
||||
View tokens
|
||||
<svg
|
||||
class="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn-pill btn-pill-secondary">
|
||||
Read the spec
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm">System status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Stable
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm body-muted">
|
||||
Last reviewed
|
||||
<time datetime="2026-05-14">2026-05-14</time> · v0.1
|
||||
</p>
|
||||
<p class="body-sm body-muted">
|
||||
Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FEATURES — band switches to pale Apple gray (--surface),
|
||||
cards lift back to white with a hairline. The first card
|
||||
is .card-feature (squircle, soft Apple shadow), the next
|
||||
two are plain .card. Each card describes a real property
|
||||
of this fixture (no "feature one/two/three" filler).
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section class="band-soft" data-od-id="features" id="features">
|
||||
<div class="container">
|
||||
<div class="stack-3" style="max-width: 720px">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2>Every component below uses only var(--*).</h2>
|
||||
<p class="lead body-muted">
|
||||
Three cards, three real schema decisions worth
|
||||
inspecting. Rebind the token block and the same shapes
|
||||
follow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid" style="margin-block-start: var(--space-12)">
|
||||
<article class="card-feature">
|
||||
<p class="eyebrow">Featured</p>
|
||||
<h3>Surface ladder, three stops, no aliasing.</h3>
|
||||
<p class="body-muted">
|
||||
Pure white retail canvas, near-white bridge, pale
|
||||
Apple gray feature band. Apple's three light tiers
|
||||
are real, so we keep --surface-warm independent of
|
||||
--surface instead of collapsing it. Cards on the
|
||||
gray band lift back to white with a hairline.
|
||||
</p>
|
||||
<div>
|
||||
<a href="./tokens.css" class="btn btn-secondary">
|
||||
Inspect tokens
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3>Accent discipline</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--accent appears at most twice on this screen — the
|
||||
primary capsule CTA and the focus halo. The hero
|
||||
status uses --success instead, so the page does not
|
||||
feel mono-blue.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3>Type at scale</h3>
|
||||
<p class="body-muted body-sm">
|
||||
SF Pro Display for the hero, SF Pro Text for body and
|
||||
controls, body baseline at 17px (not 16), display
|
||||
tracking compressed to -0.015em. Hierarchy comes from
|
||||
size and weight — never a third type face.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect typography →</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FORM — exercises: .field, input :focus-visible (border
|
||||
tightens to --accent + the 4px blue halo), .btn-primary
|
||||
(the compact 8px-radius commerce CTA), .btn-secondary
|
||||
(border-led counterpart), .field-help. Band switches to
|
||||
the warm near-white tier so the form reads as a quiet
|
||||
transactional surface, not a hero.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section class="band-warm" data-od-id="form" id="form">
|
||||
<div class="container">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs inherit the same tokens.</h2>
|
||||
<p class="lead body-muted" style="max-width: 48ch">
|
||||
Border-led containment, dark Near-Black Ink text, the
|
||||
focus halo at four pixels of soft Apple Action Blue.
|
||||
The submit button reuses the compact .btn-primary —
|
||||
no new token introduced for this section.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Apple ID email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@icloud.com"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
<p class="field-help">
|
||||
We'll send the spec PDF and nothing else.
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Send the spec
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Skip for now
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,286 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/apple/tokens.css
|
||||
*
|
||||
* Structured token bindings for the Apple-inspired design system —
|
||||
* a precision editorial language built around white-space discipline,
|
||||
* SF Pro typography, and a single restrained blue accent. This file
|
||||
* is the *machine-readable* form of the values described in
|
||||
* `DESIGN.md`. Agents are expected to paste the `:root { … }` block
|
||||
* verbatim into the first `<style>` of every artifact they generate
|
||||
* against this design system, then reference everything via
|
||||
* var(--name) from then on.
|
||||
*
|
||||
* Why this file exists:
|
||||
* DESIGN.md tells humans that Apple uses "Pale Apple Gray (#f5f5f7)
|
||||
* as the main light surface" and "Apple Action Blue (#0071e3) as the
|
||||
* primary accent", but agents have to translate those prose names
|
||||
* into the standard token names the lint enforces (`--surface`,
|
||||
* `--accent`). That translation step is where token misuse happens.
|
||||
* This file pre-translates the brand once, so agents copy structure
|
||||
* instead of inventing it.
|
||||
*
|
||||
* Brand-specific schema decisions (non-obvious bindings worth flagging
|
||||
* for reviewers and downstream brand authors):
|
||||
* 1. We bind --surface-warm to a real intermediate tier (#fbfbfd),
|
||||
* NOT an alias of --surface. Apple's surface ladder genuinely has
|
||||
* three light stops — pure white retail canvas, near-white
|
||||
* brightness-shifted bands, and pale Apple gray feature fields —
|
||||
* so collapsing surface-warm would erase a real brand feature.
|
||||
* 2. We bind --fg-2, --meta, and --border-soft to independent values
|
||||
* rather than aliases. Apple's neutral text ramp is famously
|
||||
* four-stop (Near-Black Ink → Utility Dark Gray → Secondary
|
||||
* Neutral Gray → Mid Border Gray) and the schema's B-slots map
|
||||
* onto it cleanly.
|
||||
* 3. --radius-pill is bound to 980px, not 9999px. Apple's signature
|
||||
* capsule CTA literally uses 980px in published CSS, and the
|
||||
* number is itself a brand-recognisable detail; we keep it.
|
||||
* 4. --accent-hover lifts (#0077ed) instead of darkening. Apple's
|
||||
* live blue buttons brighten slightly on hover rather than mix
|
||||
* toward black; the schema's default formula would fight that.
|
||||
* --accent-active darkens to #0066cc — the documented Body Link
|
||||
* Blue — so the active state aligns with Apple's read-link tone.
|
||||
* 5. --tracking-display is -0.015em. The DESIGN.md hierarchy lists
|
||||
* -1.2px on 80px hero (-0.015em); tighter than that breaks at
|
||||
* smaller display sizes, looser loses Apple's machined feel.
|
||||
* 6. --section-y-desktop is 100px. Apple's billboard chapters lean
|
||||
* noticeably more generous than the schema default of 80px — the
|
||||
* breathing room is what lets product imagery do the talking.
|
||||
* 7. --ease-standard is cubic-bezier(0.28, 0, 0.22, 1), an Apple-
|
||||
* flavoured smooth-out instead of the schema default. Apple
|
||||
* transitions decelerate hard then settle, never bounce.
|
||||
*
|
||||
* Contract sources:
|
||||
* - Standard token names: design-systems/_schema/tokens.schema.ts
|
||||
* (TOKEN_SCHEMA — every name below appears there or as an
|
||||
* explicit B-slot alias.)
|
||||
* - A2 fallback values: design-systems/_schema/defaults.css
|
||||
* (We override --motion-base, --ease-standard, --elev-raised,
|
||||
* --focus-ring, --radius-pill; the rest match defaults.)
|
||||
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
|
||||
* (raw-hex >12 outside :root → P1; non-token accent → P0)
|
||||
*
|
||||
* Keep this file additive: never invent token names not also documented
|
||||
* in DESIGN.md or the shared schema. New Apple-derived sub-brands
|
||||
* cloning this template should overwrite values, not rename keys.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels) ──────────────────────────────────────────
|
||||
* Apple's binary section rhythm alternates pure white retail/hero
|
||||
* canvases with pale Apple gray feature fields. We bind --bg to
|
||||
* the white canvas (the most common default Apple page background)
|
||||
* and --surface to the pale gray that cards and feature bands lift
|
||||
* onto. --surface-warm is bound to a real third tier (#fbfbfd) —
|
||||
* the near-white brightness shift that appears between hero and
|
||||
* pale-gray bands on apple.com. Collapsing it to var(--surface)
|
||||
* would erase a real brand feature, so we keep it independent. */
|
||||
--bg: #ffffff;
|
||||
--surface: #f5f5f7;
|
||||
--surface-warm: #fbfbfd;
|
||||
|
||||
/* ─── Foreground ramp (4 levels) ─────────────────────────────────
|
||||
* Apple's text neutrals are explicitly named in DESIGN.md §2:
|
||||
* Near-Black Ink (primary), Utility Dark Gray (secondary text /
|
||||
* dark-neutral surfaces in store contexts), Secondary Neutral Gray
|
||||
* (helper copy / tertiary metadata), Mid Border Gray (the strongest
|
||||
* neutral, used for stronger field outlines and the most-restrained
|
||||
* caption tier). We bind all four — Apple genuinely walks the full
|
||||
* ramp, so collapsing --fg-2 or --meta to siblings would flatten
|
||||
* the brand.
|
||||
*
|
||||
* Note that none of these are pure black (#000000). #000000 is
|
||||
* reserved for hero canvases and dark chapters; for body type on
|
||||
* white, #1d1d1f gives the slight warmth that reads as Apple. */
|
||||
--fg: #1d1d1f;
|
||||
--fg-2: #424245;
|
||||
--muted: #6e6e73;
|
||||
--meta: #86868b;
|
||||
|
||||
/* ─── Border (2 levels) ──────────────────────────────────────────
|
||||
* Soft Border Gray (#d2d2d7) is Apple's default divider weight and
|
||||
* card-edge color. --border-soft is bound to a lighter near-neutral
|
||||
* (#e8e8ed) for inner row separators in dense retail tables and
|
||||
* configurator option lists, where the d2d2d7 hairline would
|
||||
* over-compete with the option labels. */
|
||||
--border: #d2d2d7;
|
||||
--border-soft: #e8e8ed;
|
||||
|
||||
/* ─── Accent ──────────────────────────────────────────────────────
|
||||
* Apple Action Blue — the system's only persistent chromatic move.
|
||||
* DESIGN.md §7 ("Don't introduce broad secondary accent palettes
|
||||
* that compete with Apple blue") makes this a one-color brand for
|
||||
* action and link semantics; the schema's hard cap of ≤2 visible
|
||||
* accent uses per screen aligns naturally. */
|
||||
--accent: #0071e3;
|
||||
--accent-on: #ffffff; /* white label on the blue fill */
|
||||
|
||||
/* ─── Accent states ───────────────────────────────────────────────
|
||||
* Apple's live primary buttons LIGHTEN on hover (the blue gains
|
||||
* luminance) and darken on press. The schema's default black-mix
|
||||
* formula would fight that motion, so we hand-pick both values:
|
||||
* - hover: #0077ed (≈ 4% brighter than --accent)
|
||||
* - active: #0066cc (the documented Body Link Blue from DESIGN.md
|
||||
* §2, which doubles cleanly as the press tone)
|
||||
*
|
||||
* Schema rule: every brand provides --accent-hover and
|
||||
* --accent-active. The binding strategy (formula / hand-picked /
|
||||
* identity) is brand-decided. Default uses formulas; kami uses
|
||||
* identity + hand-picked; Apple uses hand-picked in both
|
||||
* directions. */
|
||||
--accent-hover: #0077ed;
|
||||
--accent-active: #0066cc;
|
||||
|
||||
/* ─── Semantic ────────────────────────────────────────────────────
|
||||
* Apple's DESIGN.md §2 explicitly notes "no distinct semantic
|
||||
* palette was consistently visible in the extracted surface set" —
|
||||
* so we inherit the schema defaults verbatim. Apple artifacts
|
||||
* almost never need success / warn / danger; when they do, the
|
||||
* defaults are restrained enough not to fight the blue accent.
|
||||
* Reserve under 5% of any surface area regardless. */
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
/* ─── Typography ──────────────────────────────────────────────────
|
||||
* Apple's documented split is two SF Pro families: SF Pro Display
|
||||
* for hero / merchandising headings, SF Pro Text for navigation,
|
||||
* controls, and dense commerce copy. We mirror the exact published
|
||||
* fallback chain (SF Pro Icons → Helvetica Neue → Helvetica → Arial
|
||||
* → sans-serif) so artifacts rendered on non-macOS clients land on
|
||||
* the closest practical substitute.
|
||||
*
|
||||
* SF Mono leads the monospace stack — Apple's brand mono — with
|
||||
* the schema fallbacks behind it for portability. */
|
||||
--font-display:
|
||||
"SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body:
|
||||
"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono:
|
||||
"SF Mono", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
|
||||
* Apple's body baseline is 17px (NOT the 16px web norm) because
|
||||
* SF Pro Text was metrically tuned at 17 for Retina; rebinding
|
||||
* --text-base to anything else collapses the brand's reading
|
||||
* texture. The display ceiling is the 80px Hero Display XL. */
|
||||
--text-xs: 12px; /* Micro UI — fine print, micro labels */
|
||||
--text-sm: 14px; /* Control Label — buttons, helper labels */
|
||||
--text-base: 17px; /* Body Primary — Apple's reading baseline */
|
||||
--text-lg: 21px; /* Link/Action Heading — large promo links */
|
||||
--text-xl: 28px; /* Card/Product Title — tile-level naming */
|
||||
--text-2xl: 40px; /* Product Heading — campaign section titles */
|
||||
--text-3xl: 56px; /* Hero Display L — homepage hero moments */
|
||||
--text-4xl: 80px; /* Hero Display XL — Environment / store hero */
|
||||
|
||||
/* Apple's leading envelope is unusually tight at the top of the
|
||||
* scale (display sizes ride at 1.00–1.10) and unusually airy in
|
||||
* the body (1.47, well above the web 1.4 default). Both numbers
|
||||
* come straight from DESIGN.md §3. */
|
||||
--leading-body: 1.47; /* SF Pro Text body, 17px */
|
||||
--leading-tight: 1.05; /* Hero Display XL ceiling */
|
||||
|
||||
/* Display tracking compresses to -0.015em — the famous Apple
|
||||
* machined-headline feel. DESIGN.md §3 lists -1.2px on 80px
|
||||
* (≈ -0.015em); we bind a single em-value so the same rule applies
|
||||
* across the display tiers. Body type runs at 0 / -0.374px and is
|
||||
* left to component-level rules so as not to hurt readability. */
|
||||
--tracking-display: -0.015em;
|
||||
|
||||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||||
* Apple's underlying grid is 8px (DESIGN.md §5), with utility
|
||||
* micro-steps (2/4/6/7/8/9/10) for precision alignment. The shared
|
||||
* schema's 4-8-12-16-20-24-32-48 scale fits cleanly — we inherit
|
||||
* the defaults. Component-internal values that don't match a token
|
||||
* (Apple's 14px or 17px utility intervals) stay inline at the
|
||||
* call site rather than spawning extra spacing tokens. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* ─── Section rhythm ──────────────────────────────────────────────
|
||||
* Apple's billboard chapters lean noticeably more generous than the
|
||||
* schema default of 80px — broad top/bottom breathing room is what
|
||||
* lets product imagery dominate the page. We bind 100/64/40, a
|
||||
* slightly wider envelope than default's 80/48/32. */
|
||||
--section-y-desktop: 100px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 40px;
|
||||
|
||||
/* ─── Radius ──────────────────────────────────────────────────────
|
||||
* Apple uses purposeful radius tiers (DESIGN.md §5 §7 — "don't
|
||||
* flatten all corners to a single radius"). The mapping:
|
||||
* --radius-sm → 8px compact controls and fields
|
||||
* --radius-md → 12px standard buttons, configurator chips
|
||||
* --radius-lg → 18px cards, module frames, commerce panels
|
||||
* --radius-pill → 980px Apple's signature capsule CTA — we keep
|
||||
* the literal value rather than collapse
|
||||
* to 9999px because the number itself is
|
||||
* a brand-recognisable detail in Apple's
|
||||
* published CSS.
|
||||
*
|
||||
* The 28-36px spotlight tier and the 56px capsule sub-tier are
|
||||
* component-internal one-offs and stay inline — they do not earn
|
||||
* their own tokens until a second use appears. */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 18px;
|
||||
--radius-pill: 980px;
|
||||
|
||||
/* ─── Elevation (3 levels) ────────────────────────────────────────
|
||||
* Apple uses depth sparingly (DESIGN.md §6 — "depth is intentionally
|
||||
* restrained"). Three sanctioned levels:
|
||||
* - flat → none (the default; tonal contrast does the work)
|
||||
* - ring → 0 0 0 1px var(--border) (border-led containment in
|
||||
* dense retail contexts)
|
||||
* - raised → 0 12px 32px rgba(0,0,0,0.08) (the soft Apple card
|
||||
* shadow; rgba 0.08 is the lower bound from DESIGN.md
|
||||
* §6's "0.08 → 0.22" range, which keeps cards from
|
||||
* feeling Material-flavoured)
|
||||
*
|
||||
* No fourth level — that would be the Material/neumorphism stack
|
||||
* Apple consciously avoids. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 12px 32px rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* ─── Focus ring ──────────────────────────────────────────────────
|
||||
* Apple's keyboard-focus signal is a soft blue glow at the action
|
||||
* accent (DESIGN.md §6 — "Blue focus signal (#0071e3) for keyboard
|
||||
* and selection emphasis"). We use a 4px ring at ~35% accent
|
||||
* opacity, slightly larger than the schema's 3px default so it
|
||||
* reads as the deliberate Apple halo rather than a generic outline.
|
||||
* Implemented as a box-shadow so it layers outside the element
|
||||
* without affecting layout. */
|
||||
--focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%);
|
||||
|
||||
/* ─── Motion ──────────────────────────────────────────────────────
|
||||
* Apple transitions decelerate hard and settle — never bounce,
|
||||
* never spring past the target. We override the schema default
|
||||
* easing with cubic-bezier(0.28, 0, 0.22, 1), the curve Apple
|
||||
* uses on apple.com for hover and section reveals; --motion-base
|
||||
* is bumped from 200ms → 220ms because Apple's micro-interactions
|
||||
* carry slightly more cinematic weight than the web default.
|
||||
* --motion-fast stays at 150ms for true micro-states (hover tints,
|
||||
* focus, kbd press feedback). */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 220ms;
|
||||
--ease-standard: cubic-bezier(0.28, 0, 0.22, 1);
|
||||
|
||||
/* ─── Layout ──────────────────────────────────────────────────────
|
||||
* Apple's marketing core is a constrained readable column with
|
||||
* generous outer margins (DESIGN.md §5). 1024px max keeps lines
|
||||
* inside the SF Pro Text comfortable-measure ceiling (~80ch at
|
||||
* 17px) while leaving the chapter band full-bleed. Gutters step
|
||||
* 22 → 18 → 16 across desktop / tablet / phone — slightly tighter
|
||||
* than default to honor Apple's "broad horizontal breathing room
|
||||
* but column-disciplined content" balance. */
|
||||
--container-max: 1024px;
|
||||
--container-gutter-desktop: 22px;
|
||||
--container-gutter-tablet: 18px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Arc
|
||||
description: "'The browser that browses for you.' Translucent surfaces, gradient warmth, sidebar-first layout."
|
||||
category: "Productivity & SaaS"
|
||||
colors:
|
||||
palette: ["#ff7e5f", "#feb47b", "#7f5af0", "#e84393", "#16f2b3", "#0db4f7"]
|
||||
typography:
|
||||
fonts: "Inter, Berkeley Mono"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Arc Browser
|
||||
|
||||
> Category: Productivity & SaaS
|
||||
> "The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Arc Browser dissolves the boundary between the chrome and the page. Where Chrome and Safari treat the browser frame as a container, Arc treats it as scenery — the toolbar fades into the system wallpaper, the sidebar carries gradient warmth from the user's chosen "theme color", and translucency is everywhere. The visual signature is **frosted glass plus a single saturated gradient** — most often a peach-to-coral or violet-to-fuchsia bloom — that sets the emotional temperature of the entire window.
|
||||
|
||||
Typography uses **Inter** for chrome and a custom display serif (`Argent CF` or similar) for marketing — when Arc speaks publicly it speaks editorially, in a serif voice unusual for tech. The product itself is sans-only, with tight tracking and generous line-height.
|
||||
|
||||
Shapes are squircle-soft: 12–16px radii on cards, 8px on tabs, 9999px pills for tags. Borders are rare — Arc prefers tinted background washes (`rgba(255, 255, 255, 0.5)` over the gradient) to delineate panes.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Translucent frosted-glass surfaces over a saturated gradient background
|
||||
- Theme-color gradients (peach-coral, violet-fuchsia, mint-cyan) as the primary mood
|
||||
- Inter for product chrome, Argent CF (serif) for marketing display
|
||||
- Squircle-soft 12–16px radii everywhere
|
||||
- Sidebar-first layout: tabs, spaces, and bookmarks live on the left, not the top
|
||||
- Color picker is a brand surface — themes are user-driven, not fixed
|
||||
- Subtle shadows (`0 8px 32px rgba(0,0,0,0.08)`) over the gradient backdrop
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary Theme Gradients (User-selectable; default is "Sunset")
|
||||
- **Sunset Start** (`#ff7e5f`): Peach gradient origin.
|
||||
- **Sunset End** (`#feb47b`): Soft coral gradient terminus.
|
||||
- **Twilight Start** (`#7f5af0`): Violet gradient origin.
|
||||
- **Twilight End** (`#e84393`): Fuchsia gradient terminus.
|
||||
- **Aurora Start** (`#16f2b3`): Mint gradient origin.
|
||||
- **Aurora End** (`#0db4f7`): Cyan gradient terminus.
|
||||
|
||||
### Surface (Frosted)
|
||||
- **Glass Light** (`rgba(255, 255, 255, 0.7)`): Standard frosted pane over gradient.
|
||||
- **Glass Medium** (`rgba(255, 255, 255, 0.5)`): Hover state, tab pill background.
|
||||
- **Glass Heavy** (`rgba(255, 255, 255, 0.85)`): Active pane, command bar.
|
||||
- **Glass Dark** (`rgba(20, 20, 25, 0.6)`): Dark-mode frosted surface.
|
||||
|
||||
### Ink & Text
|
||||
- **Ink Primary** (`#1a1a1f`): Primary text on light frosted surface.
|
||||
- **Ink Secondary** (`#54545a`): Secondary text, tab title at rest.
|
||||
- **Ink Muted** (`#8c8c93`): Tertiary, captions, URL bar.
|
||||
- **Ink Inverse** (`#fafafa`): Text on dark frosted surface.
|
||||
|
||||
### Border & Divider
|
||||
- **Border Glass** (`rgba(255, 255, 255, 0.4)`): Frosted-edge border.
|
||||
- **Border Hairline** (`rgba(0, 0, 0, 0.06)`): Hairline divider on light surface.
|
||||
- **Border Active** (`rgba(0, 0, 0, 0.18)`): Active tab outline.
|
||||
|
||||
### Brand Accent
|
||||
- **Arc Coral** (`#ff5f5f`): Default brand color — used in marketing, `arc.net`.
|
||||
- **Arc Lavender** (`#b794f4`): Secondary brand accent.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`#48bb78`): Toast confirmation.
|
||||
- **Warning** (`#f6ad55`): Permission prompt.
|
||||
- **Error** (`#f56565`): Form validation.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display / Marketing**: `Argent CF`, with fallback: `'Source Serif Pro', Georgia, serif`
|
||||
- **Body / UI**: `Inter`, with fallback: `system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
|
||||
- **Code / Mono**: `Berkeley Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Marketing Hero | Argent CF | 72px (4.5rem) | 400 | 1.05 | -0.03em | Editorial display, marketing only |
|
||||
| Section Heading | Argent CF | 40px (2.5rem) | 400 | 1.15 | -0.02em | Marketing section titles |
|
||||
| Page H1 | Inter | 32px (2rem) | 700 | 1.2 | -0.02em | Settings, command bar header |
|
||||
| Page H2 | Inter | 22px (1.375rem) | 600 | 1.25 | -0.01em | Sub-section |
|
||||
| Tab Title | Inter | 13px (0.8125rem) | 500 | 1.3 | -0.005em | Sidebar tab label |
|
||||
| Body | Inter | 15px (0.9375rem) | 400 | 1.55 | normal | Settings prose, tooltips |
|
||||
| Caption | Inter | 12px (0.75rem) | 500 | 1.4 | 0.01em | URL bar protocol, metadata |
|
||||
| Code | Berkeley Mono | 13px (0.8125rem) | 400 | 1.5 | normal | URL bar, devtools |
|
||||
|
||||
### Principles
|
||||
- **Serif moments are rare**: Argent CF appears only in marketing. The product is sans-only.
|
||||
- **Title size is small**: tabs render at 13px so a long sidebar of 30+ tabs stays scannable.
|
||||
- **Tracking tightens with size**: -0.03em at 72px, returning to normal by 15px.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Filled)**
|
||||
- Background: linear-gradient on theme color (e.g., `linear-gradient(135deg, #ff7e5f, #feb47b)`)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 10px 20px
|
||||
- Radius: 12px
|
||||
- Shadow: `0 4px 16px rgba(255, 127, 95, 0.3)`
|
||||
- Hover: shadow grows to `0 8px 24px rgba(255, 127, 95, 0.4)`
|
||||
|
||||
**Glass (Secondary)**
|
||||
- Background: `rgba(255, 255, 255, 0.7)`
|
||||
- Backdrop: `blur(20px)`
|
||||
- Text: `#1a1a1f`
|
||||
- Border: 1px solid `rgba(255, 255, 255, 0.4)`
|
||||
- Padding: 10px 20px
|
||||
- Radius: 12px
|
||||
|
||||
**Subtle**
|
||||
- Background: transparent
|
||||
- Text: theme color
|
||||
- Hover: background `rgba(255, 127, 95, 0.1)`
|
||||
|
||||
### Tabs (Sidebar)
|
||||
- Background at rest: transparent
|
||||
- Background on hover: `rgba(255, 255, 255, 0.5)`
|
||||
- Background active: `rgba(255, 255, 255, 0.85)` + soft shadow
|
||||
- Padding: 8px 12px
|
||||
- Radius: 8px
|
||||
- Favicon: 16px square at left, 8px gap to title.
|
||||
|
||||
### Cards / Panes
|
||||
- Background: `rgba(255, 255, 255, 0.7)`
|
||||
- Backdrop: `blur(24px)` saturate 180%
|
||||
- Border: 1px solid `rgba(255, 255, 255, 0.4)`
|
||||
- Radius: 16px
|
||||
- Shadow: `0 8px 32px rgba(0, 0, 0, 0.08)`
|
||||
- Padding: 24px
|
||||
|
||||
### Inputs (Command Bar)
|
||||
- Background: `rgba(255, 255, 255, 0.85)`
|
||||
- Backdrop: `blur(40px)`
|
||||
- Text: `#1a1a1f`
|
||||
- Border: 1px solid `rgba(255, 255, 255, 0.4)`
|
||||
- Radius: 14px
|
||||
- Padding: 14px 18px
|
||||
- Focus: shadow `0 0 0 4px rgba(255, 127, 95, 0.2)`
|
||||
|
||||
### Pills (Spaces / Bookmarks Folder)
|
||||
- Background: theme color at 16% alpha
|
||||
- Text: theme color (full)
|
||||
- Padding: 4px 10px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 600
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
|
||||
- **Sidebar**: 240px wide; collapsible to 56px.
|
||||
- **Window radius**: 12px on the OS window itself (macOS-only flourish).
|
||||
- **Padding inside panes**: 24px.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 200ms for hover; 320ms for tab create/close; 480ms for "Little Arc" window expand.
|
||||
- **Easing**: `cubic-bezier(0.32, 0.72, 0, 1)` for window expand (Apple's spring-style).
|
||||
- **Tab swap**: 1px translate + opacity blend, no scale change.
|
||||
@@ -0,0 +1,634 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Binance
|
||||
description: "A confident financial-platform interface anchored on a deep near-black canvas, where Binance's iconic yellow (#FCD535) carries every primary CTA, brand accent, and value-claim moment. Type runs Binance's custom BinanceNova / BinancePlex stack at modest weights — the system trusts size and yellow voltage over bold weight. Marketing and product surfaces default to the dark theme; transactional surfaces (buy crypto, deposit, exchange) flip to a light theme that shares the same yellow CTAs and gray-blue hairlines. Trading green (up) and red (down) accents thread through both modes for price-direction signals."
|
||||
|
||||
colors:
|
||||
primary: "#fcd535"
|
||||
primary-active: "#f0b90b"
|
||||
primary-disabled: "#3a3a1f"
|
||||
ink: "#181a20"
|
||||
body: "#eaecef"
|
||||
body-on-light: "#181a20"
|
||||
muted: "#707a8a"
|
||||
muted-strong: "#929aa5"
|
||||
hairline-on-light: "#eaecef"
|
||||
hairline-on-dark: "#2b3139"
|
||||
border-strong: "#cdd1d6"
|
||||
canvas-light: "#ffffff"
|
||||
canvas-dark: "#0b0e11"
|
||||
surface-card-dark: "#1e2329"
|
||||
surface-elevated-dark: "#2b3139"
|
||||
surface-soft-light: "#fafafa"
|
||||
surface-strong-light: "#f5f5f5"
|
||||
on-primary: "#181a20"
|
||||
on-dark: "#ffffff"
|
||||
trading-up: "#0ecb81"
|
||||
trading-down: "#f6465d"
|
||||
accent-turquoise: "#2dbdb6"
|
||||
info: "#3b82f6"
|
||||
info-ring: "#3b82f6"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: "BinanceNova, -apple-system, BlinkMacSystemFont, sans-serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1px
|
||||
display-lg:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -0.5px
|
||||
display-md:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 40px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -0.3px
|
||||
display-sm:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 0
|
||||
title-lg:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 0
|
||||
title-md:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.35
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
number-display:
|
||||
fontFamily: "BinancePlex, BinanceNova, sans-serif"
|
||||
fontSize: 40px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -0.3px
|
||||
number-md:
|
||||
fontFamily: "BinancePlex, BinanceNova, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
number-sm:
|
||||
fontFamily: "BinancePlex, BinanceNova, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "BinanceNova, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 2px
|
||||
sm: 4px
|
||||
md: 6px
|
||||
lg: 8px
|
||||
xl: 12px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 80px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 24px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.muted}"
|
||||
rounded: "{rounded.md}"
|
||||
button-primary-pill:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 14px 32px
|
||||
button-secondary-on-dark:
|
||||
backgroundColor: "{colors.surface-card-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 24px
|
||||
button-secondary-on-light:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 24px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.button}"
|
||||
button-trading-up:
|
||||
backgroundColor: "{colors.trading-up}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 8px 20px
|
||||
button-trading-down:
|
||||
backgroundColor: "{colors.trading-down}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 8px 20px
|
||||
button-subscribe:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 6px 16px
|
||||
height: 28px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-md}"
|
||||
top-nav-dark:
|
||||
backgroundColor: "{colors.canvas-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
top-nav-light:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
hero-band-dark:
|
||||
backgroundColor: "{colors.canvas-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.hero-display}"
|
||||
padding: 80px
|
||||
stat-callout-card:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.number-display}"
|
||||
trust-badge:
|
||||
backgroundColor: "{colors.surface-card-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 16px 20px
|
||||
markets-table-card:
|
||||
backgroundColor: "{colors.surface-card-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 24px
|
||||
markets-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.number-md}"
|
||||
padding: 12px 0
|
||||
price-up-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.trading-up}"
|
||||
typography: "{typography.number-md}"
|
||||
price-down-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.trading-down}"
|
||||
typography: "{typography.number-md}"
|
||||
search-input-on-dark:
|
||||
backgroundColor: "{colors.surface-card-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 10px 16px
|
||||
height: 40px
|
||||
text-input-on-light:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 16px
|
||||
height: 40px
|
||||
funds-safu-band:
|
||||
backgroundColor: "{colors.canvas-dark}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 80px
|
||||
feature-photo-card:
|
||||
backgroundColor: "{colors.surface-card-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.xl}"
|
||||
qr-promo-card:
|
||||
backgroundColor: "{colors.surface-card-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
faq-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 20px 0
|
||||
cta-band-dark:
|
||||
backgroundColor: "{colors.surface-card-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-sm}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 48px
|
||||
arena-hero-gradient:
|
||||
backgroundColor: "{colors.canvas-dark}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 80px
|
||||
cookie-consent-card:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 16px
|
||||
buy-crypto-amount-card:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.number-display}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
steps-card:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
price-chart-card:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
conversion-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.body-md}"
|
||||
trader-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 12px 0
|
||||
footer-light:
|
||||
backgroundColor: "{colors.surface-soft-light}"
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Binance reads like a financial trading platform that wants to feel both authoritative and energetic. The base atmosphere is **deep near-black canvas** (`{colors.canvas-dark}` — #0b0e11) holding white type and a single, ubiquitous accent: **Binance Yellow** (`{colors.primary}` — #FCD535). That yellow does almost all of the brand's heavy lifting — it carries every primary CTA, every value-claim headline ("FUNDS ARE SAFU"), every "Sign Up" pill, every featured tier indicator, and the wordmark itself. There is no secondary brand color. The system trusts the yellow voltage to do the brand work, and it carries it.
|
||||
|
||||
Type runs Binance's custom **BinanceNova** (display + body) and **BinancePlex** (numerical / financial display) stack. BinanceNova carries display headlines, section titles, and body copy. BinancePlex appears on price tickers, large stat numbers (transaction volumes, user counts, prize pools) — anywhere a number wants to feel "tabular and reliable." Both run at modest weights — display sizes use weight 600-700 (bolder than typical marketing because trading platforms need numbers to read at a glance), body stays at 400.
|
||||
|
||||
The product is **multi-theme**: marketing surfaces (homepage, smart-money, futures arena) default to dark, while transactional surfaces (buy crypto, deposit, withdraw) flip to a light theme. The same yellow CTAs and gray-blue hairlines (`{colors.hairline-on-light}` — #eaecef) thread through both — only canvas, surface, and text tones flip. Trading **green** (`{colors.trading-up}` — #0ecb81) and **red** (`{colors.trading-down}` — #f6465d) signal price direction in tables, charts, and price tickers across both modes.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Single accent color: `{colors.primary}` (#FCD535) does all brand voltage — primary CTAs, hero headlines, brand mark, badges. Used scarcely on dark for emphasis, ubiquitously on transactional dialogs.
|
||||
- Custom type stack: `BinanceNova` (display + body) and `BinancePlex` (numbers, prices, financial data). Big stat numbers always render in BinancePlex for tabular consistency.
|
||||
- Multi-theme: marketing pages default dark (`{colors.canvas-dark}`); transactional pages flip light (`{colors.canvas-light}`). Yellow CTAs and trading green/red are shared across both.
|
||||
- Light footer on dark body: the homepage uses `{colors.surface-soft-light}` (#fafafa) for the footer even when the body above it is dark — a deliberate inversion that visually closes the page.
|
||||
- Trading semantics: green up / red down (`{colors.trading-up}` / `{colors.trading-down}`) for price changes, applied as text color rather than badge background.
|
||||
- Card surfaces: `{colors.surface-card-dark}` (#1e2329) for elevated cards on dark; `{colors.canvas-light}` for cards on light. No gradient surfaces, no atmospheric backdrops — flat color blocks throughout.
|
||||
- Border radius is small to medium: `{rounded.md}` (6px) for primary buttons, `{rounded.lg}` (8px) for inputs and content cards, `{rounded.xl}` (12px) for elevated card containers, `{rounded.pill}` for prominent feature CTAs.
|
||||
- Spacing follows a 4-multiple scale; major editorial bands sit at `{spacing.section}` (80px) — slightly tighter than typical marketing-only sites because product pages need denser layouts.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Binance Yellow** (`{colors.primary}` — #FCD535): The single brand color. Used for primary CTA backgrounds, the wordmark, brand-claim headlines ("FUNDS ARE SAFU"), trust badges ("No.1 Trading Volume"), large stat numbers in `{component.stat-callout-card}`, and inline links.
|
||||
- **Binance Yellow Active** (`{colors.primary-active}` — #f0b90b): The press / hover-darker variant. Slightly more saturated yellow.
|
||||
- **Binance Yellow Disabled** (`{colors.primary-disabled}` — #3a3a1f): A desaturated dark-yellow used on disabled CTAs over dark canvas.
|
||||
- **Accent Turquoise** (`{colors.accent-turquoise}` — #2dbdb6): A small secondary accent used very sparingly on Smart Money's "Check Now" CTA over dark surfaces. Treat as a single-product accent, not a system color.
|
||||
|
||||
### Surface
|
||||
|
||||
The system has two canvas modes that map to product context:
|
||||
|
||||
**Dark mode (marketing default):**
|
||||
- **Canvas Dark** (`{colors.canvas-dark}` — #0b0e11): The primary page floor. Near-black with a slight warm tint — never pure black.
|
||||
- **Surface Card Dark** (`{colors.surface-card-dark}` — #1e2329): Cards, navigation dropdowns, secondary buttons over dark canvas, markets table.
|
||||
- **Surface Elevated Dark** (`{colors.surface-elevated-dark}` — #2b3139): One step lighter, used for nested cards, hovered nav items, and chart background panels.
|
||||
|
||||
**Light mode (transactional):**
|
||||
- **Canvas Light** (`{colors.canvas-light}` — #ffffff): The page floor on transactional pages (buy crypto, deposit forms, account dialogs).
|
||||
- **Surface Soft Light** (`{colors.surface-soft-light}` — #fafafa): Footer surface and disabled states.
|
||||
- **Surface Strong Light** (`{colors.surface-strong-light}` — #f5f5f5): Form input backgrounds in muted contexts.
|
||||
|
||||
### Hairlines & Borders
|
||||
- **Hairline on Light** (`{colors.hairline-on-light}` — #eaecef): The 1px border tone on light surfaces. Dembrandt's frequency analysis confirms this as the highest-count token (1022 occurrences) — Binance uses hairlines liberally.
|
||||
- **Hairline on Dark** (`{colors.hairline-on-dark}` — #2b3139): The 1px border tone on dark surfaces. Same hex as `{colors.surface-elevated-dark}` — borders feel like surface steps, not ink lines.
|
||||
- **Border Strong** (`{colors.border-strong}` — #cdd1d6): A heavier border tone used on disabled secondary buttons.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #181a20): The strongest text on light surfaces. Display headlines on transactional pages.
|
||||
- **Body on Dark** (`{colors.body}` — #eaecef): Default running-text on dark canvas — deliberately not pure white, slightly cooler.
|
||||
- **Body on Light** (`{colors.body-on-light}` — #181a20): Same as ink — light-mode body text reuses the ink token.
|
||||
- **Muted** (`{colors.muted}` — #707a8a): Footer links, breadcrumbs, captions, table column headers. Works on both light and dark canvas.
|
||||
- **Muted Strong** (`{colors.muted-strong}` — #929aa5): A second-tier muted for emphasized labels.
|
||||
- **On Primary** (`{colors.on-primary}` — #181a20): Black text on yellow primary CTAs.
|
||||
- **On Dark** (`{colors.on-dark}` — #ffffff): Pure white for high-contrast headlines on dark canvas.
|
||||
|
||||
### Trading Semantics
|
||||
- **Trading Up** (`{colors.trading-up}` — #0ecb81): Price-up green, used as text color in tables, charts, and inline ticker arrows. Never as a button background.
|
||||
- **Trading Down** (`{colors.trading-down}` — #f6465d): Price-down red. Same usage rules as trading-up.
|
||||
|
||||
### Info / Focus
|
||||
- **Info** (`{colors.info}` — #3b82f6): Inline info badges and the focus-ring base. The Tailwind `--tw-ring-color` token surfaced by dembrandt — used on input focus.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **BinanceNova** for display and body, and **BinancePlex** for numerical / financial data. Both are licensed Binance custom typefaces. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.
|
||||
|
||||
The split is functional, not decorative:
|
||||
- BinanceNova → editorial type (headlines, paragraphs, button labels, nav)
|
||||
- BinancePlex → tabular numerical type (prices, volumes, percentages, stat counters, prize pools)
|
||||
|
||||
Mixing them is not optional — BinanceNova on a price ticker would lose the trading-platform character; BinancePlex on a paragraph would feel monospace-cold.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 64px | 700 | 1.1 | -1px | Homepage h1 ("316,258,026 USERS TRUST US") |
|
||||
| `{typography.display-lg}` | 48px | 700 | 1.1 | -0.5px | Brand-claim headlines ("FUNDS ARE SAFU"), prize-pool hero ("Futures Masters Arena") |
|
||||
| `{typography.display-md}` | 40px | 600 | 1.15 | -0.3px | Section heads on long-scroll pages |
|
||||
| `{typography.display-sm}` | 32px | 600 | 1.2 | 0 | CTA band headlines ("Secure, Low-Fee Trading on Binance") |
|
||||
| `{typography.title-lg}` | 24px | 600 | 1.3 | 0 | Sub-section titles |
|
||||
| `{typography.title-md}` | 20px | 600 | 1.35 | 0 | QR-promo cards, feature card titles |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Trust badges, FAQ rows, step labels |
|
||||
| `{typography.number-display}` | 40px | 700 | 1.1 | -0.3px | Big stat numbers (15,000 BTC, $429,423,449) — BinancePlex |
|
||||
| `{typography.number-md}` | 16px | 500 | 1.4 | 0 | Markets table prices, table cells — BinancePlex |
|
||||
| `{typography.number-sm}` | 14px | 500 | 1.4 | 0 | Inline prices, % changes — BinancePlex |
|
||||
| `{typography.body-md}` | 14px | 400 | 1.5 | 0 | Default running-text — BinanceNova |
|
||||
| `{typography.body-sm}` | 13px | 400 | 1.5 | 0 | Cookie consent text, footer body |
|
||||
| `{typography.caption}` | 12px | 500 | 1.4 | 0 | Small meta labels |
|
||||
| `{typography.button}` | 14px | 600 | 1 | 0 | Standard CTA button labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top nav menu items |
|
||||
|
||||
### Principles
|
||||
Display sizes use weight 700 — heavier than most marketing systems. This makes sense for a trading platform: numbers need to read at a glance, headlines need to compete with chart visualizations and dense data tables. The system will not soften display weight to 400 the way Airtable or Stripe does.
|
||||
|
||||
`{typography.number-display}` and the smaller number variants always use **BinancePlex**, even when surrounding body type uses BinanceNova. Prices, volumes, and stat counters render in BinancePlex regardless of context — it is the system's "trustworthy number" voice.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If BinanceNova and BinancePlex are unavailable, **Inter** is the closest open-source substitute for BinanceNova and **JetBrains Mono** or **IBM Plex Sans** is the closest substitute for BinancePlex (depending on whether tabular monospace fidelity matters more than humanist proportions). Adjust display headlines down by ~3% in line-height to match BinanceNova's tighter cap height.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
|
||||
- **Section padding (vertical):** `{spacing.section}` (80px) — slightly tighter than airy marketing sites (96px) because Binance pages mix marketing bands with dense product surfaces (markets tables, FAQ accordions).
|
||||
- **Card internal padding:** `{spacing.lg}` (24px) for content cards and markets tables; `{spacing.xl}` (32px) for QR-promo cards and CTA bands; `{spacing.md}` (16px) for trust badges and table rows.
|
||||
- **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside footer column gutters and dense FAQ lists.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1280px centered on marketing pages; ~1440px on product surfaces (markets, smart-money tables) where horizontal density matters.
|
||||
- **Editorial body:** Single 12-column grid; product pages often use 8/4 split (main panel + side rail).
|
||||
- **Markets table:** 5-column header (Pair / Last Price / 24h Change / 24h Volume / Action), with the first column carrying coin icon + symbol pair.
|
||||
- **Footer:** 6-column link list at desktop, wrapping to 2-up at tablet and 1-up on mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Binance is denser than typical marketing sites — long-scroll pages mix hero bands with markets tables, FAQ accordions, and feature grids without much breathing room between them. The system trusts contrast (yellow vs. dark canvas, green vs. red price cells) to do the visual separation work, not whitespace. Where whitespace appears, it's always uniform — `{spacing.section}` between every major band.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, hero bands, footer |
|
||||
| Soft hairline | 1px `{colors.hairline-on-dark}` or `{colors.hairline-on-light}` | Inputs, table dividers, FAQ row separators, secondary buttons |
|
||||
| Card surface | `{colors.surface-card-dark}` background on dark canvas, `{colors.canvas-light}` on light context — no shadow | All elevated cards (markets-table-card, QR-promo-card, feature-photo-card, trust-badges) |
|
||||
| Subtle drop shadow | Faint shadow visible only when a card sits over imagery | Used sparingly on the buy-crypto-amount-card on transactional pages |
|
||||
| Focus ring | `0 0 0 2px {colors.info-ring}` at 50% alpha | Input + button keyboard focus state |
|
||||
|
||||
The elevation philosophy is **flat surfaces with color-block separation**. Binance does not use heavy drop shadows or glassmorphism — depth comes from the contrast between `{colors.canvas-dark}` and `{colors.surface-card-dark}` (a 12-step lightness jump that reads as a clear elevation boundary).
|
||||
|
||||
### Decorative Depth
|
||||
- **Yellow → dark vertical gradient backdrop** on the Futures Arena hero: `{colors.primary}` fading down to `{colors.canvas-dark}`. This is a single-page treatment used for product-launch / event hero surfaces, not a system-wide signature.
|
||||
- **Coin-stack illustrations** flanking large stat blocks (3D rendered crypto coins, trophy icons). These are illustrations, not tokens — treat as content rather than design system surface.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 2px | Almost no use — reserved for very small badges |
|
||||
| `{rounded.sm}` | 4px | Small inline buttons (subscribe, trading-up / trading-down inline) |
|
||||
| `{rounded.md}` | 6px | Standard CTA buttons, primary buttons, primary input fields |
|
||||
| `{rounded.lg}` | 8px | Search input, content cards, trust badges, sub-cards |
|
||||
| `{rounded.xl}` | 12px | Elevated card containers (markets-table-card, QR-promo-card, CTA bands) |
|
||||
| `{rounded.pill}` | 9999px | Prominent feature CTAs ("Sign Up" pill on dark, futures-arena "Join Now") |
|
||||
| `{rounded.full}` | 9999px / 50% | Coin icons, avatars |
|
||||
|
||||
Binance's radius hierarchy is tighter than typical marketing systems — most surfaces sit at 6-12px. The pill radius is a deliberate exception used to signal "this is a top-of-page action."
|
||||
|
||||
### Photography & Iconography
|
||||
- Coin icons render as 24×24 or 32×32 rounded glyphs (often 50% radius on circular outline + the coin's brand color inside).
|
||||
- 3D rendered coin stacks and trophy illustrations are full-color illustrations with a slight floor shadow — not flat icons.
|
||||
- Photographic content (people-using-the-app section) crops to `{rounded.xl}` (12px) corners, full-bleed on mobile.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav-dark`** — The marketing top nav on dark canvas. 64px tall, `{colors.canvas-dark}` background. Carries the yellow Binance wordmark at left, primary horizontal menu (Buy Crypto, Markets, Trade, Futures, Earn, Square, Smart Money, Campaigns), right-side cluster with language selector, light/dark toggle, "Log In" text link, "Sign Up" `{component.button-primary}`. The wordmark uses `{colors.primary}` for "BINANCE" type.
|
||||
|
||||
**`top-nav-light`** — The transactional top nav on light canvas (buy crypto, deposit pages). Same layout but `{colors.canvas-light}` background and `{colors.ink}` menu items.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature primary CTA. Background `{colors.primary}`, text `{colors.on-primary}` (black on yellow — the system's iconic combination), type `{typography.button}`, padding 12px × 24px, height 40px, rounded `{rounded.md}` (6px). Press state: `button-primary-active` darkens to `{colors.primary-active}` (#f0b90b). Disabled state: `button-primary-disabled` desaturates to `{colors.primary-disabled}`.
|
||||
|
||||
**`button-primary-pill`** — A larger pill variant of the primary CTA used for top-of-page sign-up moments and product-launch heroes (Futures Arena "Join Now"). Same yellow + black combination, padding 14px × 32px, rounded `{rounded.pill}` (9999px). Use sparingly — the pill is a "this is THE action" signal.
|
||||
|
||||
**`button-secondary-on-dark`** — Used over `{colors.canvas-dark}` for less-emphasized actions. Background `{colors.surface-card-dark}`, text `{colors.on-dark}`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-secondary-on-light`** — Light-canvas equivalent. Background `{colors.canvas-light}` with `{colors.hairline-on-light}` 1px border, text `{colors.ink}`.
|
||||
|
||||
**`button-tertiary-text`** — Inline text button with no background. Used for "Log In" in the top nav and inline "Read More" links.
|
||||
|
||||
**`button-trading-up`** — A solid green button used on price-up signals (Buy / Long actions). Background `{colors.trading-up}`, text `{colors.on-dark}`, rounded `{rounded.sm}` (4px), padding 8px × 20px. Smaller and tighter than `{component.button-primary}` because it appears in dense trading interfaces.
|
||||
|
||||
**`button-trading-down`** — Symmetric red variant for Sell / Short actions. Same shape, background `{colors.trading-down}`.
|
||||
|
||||
**`button-subscribe`** — Compact yellow CTA used in the Smart Money traders table to subscribe to a top trader. Smaller height (28px) and tighter padding than the primary CTA — fits inside dense table rows. Same yellow + black combination.
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.primary}` (yellow on dark, also yellow on light). No underline by default. Type inherits `{typography.body-md}`.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band-dark`** — Full-width dark band carrying the homepage h1 + sub-headline + dual CTA pair. Background `{colors.canvas-dark}`, padding `{spacing.section}` (80px). The h1 ("316,258,026 USERS TRUST US") uses `{typography.hero-display}` at 64px / 700 — the system's largest type role.
|
||||
|
||||
**`stat-callout-card`** — Inline yellow stat numbers (15,000 BTC, 7,488,223, $429,423,449). Transparent background, text `{colors.primary}`, type `{typography.number-display}` in BinancePlex. Used as a flat layout block, not a card with surface — the yellow text alone carries the visual weight.
|
||||
|
||||
**`trust-badge`** — Small dark cards holding "No.1 Customer Service" / "No.1 Trading Volume" claims. Background `{colors.surface-card-dark}`, rounded `{rounded.lg}` (8px), padding 16px × 20px. Yellow numeric or word badge ("No.1") sits next to a short label.
|
||||
|
||||
**`markets-table-card`** — The right-side markets table on the homepage. Background `{colors.surface-card-dark}`, rounded `{rounded.xl}` (12px), padding `{spacing.lg}` (24px). Carries a tab row (Popular / New listing / Top gainers), then a 5-column row of coin pairs with last price, 24h change %, action button. Each row uses `{component.markets-row}`.
|
||||
|
||||
**`markets-row`** — A single row inside the markets table. Transparent background, 12px vertical padding, hairline divider between rows. Coin icon (32×32) + symbol on left; last price in `{typography.number-md}` (BinancePlex); 24h change cell colored by direction (`{component.price-up-cell}` or `{component.price-down-cell}`); right-aligned chevron icon for "view detail."
|
||||
|
||||
**`price-up-cell`** / **`price-down-cell`** — Colored text cells for price changes. Transparent background, text `{colors.trading-up}` or `{colors.trading-down}`, type `{typography.number-md}` in BinancePlex. Always paired with a small triangle arrow indicating direction.
|
||||
|
||||
**`feature-photo-card`** — The "Trade on the go" section's photo strip — 3 lifestyle photos showing people using the Binance app. Background `{colors.surface-card-dark}`, rounded `{rounded.xl}`. Photos crop edge-to-edge, no internal padding around the image.
|
||||
|
||||
**`qr-promo-card`** — The "Trade on the go. Anywhere, anytime." card with QR code. Background `{colors.surface-card-dark}`, rounded `{rounded.xl}`, padding `{spacing.xl}` (32px). Contains an h2 in `{typography.title-md}`, a body paragraph, app store badges (iOS / Android), and a centered QR code.
|
||||
|
||||
**`funds-safu-band`** — The yellow-headlined "FUNDS ARE SAFU" band. Background stays `{colors.canvas-dark}`, but the headline uses `{colors.primary}` at `{typography.display-lg}`. Below the headline, three large `{component.stat-callout-card}` numbers anchor the band: total BTC reserves, users helped, funds recovered.
|
||||
|
||||
**`faq-row`** — A single FAQ accordion row. Transparent background, padding 20px vertical, hairline divider between rows. Closed state: question in `{typography.title-sm}` + chevron icon at right. Open state: question + answer body in `{typography.body-md}`.
|
||||
|
||||
**`cta-band-dark`** — The "Secure, Low-Fee Trading on Binance" pre-footer CTA band. Background `{colors.surface-card-dark}` (one step elevated from canvas), rounded `{rounded.xl}`, padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-sm}` and a `{component.button-primary}` aligned right.
|
||||
|
||||
### Light-Mode Transactional Components
|
||||
|
||||
**`buy-crypto-amount-card`** — The right-rail card on the Buy BTC page. Background `{colors.canvas-light}`, rounded `{rounded.lg}` (8px), padding `{spacing.lg}` (24px). Carries an editable amount input in `{typography.number-display}` (BinancePlex), a currency selector, and a yellow `{component.button-primary}` for "Continue" / "Confirm Order."
|
||||
|
||||
**`steps-card`** — The "How to Buy Crypto" 3-up cards (Enter Amount → Confirm Order → Receive Crypto). Background `{colors.canvas-light}`, rounded `{rounded.lg}`, padding `{spacing.lg}`. Each card has a small numbered icon, a `{typography.title-sm}` step name, and a body description.
|
||||
|
||||
**`price-chart-card`** — The "Bitcoin Markets" card carrying the BTC price chart. Background `{colors.canvas-light}`, rounded `{rounded.lg}`. Top row carries pair selector ($79,065.04, +0.45%); main area is a candlestick / line chart in `{colors.trading-up}` and `{colors.trading-down}`; bottom row carries timeframe selector (24H / 1W / 1M / 3M / 1Y / ALL).
|
||||
|
||||
**`conversion-cell`** — A single row in the BTC ↔ USD conversion table. Transparent background, text `{colors.body-on-light}`, type `{typography.body-md}`. Pair label on left (BTC, USDT, etc.); USD equivalent on right.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`search-input-on-dark`** — The "Search currencies" input on the homepage hero. Background `{colors.surface-card-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}` (8px), padding 10px × 16px, height 40px. Carries a yellow `{component.button-primary-pill}` on the right side ("Sign Up").
|
||||
|
||||
**`text-input-on-light`** — Standard input on transactional pages. Background `{colors.canvas-light}`, 1px `{colors.hairline-on-light}` border, rounded `{rounded.md}` (6px), padding 10px × 16px, height 40px. Focus state inherits the focus-ring shadow.
|
||||
|
||||
**`cookie-consent-card`** — The cookie banner card visible on the homepage. Background `{colors.canvas-light}`, rounded `{rounded.lg}`, padding `{spacing.md}` (16px). Body text in `{typography.body-sm}` (13px / 400) with three stacked button options (Accept Cookies & Continue / Reject Additional Cookies / Manage Cookies).
|
||||
|
||||
### Smart Money Sub-System
|
||||
|
||||
**`trader-row`** — A single row in the top-traders table on /smart-money. Transparent background, padding 12px vertical, hairline divider between rows. Avatar + trader name + private/public badge on left; ROI %, AUM, mint date columns; yellow `{component.button-subscribe}` on right.
|
||||
|
||||
### Signature Components
|
||||
|
||||
**`arena-hero-gradient`** — The Futures Arena product-launch hero. A vertical gradient from `{colors.primary}` at top to `{colors.canvas-dark}` at bottom, with the prize-pool headline (4,000,000 USDT) in `{typography.display-lg}` centered. A `{component.button-primary-pill}` ("Join Now") sits below the headline. Used only on product-launch event surfaces — do not generalize to other heroes.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer-light`** — The light-gray footer that closes every page (including dark-canvas pages). Background `{colors.surface-soft-light}` (#fafafa), text `{colors.body-on-light}`. 6-column link list at desktop covering Community / About Us / Products / Business / Service / Learn columns. Vertical padding 64px. The deliberate light footer on a dark page is one of Binance's most distinctive layout choices — it visually closes the page with a "marketing reset" surface.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (Binance Yellow) for primary actions, brand-claim headlines, and the wordmark. Never use it for secondary or decorative purposes — yellow's scarcity is what makes it powerful.
|
||||
- Keep `{component.button-primary}` (yellow with black text) as the universal primary CTA across both dark and light modes. The same button appears identically on `{colors.canvas-dark}` and `{colors.canvas-light}`.
|
||||
- Use `{component.button-trading-up}` (green) and `{component.button-trading-down}` (red) only for explicit Buy/Sell or Long/Short actions. Never use them for general "confirm" or "cancel" because they carry semantic price-direction meaning.
|
||||
- Use BinancePlex for every number. Prices, volumes, percentages, stat counters — all BinancePlex. Mixing BinanceNova into a number ticker breaks the trading-platform character.
|
||||
- Choose canvas mode by surface intent: dark for marketing / product showcase / trading dashboards; light for transactional dialogs (buy / deposit / withdraw / form submission).
|
||||
- Anchor every editorial band with `{spacing.section}` (80px). Binance is denser than airy marketing sites — 80px is the right rhythm.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a second brand color. The system has exactly one accent (`{colors.primary}`) and any expansion dilutes the brand identity. The turquoise on Smart Money is a single-product experiment, not a system token.
|
||||
- Don't use yellow for body text or large surface fills. It is for focal-point CTAs and headlines only.
|
||||
- Don't use `{colors.trading-up}` / `{colors.trading-down}` as background fills on cards. They are price-direction signals, expressed as text color or small badge fill — never as a card surface.
|
||||
- Don't soften display weight. `{typography.hero-display}` and `{typography.display-lg}` are intentionally weight 700 — going to 400 reads as design-portfolio, not trading platform.
|
||||
- Don't add atmospheric gradients to the canvas (mesh, aurora, glow effects). Binance trusts color-block contrast — adding atmospheric depth muddies the trading-platform feel.
|
||||
- Don't invert `{component.button-primary}`'s text color. Black on yellow is the system's signature — white text on yellow loses contrast and brand recognition.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Top nav collapses to hamburger; hero h1 drops from 64px to ~36px; markets table converts to a horizontally-scrollable card list; demo grids drop to 1-up; footer 6 columns wrap to 2 |
|
||||
| Tablet | 768–1024px | Top nav stays horizontal but tightens, secondary menu items hide behind a "More" dropdown; markets table 2-up; pricing/feature grids 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav with all primary menu items; 5-column markets table; trading dashboards in 8/4 split (chart + side rail) |
|
||||
| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1280-1440px depending on surface |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTAs render at minimum 40 × 40px (`{component.button-primary}` height + padding) — meets WCAG AAA's 44 × 44 with surrounding spacing.
|
||||
- Subscribe / inline action buttons are 28 × 28 — denser than ideal but matches industry trading platform norms.
|
||||
- Coin icons in markets tables are 32 × 32px, with the entire row tappable for 44px+ effective target.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to hamburger at < 768px; the menu opens as a full-screen sheet with the same yellow accent CTAs anchored to the bottom of the sheet.
|
||||
- Markets table reflows to a horizontally-scrollable single card per coin pair on mobile.
|
||||
- The hero stat numbers ("316M USERS") shrink proportionally rather than wrapping — Binance's biggest claim must always read as a single block.
|
||||
- Trading dashboards switch from chart + side-rail to chart-only with a separate "Trade" tab on mobile.
|
||||
- The light footer stays full-bleed at every breakpoint — it does not collapse to a separate dark variant.
|
||||
|
||||
### Image Behavior
|
||||
- Coin icons stay at fixed 24/32px sizes regardless of breakpoint.
|
||||
- Lifestyle photos in the "Trade on the go" section crop responsively — wider at desktop, taller (vertical) at mobile.
|
||||
- 3D coin-stack illustrations are fixed-aspect-ratio assets that scale uniformly without cropping.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key directly (`{component.button-primary}`, `{component.markets-row}`).
|
||||
2. When adding a new component, decide first whether it lives in dark mode (marketing / product) or light mode (transactional). The same component appears in both with surface tone flipped.
|
||||
3. Variants of an existing component (`-active`, `-disabled`) live as separate entries in `components:` — never as nested state objects.
|
||||
4. Use `{token.refs}` everywhere prose mentions a color, a radius, a typography role, or a spacing value.
|
||||
5. Never document hover. The system documents Default and Active/Pressed states only.
|
||||
6. Numbers always use BinancePlex; copy always uses BinanceNova. Mixing them is a system violation.
|
||||
7. Trading green / red are semantic price tokens — never repurpose them for "success" or "error" generic states.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The dembrandt frequency analyzer captured `#eaecef` (light hairline, count 1022) as the highest-frequency token. The brand-defining `{colors.primary}` (#FCD535) appears far less frequently because it's used scarcely as accent — its system role had to be confirmed from screenshots.
|
||||
- BinanceNova and BinancePlex weight-axis values are not formalized as variable-font tokens — only the static weights observed in screenshots are documented.
|
||||
- Animation and transition timings (chart redraws, price-change flashes) are not in scope.
|
||||
- Form validation states beyond `{component.text-input-on-light}` defaults are not extracted — error / success input variants would need a sign-up or order-confirmation flow to confirm.
|
||||
- The trading dashboard surfaces (Spot / Futures / Margin) were not in the analyzed URL set; their order book, candlestick chart configuration, and position-management cards are not documented here.
|
||||
- The light/dark theme toggle behavior (whether transactional pages can be forced dark by user preference) is product behavior, not extracted from the marketing surfaces.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Binance Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/binance/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,503 @@
|
||||
---
|
||||
version: alpha
|
||||
name: BMW M
|
||||
description: "A motorsport-engineering interface anchored on a near-black canvas with white BMW Type Next Latin display headlines in confident UPPERCASE. The brand carries no decorative voltage — its energy comes from full-bleed automotive photography (cars on tracks, driver-cockpit shots, carbon-fiber detail) and the iconic M tricolor stripe (light blue → dark blue → red) used sparingly as a brand signature on logos, dividers, and motorsport chrome. Type stays light to medium weight to feel European-engineered, never American-bombastic."
|
||||
|
||||
colors:
|
||||
primary: "#ffffff"
|
||||
ink: "#ffffff"
|
||||
body: "#bbbbbb"
|
||||
body-strong: "#e6e6e6"
|
||||
muted: "#7e7e7e"
|
||||
hairline: "#3c3c3c"
|
||||
hairline-strong: "#262626"
|
||||
canvas: "#000000"
|
||||
surface-card: "#1a1a1a"
|
||||
surface-elevated: "#262626"
|
||||
surface-soft: "#0d0d0d"
|
||||
on-primary: "#000000"
|
||||
on-dark: "#ffffff"
|
||||
m-blue-light: "#0066b1"
|
||||
m-blue-dark: "#1c69d4"
|
||||
m-red: "#e22718"
|
||||
bmw-blue: "#1c69d4"
|
||||
electric-blue: "#0653b6"
|
||||
carbon-gray: "#2b2b2b"
|
||||
warning: "#f4b400"
|
||||
success: "#0fa336"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 80px
|
||||
fontWeight: 700
|
||||
lineHeight: 1
|
||||
letterSpacing: 0
|
||||
display-lg:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 56px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.05
|
||||
letterSpacing: 0
|
||||
display-md:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 40px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.1
|
||||
letterSpacing: 0
|
||||
display-sm:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.15
|
||||
letterSpacing: 0
|
||||
title-lg:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 0
|
||||
title-md:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
label-uppercase:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 1.5px
|
||||
body-md:
|
||||
fontFamily: "BMWTypeNextLatin Light, BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "BMWTypeNextLatin Light, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.5px
|
||||
button:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 700
|
||||
lineHeight: 1
|
||||
letterSpacing: 1.5px
|
||||
nav-link:
|
||||
fontFamily: "BMWTypeNextLatin, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.5px
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 2px
|
||||
sm: 4px
|
||||
md: 6px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 40px
|
||||
xxl: 64px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px 32px
|
||||
height: 48px
|
||||
button-primary-outline:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px 32px
|
||||
height: 48px
|
||||
button-on-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px 32px
|
||||
button-icon:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 48px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.label-uppercase}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
hero-photo-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
m-stripe-divider:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
height: 4px
|
||||
feature-photo-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
model-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
magazine-article-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
spec-cell:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
cookie-consent-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
category-tab:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.label-uppercase}"
|
||||
padding: 12px 0
|
||||
category-tab-active:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.label-uppercase}"
|
||||
padding: 12px 0
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 12px 16px
|
||||
height: 48px
|
||||
chatbot-launcher:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
cta-band-photo:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-md}"
|
||||
padding: 80px
|
||||
motorsport-photo-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
carousel-arrow:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 48px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
BMW M's marketing surface is a near-pure black canvas (`{colors.canvas}` — #000) holding white BMW Type Next Latin headlines in **confident UPPERCASE**. The system has no decorative voltage of its own; brand energy comes from **full-bleed automotive photography** — cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes — placed as edge-to-edge content that fills entire bands. UI chrome around the photography stays minimal: thin sans-serif copy, dividers as 1px hairlines (`{colors.hairline}`), all-caps button labels with no fill until hovered.
|
||||
|
||||
The **M tricolor stripe** — `{colors.m-blue-light}` (#0066b1) → `{colors.m-blue-dark}` (#1c69d4) → `{colors.m-red}` (#e22718) — appears sparingly as the brand's signature accent, used on the M wordmark, motorsport chrome, vehicle-tech callouts, and model badges. It is never a CTA color and never used as a background fill — the tricolor is exclusively a brand-identity marker.
|
||||
|
||||
Type voice runs **BMW Type Next Latin** in two cuts: regular for display + nav labels and Light for body + secondary copy. Display sizes use weight 700 (BMW's signature heavy-but-tight setting), while body type drops to weight 300 (Light). The contrast between heavy display and light body is the system's editorial signature.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Near-pure black canvas (`{colors.canvas}` — #000) with white type. The system inverts almost nothing — there is no light-mode marketing surface.
|
||||
- Display headlines in UPPERCASE BMW Type Next Latin at weight 700. Sub-heads stay sentence-case at lighter weight.
|
||||
- M tricolor (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills.
|
||||
- Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.
|
||||
- Buttons are flat with `{rounded.none}` (0px) corners and uppercase letterspaced labels. The "industrial precision" rectangular silhouette IS the brand.
|
||||
- Border radius is mostly zero across the system. The few exceptions: `{rounded.full}` on circular icon buttons (carousel arrows, chatbot launcher) and `{rounded.sm}` on a handful of small toggle pills.
|
||||
- Spacing is generous and grid-aligned: `{spacing.section}` (96px) between major bands; `{spacing.xxl}` (64px) inside hero photo bands; `{spacing.xl}` (40px) inside content cards.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Primary** (`{colors.primary}` — #ffffff): The system's primary type and CTA color. Used for h1/h2/h3 display, body text on dark, and primary button labels (the buttons themselves are transparent or canvas-colored — the white text + outline IS the button).
|
||||
- **M Blue Light** (`{colors.m-blue-light}` — #0066b1): The first stop in the M tricolor stripe. Used on M-badge accents and motorsport chrome.
|
||||
- **M Blue Dark** (`{colors.m-blue-dark}` — #1c69d4): The middle stop. The same hex as `{colors.bmw-blue}` — BMW's heritage corporate blue, repurposed as the middle band of the M stripe.
|
||||
- **M Red** (`{colors.m-red}` — #e22718): The third stop. The signature M-power red, used in the stripe and on motorsport-pace callouts.
|
||||
- **Electric Blue** (`{colors.electric-blue}` — #0653b6): A separate electric-vehicle accent used on M xDrive electric model pages. Distinct from the heritage blue — feels colder, more digital.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #000000): The default page floor across every marketing surface. True black.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): A barely-different-from-black used for spec table cells and footer-adjacent strips.
|
||||
- **Surface Card** (`{colors.surface-card}` — #1a1a1a): Cards, secondary buttons, icon-button backgrounds.
|
||||
- **Surface Elevated** (`{colors.surface-elevated}` — #262626): One step lighter, used for nested cards inside dark bands.
|
||||
- **Carbon Gray** (`{colors.carbon-gray}` — #2b2b2b): Carbon-fiber-inspired surface tone used on technical-spec cards.
|
||||
|
||||
### Hairlines & Borders
|
||||
- **Hairline** (`{colors.hairline}` — #3c3c3c): The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #262626): Same hex as `{colors.surface-elevated}` — borders feel like one-step elevations rather than ink lines.
|
||||
|
||||
### Text
|
||||
- **Ink / On Dark** (`{colors.on-dark}` — #ffffff): All headline and primary text on dark canvas.
|
||||
- **Body** (`{colors.body}` — #bbbbbb): Default running-text color (slightly cooler than pure white). Used for body paragraphs and secondary metadata.
|
||||
- **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized body / lead paragraph.
|
||||
- **Muted** (`{colors.muted}` — #7e7e7e): Footer links, breadcrumbs, captions.
|
||||
|
||||
### Semantic
|
||||
- **Warning** (`{colors.warning}` — #f4b400): Used very sparingly on technical-warning callouts.
|
||||
- **Success** (`{colors.success}` — #0fa336): Order-confirmation states (rare on marketing surfaces).
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**BMW Type Next Latin** is BMW's licensed display + body typeface. The system uses two cuts: regular and Light. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.
|
||||
|
||||
The split is a deliberate weight-pair:
|
||||
- Display (700) for headlines, navigation labels, button text, and category labels — the "stamped" voice
|
||||
- Light (300) for body paragraphs, descriptive copy, and secondary metadata — the "engineered" voice
|
||||
|
||||
The contrast between heavy display and light body is BMW's editorial signature — never blur it by using regular (400) display or medium (500) body.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 80px | 700 | 1.0 | 0 | Hero h1 ("THE ULTIMATE", "MORE BMW M.") |
|
||||
| `{typography.display-lg}` | 56px | 700 | 1.05 | 0 | Section heads ("MORE FROM BMW M MAGAZINE.") |
|
||||
| `{typography.display-md}` | 40px | 700 | 1.1 | 0 | Sub-section heads, model names |
|
||||
| `{typography.display-sm}` | 32px | 700 | 1.15 | 0 | CTA-band heads, category page titles |
|
||||
| `{typography.title-lg}` | 24px | 700 | 1.3 | 0 | Card titles in 3-up grids |
|
||||
| `{typography.title-md}` | 20px | 400 | 1.4 | 0 | Card sub-titles, lead paragraphs |
|
||||
| `{typography.title-sm}` | 18px | 400 | 1.4 | 0 | Spec callouts, intro paragraphs |
|
||||
| `{typography.label-uppercase}` | 14px | 700 | 1.3 | 1.5px | Category tabs, "VIEW MORE" inline labels |
|
||||
| `{typography.body-md}` | 16px | 300 (Light) | 1.5 | 0 | Default body — BMW Type Next Latin Light |
|
||||
| `{typography.body-sm}` | 14px | 300 (Light) | 1.5 | 0 | Footer body, cookie consent, fine print |
|
||||
| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo captions, image-credit lines |
|
||||
| `{typography.button}` | 14px | 700 | 1.0 | 1.5px | All button labels — uppercase, letterspaced |
|
||||
| `{typography.nav-link}` | 14px | 400 | 1.4 | 0.5px | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
The system contrasts heavy headlines (700) against very light body (300) at all times — the gap is the editorial signature. Letter-spacing is non-trivial: button labels and category labels carry 1.5px tracking that makes them feel "machined" rather than "typed." Display headlines stay at 0 letter-spacing — BMW Type's natural cap-height handles spacing on large sizes.
|
||||
|
||||
UPPERCASE display is the default voice for h1/h2 — sentence case appears on body and intro paragraphs but rarely on headlines. The all-caps treatment is a brand-voice signal, not a stylistic choice.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If BMW Type Next Latin is unavailable, **Inter** (variable) at 700/300 is the closest open-source substitute. Adjust display headline tracking to -0.5px to match BMW Type's tighter spacing at large sizes. **Saira Condensed** is an alternative for headlines if a slightly more compressed feel is desired.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.xxl}` 64px · `{spacing.section}` 96px.
|
||||
- **Section padding (vertical):** `{spacing.section}` (96px) between major editorial bands.
|
||||
- **Hero photo bands:** `{spacing.xxl}` (64px) internal vertical padding around the hero h1 + sub-headline pair.
|
||||
- **Card internal padding:** `{spacing.lg}` (24px) for content and model cards; `{spacing.xl}` (40px) for spec-cell tables.
|
||||
- **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside footer columns.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1440px centered on marketing pages — wider than typical SaaS to give photography breathing room.
|
||||
- **Editorial body:** Single 12-column grid; photo bands bleed full-bleed (no max-width).
|
||||
- **Card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Footer:** 4-column link list at desktop, 2-up at tablet, 1-up at mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
BMW M trusts photography to do the visual work. Whitespace around photography is restrained — the cars fill the frame, and copy sits below or beside them in tightly-aligned columns. Where whitespace appears (between body sections, around CTAs), it's always uniform `{spacing.section}` (96px). The system never adds atmospheric backdrops, gradients, or decoration — empty space stays as empty black canvas.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, footer, photo bands |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Section dividers, card outlines, table rows |
|
||||
| Card surface | `{colors.surface-card}` background over canvas — no shadow | Feature photo cards, magazine cards, chatbot launcher |
|
||||
| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, motorsport features — depth via subject matter, not chrome |
|
||||
|
||||
The system uses no drop shadows and no layered chrome. Depth comes entirely from photography (subject + lens + lighting) and the contrast between black canvas and slightly-elevated `{colors.surface-card}`.
|
||||
|
||||
### Decorative Depth
|
||||
- **M Stripe Divider** (`{component.m-stripe-divider}`): A 4px-tall horizontal divider carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used on motorsport chrome, model-detail headers, and brand-identity moments. The stripe is the system's only true "decorative" element — used sparingly to mark significance.
|
||||
- **Carbon-fiber surfaces**: The technical-spec page uses `{colors.carbon-gray}` (#2b2b2b) cells with subtle texture overlay. This is a single-page treatment, not a system-wide pattern.
|
||||
- **Photographic depth**: Full-bleed cars are the depth. Lighting in the photography (track lights, sunset rim-light) does the elevation work that drop shadows would do in a SaaS system.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | All buttons, cards, photo containers, spec cells, inputs — the dominant radius |
|
||||
| `{rounded.xs}` | 2px | Almost no use — reserved for legal CTAs |
|
||||
| `{rounded.sm}` | 4px | Small toggle pills on configurator surfaces |
|
||||
| `{rounded.md}` | 6px | Rare — small dropdown menu items |
|
||||
| `{rounded.full}` | 9999px / 50% | Circular icon buttons, carousel arrows, chatbot launcher |
|
||||
|
||||
The radius hierarchy is "almost always 0, sometimes circular." This binary radius decision is a deliberate brand-language choice — sharp rectangles read as engineered precision; circles read as functional controls. Nothing in between.
|
||||
|
||||
### Photography Geometry
|
||||
Hero photography fills full-width with no rounding. Photo cards inside grids retain `{rounded.none}` corners, edge-to-edge images. Carbon-wheel detail shots and motorsport-pit photos use 16:9 or 21:9 cinema-aspect ratios. Driver portraits in racing-team grids use 4:5 portrait crops, also with sharp corners.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Black nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the BMW M logo at left (M tricolor + BMW roundel + "M" wordmark), primary horizontal menu (Models, Topics, Magazine, Configurator, Fastlane), right-side cluster with language selector, search icon, account icon. Menu items render in `{typography.nav-link}` with sentence-case labels.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature primary CTA. Background `{colors.canvas}` (or transparent over photography), text `{colors.on-dark}` (white), 1px white border outline, rounded `{rounded.none}` (0px), padding 16px × 32px, height 48px. Type `{typography.button}` — uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.
|
||||
|
||||
**`button-primary-outline`** — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.
|
||||
|
||||
**`button-on-light`** — Used on rare light-surface contexts (configurator, account dialogs). Background `{colors.canvas}`, text `{colors.on-dark}` — black button with white text, inverted from the dark-canvas default.
|
||||
|
||||
**`button-icon`** — Circular icon buttons (carousel controls, share, favorite). 48 × 48px, background `{colors.surface-card}`, white icon centered, rounded `{rounded.full}`. The only non-rectangular button shape in the system.
|
||||
|
||||
**`carousel-arrow`** — Specific 48 × 48 circular arrow used in photo carousels. Same shape as `{component.button-icon}` with chevron glyph.
|
||||
|
||||
**`text-link`** — Inline uppercase letterspaced links ("VIEW ALL MODELS", "READ MORE"). `{typography.label-uppercase}`, white on dark, no underline. The chevron arrow → glyph appears next to most link labels.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-photo-band`** — Full-width black band with full-bleed automotive photography filling most of the frame. The h1 uses `{typography.display-xl}` (80px / 700) and sits left-aligned over the photo, often with a small subtitle in `{typography.body-md}` below. Vertical padding `{spacing.xxl}` (64px). No card frame — the photo IS the band.
|
||||
|
||||
**`feature-photo-card`** — Used in 3-up grids for "MORE FROM BMW M MAGAZINE" and similar editorial sections. Background `{colors.surface-card}`, rounded `{rounded.none}`, internal padding `{spacing.lg}` (24px). Top half of the card is a 16:9 photo (full-bleed within the card); below the photo, a category tag in `{typography.label-uppercase}`, a `{typography.title-lg}` title, and a short body description.
|
||||
|
||||
**`model-card`** — Used in the "MORE NEW M MODELS" 3-up grid. Background `{colors.canvas}` (no card surface — just photo on black), rounded `{rounded.none}`. Top: 16:10 hero shot of the model. Below: model name in `{typography.display-md}` (40px / 700), short specs line in `{typography.body-sm}`, a `{component.text-link}` ("EXPLORE THIS MODEL").
|
||||
|
||||
**`magazine-article-card`** — A more text-forward card variant used on the magazine overview page. Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`. Carries a small thumbnail at top, a category label in `{typography.label-uppercase}`, headline in `{typography.title-lg}`, and a body excerpt.
|
||||
|
||||
**`spec-cell`** — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background `{colors.surface-soft}` (#0d0d0d), rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Each cell holds a value in `{typography.display-sm}` (32px / 700) at top and a label in `{typography.label-uppercase}` below.
|
||||
|
||||
**`motorsport-photo-card`** — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.
|
||||
|
||||
**`chatbot-launcher`** — A right-side card-style entry point ("BMW M CHATBOT") on the homepage. Background `{colors.surface-card}`, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries an h3 title, a short prompt, and a `{component.button-primary}` to launch.
|
||||
|
||||
**`category-tab`** + **`category-tab-active`** — The category selector tabs used on the magazine and topics pages (e.g., "ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT"). Tabs render as text-only labels in `{typography.label-uppercase}`. Active state changes text color from `{colors.body}` to `{colors.on-dark}` and adds a 2px white underline below the label. No background fill, no rounded corners.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text input on dark surfaces. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.
|
||||
|
||||
**`cookie-consent-card`** — A right-side cookie-banner card visible on the homepage. Background `{colors.canvas}` with 1px hairline, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Body text in `{typography.body-sm}` (14px / 300) — Light weight even for legal text. Two buttons stacked at bottom: primary outline + text-link.
|
||||
|
||||
### Signature Components
|
||||
|
||||
**`m-stripe-divider`** — The 4px horizontal stripe carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.
|
||||
|
||||
**`cta-band-photo`** — A pre-footer "Drive an M" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in `{typography.display-md}` and a `{component.button-primary-outline}` below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.body}`. 4-column link list at desktop covering BMW M Models / BMW M Lifestyle / Owners / Company. Vertical padding 64px. Bottom row carries the BMW corporate disclaimer in `{typography.caption}` and language selector. The footer never inverts — it stays black even when the body might transition.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off.
|
||||
- Use UPPERCASE display headlines in `{typography.display-xl}` or `{typography.display-lg}`. Sentence-case display reads as off-brand.
|
||||
- Pair heavy display (700) with light body (300). The weight contrast is the editorial signature.
|
||||
- Reserve the M tricolor stripe for brand-identity moments — wordmark accents, motorsport chrome, model badges. Never as a button fill or surface.
|
||||
- Use `{rounded.none}` (0px) by default. Reserve `{rounded.full}` for circular icon buttons only.
|
||||
- Letter-space all-caps labels at 1.5px. The "machined" feel is non-negotiable.
|
||||
- Use `{spacing.section}` (96px) between major editorial bands for grid-aligned vertical rhythm.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a brand color outside the M tricolor (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) and the heritage `{colors.bmw-blue}`.
|
||||
- Don't bold body type. Body stays at 300 (Light) — bumping to 400 or 500 makes the page feel marketing-bombastic instead of European-engineered.
|
||||
- Don't use rounded buttons. The rectangular silhouette IS the brand. Rounded corners read as consumer-tech, not motorsport.
|
||||
- Don't put gradient backdrops behind hero type. The hero IS the photography — the page floor stays pure black, and the photo provides the depth.
|
||||
- Don't repeat the same surface mode in two consecutive bands. Rhythm: photo band → spec table → photo band → magazine grid → photo band. Two text-only bands in a row read as a corporate site.
|
||||
- Don't use the M stripe as a button fill. The stripe is a divider / accent — never an action surface.
|
||||
- Don't bold uppercase tracking under 1.5px on button labels — the spacing is what makes them feel "machined."
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 scales 80→48px; demo grid 1-up; photo cards stack full-width; footer 4 cols → 1 |
|
||||
| Tablet | 768–1024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav; 3-up card grids; spec tables 4-up |
|
||||
| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` renders at 48 × 48px minimum — meets WCAG AAA.
|
||||
- `{component.button-icon}` and `{component.carousel-arrow}` are exactly 48 × 48 — comfortably above the 44 × 44 minimum.
|
||||
- `{component.text-input}` height is 48px.
|
||||
- Category tabs render as text-only labels with 12px vertical padding; effective tap area meets 44px with surrounding spacing.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to a hamburger sheet at < 768px; the menu opens as a full-screen black overlay with the M tricolor stripe at the top.
|
||||
- Photography stays full-bleed at every breakpoint — never collapses to a margin'd container.
|
||||
- Card grids reduce columns rather than scaling cards down; photography retains its native aspect ratio.
|
||||
- Spec tables collapse from 4-up to 2-up to 1-up; spec values stay at `{typography.display-sm}` regardless of column count.
|
||||
- The M-stripe divider stays at 4px height across all breakpoints.
|
||||
|
||||
### Image Behavior
|
||||
- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile.
|
||||
- Lifestyle and motorsport photos retain native aspect ratios; the system never letterboxes or pillarboxes.
|
||||
- The M wordmark + tricolor logo scales proportionally with viewport width.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key (`{component.hero-photo-band}`, `{component.spec-cell}`).
|
||||
2. New components default to `{rounded.none}` (0px). Only use `{rounded.full}` if it's a circular icon button.
|
||||
3. Variants (`-active`, `-disabled`) live as separate entries in `components:`.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Never document hover states. Default and Active/Pressed only.
|
||||
6. Display headlines stay UPPERCASE 700; body stays sentence-case 300. Never blur the contrast.
|
||||
7. The M tricolor is brand-identity-only — never extend it to system tokens for "primary action."
|
||||
8. When in doubt about emphasis: bigger photography before bigger type.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The dembrandt frequency analyzer captured the white text (count 955) as the highest-frequency token. The black canvas was inferred from screenshot — dembrandt's body-background sampling didn't surface it as a top palette entry, but the page is unambiguously black-on-white-text.
|
||||
- The exact M tricolor stops are documented from public BMW brand guidelines; the screenshots show the stripe as a small element but pixel-sampling at this resolution doesn't reliably distinguish #0066b1 from #1c69d4. Treat the documented stops as canonical based on BMW Design Works' published brand spec.
|
||||
- BMW Type Next Latin weight axis values beyond Light (300) and regular (700) are not documented — only the static weights observed in screenshots.
|
||||
- Animation and transition timings (photo carousel transitions, hover-reveal effects, configurator interactions) are not in scope.
|
||||
- Form validation states beyond `{component.text-input}` defaults are not extracted — error / success input variants would need a configurator or order flow to confirm.
|
||||
- The configurator surface (vehicle build pages with color / wheel / interior pickers) was not in the analyzed URL set; its swatch grid, comparison panels, and price-summary card are not documented here.
|
||||
- The cookie consent overlay obscured part of the homepage hero in the captured screenshot; secondary hero treatments (different car models cycling through the hero band) may carry variations not captured.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Bmw-m Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/bmw-m/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,544 @@
|
||||
---
|
||||
version: alpha
|
||||
name: BMW
|
||||
description: "BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. BMW Type Next Latin sets the entire hierarchy on two weights — heavy 700 display and Light 300 body. Configuration and reservation flows ride a card-based 4-up grid, where each card holds a model render, a name, and a \"Learn More\" link."
|
||||
|
||||
colors:
|
||||
primary: "#1c69d4"
|
||||
primary-active: "#0653b6"
|
||||
primary-disabled: "#d6d6d6"
|
||||
ink: "#262626"
|
||||
body: "#3c3c3c"
|
||||
body-strong: "#1a1a1a"
|
||||
muted: "#6b6b6b"
|
||||
muted-soft: "#9a9a9a"
|
||||
hairline: "#e6e6e6"
|
||||
hairline-strong: "#cccccc"
|
||||
canvas: "#ffffff"
|
||||
surface-soft: "#f7f7f7"
|
||||
surface-card: "#fafafa"
|
||||
surface-strong: "#ebebeb"
|
||||
surface-dark: "#1a2129"
|
||||
surface-dark-elevated: "#262e38"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-soft: "#bbbbbb"
|
||||
m-blue-light: "#0066b1"
|
||||
m-blue-dark: "#1c69d4"
|
||||
m-red: "#e22718"
|
||||
success: "#22c55e"
|
||||
warning: "#f59e0b"
|
||||
error: "#dc2626"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "'BMW Type Next Latin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.05
|
||||
letterSpacing: 0
|
||||
display-lg:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.1
|
||||
letterSpacing: 0
|
||||
display-md:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.15
|
||||
letterSpacing: 0
|
||||
display-sm:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
title-lg:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 0
|
||||
title-md:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.5px
|
||||
label-uppercase:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 1.5px
|
||||
textTransform: uppercase
|
||||
button:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.0
|
||||
letterSpacing: 0.5px
|
||||
nav-link:
|
||||
fontFamily: "'BMW Type Next Latin', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.3px
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 2px
|
||||
sm: 4px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 80px
|
||||
|
||||
components:
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 14px 32px
|
||||
height: 48px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.none}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.muted}"
|
||||
rounded: "{rounded.none}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 13px 31px
|
||||
height: 48px
|
||||
button-secondary-on-dark:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 13px 31px
|
||||
button-text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.label-uppercase}"
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
hero-band-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 80px
|
||||
hero-photo-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 80px
|
||||
model-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
model-card-photo:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
rounded: "{rounded.none}"
|
||||
feature-photo-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
spec-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
inventory-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px
|
||||
filter-chip:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 8px 14px
|
||||
filter-chip-active:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.none}"
|
||||
configurator-option-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px 24px
|
||||
configurator-option-tile-selected:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 15px 23px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 14px 16px
|
||||
height: 48px
|
||||
cookie-consent-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
category-tab:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.label-uppercase}"
|
||||
rounded: "{rounded.none}"
|
||||
category-tab-active:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.label-uppercase}"
|
||||
rounded: "{rounded.none}"
|
||||
m-stripe-divider:
|
||||
backgroundColor: transparent
|
||||
rounded: "{rounded.none}"
|
||||
cta-band-photo:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-md}"
|
||||
padding: 80px
|
||||
footer:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
BMW's corporate site carries a far more **measured, corporate-automotive** interface than its motorsport-bombastic cousin BMW M. The atmosphere is light: `{colors.canvas}` (#ffffff) is the base surface, `{colors.surface-card}` (#fafafa) carries the soft-grey card plates, and dark navy `{colors.surface-dark}` (#1a2129) appears only inside hero bands — one per page, framing the lead model render.
|
||||
|
||||
Type runs BMW's licensed **BMW Type Next Latin** at two weights: heavy 700 (display + button + nav) and Light 300 (body + secondary copy). That contrast — heavy display next to thin paragraph — is the editorial signature, channeling the brand's "European-engineered" voice. Weight 500 is deliberately absent; weight 400 only appears on caption and nav-link in neutral utility contexts.
|
||||
|
||||
The brand action color, **BMW corporate blue** (`{colors.primary}` — #1c69d4), works alone across every primary CTA — buttons are **rectangular, 0px corner**, with white type. The site rotates a blue-button + dark-navy-hero combination across page rhythm. The M tricolor stripe (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`) only appears in motorsport contexts and as M-model badges/dividers — never in the corporate site's main language.
|
||||
|
||||
The configuration and reservation flows add a dealer-side inventory UI on top of the same system — filter chips, model cards, price tables — but typography and color stay identical; only density goes up.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Light `{colors.canvas}` is the base surface; dark navy `{colors.surface-dark}` appears only inside hero bands — page rhythm relies on contrast.
|
||||
- BMW corporate blue (`{colors.primary}` — #1c69d4) acts as the single primary action color.
|
||||
- BMW Type Next Latin: weight 700 display against weight 300 body is the signature.
|
||||
- Buttons are **rectangular, 0px radius** — corporate dialect, distinct from M's sportier radii.
|
||||
- Model cards run as 4-up or 5-up grids with no hairline border or only minimal border — just white plate + photo + title.
|
||||
- Photography (model renders) sits in environment, no shadow — depth comes entirely from color-block contrast.
|
||||
- M tricolor stripe appears only in M-model contexts — not part of the corporate language.
|
||||
- Section rhythm holds at `{spacing.section}` (80px) for every major band.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **BMW Blue (Primary)** (`{colors.primary}` — #1c69d4): The single brand action color. All primary CTAs, "Learn More" link prefixes (blue text), nav-link active state. Press shifts to `{colors.primary-active}` (#0653b6).
|
||||
- **M Blue Light** (`{colors.m-blue-light}` — #0066b1) + **M Blue Dark** (`{colors.m-blue-dark}` — #1c69d4) + **M Red** (`{colors.m-red}` — #e22718): The M tricolor stripe — appears on the corporate site only on M-model pages and the "M" badge. Never as CTA colors.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #ffffff): The default page surface.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): Soft grey for the footer and sub-navigation bands.
|
||||
- **Surface Card** (`{colors.surface-card}` — #fafafa): The light plate behind a model card's photo block.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #ebebeb): A slightly heavier grey used as a section divider.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #1a2129): Dark navy for hero bands and large dark CTAs. Not pure black — carries a warm undertone.
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #262e38): One step lighter, used for nested cards on top of the dark hero.
|
||||
|
||||
### Hairlines
|
||||
- **Hairline** (`{colors.hairline}` — #e6e6e6): The 1px divider — input outline, configurator card outline, table separator.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #cccccc): A more visible 1px outline — disabled secondary buttons, emphasized table border.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #262626): All display and primary text. Not pure black — soft against photography.
|
||||
- **Body** (`{colors.body}` — #3c3c3c): Default running text.
|
||||
- **Body Strong** (`{colors.body-strong}` — #1a1a1a): Emphasized paragraphs and lead text.
|
||||
- **Muted** (`{colors.muted}` — #6b6b6b): Footer links, breadcrumbs, captions.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #9a9a9a): Disabled text, fine-print legal.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on a blue button.
|
||||
- **On Dark** (`{colors.on-dark}` — #ffffff): White text on a dark hero band.
|
||||
- **On Dark Soft** (`{colors.on-dark-soft}` — #bbbbbb): A slightly muted white for secondary text on dark bands.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.success}` — #22c55e): Confirmation messages and "available" indicators.
|
||||
- **Warning** (`{colors.warning}` — #f59e0b): Warning callouts.
|
||||
- **Error** (`{colors.error}` — #dc2626): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **BMW Type Next Latin** in two cuts: regular (display + UI labels) and **BMW Type Next Latin Light** (body + secondary copy). Fallback stack: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.
|
||||
|
||||
The display/body split is functional:
|
||||
- BMW Type Next Latin (700) → display headlines, button labels, nav links
|
||||
- BMW Type Next Latin Light (300) → paragraphs, descriptive copy
|
||||
- BMW Type Next Latin (400) → caption, neutral nav-link contexts
|
||||
|
||||
This three-way split mirrors BMW M's — corporate and the M sub-brand share the same typographic DNA; only the weight/size ratios differ.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 64px | 700 | 1.05 | 0 | Hero h1 ("iX3", model name) |
|
||||
| `{typography.display-lg}` | 48px | 700 | 1.1 | 0 | Section heads |
|
||||
| `{typography.display-md}` | 32px | 700 | 1.15 | 0 | Sub-section heads |
|
||||
| `{typography.display-sm}` | 24px | 700 | 1.25 | 0 | CTA-band headlines |
|
||||
| `{typography.title-lg}` | 20px | 700 | 1.3 | 0 | Card group titles |
|
||||
| `{typography.title-md}` | 18px | 700 | 1.4 | 0 | Model card title, intro paragraphs |
|
||||
| `{typography.title-sm}` | 16px | 700 | 1.4 | 0 | Inventory card title, list label |
|
||||
| `{typography.body-md}` | 16px | 300 (Light) | 1.55 | 0 | Default body — BMW Type Next Latin Light |
|
||||
| `{typography.body-sm}` | 14px | 300 (Light) | 1.55 | 0 | Footer body, fine-print |
|
||||
| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo captions, meta |
|
||||
| `{typography.label-uppercase}` | 13px | 700 | 1.3 | 1.5px | "LEARN MORE" inline links, category tabs |
|
||||
| `{typography.button}` | 14px | 700 | 1.0 | 0.5px | Standard CTA button label |
|
||||
| `{typography.nav-link}` | 14px | 400 | 1.4 | 0.3px | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
- The **700/300 contrast** is the editorial signature. Weight 500 is absent from the system.
|
||||
- **No negative letter-spacing** — BMW Type Next Latin works on a wide body, so tracking stays at default. Apple/Cal.com-style tightening reads off-brand here.
|
||||
- **UPPERCASE inline links** — "LEARN MORE"-style CTAs run uppercase with 1.5px tracking. The "machined precision" voice.
|
||||
- **Weight 400 lives in a narrow lane** — only caption and nav-link, both neutral utility roles.
|
||||
|
||||
### Note on Font Substitutes
|
||||
BMW Type Next Latin is a licensed BMW typeface. Open-source alternatives:
|
||||
- **Inter** (variable) — close match at weight 700/300. Leave letter-spacing at 0.0em.
|
||||
- **Saira Condensed** — for a slightly more compressed BMW Type feel.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 8px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
|
||||
- **Section padding:** `{spacing.section}` (80px) for every major editorial band.
|
||||
- **Card internal padding:** `{spacing.lg}` (24px) for model and feature cards.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1440px center-aligned.
|
||||
- **Editorial body:** A single 12-column grid.
|
||||
- **Model card grids:** 4-up or 5-up at desktop, 2-up at tablet, 1-up on mobile.
|
||||
- **Configurator inventory grids:** 3-up filter row + 4-up vehicle cards, dense layout.
|
||||
|
||||
### Whitespace Philosophy
|
||||
BMW's whitespace strategy is tighter than BMW M's motorsport-aerated grenadier — the corporate side is more utility-driven. Section rhythm is 80px (not M's 96px). Card padding is 24px (not M's 32px). The page is denser, more dealership-functional.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body, top nav, footer, hero bands |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Configurator option tile, table divider |
|
||||
| Card surface | `{colors.surface-card}` background — no shadow | Model card photo plate |
|
||||
| Photographic | Edge-to-edge photography | Hero band, model renders |
|
||||
|
||||
The system never uses a drop shadow. Depth comes entirely from (a) color-block contrast (light canvas vs dark hero) and (b) photographic subject + lighting.
|
||||
|
||||
### Decorative Depth
|
||||
- **`m-stripe-divider`** — a 4px-tall horizontal tricolor stripe (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Not part of the main corporate flow.
|
||||
- **Photographic depth** — full-bleed vehicle photography (lighting + subject) does the work chrome would otherwise do.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Every button, card, input, configurator chip — the dominant radius |
|
||||
| `{rounded.xs}` | 2px | Very small badges, very rare |
|
||||
| `{rounded.sm}` | 4px | Small inline button (rare) |
|
||||
| `{rounded.md}` | 8px | Mobile-only collapse cards (rare) |
|
||||
| `{rounded.lg}` | 12px | Very rare — modal/dialog corners |
|
||||
| `{rounded.pill}` | 9999px | Filter chips in some contexts (rare) |
|
||||
| `{rounded.full}` | 9999px / 50% | Avatar, circular icon button |
|
||||
|
||||
The radius hierarchy is binary: **rectangular for everything, circular only for icon buttons.** A clear departure from the soft-cornered SaaS dialect of Apple or Cal.com — closer to BMW corporate-automotive's "engineered precision" voice.
|
||||
|
||||
### Photography Geometry
|
||||
- Hero photography is full-bleed at 16:9 or 21:9 cinematic ratio.
|
||||
- Model card photos sit at 16:10, edge-to-edge with `{rounded.none}` corners.
|
||||
- Configurator vehicle renders sit on a white studio background, full silhouette visible.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — A white sticky nav bar pinned to the top of the page. 64px tall, `{colors.canvas}` background. Left: BMW circular badge logo; center: primary horizontal menu (Models, Next Generation, Pre-Owned, Dealers, Test Drive); right: cart icon, language picker, profile. Menu items render in `{typography.nav-link}` (14px / 400 / 0.3px tracking).
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature primary CTA. Background `{colors.primary}` (BMW Blue #1c69d4), text `{colors.on-primary}`, type `{typography.button}` (BMW Type Next Latin 14px / 700 / 0.5px tracking), padding 14px × 32px, height 48px, rounded `{rounded.none}` (0px — rectangular). Press state: `button-primary-active` shifts to `{colors.primary-active}`.
|
||||
|
||||
**`button-secondary`** — A white button with a hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border, same padding + height + radius.
|
||||
|
||||
**`button-secondary-on-dark`** — Used over a dark hero band. Background transparent, text `{colors.on-dark}`, 1px `{colors.on-dark}` border, same rectangular shape.
|
||||
|
||||
**`button-text-link`** — An inline UPPERCASE letter-spaced link. No background, text `{colors.ink}`, type `{typography.label-uppercase}` (13px / 700 / 1.5px tracking). Reads as "LEARN MORE", terminated by a `›` chevron.
|
||||
|
||||
**`text-link`** — An inline link inside body copy. `{colors.ink}` text, no underline by default; underlines per context.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band-dark`** — Full-width dark navy hero. Background `{colors.surface-dark}`, text `{colors.on-dark}`, vertical padding `{spacing.section}` (80px). Centered: model name in `{typography.display-xl}` (64px / 700) + sub-headline + vehicle render (right-aligned or below). A single `{component.button-primary}` (blue) or `{component.button-secondary-on-dark}`.
|
||||
|
||||
**`hero-photo-band`** — A light-canvas model showcase band. Background `{colors.canvas}`, text `{colors.ink}`. The vehicle render takes the wide area; right or below, a headline + two link CTAs + sub-tagline.
|
||||
|
||||
**`model-card`** — Used in 4-up or 5-up model card grids on the homepage ("BMW iX3", "BMW iX", "BMW 5 Series"). Background `{colors.canvas}`, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Contents: model render at the top (`{component.model-card-photo}` on `{colors.surface-card}`), model name in `{typography.title-md}` (18px / 700) below, a one-line tagline in `{typography.body-sm}` (14px / 300), and a `{component.button-text-link}` ("LEARN MORE ›").
|
||||
|
||||
**`model-card-photo`** — The card's photo plate. Background `{colors.surface-card}` (#fafafa — soft grey), rounded `{rounded.none}`, vehicle render in full silhouette. Zero padding — the photo runs edge-to-edge.
|
||||
|
||||
**`feature-photo-card`** — A feature/lifestyle card. Background `{colors.canvas}`, padding `{spacing.lg}`. 16:9 photo at the top, `{typography.title-md}` headline + body excerpt below.
|
||||
|
||||
**`spec-cell`** — A technical spec cell (model detail page). Transparent background, separated by hairline dividers. Value on top (`{typography.display-sm}` 24px / 700), label below (`{typography.label-uppercase}`).
|
||||
|
||||
### Inventory & Configurator
|
||||
|
||||
**`inventory-card`** — One card per vehicle on the dealer inventory page. Background `{colors.canvas}`, padding `{spacing.md}` (16px), rounded `{rounded.none}`. Vehicle photo on top, model + variant name + price + "View" link below.
|
||||
|
||||
**`filter-chip`** + **`filter-chip-active`** — Inventory filter chips (model, year, price range). Inactive: background `{colors.canvas}`, 1px `{colors.hairline-strong}` border, text `{colors.ink}`, type `{typography.caption}`. Active: background `{colors.ink}`, text `{colors.on-dark}`. Padding 8px × 14px, radius `{rounded.none}`.
|
||||
|
||||
**`configurator-option-tile`** + **`configurator-option-tile-selected`** — Configurator selection cell (color, wheels, upholstery). Inactive: background `{colors.canvas}`, 1px hairline. Selected: 2px `{colors.primary}` border. Padding 16px × 24px, radius `{rounded.none}`.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.none}` (0px), padding 14px × 16px, height 48px, 1px hairline border. On focus, the border thickens to ink.
|
||||
|
||||
**`cookie-consent-card`** — Cookie banner. Background `{colors.canvas}`, 1px hairline, padding `{spacing.lg}` (24px), `{typography.body-sm}` (14px / 300 — Light even in legal copy).
|
||||
|
||||
### Tabs / Tags
|
||||
|
||||
**`category-tab`** + **`category-tab-active`** — Category sub-nav. Inactive: transparent + `{colors.muted}` UPPERCASE label. Active: transparent + `{colors.ink}` UPPERCASE label + 2px ink underline. 12px vertical padding, no horizontal radius.
|
||||
|
||||
### Brand Signature
|
||||
|
||||
**`m-stripe-divider`** — A 4px-tall horizontal tricolor stripe (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Only in M-model contexts, motorsport badges, or as an M-related section divider. Absent from the corporate main flow; on M-model detail pages and the M Performance badge it plays an inline divider role.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-photo`** — A pre-footer "Discover the New iX3"-style band. Background `{colors.surface-dark}` with a full-bleed vehicle photo. Centered headline in `{typography.display-md}` (32px / 700) + a single `{component.button-secondary-on-dark}`. 80px padding.
|
||||
|
||||
**`footer`** — The closing soft-grey footer. Background `{colors.surface-soft}` (#f7f7f7 — not pure white — soft grey), text `{colors.body}`. A 4-column link list: Models / Services / Dealers / About. Vertical padding 64px. Below, a copyright line in `{typography.body-sm}` with `{colors.muted}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Sit every page on `{colors.canvas}` (pure white); reserve `{colors.surface-dark}` for hero bands only.
|
||||
- Pair primary CTAs with `{colors.primary}` (BMW Blue) + `{colors.on-primary}` white text + `{rounded.none}` 0px corners — the corporate signature.
|
||||
- Set display headlines in BMW Type Next Latin 700 and body in Light 300. The contrast is non-negotiable.
|
||||
- Use UPPERCASE letter-spaced links like "LEARN MORE" as inline CTAs.
|
||||
- Place the model card photo on `{colors.surface-card}` with the title beneath — the standard BMW corporate pattern.
|
||||
- Hold section rhythm at `{spacing.section}` (80px) — tighter than BMW M's 96px.
|
||||
- Reserve the M tricolor stripe for M-model contexts and motorsport dividers.
|
||||
|
||||
### Don't
|
||||
- Don't add a brand color other than blue — BMW Blue is the only primary action color.
|
||||
- Don't use pill or rounded buttons — `{rounded.none}` (0px) rectangular IS the brand button.
|
||||
- Don't drop display weight to 500 — the system uses 700 / 400 / 300; 500 is absent.
|
||||
- Don't bold body type — Light 300 is the BMW corporate editorial voice.
|
||||
- Don't add drop shadows to cards — depth comes from photo + color-block contrast.
|
||||
- Don't repeat the same surface mode across two consecutive bands — light → dark hero → light → light feature → dark CTA → light footer rotation is required.
|
||||
- Don't use the M tricolor stripe as a CTA fill — divider/accent role only.
|
||||
- Don't mix languages in a single page — UI language must stay consistent.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 64→40px; model card grid 1-up; configurator filter chips 2-up; footer 4 col → 1 col |
|
||||
| Tablet | 768–1024px | Top nav narrows, secondary menu hides under "More"; model card 2-up; inventory 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav; 4-up or 5-up model card grid; inventory 3-up; full configurator UI |
|
||||
| Wide | > 1440px | Same as desktop, content fixed at 1440px; gutters absorb the rest |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` minimum 48 × 48px — above WCAG AAA (44 × 44).
|
||||
- `{component.text-input}` height 48px.
|
||||
- Category tabs run with 12px vertical padding, giving an effective tap area > 44px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- The top nav collapses to a hamburger below 768px; the menu opens as a full-screen sheet.
|
||||
- The hero band's internal layout drops to a single column.
|
||||
- Model card grid 4-up/5-up → 2-up → 1-up.
|
||||
- The configurator filter chip row scrolls horizontally on mobile.
|
||||
- The M tricolor stripe stays at 4px height across every breakpoint.
|
||||
|
||||
### Image Behavior
|
||||
- Model renders scale at every breakpoint while preserving native aspect ratios.
|
||||
- Hero photography may shift to a more vertical crop on mobile (art direction).
|
||||
- Inventory vehicle photos may move from 16:9 to 4:3 on mobile.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on a single component. Reference its YAML key directly (`{component.model-card}`, `{component.button-primary}`).
|
||||
2. New components default to `{rounded.none}` (0px). Use `{rounded.full}` only for circular icon buttons.
|
||||
3. Variants (`-active`, `-disabled`, `-selected`) live as separate entries inside the `components:` block.
|
||||
4. `{token.refs}` everywhere — never inline hex.
|
||||
5. Hover state is never documented. Only Default and Active/Pressed states.
|
||||
6. Display headlines stay BMW Type Next Latin 700; body stays Light 300; the trio is fixed.
|
||||
7. Keep UI strings in a single language — match the locale of the page.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- BMW Type Next Latin is licensed to BMW and not published as a public web font; Inter at weights 700/300 is documented as the substitute.
|
||||
- Animation and transition timings (configurator color swap, model card hover-reveal) are out of scope here.
|
||||
- Form validation states beyond `{component.text-input}` focus were not extracted — error/success states would need a dedicated form page.
|
||||
- The dealer inventory sub-domain shares typography and color with the main corporate site; only UI density rises (filters, tables, prices).
|
||||
- A cookie consent overlay can occlude part of the hero — the lead hero band content may not be fully captured.
|
||||
- The M tricolor stripe appears infrequently on this corporate site; full motorsport context lives on the BMW M site.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Bmw Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/bmw/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,454 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Bugatti
|
||||
description: "An austere luxury-automotive interface that uses near-pure black canvas, white uppercase letterspaced display, and full-bleed automotive photography as the only voltage. The system runs three custom Bugatti typefaces — Bugatti Display, Bugatti Text Regular, and Bugatti Monospace — and combines them at modest weights with wide tracking to feel European-engineered, hyper-minimal, and quietly expensive. There is no accent color, no decorative element, no chrome — only photography, typography, and the brand wordmark."
|
||||
|
||||
colors:
|
||||
primary: "#ffffff"
|
||||
ink: "#ffffff"
|
||||
body: "#cccccc"
|
||||
body-strong: "#e6e6e6"
|
||||
muted: "#999999"
|
||||
muted-soft: "#666666"
|
||||
hairline: "#262626"
|
||||
hairline-strong: "#3a3a3a"
|
||||
canvas: "#000000"
|
||||
surface-soft: "#0d0d0d"
|
||||
surface-card: "#141414"
|
||||
surface-elevated: "#1f1f1f"
|
||||
on-primary: "#000000"
|
||||
on-dark: "#ffffff"
|
||||
on-photo: "#ffffff"
|
||||
link: "#c3d9f3"
|
||||
warning: "#d4a017"
|
||||
success: "#5fa657"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "Bugatti Display, sans-serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.1
|
||||
letterSpacing: 4px
|
||||
display-lg:
|
||||
fontFamily: "Bugatti Display, sans-serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.15
|
||||
letterSpacing: 3px
|
||||
display-md:
|
||||
fontFamily: "Bugatti Display, sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 2px
|
||||
display-sm:
|
||||
fontFamily: "Bugatti Display, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 1.5px
|
||||
wordmark:
|
||||
fontFamily: "Bugatti Display, serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1
|
||||
letterSpacing: 6px
|
||||
title-md:
|
||||
fontFamily: "Bugatti Display, sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 1px
|
||||
title-sm:
|
||||
fontFamily: "Bugatti Display, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 1.5px
|
||||
caption-uppercase:
|
||||
fontFamily: "Bugatti Monospace, ui-monospace, monospace"
|
||||
fontSize: 11px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 2px
|
||||
body-md:
|
||||
fontFamily: "Bugatti Text Regular, serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "Bugatti Text Regular, serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "Bugatti Monospace, ui-monospace, monospace"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1
|
||||
letterSpacing: 2.5px
|
||||
nav-link:
|
||||
fontFamily: "Bugatti Monospace, ui-monospace, monospace"
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 2px
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 40px
|
||||
xxl: 64px
|
||||
section: 120px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 14px 32px
|
||||
height: 44px
|
||||
button-icon:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 40px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.link}"
|
||||
typography: "{typography.button}"
|
||||
top-nav:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 56px
|
||||
wordmark-display:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.wordmark}"
|
||||
hero-photo-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
caption-overlay:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
career-callout-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px
|
||||
width: 320px
|
||||
model-photo-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.none}"
|
||||
newsroom-article-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
career-listing-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
padding: 24px 0
|
||||
text-input:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 12px 0
|
||||
height: 44px
|
||||
spec-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
padding: 24px 0
|
||||
date-pill:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
category-tag:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
cta-band-photo:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-md}"
|
||||
padding: 80px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Bugatti's marketing surface is the most austere interface in luxury automotive: a near-pure black canvas (`{colors.canvas}` — #000000) holding white uppercase **letterspaced** display type and full-bleed automotive photography. The system has no accent color, no surface card decoration, no shadows, no gradients, no chrome — only **photography, typography, and the brand wordmark**. Every other luxury auto site in this category (BMW M, Aston Martin, Lamborghini) uses some form of accent color or signature element; Bugatti uses nothing. The empty space, the photograph, and the precisely-tracked Bugatti Display headline ARE the brand.
|
||||
|
||||
The system runs **three custom Bugatti typefaces**: **Bugatti Display** (display headlines, the "BUGATTI" wordmark, all caps with wide tracking), **Bugatti Text Regular** (body paragraphs, a serif text face), and **Bugatti Monospace** (button labels, navigation, captions, dates — anywhere precision and machined feel matters). The split is deliberate and unbreakable: never use Bugatti Text in a button, never use Bugatti Monospace in a paragraph.
|
||||
|
||||
Display sizes use weight 400 (regular) — never bold. Visual emphasis comes from **size and tracking**, not weight. Letter-spacing on the wordmark is 6px; on display headlines 2-4px; on uppercase labels 2-2.5px. Tight tracking is a brand violation. The wide spacing creates the "engineered precision" feel that no other luxury maker matches.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure black canvas (`{colors.canvas}` — #000000) with white type. The system does not have a light mode.
|
||||
- Three custom Bugatti typefaces: **Display** (uppercase headlines + wordmark), **Text Regular** (body serif), **Monospace** (buttons, captions, nav).
|
||||
- All display headlines are UPPERCASE with wide letter-spacing (2-4px). Body copy stays sentence-case at standard tracking.
|
||||
- No accent color. The only non-monochrome color anywhere on the site is `{colors.link}` (#c3d9f3) — a desaturated ice-blue used on inline anchor links, and even that appears rarely.
|
||||
- Buttons are pill-shaped (`{rounded.pill}`) with **transparent background** and a 1px white outline. Bugatti is the only luxury-auto brand whose primary CTA is fully transparent.
|
||||
- Photography is the only depth element. No drop shadows. No gradients. No card surfaces. Surface cards are `{colors.surface-card}` (#141414) at most — a barely-different-from-black tone.
|
||||
- Section rhythm is generous — `{spacing.section}` (120px) between major bands, longer than most marketing sites because Bugatti's pages are mostly photography with minimal text density.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Primary** (`{colors.primary}` — #ffffff): The single brand color. White type and white CTA outlines on the black canvas.
|
||||
- **Link** (`{colors.link}` — #c3d9f3): The only non-monochrome color in the system — a desaturated ice-blue used on inline anchor links and rarely on focus states. Bugatti's brand discipline is so tight that this single token is essentially the entire chromatic vocabulary outside black-and-white.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #000000): The default page floor across every surface. Pure black.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #0d0d0d): A barely-different-from-black tone used for spec table rows and dense data sections.
|
||||
- **Surface Card** (`{colors.surface-card}` — #141414): Cards (career callout, newsroom article container, occasional content cards). Even card surfaces stay nearly-black — no contrast jump.
|
||||
- **Surface Elevated** (`{colors.surface-elevated}` — #1f1f1f): One step further from black, used for nested cards on rare dense pages.
|
||||
- **Hairline** (`{colors.hairline}` — #262626): The 1px divider tone. Visible but quiet. Used on table rows, between body sections, around card outlines.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #3a3a3a): A heavier divider used on the underside of input fields (input fields have no border — only an underline hairline).
|
||||
|
||||
### Text
|
||||
- **Ink / On Dark** (`{colors.on-dark}` — #ffffff): All headline and primary text on dark canvas.
|
||||
- **Body** (`{colors.body}` — #cccccc): Default running-text color (slightly cooler than pure white). Used in body paragraphs.
|
||||
- **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized body / lead paragraph.
|
||||
- **Muted** (`{colors.muted}` — #999999): Footer links, dates, captions, secondary metadata. Dembrandt's frequency analysis confirms this as palette-2 (count 6, medium confidence).
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #666666): A second-tier muted for very-secondary text (legal disclaimer, copyright line).
|
||||
|
||||
### Semantic
|
||||
- **Warning** (`{colors.warning}` — #d4a017): Reserved for technical-warning callouts (specifications, recall notices). Almost never appears on marketing surfaces.
|
||||
- **Success** (`{colors.success}` — #5fa657): Order confirmation states (rare on marketing pages).
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **three custom Bugatti typefaces** as a rigid trinity:
|
||||
1. **Bugatti Display** — All display headlines (h1, h2, h3), the "BUGATTI" wordmark, model name plates. Uppercase, wide-tracked. The default for any visual emphasis.
|
||||
2. **Bugatti Text Regular** — A serif text face used exclusively for running body copy, lead paragraphs, model descriptions. Standard sentence-case, no letter-spacing.
|
||||
3. **Bugatti Monospace** — Button labels, navigation, captions, dates, monospace-precision contexts. Always uppercase with 2-2.5px tracking.
|
||||
|
||||
The split is functional and absolute. Bugatti Display in a button breaks the "machined precision" voice; Bugatti Monospace in a paragraph breaks the "engineered elegance" voice; Bugatti Text in a button is unthinkable.
|
||||
|
||||
The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for Bugatti Display, `Garamond, "Times New Roman", serif` for Bugatti Text Regular, and `ui-monospace, "SF Mono", "Cascadia Mono", monospace` for Bugatti Monospace.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 64px | 400 | 1.1 | 4px | Hero h1 ("THE BUGATTI F.K.P. HOMMAGE", "TOURBILLON") — Bugatti Display, uppercase, wide-tracked |
|
||||
| `{typography.display-lg}` | 48px | 400 | 1.15 | 3px | Section heads — Bugatti Display, uppercase |
|
||||
| `{typography.display-md}` | 32px | 400 | 1.2 | 2px | Sub-section heads, model names — Bugatti Display |
|
||||
| `{typography.display-sm}` | 24px | 400 | 1.3 | 1.5px | Card titles — Bugatti Display |
|
||||
| `{typography.wordmark}` | 14px | 400 | 1.0 | 6px | The "BUGATTI" brand wordmark in the top nav — Bugatti Display, the widest tracking in the system |
|
||||
| `{typography.title-md}` | 20px | 400 | 1.3 | 1px | Career listing titles, intro paragraphs — Bugatti Display |
|
||||
| `{typography.title-sm}` | 16px | 400 | 1.3 | 1.5px | Mid-tier headlines, callout cards |
|
||||
| `{typography.caption-uppercase}` | 11px | 400 | 1.4 | 2px | Photo captions, metadata, "EXPLORE OUR OPPORTUNITIES" — Bugatti Monospace, uppercase |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body — Bugatti Text Regular (a serif face), sentence case, no tracking |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body, fine-print legal — Bugatti Text Regular |
|
||||
| `{typography.button}` | 14px | 400 | 1.0 | 2.5px | All button labels — Bugatti Monospace, uppercase, 2.5px tracking |
|
||||
| `{typography.nav-link}` | 12px | 400 | 1.4 | 2px | Top-nav menu items ("MENU", "STORE") — Bugatti Monospace |
|
||||
|
||||
### Principles
|
||||
The system NEVER uses bold weight. Every Bugatti typeface is set at weight 400 (regular). Visual emphasis comes from:
|
||||
1. **Size** — 64px hero vs 16px body is a 4× hierarchy
|
||||
2. **Letter-spacing** — 6px wordmark vs 0px body
|
||||
3. **Case** — Uppercase display vs sentence-case body
|
||||
4. **Family contrast** — Display vs Text Regular vs Monospace
|
||||
|
||||
Going to weight 700 anywhere would break the "modest engineering" feel and make Bugatti read like a generic luxury template.
|
||||
|
||||
The serif Bugatti Text Regular sets the brand apart from the all-sans luxury crowd (BMW, Aston Martin, Lamborghini all use sans-serif body type). Bugatti's serif body voice signals literary, considered, slow-reading prose — which is the brand's editorial philosophy.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If Bugatti Display, Bugatti Text Regular, and Bugatti Monospace are unavailable, the closest open-source substitutes are:
|
||||
- **Bugatti Display** → **Saira Condensed** (variable, weight 400) at +0.05em letter-spacing
|
||||
- **Bugatti Text Regular** → **Cormorant Garamond** (regular) or **EB Garamond**
|
||||
- **Bugatti Monospace** → **JetBrains Mono** or **IBM Plex Mono** (regular weight)
|
||||
|
||||
The substitution preserves the three-family split, which is more important than exact typeface match.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.xxl}` 64px · `{spacing.section}` 120px.
|
||||
- **Section padding:** `{spacing.section}` (120px) — longer than most marketing sites because Bugatti's bands are mostly photography with minimal text. The empty space frames the cars.
|
||||
- **Card internal padding:** `{spacing.lg}` (24px) for newsroom and content cards; `{spacing.md}` (16px) for the career callout card; `{spacing.xxl}` (64px) inside hero photo bands.
|
||||
- **Gutters:** `{spacing.xl}` (40px) between cards in 2-up grids — wider than typical because Bugatti's grids are sparse.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1280px centered. Hero photo bands bleed full-width with no max.
|
||||
- **Editorial body:** Single 12-column grid; photo bands are full-bleed.
|
||||
- **Newsroom layout:** 2-up article grid at desktop, 1-up at tablet+mobile.
|
||||
- **Career listings:** Single column with 80px row spacing.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Bugatti uses whitespace more aggressively than any luxury-auto competitor. The homepage hero is mostly photography + huge whitespace + a single sentence + a single button. The empty black space below the photograph is intentional — it lets the car breathe. Compressing the whitespace to "fit more content" breaks the brand's fundamental contract: that less is more.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body, top nav, footer, photo bands |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Section dividers, table rows |
|
||||
| Card surface | `{colors.surface-card}` background — no shadow | Career callout, newsroom article container |
|
||||
| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, model showcases — depth via subject + lens, not chrome |
|
||||
|
||||
The system uses no shadows, no glassmorphism, no gradients. Depth comes entirely from photography (lighting, lens, subject framing) and from the contrast between black canvas and minimally-elevated `{colors.surface-card}`.
|
||||
|
||||
### Decorative Depth
|
||||
- None. Bugatti is the only luxury-auto brand without a single decorative element. There is no stripe, no badge, no heritage emblem on the marketing site outside the wordmark itself.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | All cards, photo containers, inputs, spec cells — the dominant radius |
|
||||
| `{rounded.pill}` | 9999px | All buttons (the only rounded element in the system) |
|
||||
| `{rounded.full}` | 9999px / 50% | Circular icon buttons, avatar surfaces |
|
||||
|
||||
The radius hierarchy is binary: rectangular for everything except buttons, which are pills. No 4px, no 8px, no 12px in between — those would feel "designed" rather than "engineered."
|
||||
|
||||
### Photography Geometry
|
||||
Hero photography fills full-width with no rounding. Photo cards inside grids retain `{rounded.none}` (0px) corners, edge-to-edge images. Model detail shots use 16:9 or wider cinema-aspect ratios. Newsroom thumbnails use 16:9 with 0px corners. There are no avatars or rounded photo crops anywhere on the marketing site.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries "MENU" at left, the centered **wordmark-display** ("BUGATTI" in 14px Bugatti Display with 6px tracking), and "STORE" at right with a small bag icon. All labels in `{typography.nav-link}` (Bugatti Monospace, 12px, 2px tracking, uppercase).
|
||||
|
||||
**`wordmark-display`** — The "BUGATTI" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature primary CTA. Background **transparent**, text `{colors.on-dark}` (white), 1px white outline, rounded `{rounded.pill}` (9999px), padding 14px × 32px, height 44px. Type `{typography.button}` — Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti — every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.
|
||||
|
||||
**`button-icon`** — Circular icon buttons (carousel arrows, share, language switcher). 40 × 40px, transparent background, white outline 1px, rounded `{rounded.full}`. Same outline-only treatment as the primary button.
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.link}` (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits `{typography.body-md}` (Bugatti Text Regular, serif).
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-photo-band`** — Full-width black band with full-bleed automotive photography. The h1 in `{typography.display-xl}` sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption (`{typography.caption-uppercase}`) below the headline and a single `{component.button-primary}` further down. Vertical padding 96px-200px depending on photo height.
|
||||
|
||||
**`career-callout-card`** — A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt ("Are you ready for a new adventure?"). Background `{colors.surface-card}`, rounded `{rounded.none}` (0px), padding `{spacing.md}` (16px), width 320px. Carries a small thumbnail at top, body line, and a `{typography.caption-uppercase}` link ("EXPLORE OUR OPPORTUNITIES").
|
||||
|
||||
**`model-photo-card`** — Used in model showcases (Tourbillon page, model lineup grid). Background `{colors.canvas}` (no card surface — just photo on black), rounded `{rounded.none}`. Top: 16:9 or 21:9 hero shot of the model. Below: model name in `{typography.display-md}` (32px Bugatti Display, 2px tracking), short specs line in `{typography.caption-uppercase}` (11px Bugatti Monospace), a `{component.text-link}` ("DISCOVER").
|
||||
|
||||
**`newsroom-article-card`** — Used on the newsroom page (newsroom.bugatti.com). Background `{colors.canvas}` with hairline border, rounded `{rounded.none}`, padding `{spacing.lg}` (24px). Carries a 16:9 thumbnail, a `{component.date-pill}` ("12. NOVEMBER 2025"), a `{typography.title-md}` headline, and a body excerpt in `{typography.body-md}` (Bugatti Text Regular serif).
|
||||
|
||||
**`career-listing-row`** — Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in `{typography.title-md}` (Bugatti Display 20px) at left; location + department in `{typography.caption-uppercase}` at right; chevron arrow (→) at far right.
|
||||
|
||||
**`spec-cell`** — Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in `{typography.title-md}` at top and a label in `{typography.caption-uppercase}` below. Padding 24px vertical.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text input on dark canvas. Background **transparent**, text `{colors.on-dark}`, 1px hairline-strong bottom border only (no top, left, right border), padding 12px × 0px, height 44px. Type `{typography.body-md}` (Bugatti Text Regular). Placeholder in `{colors.muted}`. Focus thickens the bottom border to white.
|
||||
|
||||
### Tags & Captions
|
||||
|
||||
**`caption-overlay`** — Photo-overlay caption (e.g., "HONORING THE OEYRON AND ITS VISIONARY CREATOR"). Centered or left-aligned over photography in `{typography.caption-uppercase}` (Bugatti Monospace, 11px, 2px tracking, white).
|
||||
|
||||
**`category-tag`** + **`date-pill`** — Both render as transparent inline labels in `{typography.caption-uppercase}`, color `{colors.muted}`. No background fill, no border. The "tag" is the type itself.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-photo`** — A pre-footer "Discover Bugatti" band with full-bleed photography of a Bugatti car at speed and a centered headline in `{typography.display-md}` + a `{component.button-primary}` below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.
|
||||
|
||||
**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.muted}`. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in `{typography.body-sm}` (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off entirely.
|
||||
- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.
|
||||
- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.
|
||||
- Keep `{component.button-primary}` transparent with a 1px white outline. The transparent pill IS the brand button.
|
||||
- Use weight 400 everywhere. Bold breaks the brand voice — the system has no bold weight role.
|
||||
- Use `{spacing.section}` (120px) between major editorial bands. The whitespace is part of the brand.
|
||||
- Reserve `{colors.link}` (#c3d9f3) for inline anchor links only. It's the system's only non-monochrome color.
|
||||
|
||||
### Don't
|
||||
- Don't introduce any accent color outside `{colors.link}`. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks the contract.
|
||||
- Don't bold any type. The system has no bold weight — every typeface stays at 400.
|
||||
- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.
|
||||
- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.
|
||||
- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.
|
||||
- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.
|
||||
- Don't use Bugatti Display in a button (use Bugatti Monospace) or Bugatti Monospace in a paragraph (use Bugatti Text Regular). The trinity split is the brand voice.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 64→32px; career callout card hides; photo bands stay full-bleed; footer 4 cols → 1 |
|
||||
| Tablet | 768–1024px | Top nav stays minimal (MENU + wordmark + STORE); 2-up newsroom grid; career rows full-width |
|
||||
| Desktop | 1024–1440px | Full minimal top-nav; 2-up newsroom grid; spec tables 4-up |
|
||||
| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` renders at minimum 44 × 44px (matches WCAG AAA).
|
||||
- `{component.button-icon}` is exactly 40 × 40px.
|
||||
- `{component.text-input}` height is 44px.
|
||||
- Career listing rows have 24px vertical padding; effective tap area meets 44px+ with surrounding spacing.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav stays minimal at all breakpoints (MENU label + wordmark + STORE label). On mobile the labels hide behind a hamburger but the wordmark stays centered.
|
||||
- Hero photography stays full-bleed at every breakpoint. Photo crops adjust — wider crops at desktop, vertical crops on mobile.
|
||||
- The career callout card on the homepage hides at < 768px (it's a desktop-only floating element).
|
||||
- 2-up newsroom grid collapses to 1-up at < 768px.
|
||||
- Spec cells reflow from 4-up to 2-up to 1-up; values stay at the same display size regardless of column count.
|
||||
|
||||
### Image Behavior
|
||||
- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile. Bugatti cars are always shown in motion or at-angle (never flat profiles).
|
||||
- Newsroom thumbnails retain 16:9 ratio and 0px corners.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key (`{component.hero-photo-band}`, `{component.career-callout-card}`).
|
||||
2. New components default to `{rounded.none}` (0px). Only `{component.button-primary}` and `{component.button-icon}` use pill / full radius.
|
||||
3. Variants live as separate entries in `components:`.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Never document hover. Default and Active/Pressed states only.
|
||||
6. Display headlines stay UPPERCASE Bugatti Display 400 with 2-4px tracking. Body stays sentence-case Bugatti Text Regular (serif). Button labels stay Bugatti Monospace 2.5px tracking. The trinity does not blur.
|
||||
7. When in doubt about emphasis: bigger photography before bigger type.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The dembrandt frequency analyzer captured only 3 colors at root level (`#000000`, `#999999`, `#c3d9f3`). The white text (#ffffff) and dark surface tones (`#0d0d0d`, `#141414`, `#1f1f1f`) were inferred from screenshot — Bugatti's pages are so monochrome that the frequency-based analyzer didn't surface body text or surface tones as distinct palette entries.
|
||||
- The three Bugatti typefaces (Display, Text Regular, Monospace) are licensed to Bugatti and not available as web fonts publicly. Substitutes are documented in the typography section.
|
||||
- Animation and transition timings (photo carousel transitions, hover-reveal of menu, configurator animations) are not in scope.
|
||||
- Form validation states beyond the underline-only `{component.text-input}` are not extracted — error / success states are inferred from general standards, not from the analyzed surfaces.
|
||||
- The configurator surface (vehicle build pages with custom paint / interior pickers) was not in the analyzed URL set; its swatch grid, customization controls, and price-summary card are not documented here.
|
||||
- The German-language newsroom (newsroom.bugatti.com/de) shares the system with the English Bugatti.com surfaces — no design-system-level differences observed, only language localization.
|
||||
- The actual Tourbillon page rendered as a sparse minimal page in the captured screenshot, suggesting either lazy-loaded content or an interactive configurator-style UI that doesn't render fully in static screenshots; engine-spec layout is documented from general luxury-auto patterns informed by the captured spec cell tokens.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Bugatti Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/bugatti/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,542 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Cal.com
|
||||
description: "A clean, calendar-software-first interface anchored on white canvas with black primary CTAs and custom Cal Sans display typography. The system reads as friendly modern SaaS — generous whitespace, soft-rounded cards (~12px), product UI fragments shown directly inside cards, and a dark navy footer that visually closes long-scroll pages. Brand voltage comes from the Cal Sans display headline (a custom geometric face) and from product UI artifacts shown in-card rather than from accent colors."
|
||||
|
||||
colors:
|
||||
primary: "#111111"
|
||||
primary-active: "#242424"
|
||||
primary-disabled: "#e5e7eb"
|
||||
ink: "#111111"
|
||||
body: "#374151"
|
||||
muted: "#6b7280"
|
||||
muted-soft: "#898989"
|
||||
hairline: "#e5e7eb"
|
||||
hairline-soft: "#f3f4f6"
|
||||
canvas: "#ffffff"
|
||||
surface-soft: "#f8f9fa"
|
||||
surface-card: "#f5f5f5"
|
||||
surface-strong: "#e5e7eb"
|
||||
surface-dark: "#101010"
|
||||
surface-dark-elevated: "#1a1a1a"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-soft: "#a1a1aa"
|
||||
brand-accent: "#3b82f6"
|
||||
success: "#10b981"
|
||||
warning: "#f59e0b"
|
||||
error: "#ef4444"
|
||||
badge-orange: "#fb923c"
|
||||
badge-pink: "#ec4899"
|
||||
badge-violet: "#8b5cf6"
|
||||
badge-emerald: "#34d399"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "Cal Sans, Inter, sans-serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -2px
|
||||
display-lg:
|
||||
fontFamily: "Cal Sans, Inter, sans-serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1.5px
|
||||
display-md:
|
||||
fontFamily: "Cal Sans, Inter, sans-serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -1px
|
||||
display-sm:
|
||||
fontFamily: "Cal Sans, Inter, sans-serif"
|
||||
fontSize: 28px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.5px
|
||||
title-lg:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 22px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.3
|
||||
letterSpacing: -0.3px
|
||||
title-md:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
code:
|
||||
fontFamily: "JetBrains Mono, ui-monospace, monospace"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.muted}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 36px
|
||||
button-text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
nav-pill-group:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 6px
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
hero-app-mockup-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xl}"
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
feature-icon-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
product-mockup-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
testimonial-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-card-featured:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
height: 40px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.md}"
|
||||
category-tab:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.nav-link}"
|
||||
padding: 8px 14px
|
||||
rounded: "{rounded.md}"
|
||||
category-tab-active:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.md}"
|
||||
avatar-circle:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 36px
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
rating-stars:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.badge-orange}"
|
||||
typography: "{typography.caption}"
|
||||
cta-band-light:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
footer:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark-soft}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Cal.com's marketing surface is a clean, friendly modern-SaaS interface — white canvas (`{colors.canvas}` — #ffffff) with black primary CTAs (`{colors.primary}` — #111111), custom **Cal Sans** display typography, and `{colors.surface-card}` (#f5f5f5) light-gray cards holding product UI fragments. The system reads as confidently engineered without trying to impress — every band has clear hierarchy, generous whitespace, and a single primary action.
|
||||
|
||||
Type voice splits cleanly into two roles: **Cal Sans** (the brand's custom geometric display face — used for h1, h2, h3, and hero headlines) and **Inter** (used for everything else — body, buttons, nav, captions). Cal Sans uses weight 600 with negative letter-spacing (-0.5px to -2px depending on size) — it feels modern, slightly condensed, distinctly Cal.com.
|
||||
|
||||
Component voltage comes from **product UI fragments shown directly inside cards** — calendar widgets, scheduling forms, automation diagrams, integration tiles. Cal.com doesn't paint marketing illustrations of the product; it shows the actual product chrome at small scale embedded in the marketing flow.
|
||||
|
||||
The footer flips to `{colors.surface-dark}` (#101010) — a deep near-black that visually closes every long-scroll page. The footer is the only dark surface in the system; everything above stays white-with-light-gray-cards.
|
||||
|
||||
**Key Characteristics:**
|
||||
- White canvas with black primary CTA (`{colors.primary}` — #111111). Buttons are `{rounded.md}` (8px) with confident weight-600 labels. Standard friendly-SaaS button.
|
||||
- Custom `Cal Sans` display typeface for headlines (substituted with Inter weight 600 here). Negative letter-spacing on display sizes — geometric, precise, slightly condensed.
|
||||
- Light-gray card surfaces (`{colors.surface-card}` — #f5f5f5) for feature cards, testimonials, and pricing tiers (non-featured). The featured pricing tier flips to `{colors.surface-dark}` (the only dark card on light pages).
|
||||
- Product UI fragments embedded directly in cards — Cal.com shows real schedule pickers, calendar widgets, integration grids inside its marketing cards. Brand voltage from real product chrome at small scale.
|
||||
- Nav-pill-group (`{component.nav-pill-group}`) — a small pill-radius wrapper around grouped nav segments (e.g., the sub-nav switcher between product views). The pill wrapper is one of the system's signature interactive components.
|
||||
- Avatars are circular (`{rounded.full}`), 36px diameter, used in testimonial rows and team-listing surfaces.
|
||||
- Footer is dark navy (`{colors.surface-dark}` — #101010) with light text (`{colors.on-dark-soft}` — #a1a1aa). The dark footer closes every page even though the body above is white.
|
||||
- Spacing rhythm is `{spacing.section}` (96px) between major bands — tight enough to feel modern-SaaS but generous enough to breathe.
|
||||
- Border radius is hierarchical: `{rounded.md}` (8px) for buttons + inputs, `{rounded.lg}` (12px) for content cards, `{rounded.xl}` (16px) for the hero app-mockup container, `{rounded.pill}` for nav-pill-group + badges, `{rounded.full}` for avatars + icon buttons.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Primary** (`{colors.primary}` — #111111): The dominant action color. All primary CTAs, h1/h2 display type. Press state shifts to `{colors.primary-active}` (#242424).
|
||||
- **Brand Accent** (`{colors.brand-accent}` — #3b82f6): Used sparely on inline links and on a small badge / "Customer story" highlight. Cal.com is a near-monochrome brand — the blue appears rarely.
|
||||
- **Badge Pastels** — A small pastel set for category badges and avatar fills: `{colors.badge-orange}` (#fb923c), `{colors.badge-pink}` (#ec4899), `{colors.badge-violet}` (#8b5cf6), `{colors.badge-emerald}` (#34d399). These appear on tag pills and small accent moments inside product UI fragments — never on hero CTAs.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #ffffff): The default page floor.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #f8f9fa): Nav-pill-group background, very-soft section dividers.
|
||||
- **Surface Card** (`{colors.surface-card}` — #f5f5f5): Feature cards, testimonial cards, badge pills, default avatar fills.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #e5e7eb): Hairline border alternative; disabled button background.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #101010): The footer background — the only dark surface on every page. Also used for the featured pricing tier card.
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): Used for nested cards inside the dark footer or featured pricing card.
|
||||
- **Hairline** (`{colors.hairline}` — #e5e7eb): The 1px border tone on light surfaces. Used on input borders, table dividers, content card outlines (sometimes).
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #f3f4f6): A barely-visible divider used between sections that share the white canvas.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #111111): All headlines and primary text.
|
||||
- **Body** (`{colors.body}` — #374151): Default running-text color.
|
||||
- **Muted** (`{colors.muted}` — #6b7280): Secondary text — sub-headings, breadcrumbs, footer body.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #898989): Tertiary text — captions, fine-print, copyright lines.
|
||||
- **On Primary / On Dark** (`{colors.on-primary}` / `{colors.on-dark}` — #ffffff): Text on primary buttons and dark footer.
|
||||
- **On Dark Soft** (`{colors.on-dark-soft}` — #a1a1aa): Footer body text — slightly muted white for the link rows.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.success}` — #10b981): Confirmation states, success badges in product UI.
|
||||
- **Warning** (`{colors.warning}` — #f59e0b): Warning callouts.
|
||||
- **Error** (`{colors.error}` — #ef4444): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **Cal Sans** for display + brand wordmark and **Inter** for everything else. Cal Sans is Cal.com's custom geometric display typeface — slightly condensed, weight 600, negative letter-spacing. Inter handles body, buttons, navigation, captions, and tabular code blocks. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for both families.
|
||||
|
||||
The split is functional:
|
||||
- Cal Sans (display, 600 weight, -0.5 to -2px tracking) — h1, h2, h3
|
||||
- Inter (body + UI, 400-600 weight, 0 letter-spacing) — paragraphs, labels, buttons, nav
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 64px | 600 | 1.05 | -2px | Homepage h1 ("The better way to schedule your meetings") — Cal Sans |
|
||||
| `{typography.display-lg}` | 48px | 600 | 1.1 | -1.5px | Section heads ("Your all-purpose scheduling app") — Cal Sans |
|
||||
| `{typography.display-md}` | 36px | 600 | 1.15 | -1px | Sub-section heads, card titles — Cal Sans |
|
||||
| `{typography.display-sm}` | 28px | 600 | 1.2 | -0.5px | CTA-band heads, pricing tier prices — Cal Sans |
|
||||
| `{typography.title-lg}` | 22px | 600 | 1.3 | -0.3px | Pricing plan names — Inter |
|
||||
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Feature card titles, intro paragraphs |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default running-text |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body, fine-print |
|
||||
| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |
|
||||
| `{typography.code}` | 14px | 400 | 1.5 | 0 | Code snippets, API examples — JetBrains Mono |
|
||||
| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
Cal Sans is the brand voice — every display headline uses it. Inter handles the supporting type. The boundary is strict: never put body copy in Cal Sans, never put a display headline in Inter. Cal Sans without negative letter-spacing reads as off-brand — the -0.5 to -2px tracking is part of the voice.
|
||||
|
||||
Display weight stays at 600 across all sizes — never 700, never 500. The middle weight is what makes Cal Sans feel modern and confident without becoming bombastic.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If Cal Sans is unavailable, **Inter** at weight 600 with -0.04em letter-spacing is a usable approximation. The geometric character of Cal Sans differs from Inter's humanist forms, but the substitution preserves the weight + tracking signature. **Manrope** at weight 700 is another close alternative.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** `{spacing.section}` (96px) — the universal vertical rhythm between editorial bands.
|
||||
- **Card internal padding:** `{spacing.xl}` (32px) for feature cards and pricing tier cards; `{spacing.lg}` (24px) for testimonial and product-mockup cards.
|
||||
- **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside footer columns.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1200px centered on marketing pages.
|
||||
- **Editorial body:** Single 12-column grid; hero band often uses 7/5 split (h1 left, app mockup card right).
|
||||
- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Pricing grid:** 4-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Footer:** 4-column link list at desktop, wrapping to 2-up at tablet, 1-up at mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Cal.com uses generous but not excessive whitespace — section padding sits at 96px (modern-SaaS standard), and card internal padding stays at 32px. The rhythm is calibrated for fast scanning: every band has a single h1 + h2 + supporting cards, never densely packed lists. The result reads as confident-not-shouting.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, hero bands |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Inputs, table dividers, occasionally on cards |
|
||||
| Card surface | `{colors.surface-card}` background — no shadow | Feature cards, testimonials |
|
||||
| Subtle drop shadow | Faint shadow at low alpha | Pricing tier cards, hover-elevated states (the system uses `0 1px 2px rgba(0,0,0,0.05)` and `0 4px 12px rgba(0,0,0,0.08)`) |
|
||||
| Featured tier | `{colors.surface-dark}` background, no shadow needed | The featured pricing tier inverts to dark surface — color contrast does the elevation work |
|
||||
|
||||
The elevation philosophy is **soft and modern** — small drop shadows on elevated cards, color-block contrast for emphasis. No heavy shadows, no neumorphism, no glassmorphism.
|
||||
|
||||
### Decorative Depth
|
||||
- Calendar widgets and product UI fragments embedded inside marketing cards carry their own internal shadows from the product UI itself — these are not system tokens, they're product chrome shown as content.
|
||||
- Avatar circles in testimonial sections sometimes carry pastel fill colors (`{colors.badge-orange}`, `{colors.badge-pink}`, etc.) — adds a small chromatic flourish without breaking the monochrome brand voice.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Almost no use — reserved for badge accents |
|
||||
| `{rounded.sm}` | 6px | Small inline buttons, dropdown items |
|
||||
| `{rounded.md}` | 8px | Standard CTA buttons, text inputs, category tabs |
|
||||
| `{rounded.lg}` | 12px | Content cards (feature cards, testimonial cards, pricing tier cards) |
|
||||
| `{rounded.xl}` | 16px | Hero app-mockup card (a slightly larger radius for the marquee component) |
|
||||
| `{rounded.pill}` | 9999px | Nav-pill-group, badge pills |
|
||||
| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |
|
||||
|
||||
### Photography Geometry
|
||||
Avatar photos use `{rounded.full}` (perfect circles) at 36px or 40px. Product UI fragments inside marketing cards retain their native chrome (which often has its own internal radii — e.g., calendar grid cells, button rows). Hero illustration zones use 16:9 or 4:3 ratios with `{rounded.xl}` corners.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — White nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the Cal.com wordmark + logo at left (the lowercase "Cal.com" with the brand circle), primary horizontal menu (Product, Solutions, Resources, Pricing, Enterprise) center, right-side cluster with "Sign in" text-link, "Sign up free" `{component.button-primary}`, and a sometimes-visible language selector. Menu items in `{typography.nav-link}` (Inter 14px / 500).
|
||||
|
||||
**`nav-pill-group`** — A small pill-radius wrapper around 2-3 sub-nav segments (e.g., the product-mode switcher between "Personal" / "Teams" / "Enterprise"). Background `{colors.surface-soft}` with internal padding 6px, rounded `{rounded.pill}`. Active segment renders as a white-canvas pill with a subtle drop shadow inside the wrapper. The pill-in-pill treatment is one of Cal.com's signature interactive components.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature primary CTA. Background `{colors.primary}` (#111111), text `{colors.on-primary}`, type `{typography.button}` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). Active state `button-primary-active` shifts to `{colors.primary-active}` (#242424).
|
||||
|
||||
**`button-secondary`** — White button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border, same padding + height + radius as primary.
|
||||
|
||||
**`button-icon-circular`** — 36 × 36px circular icon button. Background `{colors.canvas}`, hairline border, ink-color icon. Used for share, "view more", carousel arrows.
|
||||
|
||||
**`button-text-link`** — Inline text button, no background. Used for "Sign in" in the top nav and inline CTA links inside cards.
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.ink}` (the brand keeps inline links monochrome). Underlined on hover (not documented per the no-hover policy, but mentioned for context).
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band`** — White-canvas hero with a 7-5 grid: h1 + sub-headline + button row on the left, `{component.hero-app-mockup-card}` on the right. Vertical padding `{spacing.section}` (96px).
|
||||
|
||||
**`hero-app-mockup-card`** — A larger product-UI mockup card showing the actual Cal.com booking widget with calendar grid, time slots, and a primary "Confirm" button inside. Background `{colors.canvas}`, 1px hairline border, rounded `{rounded.xl}` (16px), subtle drop shadow. Used as the hero's right-side artifact.
|
||||
|
||||
**`feature-card`** — Used in 3-up feature grids ("With us, appointment scheduling is easy"). Background `{colors.surface-card}` (#f5f5f5), rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Carries a small icon at top, an `{typography.title-md}` headline, and a body description in `{typography.body-md}`.
|
||||
|
||||
**`feature-icon-card`** — A simpler card variant used in 4-up feature grids on lower-density bands. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Carries a small icon, `{typography.title-sm}` title, short description.
|
||||
|
||||
**`product-mockup-card`** — A card showing actual Cal.com product UI fragments (workflow editor, calendar grid, integration grid, automation flow). Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). The product UI inside has its own internal chrome — these cards display the product, they don't decorate around it.
|
||||
|
||||
**`testimonial-card`** — Used in customer-quote grids. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Top row carries a `{component.avatar-circle}` + name + role; below sits the testimonial quote in `{typography.body-md}`.
|
||||
|
||||
**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Carries the plan name in `{typography.title-lg}`, price in `{typography.display-sm}`, feature checklist in `{typography.body-md}`, and a `{component.button-primary}` at the bottom.
|
||||
|
||||
**`pricing-tier-card-featured`** — The featured tier (typically "Teams"). Background flips to `{colors.surface-dark}` (#101010), text inverts to `{colors.on-dark}`. The dark surface IS the featured-tier signal — no accent border, no badge, no scale shift.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px. 1px hairline border in `{colors.hairline}`.
|
||||
|
||||
**`text-input-focused`** — Focus state. Border thickens or shifts to `{colors.ink}` for emphasis.
|
||||
|
||||
### Tags / Badges
|
||||
|
||||
**`badge-pill`** — Small pill label used for category tags ("Product", "Article", "New") and pastel-fill avatar substitutes. Background `{colors.surface-card}` or one of the badge pastels (`{colors.badge-orange}`, `{colors.badge-pink}`, etc.), text `{colors.ink}`, type `{typography.caption}` (13px / 500), rounded `{rounded.pill}`, padding 4px × 12px.
|
||||
|
||||
**`avatar-circle`** — 36px diameter, rounded `{rounded.full}`. Either holds a photo or a pastel fill with initials in `{typography.caption}`.
|
||||
|
||||
**`rating-stars`** — Inline star rating in `{colors.badge-orange}` (#fb923c). Used near testimonial avatars to display a 5-star satisfaction score.
|
||||
|
||||
### Tab / Filter
|
||||
|
||||
**`category-tab`** + **`category-tab-active`** — Used inside the nav-pill-group. Inactive: transparent background, `{colors.muted}` text. Active: `{colors.canvas}` background, `{colors.ink}` text, subtle drop shadow inside the pill-group wrapper. Padding 8px × 14px, rounded `{rounded.md}`.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-light`** — A pre-footer "Smarter, simpler scheduling" CTA card. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.xxl}` (48px). Carries an h2 in `{typography.display-sm}`, a sub-line, and a `{component.button-primary}` centered.
|
||||
|
||||
**`footer`** — Dark navy footer that closes every page. Background `{colors.surface-dark}` (#101010), text `{colors.on-dark-soft}`. 4-column link list at desktop covering Product / Solutions / Company / Resources. Vertical padding 64px. The Cal.com wordmark sits at the top-left in `{colors.on-dark}`. The footer is the only dark surface on every page — the deliberate inversion visually closes the page.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (#111111) for primary CTAs and h1/h2 type. Cal.com's button is near-black, not blue.
|
||||
- Use Cal Sans for every display headline. Pair with Inter body. Never blur the boundary.
|
||||
- Apply negative letter-spacing on display sizes (-0.5 to -2px). Cal Sans without it reads as off-brand.
|
||||
- Use `{component.feature-card}` (light gray) and `{component.product-mockup-card}` (white with chrome) deliberately — the gray cards signal "abstract feature claim", white cards signal "look at the actual product".
|
||||
- Embed real product UI fragments inside marketing cards. Don't paint marketing illustrations of the product when you can show the product itself.
|
||||
- Keep avatar circles at 36px, perfect circles, sometimes with pastel fills. Avatars are the only place where badge pastels appear.
|
||||
- Use `{component.nav-pill-group}` for grouped sub-nav segments. The pill-in-pill treatment is signature.
|
||||
- End every page with the dark footer. The light-to-dark transition is part of the editorial rhythm.
|
||||
|
||||
### Don't
|
||||
- Don't use accent colors (`{colors.brand-accent}`, badge pastels) on primary CTAs. The system is monochrome at the action layer.
|
||||
- Don't bold display weight beyond 600. Cal Sans at 700 reads as bombastic.
|
||||
- Don't use rounded radius beyond `{rounded.xl}` (16px) on cards. Larger radii read as consumer-app, not professional booking software.
|
||||
- Don't put dark surface cards anywhere except the footer and the featured pricing tier. The dark surface is a deliberate, scarce signal.
|
||||
- Don't repeat the same surface mode in two consecutive bands. Cal.com's pacing alternates white → light-gray → white → product-mockup-card → white → dark-footer.
|
||||
- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-app-mockup-card stacks below content; feature grids 1-up; pricing 1-up; footer 4 cols → 1 |
|
||||
| Tablet | 768–1024px | Top nav stays horizontal but tightens; nav-pill-group wraps; feature cards 2-up; pricing 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up pricing tiers |
|
||||
| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` at minimum 40 × 40px.
|
||||
- `{component.button-icon-circular}` at exactly 36 × 36 — slightly under WCAG's 44 × 44 but the centered icon and full-circle silhouette compensate.
|
||||
- `{component.text-input}` height is 40px.
|
||||
- `{component.category-tab}` rendered inside nav-pill-group has 8 × 14 padding; effective tap area meets 44px+ with the surrounding pill.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to hamburger at < 768px; menu opens as a full-screen sheet.
|
||||
- Hero band's 7-5 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the app-mockup card below.
|
||||
- Feature grids reduce columns rather than scaling cards down.
|
||||
- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
|
||||
- Nav-pill-group wraps to multi-row on tablet if the segments don't fit horizontally.
|
||||
- Avatar + testimonial card layouts stay grid-aligned at every breakpoint.
|
||||
|
||||
### Image Behavior
|
||||
- Product UI fragments inside cards retain native aspect ratios; the cards themselves resize.
|
||||
- Avatar photos crop to circles at every breakpoint.
|
||||
- Hero app-mockup card scales proportionally on mobile — the calendar grid stays legible.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key directly (`{component.feature-card}`, `{component.pricing-tier-card-featured}`).
|
||||
2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries in `components:`.
|
||||
3. Use `{token.refs}` everywhere — never inline hex.
|
||||
4. Never document hover. Default and Active/Pressed states only.
|
||||
5. Display headlines stay Cal Sans 600 with negative letter-spacing. Body stays Inter 400. The trinity does not blur.
|
||||
6. The dark footer is the only dark surface on most pages. Don't add other dark cards casually.
|
||||
7. When in doubt about emphasis: bigger Cal Sans before bolder Cal Sans.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The dembrandt frequency analyzer captured `Buttons: 0 variants` — Cal.com renders most CTAs as styled `<a>` link elements rather than `<button>` tags, which dembrandt's button selector doesn't capture. Button styles are documented from screenshot ground-truth + standard Cal Sans / Inter baselines.
|
||||
- Cal Sans is licensed to Cal.com and not available as a public web font; substitutes are documented in the typography section.
|
||||
- The badge pastel set (orange / pink / violet / emerald) is documented from observed avatar fill colors; exact hex values may shift seasonally.
|
||||
- Animation and transition timings (calendar slot picker, schedule confirmation, integration grid hover-reveal) are not in scope.
|
||||
- Form validation states beyond `{component.text-input-focused}` are not extracted — error / success states would need a sign-up or booking flow to confirm.
|
||||
- The actual booking widget surface (cal.com/{username}) is the product, not a marketing surface; its spec is out of scope.
|
||||
- Avatar photos in testimonial sections sometimes carry pastel circular fills with initials instead of photographs; both treatments coexist on the same page.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Cal Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/cal/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Canva
|
||||
description: "Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry."
|
||||
category: "Design & Creative"
|
||||
colors:
|
||||
palette: ["#ffffff", "#7d2ae8", "#00c4cc", "#ff5757", "#f4f5f7", "#e8eaed"]
|
||||
typography:
|
||||
fonts: "JetBrains Mono"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Canva
|
||||
|
||||
> Category: Design & Creative
|
||||
> Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Canva is the friendly face of design tools — the brand makes a point of looking inviting where Adobe looks intimidating. The page is built on a clean white canvas (`#ffffff`) with a signature **purple-to-blue gradient** (`#7d2ae8` → `#00c4cc`) used in the brand mark, hero buttons, and Pro/Magic moments. Surfaces are generously padded, edges are gently rounded (8–16px), and shadows are soft and cool-toned.
|
||||
|
||||
Typography uses **Canva Sans** (a custom geometric sans) for chrome and prose, with rounded letterforms that share DNA with brands like Airbnb and Asana. Weight contrast does the heavy lifting — 800 for hero display, 700 for section heads, 400 for body — while size hierarchy is more compressed than typical product brands so cards and templates read at a glance.
|
||||
|
||||
The shape system is ultra-soft: 12px on most cards, 16–20px on larger panels, 9999px on chips. Buttons are rectangles with a subtle elevation shadow (`0 2px 8px rgba(0,0,0,0.06)`) that grows on hover. Iconography is filled and rounded, never line-only — Canva's icons speak the same shape language as its UI.
|
||||
|
||||
**Key Characteristics:**
|
||||
- White canvas with a violet-to-cyan gradient (`#7d2ae8` → `#00c4cc`)
|
||||
- Canva Sans (rounded geometric) for everything; weight contrast over color
|
||||
- 12–20px radii everywhere; 9999px pills for chips and tags
|
||||
- Soft cool-toned shadows that grow on hover
|
||||
- Filled rounded iconography — never outlined
|
||||
- Vibrant secondary palette (coral, mint, tangerine) for category tags
|
||||
- Pro/Magic moments lit by a static gradient — no animation
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Brand Gradient
|
||||
- **Canva Purple** (`#7d2ae8`): Brand primary; gradient origin.
|
||||
- **Canva Cyan** (`#00c4cc`): Brand secondary; gradient terminus.
|
||||
- **Canva Pink** (`#ff5757`): Tertiary brand accent (Magic Studio).
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`#ffffff`): Primary background.
|
||||
- **Surface Subtle** (`#f4f5f7`): Section break, sidebar.
|
||||
- **Surface Inset** (`#e8eaed`): Disabled, inset block.
|
||||
- **Surface Cool** (`#eef0fc`): Hover tint on purple-themed cards.
|
||||
|
||||
### Ink & Text
|
||||
- **Ink Primary** (`#0e1318`): Primary text.
|
||||
- **Ink Secondary** (`#3c4043`): Body prose.
|
||||
- **Ink Muted** (`#5f6368`): Captions, descriptions.
|
||||
- **Ink Faint** (`#9aa0a6`): Placeholder, disabled label.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`#00b894`): Saved, exported.
|
||||
- **Warning** (`#ffb020`): Storage limit, advisory.
|
||||
- **Error** (`#ff5757`): Validation, destructive.
|
||||
- **Info** (`#0d99ff`): Tip, link.
|
||||
|
||||
### Category Accents (Template Tags)
|
||||
- **Coral** (`#ff7059`): Social posts.
|
||||
- **Tangerine** (`#ff9633`): Marketing.
|
||||
- **Mint** (`#48c997`): Education.
|
||||
- **Sky** (`#3ea6ff`): Business.
|
||||
- **Lavender** (`#9b87f5`): Personal.
|
||||
|
||||
### Border
|
||||
- **Border Default** (`#e1e3e6`): Standard hairline.
|
||||
- **Border Strong** (`#c7cdd3`): Emphasized border, hover state.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display / UI / Body**: `Canva Sans`, with fallback: `'YS Text', system-ui, -apple-system, sans-serif`
|
||||
- **Editorial (rare)**: `Canva Sans Display`, with fallback: `'Canva Sans', sans-serif`
|
||||
- **Code (devtools only)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Hero | Canva Sans | 64px (4rem) | 800 | 1.05 | -0.02em | Marketing hero, "Design anything." |
|
||||
| H1 | Canva Sans | 36px (2.25rem) | 700 | 1.15 | -0.01em | Page heading |
|
||||
| H2 | Canva Sans | 24px (1.5rem) | 700 | 1.2 | -0.005em | Section heading |
|
||||
| H3 | Canva Sans | 18px (1.125rem) | 600 | 1.3 | normal | Sub-section, card title |
|
||||
| Body Large | Canva Sans | 16px (1rem) | 400 | 1.55 | normal | Lede, marketing body |
|
||||
| Body | Canva Sans | 14px (0.875rem) | 400 | 1.5 | normal | Standard UI prose |
|
||||
| Caption | Canva Sans | 12px (0.75rem) | 500 | 1.4 | 0.005em | Metadata, hint text |
|
||||
| Button | Canva Sans | 14px (0.875rem) | 600 | 1.2 | normal | Default button label |
|
||||
| Tag | Canva Sans | 11px (0.6875rem) | 600 | 1.2 | 0.04em | Uppercase category chip |
|
||||
|
||||
### Principles
|
||||
- **Weight contrast over color contrast**: hierarchy steps via 800→700→600→400; the surface stays neutral.
|
||||
- **Tight line-height for cards**: card titles use 1.15–1.2 so a 3-line title still fits a 4:3 thumbnail.
|
||||
- **No display serif**: Canva is sans-only across all surfaces; serifs appear only as user-selectable template fonts inside the editor.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Gradient)**
|
||||
- Background: `linear-gradient(135deg, #7d2ae8, #00c4cc)`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px 20px
|
||||
- Radius: 8px
|
||||
- Shadow: `0 2px 8px rgba(125, 42, 232, 0.2)`
|
||||
- Hover: shadow grows to `0 4px 14px rgba(125, 42, 232, 0.3)`
|
||||
- Use: hero CTAs, "Try Canva Pro"
|
||||
|
||||
**Primary (Solid Purple)**
|
||||
- Background: `#7d2ae8`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px 20px
|
||||
- Radius: 8px
|
||||
- Hover: `#6815d4`
|
||||
|
||||
**Secondary**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0e1318`
|
||||
- Border: 1px solid `#e1e3e6`
|
||||
- Radius: 8px
|
||||
- Hover: background `#f4f5f7`, border `#c7cdd3`
|
||||
|
||||
**Subtle / Tertiary**
|
||||
- Background: `rgba(125, 42, 232, 0.08)`
|
||||
- Text: `#7d2ae8`
|
||||
- Hover: background `rgba(125, 42, 232, 0.14)`
|
||||
|
||||
### Cards / Template Tiles
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#e1e3e6`
|
||||
- Radius: 12px
|
||||
- Shadow at rest: `0 1px 3px rgba(0,0,0,0.04)`
|
||||
- Shadow on hover: `0 8px 24px rgba(0,0,0,0.08)`, lift 2px
|
||||
- Aspect ratio: thumbnail respects template (1:1, 4:3, 9:16)
|
||||
|
||||
### Inputs
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#e1e3e6`
|
||||
- Radius: 8px
|
||||
- Padding: 10px 14px
|
||||
- Focus: border `#7d2ae8`, ring `0 0 0 3px rgba(125, 42, 232, 0.16)`
|
||||
|
||||
### Chips / Tags
|
||||
- Background: category-tinted soft.
|
||||
- Text: matching strong category color.
|
||||
- Padding: 4px 10px
|
||||
- Radius: 9999px
|
||||
- Font: 11px / 600 / uppercase
|
||||
|
||||
### Pro Badge
|
||||
- Background: `linear-gradient(135deg, #7d2ae8, #ff5757)`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 2px 8px
|
||||
- Radius: 9999px
|
||||
- Font: 10px / 700 / uppercase
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
|
||||
- **Container**: max 1320px, 32px gutter.
|
||||
- **Sidebar (editor)**: 320px wide; collapses to 56px icons.
|
||||
- **Card grid gap**: 16px on mobile, 24px on desktop.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 180ms for hover; 280ms for menu open; 420ms for editor sidebar collapse.
|
||||
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` (Material-style).
|
||||
- **Card lift**: translateY(-2px) + shadow grow on hover, single transition.
|
||||
@@ -0,0 +1,212 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Cisco
|
||||
description: "Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity."
|
||||
category: "Backend & Data"
|
||||
colors:
|
||||
palette: ["#049fd9", "#64bbe3", "#005073", "#2b5592", "#39393b", "#58585b"]
|
||||
typography:
|
||||
fonts: "Inter, Helvetica Neue, Helvetica"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Cisco
|
||||
|
||||
> Category: Backend & Data
|
||||
> Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Cisco's current public web presence is enterprise infrastructure rendered with cinematic restraint. The canvas is dark but not pure black: layered navy-charcoal surfaces create depth without resorting to glossy startup gradients. Bright Cisco Blue is used as a precise signal color rather than a wash across the page. The overall impression is "serious global platform" rather than "friendly SaaS app" — large high-confidence headlines, quiet chrome, and product imagery that emphasizes scale, networking, observability, and resilience.
|
||||
|
||||
Typography is disciplined and corporate. Cisco's internal and presentation ecosystem points to `CiscoSansTT` as the preferred brand face, while the web experience remains compatible with modern grotesk fallbacks. Headings should feel concise and engineered. Body copy should read clearly and directly, not editorially. Geometrically, the system prefers soft pills for calls to action, rounded-but-not-playful cards, and glass-dark navigation shells floating over large atmospheric sections.
|
||||
|
||||
What makes Cisco distinct is the combination of **deep infrastructure darkness** with a **single electric trust signal**. Use blue for the moment that matters: primary action, focus, active tab, chart highlight, or key data edge. Let the rest of the interface stay disciplined.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dark navy-charcoal surfaces instead of flat black
|
||||
- Cisco Blue (`#049fd9`) as the primary signal color
|
||||
- Restrained neutral system built from grays and pale technical whites
|
||||
- Enterprise-scale headlines with compact, factual body copy
|
||||
- Pill CTAs and rounded control shells, but never toy-like UI
|
||||
- Product and platform imagery should suggest networks, telemetry, and systems at scale
|
||||
- Motion should feel controlled and infrastructural, not playful
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Cisco Blue** (`#049fd9`): High-signal accent, outline CTA, active state, key link.
|
||||
- **Status Blue** (`#64bbe3`): Focus halo, secondary emphasis, lightweight chart signal.
|
||||
- **Cisco Indigo** (`#005073`): Filled primary CTA, dense accent, deeper data emphasis.
|
||||
- **Dark Blue** (`#2b5592`): Secondary brand accent for graphics, charts, and layered blue compositions.
|
||||
|
||||
### Neutral / Surface
|
||||
- **Dark Gray 1** (`#39393b`): Mid-dark container surface, panel base, dense modules.
|
||||
- **Dark Gray 2** (`#58585b`): Borders, separators, secondary shells.
|
||||
- **Medium Gray 2** (`#9e9ea2`): Muted labels and low-emphasis metadata.
|
||||
- **Pale Gray 1** (`#e8ebf1`): Light text support, cool technical background tint, separators on dark.
|
||||
- **Core White** (`#ffffff`): Primary inverse text, bright UI foreground, light surface content.
|
||||
|
||||
### Support
|
||||
- **Sage Green** (`#abc233`): Positive outcome or infrastructure-health accent.
|
||||
- **Status Green** (`#6cc04a`): Success state.
|
||||
- **Status Yellow** (`#ffcc00`): Warning or caution state.
|
||||
- **Status Orange** (`#ff7300`): Alert or escalation state.
|
||||
- **Status Red** (`#cf2030`): Error or critical state.
|
||||
|
||||
### Recommended Surface Roles
|
||||
- **Primary canvas**: a blue-black or charcoal blend built around `#0f1720` to `#1b2530` using the Cisco palette as anchor.
|
||||
- **Elevated card**: Dark Gray 1 (`#39393b`) or a slightly bluer variant.
|
||||
- **Border / outline**: Dark Gray 2 (`#58585b`) with subtle transparency when needed.
|
||||
- **Primary text on dark**: Core White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`).
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `CiscoSansTT`, fallbacks: `Inter, Arial, Helvetica Neue, Helvetica, sans-serif`
|
||||
- **Mono / Technical**: `IBM Plex Mono`, `SF Mono`, or `ui-monospace` if a code-supporting mono face is needed for metrics and IDs
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Hero Display | CiscoSansTT | 72px | 500 | 1.05 | -1.6px | Large launch/positioning headline |
|
||||
| Section Display | CiscoSansTT | 56px | 500 | 1.08 | -1.1px | Major section statement |
|
||||
| Heading | CiscoSansTT | 32px | 500 | 1.20 | -0.4px | Feature title, card header |
|
||||
| Subheading | CiscoSansTT | 24px | 500 | 1.30 | -0.2px | Supporting header |
|
||||
| Body | CiscoSansTT | 16px | 400 | 1.55 | normal | Default body copy |
|
||||
| Body Small | CiscoSansTT | 14px | 400 | 1.50 | normal | Metadata, nav, helper text |
|
||||
| Label / Eyebrow | CiscoSansTT | 12px | 700 | 1.30 | 0.24px | Tags, overlines, section labels |
|
||||
| Button | CiscoSansTT | 16px | 500 | 1.20 | normal | CTA labels |
|
||||
|
||||
### Principles
|
||||
- Keep display typography decisive and compressed, but not ultra-light or editorial.
|
||||
- Body copy should be practical and highly legible, with no clever type effects.
|
||||
- Use bold weight mainly for short labels, status tags, and compact emphasis.
|
||||
- Favor one-family coherence over showy font mixing.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Action Pill**
|
||||
- Background: Cisco Indigo (`#005073`)
|
||||
- Text: White (`#ffffff`)
|
||||
- Radius: full pill
|
||||
- Padding: generous horizontal padding, medium vertical height
|
||||
- Hover: Dark Blue (`#2b5592`)
|
||||
- Active: a darker indigo tone around `#00364d`
|
||||
- Focus ring: 2px outer halo in Status Blue (`#64bbe3`) with a 1px white inner keyline on dark surfaces
|
||||
- Use case: high-priority submit, deploy, or "learn more" action on dark Cisco surfaces
|
||||
|
||||
**Signal Outline Pill**
|
||||
- Background: transparent
|
||||
- Text: Cisco Blue (`#049fd9`) on dark surfaces, Cisco Indigo (`#005073`) on light surfaces
|
||||
- Border: 1.5px Cisco Blue (`#049fd9`)
|
||||
- Radius: full pill
|
||||
- Hover: blue-tinted surface fill with the text color preserved
|
||||
- Focus ring: same visible halo pairing as the primary button
|
||||
- Use case: brand-forward secondary action that keeps Cisco Blue prominent without sacrificing contrast
|
||||
|
||||
**Secondary Dark Pill**
|
||||
- Background: transparent or dark surface
|
||||
- Text: White or Pale Gray 1
|
||||
- Border: Dark Gray 2 (`#58585b`)
|
||||
- Radius: full pill
|
||||
- Purpose: low-noise secondary CTA
|
||||
|
||||
### Cards & Containers
|
||||
- Background: layered dark surface based on `#39393b` or a cooler navy-charcoal adaptation
|
||||
- Border: 1px subtle border using `#58585b`
|
||||
- Radius: 16px to 20px
|
||||
- Shadow: minimal; depth should come mostly from surface contrast and spacing
|
||||
|
||||
### Navigation
|
||||
- Dark glass-like masthead or shell over a dark hero
|
||||
- Text: White / Pale Gray 1
|
||||
- Active state: Cisco Blue underline, chip, or glow
|
||||
- Navigation should feel like product chrome, not marketing candy
|
||||
|
||||
### Data / Product Modules
|
||||
- Charts and diagrams should use Cisco Blue as primary highlight and keep supporting colors minimal
|
||||
- Use green/yellow/red only for actual operational meaning
|
||||
- Dense technical blocks should still preserve breathing room and hierarchy
|
||||
|
||||
### Brand-Specific Recipes
|
||||
|
||||
**Network Telemetry Card**
|
||||
- Anatomy: eyebrow label, large metric, delta chip, 12-24h sparkline, quiet footer metadata
|
||||
- Density: compact but not cramped; 16px-24px padding with clear alignment to chart axes
|
||||
- States: normal, selected, degraded, critical, loading skeleton
|
||||
- Brand behavior: use Cisco Blue for the selected edge or sparkline, and semantic colors only for health state
|
||||
|
||||
**Topology / Product Diagram Module**
|
||||
- Anatomy: title, system canvas, node chips, connection lines, side legend
|
||||
- Visual rule: dark field first, blue path highlight second, all other nodes muted until active
|
||||
- States: idle overview, hovered path, selected node, degraded route
|
||||
|
||||
**Dense Control Panel**
|
||||
- Anatomy: left nav rail, filter bar, split metric region, log/event table, contextual right rail
|
||||
- Control sizing: compact 36px inputs are acceptable on desktop, but action buttons remain 44px minimum height
|
||||
- States: quiet default, blue active filter, clear warning/error escalation
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing & Grid
|
||||
- Base rhythm: 8px
|
||||
- Common scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
|
||||
- Prefer wide desktop containers and large sectional spacing
|
||||
- 12-column desktop layout with generous gutters works well for the brand
|
||||
- Breakpoints: mobile up to 767px, tablet 768px-1199px, desktop 1200px and above
|
||||
|
||||
### Composition
|
||||
- Alternate expansive hero/outcome sections with denser information bands
|
||||
- Use asymmetry where it serves product imagery or system diagrams
|
||||
- Large dark fields with one blue focal point are more on-brand than many small colorful fragments
|
||||
- On tablet, reduce wide split layouts to 2-column modules and keep telemetry cards in pairs
|
||||
- On mobile, collapse hero side-by-sides to a single column, stack data panels vertically, and convert dense control rows into progressive disclosure panels
|
||||
- Navigation should collapse from a full masthead to a compact menu button plus one primary CTA on tablet/mobile
|
||||
|
||||
### Accessibility & Responsiveness
|
||||
- Minimum touch target: 44px by 44px for any tappable control
|
||||
- Keyboard focus must remain visible on every interactive element via the blue outer halo plus white inner keyline pairing
|
||||
- Do not rely on hover-only disclosure; show essential state and actions on focus and touch
|
||||
- Preserve readable line lengths on desktop and avoid more than 3 cards per row on tablet or 1 card per row on small phones
|
||||
|
||||
## 6. Motion & Interaction
|
||||
|
||||
- Motion should be controlled, smooth, and systems-like
|
||||
- Use fade, rise, subtle slide, and restrained glow
|
||||
- Interaction timing: roughly 160ms–260ms for control response, 320ms–500ms for larger section reveals
|
||||
- Avoid bouncy springs, elastic easing, or playful overshoot
|
||||
- Respect `prefers-reduced-motion`: remove parallax and staged reveals, keep only instant state swaps or short opacity transitions under 120ms
|
||||
|
||||
## 7. Voice & Brand
|
||||
|
||||
- Voice is confident, technical, and outcome-oriented
|
||||
- Headlines should sound like platform positioning or systems value, not consumer lifestyle copy
|
||||
- Use language that suggests trust, resilience, infrastructure, AI readiness, and operational scale
|
||||
- The brand should feel global, mission-critical, and composed under pressure
|
||||
|
||||
## 8. Anti-patterns
|
||||
|
||||
- Do not turn Cisco into a generic gradient startup site
|
||||
- Do not flood the page with many equally loud accent colors
|
||||
- Do not use pastel palettes or lifestyle-illustration aesthetics
|
||||
- Do not use overly rounded, bubbly controls
|
||||
- Do not rely on pure black alone; use layered charcoals and deep blue-blacks instead
|
||||
- Do not make body copy feel whimsical, editorial, or ironic
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary signal: Cisco Blue (`#049fd9`)
|
||||
- Hover / secondary signal: Status Blue (`#64bbe3`)
|
||||
- Deep accent: Cisco Indigo (`#005073`)
|
||||
- Mid-dark surface: Dark Gray 1 (`#39393b`)
|
||||
- Border: Dark Gray 2 (`#58585b`)
|
||||
- Inverse text: White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a Cisco-style dark enterprise landing page with layered navy-charcoal surfaces, a bright Cisco Blue primary CTA, and a 72px high-confidence hero headline."
|
||||
- "Design a technical dashboard card on a dark surface with a subtle gray border, white text, and Cisco Blue chart highlights."
|
||||
- "Build a dark glass navigation bar with restrained white labels and one Cisco Blue active indicator."
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Claude
|
||||
description: "A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display (\"Copernicus\" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark."
|
||||
|
||||
colors:
|
||||
primary: "#cc785c"
|
||||
primary-active: "#a9583e"
|
||||
primary-disabled: "#e6dfd8"
|
||||
ink: "#141413"
|
||||
body: "#3d3d3a"
|
||||
body-strong: "#252523"
|
||||
muted: "#6c6a64"
|
||||
muted-soft: "#8e8b82"
|
||||
hairline: "#e6dfd8"
|
||||
hairline-soft: "#ebe6df"
|
||||
canvas: "#faf9f5"
|
||||
surface-soft: "#f5f0e8"
|
||||
surface-card: "#efe9de"
|
||||
surface-cream-strong: "#e8e0d2"
|
||||
surface-dark: "#181715"
|
||||
surface-dark-elevated: "#252320"
|
||||
surface-dark-soft: "#1f1e1b"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#faf9f5"
|
||||
on-dark-soft: "#a09d96"
|
||||
accent-teal: "#5db8a6"
|
||||
accent-amber: "#e8a55a"
|
||||
success: "#5db872"
|
||||
warning: "#d4a017"
|
||||
error: "#c64545"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -1.5px
|
||||
display-lg:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1px
|
||||
display-md:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -0.5px
|
||||
display-sm:
|
||||
fontFamily: "Copernicus, Tiempos Headline, serif"
|
||||
fontSize: 28px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.3px
|
||||
title-lg:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 22px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 0
|
||||
title-md:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 1.5px
|
||||
code:
|
||||
fontFamily: "JetBrains Mono, ui-monospace, monospace"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.6
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "StyreneB, Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.muted}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-secondary-on-dark:
|
||||
backgroundColor: "{colors.surface-dark-elevated}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
button-text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 36px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-md}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
hero-illustration-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xl}"
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
product-mockup-card-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
code-window-card:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
model-comparison-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-card-featured:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
callout-card-coral:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
connector-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
height: 40px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.md}"
|
||||
cookie-consent-card:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
category-tab:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.nav-link}"
|
||||
padding: 8px 14px
|
||||
rounded: "{rounded.md}"
|
||||
category-tab-active:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.md}"
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
badge-coral:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
cta-band-coral:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 64px
|
||||
cta-band-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 64px
|
||||
footer:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark-soft}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Claude.com is the warmest, most editorial interface in the AI-product category. The base atmosphere is a **tinted cream canvas** (`{colors.canvas}` — #faf9f5) — distinctly warm, deliberately not the cool gray-white that every other AI brand uses. Headlines run a **slab-serif display** ("Copernicus" / Tiempos Headline) at weight 400 with negative letter-spacing, paired with **StyreneB / Inter** body sans. The combination feels like a literary publication, not a SaaS marketing page.
|
||||
|
||||
Brand voltage comes from the **cream + coral pairing** — coral (`{colors.primary}` — #cc785c) is the signature Anthropic accent, used on every primary CTA, on the brand wordmark, and on full-bleed callout cards. The coral is warm, slightly muted, never cyan/blue — a deliberate counter-positioning against OpenAI's cool slate, Google's saturated blue, and Microsoft's corporate cyan.
|
||||
|
||||
The system has three surface modes that alternate page-by-page:
|
||||
1. **Cream canvas** (`{colors.canvas}`) — default body floor
|
||||
2. **Light cream cards** (`{colors.surface-card}`) — feature card backgrounds
|
||||
3. **Dark navy product surfaces** (`{colors.surface-dark}`) — code editor mockups, model showcase cards, pre-footer CTAs, footer itself
|
||||
|
||||
The dark surfaces are where Claude shows its product chrome — code blocks, terminal output, model comparison tables, agentic-flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm cream canvas (`{colors.canvas}` — #faf9f5) with dark warm-ink text (`{colors.ink}` — #141413). The brand's defining color choice.
|
||||
- Coral primary CTA (`{colors.primary}` — #cc785c). Used scarcely on individual buttons, generously on full-bleed coral callout cards.
|
||||
- Slab-serif display headlines via Copernicus / Tiempos Headline at weight 400 with negative letter-spacing. Pairs with humanist sans body for a literary editorial voice.
|
||||
- Dark navy product mockup cards (`{colors.surface-dark}` — #181715) carrying code blocks, terminal panels, model comparison data — the brand shows the product chrome at scale rather than abstract marketing illustrations.
|
||||
- Light cream feature cards (`{colors.surface-card}` — #efe9de) — slightly darker than canvas, used for content-driven feature explanations.
|
||||
- Anthropic radial-spike mark — a small black asterisk-like glyph (4-spoke radial) — appears as the brand wordmark prefix and as a content marker.
|
||||
- Border radius is hierarchical: `{rounded.md}` (8px) for buttons + inputs, `{rounded.lg}` (12px) for content + product cards, `{rounded.xl}` (16px) for the hero illustration container, `{rounded.pill}` for badges.
|
||||
- Section rhythm `{spacing.section}` (96px) — modern-SaaS standard. Internal card padding stays generous at `{spacing.xl}` (32px).
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Coral / Primary** (`{colors.primary}` — #cc785c): The signature Anthropic warm coral. Used on every primary CTA background, on full-bleed coral callout cards, on the brand wordmark accent. The most-recognized Anthropic color outside of the spike-mark logo.
|
||||
- **Coral Active** (`{colors.primary-active}` — #a9583e): The press / hover-darker variant.
|
||||
- **Coral Disabled** (`{colors.primary-disabled}` — #e6dfd8): A desaturated cream-tinted disabled state.
|
||||
- **Accent Teal** (`{colors.accent-teal}` — #5db8a6): Used sparingly on secondary product surfaces (terminal status indicators, "active connection" dots in connectors page).
|
||||
- **Accent Amber** (`{colors.accent-amber}` — #e8a55a): A small companion warm-tone used on category badges and inline highlights.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #faf9f5): The default page floor. Tinted cream — warm, deliberately not pure white.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #f5f0e8): Section dividers, very-soft band backgrounds.
|
||||
- **Surface Card** (`{colors.surface-card}` — #efe9de): Feature cards, content cards. One step darker than canvas.
|
||||
- **Surface Cream Strong** (`{colors.surface-cream-strong}` — #e8e0d2): A strongest-cream variant used on selected category tabs and emphasized section bands.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #181715): Code editor mockups, model showcase cards, footer. The dominant dark surface.
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #252320): Elevated cards inside dark bands (settings panels in mockups).
|
||||
- **Surface Dark Soft** (`{colors.surface-dark-soft}` — #1f1e1b): Slightly lighter dark, used for code block backgrounds inside larger dark cards.
|
||||
- **Hairline** (`{colors.hairline}` — #e6dfd8): The 1px border tone on cream surfaces. Same hex as `{colors.primary-disabled}` — borders feel like one elevation step rather than ink lines.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #ebe6df): Barely-visible divider used inside the same band.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #141413): All headlines and primary text. Warm dark, slightly off-pure-black.
|
||||
- **Body Strong** (`{colors.body-strong}` — #252523): Emphasized paragraphs, lead text.
|
||||
- **Body** (`{colors.body}` — #3d3d3a): Default running-text color.
|
||||
- **Muted** (`{colors.muted}` — #6c6a64): Sub-headings, breadcrumbs, footer-adjacent secondary text.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #8e8b82): Captions, fine-print, copyright lines.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): Text on coral buttons.
|
||||
- **On Dark** (`{colors.on-dark}` — #faf9f5): Cream-tinted white used on dark surfaces (echoes the canvas tone).
|
||||
- **On Dark Soft** (`{colors.on-dark-soft}` — #a09d96): Footer body text, secondary labels in dark mockups.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.success}` — #5db872): Green status dots, "available" indicators.
|
||||
- **Warning** (`{colors.warning}` — #d4a017): Warning callouts (rare on marketing surfaces).
|
||||
- **Error** (`{colors.error}` — #c64545): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **Copernicus** (or **Tiempos Headline** as substitute) as the slab-serif display face for headlines, and **StyreneB** (or **Inter** as substitute) as the humanist sans for body, navigation, and UI labels. **JetBrains Mono** handles code blocks. The fallback stack walks `Tiempos Headline, Garamond, "Times New Roman", serif` for display and `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for body.
|
||||
|
||||
The display/body split is editorial:
|
||||
- Copernicus serif (weight 400, negative tracking) → h1, h2, h3, hero display
|
||||
- StyreneB sans (weight 400-500) → body, navigation, buttons, captions, labels
|
||||
- JetBrains Mono → all code blocks and terminal text
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 64px | 400 | 1.05 | -1.5px | Homepage h1 ("Meet your thinking partner") — Copernicus serif |
|
||||
| `{typography.display-lg}` | 48px | 400 | 1.1 | -1px | Section heads — Copernicus |
|
||||
| `{typography.display-md}` | 36px | 400 | 1.15 | -0.5px | Sub-section heads, model names — Copernicus |
|
||||
| `{typography.display-sm}` | 28px | 400 | 1.2 | -0.3px | Pricing tier names, callout headlines — Copernicus |
|
||||
| `{typography.title-lg}` | 22px | 500 | 1.3 | 0 | Pricing plan size labels — StyreneB |
|
||||
| `{typography.title-md}` | 18px | 500 | 1.4 | 0 | Feature card titles, intro paragraphs |
|
||||
| `{typography.title-sm}` | 16px | 500 | 1.4 | 0 | Connector tile titles, list labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text — StyreneB |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |
|
||||
| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |
|
||||
| `{typography.caption-uppercase}` | 12px | 500 | 1.4 | 1.5px | Category tags, "NEW" badges |
|
||||
| `{typography.code}` | 14px | 400 | 1.6 | 0 | Code blocks — JetBrains Mono |
|
||||
| `{typography.button}` | 14px | 500 | 1.0 | 0 | Standard button labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
Display sizes use weight 400 (regular), never bold. Negative letter-spacing (-0.3 to -1.5px) is essential — Copernicus without it reads as off-brand. The serif character is what gives Anthropic its literary, considered voice; switching to a sans-serif display would make Claude feel like every other AI tool.
|
||||
|
||||
Body type stays at weight 400 for paragraphs, weight 500 for labels and emphasized phrases. The sans body is humanist (StyreneB) — never geometric. Inter is an acceptable substitute because of its similar humanist proportions; Helvetica or Arial would be too neutral and break the warm-editorial feel.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If Copernicus / Tiempos Headline is unavailable, **Cormorant Garamond** at weight 500 with -0.02em letter-spacing is the closest open-source approximation. **EB Garamond** is a fallback. For StyreneB, **Inter** is the closest match — both are humanist sans designed for screen reading. **Söhne** is another close alternative if licensed.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** `{spacing.section}` (96px) — modern-SaaS rhythm.
|
||||
- **Card internal padding:** `{spacing.xl}` (32px) for feature cards, pricing tier cards, model comparison cards; `{spacing.lg}` (24px) for code-window cards and connector tiles.
|
||||
- **Callout / CTA bands:** `{spacing.xxl}` (48px) inside coral callout cards; 64px inside the larger dark CTA band.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1200px centered.
|
||||
- **Editorial body:** Single 12-column grid; hero often uses 6/6 split (h1 left, illustration right).
|
||||
- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Connector tile grids:** 4-up or 6-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Pricing grid:** 3-up at desktop (Free / Pro / Team / Enterprise often), 1-up at mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
The cream canvas + serif display + generous internal padding create an editorial pacing — Claude reads like a long-form magazine column rather than a marketing template. Whitespace between bands stays uniform at 96px; whitespace inside cards is generous (32px), letting type breathe.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, hero bands |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Inputs, sub-nav, occasionally on cards |
|
||||
| Cream card | `{colors.surface-card}` background — no shadow | Feature cards, content cards |
|
||||
| Dark surface card | `{colors.surface-dark}` background — no shadow | Code editor mockups, model showcase cards |
|
||||
| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (the system uses `0 1px 3px rgba(20,20,19,0.08)` rarely) |
|
||||
|
||||
The elevation philosophy is **color-block first, shadow rare**. Most depth comes from the cream-vs-dark surface contrast. Shadows are minimal. The dark surface mockups have their own internal product chrome (code editor scrollbars, line numbers, syntax highlighting) which adds detail without needing external shadows.
|
||||
|
||||
### Decorative Depth
|
||||
- The Anthropic spike-mark glyph (4-spoke radial asterisk) appears as a small black mark in the brand wordmark and inline as a content marker.
|
||||
- Code editor mockups carry their own internal depth: syntax-highlighted text in muted blues / oranges / grays, line numbers in `{colors.muted-soft}`, status bars at the bottom in `{colors.surface-dark-elevated}`.
|
||||
- Some hero illustrations use simple line-art with coral and dark-navy strokes on cream — minimal, hand-drawn-feeling, never photorealistic.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Reserved for badge accents and tiny dropdowns |
|
||||
| `{rounded.sm}` | 6px | Small inline buttons, dropdown items |
|
||||
| `{rounded.md}` | 8px | Standard CTA buttons, text inputs, category tabs |
|
||||
| `{rounded.lg}` | 12px | Content cards (feature, pricing, code-window, model-comparison) |
|
||||
| `{rounded.xl}` | 16px | Hero illustration container, the larger marquee components |
|
||||
| `{rounded.pill}` | 9999px | Badge pills, "NEW" tags |
|
||||
| `{rounded.full}` | 9999px / 50% | Avatar substitutes, icon buttons |
|
||||
|
||||
### Photography & Illustrations
|
||||
Claude's hero rarely uses photography. Instead it uses:
|
||||
- Simple line-art illustrations with coral + dark-navy strokes on the cream canvas
|
||||
- Code editor mockups (the dominant "hero" treatment on developer-focused pages)
|
||||
- Terminal output mockups with monospace text on dark
|
||||
- Model comparison cards (Opus / Sonnet / Haiku) with abstract geometric thumbnails
|
||||
|
||||
When photography is used (rare — mostly testimonials), avatars crop to perfect circles at 40px diameter.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Cream nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the Anthropic spike-mark + "Claude" wordmark at left, primary horizontal menu (Product, Solutions, Use Cases, Pricing, Research, Company) center-left, right-side cluster with "Sign in" text-link, "Try Claude" `{component.button-primary}` (coral). Menu items in `{typography.nav-link}` (StyreneB 14px / 500).
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature coral CTA. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), type `{typography.button}` (StyreneB 14px / 500), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). Active state `button-primary-active` darkens to `{colors.primary-active}` (#a9583e).
|
||||
|
||||
**`button-secondary`** — Cream button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border, same padding + height + radius as primary.
|
||||
|
||||
**`button-secondary-on-dark`** — Used over `{colors.surface-dark}` cards. Background `{colors.surface-dark-elevated}` (#252320), text `{colors.on-dark}`. Stays dark — the system never inverts to a light secondary on dark surfaces.
|
||||
|
||||
**`button-text-link`** — Inline text button, no background. Used for "Sign in" in the top nav and inline CTA links.
|
||||
|
||||
**`button-icon-circular`** — 36px circular icon button. Background `{colors.canvas}`, hairline border, ink-color icon. Used for carousel arrows, share, "view more".
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.primary}` (the coral). Underlined on press; the coral inline link is one of the system's most distinctive small details.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band`** — Cream-canvas hero with a 6-6 grid: h1 + sub-headline + button row on the left, hero illustration card or product mockup card on the right. Vertical padding `{spacing.section}` (96px).
|
||||
|
||||
**`hero-illustration-card`** — A larger card holding the hero's right-side artifact — sometimes a coral-stroke line illustration on cream background, sometimes a dark code editor mockup. Background `{colors.canvas}` or `{colors.surface-dark}` depending on context, rounded `{rounded.xl}` (16px).
|
||||
|
||||
**`feature-card`** — Used in 3-up feature grids. Background `{colors.surface-card}` (#efe9de — slightly darker cream), rounded `{rounded.lg}` (12px), internal padding `{spacing.xl}` (32px). Carries a small icon at top, an `{typography.title-md}` headline, and a body description in `{typography.body-md}`.
|
||||
|
||||
**`product-mockup-card-dark`** — Dark navy card showing actual Claude product chrome (chat interface, code editor, agent controls). Background `{colors.surface-dark}`, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries text labels in `{colors.on-dark}` and product UI fragments below.
|
||||
|
||||
**`code-window-card`** — A specialized dark card showing a code editor with line numbers, syntax-highlighted code in `{typography.code}` (JetBrains Mono), and sometimes a "Run" button or terminal output panel below. Background `{colors.surface-dark}` with `{colors.surface-dark-soft}` for the inner code block, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). The signature visual element of Claude Code product pages.
|
||||
|
||||
**`model-comparison-card`** — Used on the homepage's "Which problem are you up against?" section comparing Opus / Sonnet / Haiku. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, internal padding `{spacing.xl}` (32px). Carries the model name, a short capability blurb, and a `{component.text-link}` to learn more.
|
||||
|
||||
**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px). Carries the plan name in `{typography.title-lg}` (StyreneB), price in `{typography.display-sm}` (Copernicus serif!), feature checklist in `{typography.body-md}`, and a `{component.button-primary}` at the bottom.
|
||||
|
||||
**`pricing-tier-card-featured`** — The featured tier (typically "Pro" or "Team"). Background flips to `{colors.surface-dark}`, text inverts to `{colors.on-dark}`. The dark surface IS the featured-tier signal.
|
||||
|
||||
**`callout-card-coral`** — A full-bleed coral card carrying a major call-to-action. Background `{colors.primary}` (#cc785c), text `{colors.on-primary}` (white), rounded `{rounded.lg}`, padding `{spacing.xxl}` (48px). The coral surface IS the voltage; the CTA inside uses an inverted button style (cream/canvas button on coral).
|
||||
|
||||
**`connector-tile`** — Used on the connectors page's integration grid. Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding 20px. Each tile carries a logo at top, a `{typography.title-sm}` connector name, and a short description.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px. 1px hairline border in `{colors.hairline}`.
|
||||
|
||||
**`text-input-focused`** — Focus state. Border thickens or shifts to `{colors.primary}` (coral) for emphasis. Carries a 3px coral-at-15%-alpha outer ring.
|
||||
|
||||
**`cookie-consent-card`** — Bottom-right floating dark cookie banner. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). One of the few places dark surface appears at small scale on cream pages.
|
||||
|
||||
### Tags / Badges
|
||||
|
||||
**`badge-pill`** — Small pill label used for category tags. Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.caption}` (13px / 500), rounded `{rounded.pill}`, padding 4px × 12px.
|
||||
|
||||
**`badge-coral`** — Coral-fill badge for "NEW", "BETA", featured highlights. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption-uppercase}` (12px / 500 / 1.5px tracking), rounded `{rounded.pill}`, padding 4px × 12px.
|
||||
|
||||
### Tab / Filter
|
||||
|
||||
**`category-tab`** + **`category-tab-active`** — Used in sub-nav rows on solutions / connectors pages. Inactive: transparent background, `{colors.muted}` text. Active: `{colors.surface-card}` background, `{colors.ink}` text. Padding 8px × 14px, rounded `{rounded.md}`.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-coral`** — A pre-footer "Try Claude" CTA card. Full-width coral fill, white type, rounded `{rounded.lg}`, padding 64px. Carries an h2 in `{typography.display-sm}` (still serif!), a sub-line, and a cream-button CTA.
|
||||
|
||||
**`cta-band-dark`** — Alternative pre-footer band on developer-focused pages. Background `{colors.surface-dark}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding 64px. Often pairs with a code-window card.
|
||||
|
||||
**`footer`** — Dark navy footer that closes every page. Background `{colors.surface-dark}` (#181715), text `{colors.on-dark-soft}`. 4-column link list at desktop covering Product / Company / Resources / Legal. Vertical padding 64px. The Anthropic spike-mark + "Anthropic" wordmark sits at the top in `{colors.on-dark}`. The footer never inverts.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Anchor every page on the cream canvas. Pure white reads as "any other AI tool"; the warm tint is the brand differentiator.
|
||||
- Use Copernicus serif for every display headline. Pair with StyreneB sans body. Negative letter-spacing on display sizes is non-negotiable.
|
||||
- Reserve `{colors.primary}` (coral) for primary CTAs and full-bleed `{component.callout-card-coral}` moments. Don't paint accent moments coral elsewhere.
|
||||
- Use `{component.product-mockup-card-dark}` and `{component.code-window-card}` to show actual Claude product chrome. Don't paint marketing illustrations of code when you can show real code.
|
||||
- Pair `{component.feature-card}` (cream) with `{component.product-mockup-card-dark}` (navy) in alternating bands. The cream-to-dark rhythm is the brand's pacing mechanism.
|
||||
- Use the Anthropic spike-mark glyph as the brand wordmark prefix. Never invert the mark to white-on-dark within the wordmark itself.
|
||||
- Apply `{spacing.section}` (96px) between major bands.
|
||||
|
||||
### Don't
|
||||
- Don't use cool grays or pure white for canvas. Cream is the brand.
|
||||
- Don't bold serif display weight. Copernicus at 700 reads as bombastic; the system stays at 400.
|
||||
- Don't use cool blue or saturated cyan as a brand accent. The coral is the brand voltage.
|
||||
- Don't put coral everywhere. The coral is scarce on individual elements and generous only on full-bleed coral callout cards.
|
||||
- Don't use Inter for display headlines. The serif character is the brand voice.
|
||||
- Don't repeat the same surface mode in two consecutive bands. The pacing alternates: cream → cream-card → dark-mockup → cream → coral-callout → dark-footer.
|
||||
- Don't add hover state styling beyond what the system already encodes — primary darkens on press; nothing else changes.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 64→32px; hero-illustration-card stacks below content; feature grids 1-up; connector tiles 2-up; pricing 1-up; footer 4 cols → 1 |
|
||||
| Tablet | 768–1024px | Top nav stays horizontal but tightens; feature cards 2-up; connector tiles 3-up; pricing 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav with all menu items; 3-up feature cards; 4-up or 6-up connector tiles; 3-up pricing tiers |
|
||||
| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at 1200px |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` at minimum 40 × 40px.
|
||||
- `{component.button-icon-circular}` at exactly 36 × 36 — slightly under WCAG 44 but visually centered.
|
||||
- `{component.text-input}` height is 40px.
|
||||
- Connector tile entire card area is tappable; effective tap area >> 44px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.
|
||||
- Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.
|
||||
- Feature grids reduce columns rather than scaling cards down.
|
||||
- Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
|
||||
- Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.
|
||||
|
||||
### Image Behavior
|
||||
- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
|
||||
- Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.
|
||||
- Avatar photos in testimonials crop to circles at every breakpoint.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key (`{component.feature-card}`, `{component.code-window-card}`).
|
||||
2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries in `components:`.
|
||||
3. Use `{token.refs}` everywhere — never inline hex.
|
||||
4. Never document hover. Default and Active/Pressed states only.
|
||||
5. Display headlines stay Copernicus serif 400 with negative tracking. Body stays StyreneB / Inter 400. The split is unbreakable.
|
||||
6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).
|
||||
7. When in doubt about emphasis: bigger Copernicus serif before bolder weight.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Copernicus and StyreneB are licensed Anthropic typefaces and not available as public web fonts. Substitutes (Tiempos Headline / Cormorant Garamond / EB Garamond for serif; Inter / Söhne for sans) are documented in the typography section.
|
||||
- The Anthropic radial-spike-mark is a brand glyph rendered as inline SVG; it's not formalized as a system token here. Treat it as a logo asset.
|
||||
- Animation and transition timings (chat message reveal, code block typewriter effect on the homepage, agentic-flow diagram animations) are not in scope.
|
||||
- Form validation states beyond `{component.text-input-focused}` are not extracted — error / success states would need a sign-up or feedback flow to confirm.
|
||||
- The actual Claude product surface (claude.ai chat interface) shares some tokens with the marketing site but adds many product-specific components (chat bubbles, message tools, file upload chips, conversation history sidebar) that are out of scope for this marketing-surface document.
|
||||
- The "agent" / "computer use" demo cards on certain pages display animated Claude controlling a browser — the static screenshot doesn't fully capture the animation chrome.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Claude Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/claude/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,541 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Clay
|
||||
description: "A vibrant claymation-meets-data interface for Clay.com (GTM data-orchestration platform). Anchors on white canvas with dark-navy primary CTAs, custom rounded display type, and saturated single-color feature cards — hot pink, deep teal, lavender, peach, ochre — that punctuate long-scroll explainer pages. Brand voltage comes from 3D-rendered claymation illustrations (mountains, characters, mascots) used as full-bleed hero artifacts and the bright multi-color card surfaces showing product UI fragments."
|
||||
|
||||
colors:
|
||||
primary: "#0a0a0a"
|
||||
primary-active: "#1f1f1f"
|
||||
primary-disabled: "#e5e5e5"
|
||||
ink: "#0a0a0a"
|
||||
body: "#3a3a3a"
|
||||
body-strong: "#1a1a1a"
|
||||
muted: "#6a6a6a"
|
||||
muted-soft: "#9a9a9a"
|
||||
hairline: "#e5e5e5"
|
||||
hairline-soft: "#f0f0f0"
|
||||
canvas: "#fffaf0"
|
||||
surface-soft: "#faf5e8"
|
||||
surface-card: "#f5f0e0"
|
||||
surface-strong: "#ebe6d6"
|
||||
surface-dark: "#0a1a1a"
|
||||
surface-dark-elevated: "#1a2a2a"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-soft: "#a0a0a0"
|
||||
brand-pink: "#ff4d8b"
|
||||
brand-teal: "#1a3a3a"
|
||||
brand-lavender: "#b8a4ed"
|
||||
brand-peach: "#ffb084"
|
||||
brand-ochre: "#e8b94a"
|
||||
brand-mint: "#a4d4c5"
|
||||
brand-coral: "#ff6b5a"
|
||||
success: "#22c55e"
|
||||
warning: "#f59e0b"
|
||||
error: "#ef4444"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "Plain Black, Inter, sans-serif"
|
||||
fontSize: 72px
|
||||
fontWeight: 500
|
||||
lineHeight: 1
|
||||
letterSpacing: -2.5px
|
||||
display-lg:
|
||||
fontFamily: "Plain Black, Inter, sans-serif"
|
||||
fontSize: 56px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -2px
|
||||
display-md:
|
||||
fontFamily: "Plain Black, Inter, sans-serif"
|
||||
fontSize: 40px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1px
|
||||
display-sm:
|
||||
fontFamily: "Plain Black, Inter, sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -0.5px
|
||||
title-lg:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.3
|
||||
letterSpacing: -0.3px
|
||||
title-md:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 1.5px
|
||||
button:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 6px
|
||||
sm: 8px
|
||||
md: 12px
|
||||
lg: 16px
|
||||
xl: 24px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.muted}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
button-on-color:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
button-text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
hero-illustration-card:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xl}"
|
||||
feature-card-pink:
|
||||
backgroundColor: "{colors.brand-pink}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
feature-card-teal:
|
||||
backgroundColor: "{colors.brand-teal}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
feature-card-lavender:
|
||||
backgroundColor: "{colors.brand-lavender}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
feature-card-peach:
|
||||
backgroundColor: "{colors.brand-peach}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
feature-card-ochre:
|
||||
backgroundColor: "{colors.brand-ochre}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
feature-card-cream:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
product-mockup-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
testimonial-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-card-featured:
|
||||
backgroundColor: "{colors.brand-teal}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 16px
|
||||
height: 44px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.md}"
|
||||
category-tab:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 16px
|
||||
category-tab-active:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.pill}"
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
expert-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
cta-band-illustrated:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 80px
|
||||
footer:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 80px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Clay.com is the most playful B2B SaaS interface in the GTM-data category. The base atmosphere is **cream-tinted white canvas** (`{colors.canvas}` — #fffaf0) holding dark-navy ink type and **3D-rendered claymation illustrations** (mountains, mascot characters, peach/ochre/lavender landscapes) as the dominant brand voltage. Where most data-platform brands play it cool with grids and gradients, Clay leans hard into hand-crafted-looking 3D illustrations and saturated single-color feature cards.
|
||||
|
||||
Type voice runs **Plain Black** (or substituted with Inter weight 500-600) — a custom rounded display face used at very large sizes (72px hero) with negative letter-spacing. Body type uses Inter at standard weights. The display weight stays at 500, never bolder — the rounded character of the typeface gives it warmth without needing weight.
|
||||
|
||||
Component voltage comes from **saturated single-color feature cards** in a 6-color palette: hot pink, deep teal, lavender, peach, ochre, and cream-card. Each card shows product UI fragments at small scale — Claygent agent runs, sequencer flows, CRM enrichment outputs. The colored card IS the primary visual element on every long-scroll page.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Cream-tinted white canvas (`{colors.canvas}` — #fffaf0). The warmth differentiates Clay from cool-gray competitor sites.
|
||||
- Dark navy/black primary CTAs (`{colors.primary}` — #0a0a0a). Buttons rounded `{rounded.md}` (12px) — friendly modern but not pill.
|
||||
- 6-color saturated feature card palette: `{colors.brand-pink}`, `{colors.brand-teal}`, `{colors.brand-lavender}`, `{colors.brand-peach}`, `{colors.brand-ochre}`, `{colors.surface-card}` (cream).
|
||||
- 3D claymation illustrations (mountains, characters, abstract shapes) as full-bleed hero artifacts — the brand's most-recognized visual element.
|
||||
- Custom rounded Plain Black display typeface at 500 weight with -1 to -2.5px letter-spacing on display sizes.
|
||||
- Border radius is generous: `{rounded.md}` (12px) for buttons + inputs, `{rounded.lg}` (16px) for content cards, `{rounded.xl}` (24px) for feature cards. The bigger radius matches the rounded display type's character.
|
||||
- Product UI fragments embedded inside colored cards at small scale — agent run logs, sequencer flows, enrichment results.
|
||||
- Section rhythm `{spacing.section}` (96px) between major bands.
|
||||
- Footer is cream-tinted (`{colors.surface-soft}`) — Clay does NOT use a dark footer. Even the closing band stays warm-light.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Primary** (`{colors.primary}` — #0a0a0a): All primary CTAs, h1/h2 ink type. Near-black with slight warmth.
|
||||
- **Brand Pink** (`{colors.brand-pink}` — #ff4d8b): Hot-pink feature card surface. Sequencer / outbound feature pages.
|
||||
- **Brand Teal** (`{colors.brand-teal}` — #1a3a3a): Deep teal-green feature card. Often the featured pricing tier.
|
||||
- **Brand Lavender** (`{colors.brand-lavender}` — #b8a4ed): Soft lavender feature card.
|
||||
- **Brand Peach** (`{colors.brand-peach}` — #ffb084): Warm peach feature card.
|
||||
- **Brand Ochre** (`{colors.brand-ochre}` — #e8b94a): Mustard / ochre feature card and illustration accents.
|
||||
- **Brand Mint** (`{colors.brand-mint}` — #a4d4c5): Mint accent on illustrations and small badges.
|
||||
- **Brand Coral** (`{colors.brand-coral}` — #ff6b5a): Coral accent for highlights.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #fffaf0): The default page floor. Cream-tinted white.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #faf5e8): Footer and CTA-band background.
|
||||
- **Surface Card** (`{colors.surface-card}` — #f5f0e0): Cream feature cards, testimonial cards.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #ebe6d6): Stronger cream for emphasized bands.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #0a1a1a): Dark teal-tinted near-black for occasional dark cards (rare).
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a2a2a): Elevated dark cards.
|
||||
- **Hairline** (`{colors.hairline}` — #e5e5e5): 1px borders on cards and inputs.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #0a0a0a): Headlines and primary text.
|
||||
- **Body Strong** (`{colors.body-strong}` — #1a1a1a): Emphasized body, lead paragraphs.
|
||||
- **Body** (`{colors.body}` — #3a3a3a): Default running-text.
|
||||
- **Muted** (`{colors.muted}` — #6a6a6a): Sub-headings, breadcrumbs, footer body.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #9a9a9a): Captions, fine-print.
|
||||
- **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): Text on primary buttons + dark feature cards (teal).
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.success}` — #22c55e): Success states.
|
||||
- **Warning** (`{colors.warning}` — #f59e0b): Warning callouts.
|
||||
- **Error** (`{colors.error}` — #ef4444): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **Plain Black** (a custom rounded display face) for headlines and **Inter** for body, navigation, and UI. Plain Black at weight 500 with negative letter-spacing handles every display headline; Inter handles the rest. The fallback stack walks `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for both.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 72px | 500 | 1.0 | -2.5px | Homepage h1 ("Go to market with unique data") — Plain Black |
|
||||
| `{typography.display-lg}` | 56px | 500 | 1.05 | -2px | Section heads — Plain Black |
|
||||
| `{typography.display-md}` | 40px | 500 | 1.1 | -1px | Sub-section heads, product names |
|
||||
| `{typography.display-sm}` | 32px | 500 | 1.15 | -0.5px | CTA-band heads, feature card titles |
|
||||
| `{typography.title-lg}` | 24px | 600 | 1.3 | -0.3px | Pricing plan names, larger feature titles |
|
||||
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Card titles, intro paragraphs |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |
|
||||
| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |
|
||||
| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 1.5px | Section labels, "FEATURED" badges |
|
||||
| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
Plain Black at weight 500 + negative letter-spacing IS the brand voice. Going to weight 700 reads as bombastic; the rounded character of the typeface adds warmth that bolder weight would flatten.
|
||||
|
||||
The body-vs-display split is functional: Plain Black for Plain Black moments (headlines), Inter for everything else (running text, UI, buttons). Mixing them is a system violation.
|
||||
|
||||
### Note on Font Substitutes
|
||||
If Plain Black is unavailable, **Inter** at weight 500 with -0.05em letter-spacing is a usable approximation. **Söhne Breit** at weight Buch is an alternative if licensed. **Recoleta** at weight 500 carries similar rounded-display warmth.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** `{spacing.section}` (96px) between major editorial bands.
|
||||
- **Card internal padding:** `{spacing.xl}` (32px) for feature cards and pricing tiers; `{spacing.lg}` (24px) for testimonial and product mockup cards.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1280px centered.
|
||||
- **Editorial body:** Single 12-column grid; hero often uses 7/5 split (h1 left, illustration right).
|
||||
- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Pricing grid:** 3-4 up at desktop, 1-up at mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Clay uses generous whitespace around big rounded display headlines and saturated feature cards. The cream canvas + colored cards + 3D illustrations create a playful warmth that competing data-platform sites lack.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, hero |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Inputs, small content cards |
|
||||
| Saturated card | Brand pink/teal/lavender/peach/ochre fill — no shadow | Feature cards |
|
||||
| Cream card | `{colors.surface-card}` background — no shadow | Testimonial, secondary cards |
|
||||
| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (rare) |
|
||||
|
||||
The system uses no heavy shadows. Depth comes from the saturated color contrast between cream canvas and bright feature cards.
|
||||
|
||||
### Decorative Depth
|
||||
- **3D claymation illustrations** — mountains, characters, mascots rendered in a hand-crafted 3D style. The brand's most-recognized depth element. Not a token — these are illustrated assets.
|
||||
- **Mascot characters** appear as inline figures in feature cards and CTAs.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 6px | Small badges, dropdown items |
|
||||
| `{rounded.sm}` | 8px | Small buttons, hairline-border accent |
|
||||
| `{rounded.md}` | 12px | Standard CTA buttons, text inputs |
|
||||
| `{rounded.lg}` | 16px | Content cards, testimonial cards, pricing tiers |
|
||||
| `{rounded.xl}` | 24px | Feature cards (the saturated brand-color cards) |
|
||||
| `{rounded.pill}` | 9999px | Category tabs, badge pills |
|
||||
| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Cream nav bar pinned to top. 64px tall, `{colors.canvas}` background. Carries the Clay logo + wordmark at left, primary horizontal menu (Product, Solutions, Resources, Pricing, Customers) center, right-side cluster with "Sign in" + "Try free" `{component.button-primary}`. Menu items in `{typography.nav-link}` (Inter 14px / 500).
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Background `{colors.primary}` (near-black), text `{colors.on-primary}` (white), type `{typography.button}` (Inter 14px / 600), padding 12px × 20px, height 44px, rounded `{rounded.md}` (12px).
|
||||
|
||||
**`button-secondary`** — Cream button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border.
|
||||
|
||||
**`button-on-color`** — White button used over saturated brand-color feature cards. Same shape as primary but inverted (white background, ink text).
|
||||
|
||||
**`button-text-link`** — Inline text button, no background. Used for "Sign in" and inline link CTAs.
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.ink}` with underline.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band`** — Cream-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, 3D claymation illustration on the right. Vertical padding `{spacing.section}` (96px).
|
||||
|
||||
**`hero-illustration-card`** — Right-side artifact holding 3D claymation illustration (mountains, mascot character, abstract shapes). Background `{colors.surface-soft}`, rounded `{rounded.xl}` (24px). The illustration IS the artifact.
|
||||
|
||||
**`feature-card-pink`** / **`feature-card-teal`** / **`feature-card-lavender`** / **`feature-card-peach`** / **`feature-card-ochre`** — Saturated single-color feature cards. Background varies per variant; rounded `{rounded.xl}` (24px); padding `{spacing.xl}` (32px). Each card carries an h3 in `{typography.title-md}`, a body description, and a product UI fragment or mascot illustration. Text color flips to `{colors.on-dark}` (white) on pink and teal cards, `{colors.ink}` (dark) on lavender/peach/ochre cards (the lighter saturations have enough contrast for dark text).
|
||||
|
||||
**`feature-card-cream`** — Lower-key feature card variant on `{colors.surface-card}`. Used for less-emphasized features that don't warrant a saturated color.
|
||||
|
||||
**`product-mockup-card`** — Card showing actual Clay product UI (Claygent agent runs, sequencer flows, CRM enrichment tables). Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px).
|
||||
|
||||
**`testimonial-card`** — Customer quote cards. Background `{colors.surface-card}` (cream), rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Top row has avatar + name + role; below sits the testimonial in `{typography.body-md}`.
|
||||
|
||||
**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}` with hairline, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).
|
||||
|
||||
**`pricing-tier-card-featured`** — The featured tier flips to `{colors.brand-teal}` (deep teal-green). The teal surface IS the featured signal.
|
||||
|
||||
**`expert-card`** — Used on /experts page. Background `{colors.canvas}` with hairline, rounded `{rounded.lg}`, padding `{spacing.lg}`. Carries an avatar at top, expert name, specialization, and a "Book session" link.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (12px), padding 12px × 16px, height 44px. 1px hairline border.
|
||||
|
||||
**`text-input-focused`** — Border thickens to ink for emphasis.
|
||||
|
||||
### Tabs / Badges
|
||||
|
||||
**`category-tab`** + **`category-tab-active`** — Pill-shaped tabs in sub-nav. Inactive: transparent + muted text. Active: cream-card background + ink text. Padding 8px × 16px.
|
||||
|
||||
**`badge-pill`** — Small cream-fill pill labels in `{typography.caption}` (13px / 500), rounded `{rounded.pill}`.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-illustrated`** — Pre-footer "Turn your growth ideas into reality today" band. Background `{colors.surface-soft}`, rounded `{rounded.xl}`, padding 80px. Carries an h2 in `{typography.display-md}`, a sub-line, and a `{component.button-primary}` — usually paired with a 3D illustration of a mascot or scene.
|
||||
|
||||
**`footer`** — Cream-tinted footer (NOT dark navy unlike most SaaS sites). Background `{colors.surface-soft}`, text `{colors.body}`. 4-column link list. Vertical padding 80px. Often features a horizon-style 3D mountain illustration at the very bottom — Clay's signature footer mountain.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Anchor every page on the cream canvas (`{colors.canvas}` — #fffaf0). The warm tint differentiates Clay from cool-gray data sites.
|
||||
- Use 3D claymation illustrations as hero artifacts. Hand-crafted 3D characters and mountains ARE the brand.
|
||||
- Cycle saturated feature cards across the page — pink → teal → lavender → peach → ochre → cream. Repeating the same color twice in a row reads as off-rhythm.
|
||||
- Use Plain Black at weight 500 with negative letter-spacing on every display headline.
|
||||
- Show product UI fragments inside saturated feature cards. The brand voltage is product-driven, not abstract.
|
||||
- Use cream footer (NOT dark). Clay deliberately closes pages with warm cream rather than the standard dark-footer SaaS template.
|
||||
- Anchor every band with `{spacing.section}` (96px) vertical rhythm.
|
||||
|
||||
### Don't
|
||||
- Don't use cool grays for canvas. The cream tint is non-negotiable.
|
||||
- Don't use a 7th brand-color card. The 6-color palette is saturated enough.
|
||||
- Don't bold display weight beyond 500. Plain Black at 700 reads as bombastic.
|
||||
- Don't repeat the same brand-color card twice in a row.
|
||||
- Don't replace claymation illustrations with flat vector art. The hand-crafted 3D character IS the brand voice.
|
||||
- Don't use a dark footer. The cream footer is part of the system's warm-throughout pacing.
|
||||
- Don't add hover state styling beyond what the system already encodes.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 72→36px; hero-illustration-card stacks below; feature grids 1-up; pricing 1-up |
|
||||
| Tablet | 768–1024px | Top nav tightens; feature cards 2-up; pricing 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 3-up pricing tiers |
|
||||
| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` at minimum 44 × 44px (matches WCAG AAA).
|
||||
- `{component.text-input}` height is 44px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to hamburger at < 768px.
|
||||
- Hero 7-5 grid → single-column on mobile.
|
||||
- Feature card grids reduce columns rather than scaling.
|
||||
- Saturated feature cards retain their colored fill at every breakpoint.
|
||||
- Pricing tier cards collapse 4 → 2 → 1.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key (`{component.feature-card-pink}`, `{component.pricing-tier-card-featured}`).
|
||||
2. Pick the right brand-color card for the feature: pink for outbound/sequencer, teal for enterprise/featured, lavender for AI-agent products, peach for general SaaS warmth, ochre for community / experts.
|
||||
3. Variants of an existing component (`-active`, `-disabled`) live as separate entries.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Never document hover.
|
||||
6. Display headlines stay Plain Black 500 with negative letter-spacing. Body stays Inter 400.
|
||||
7. The cream-throughout palette is a system contract — don't add a dark footer.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Plain Black is licensed to Clay and not available as a public web font; Inter weight 500 with negative letter-spacing is the closest substitute.
|
||||
- 3D claymation illustrations are commissioned assets, not system tokens — they're rendered per-page.
|
||||
- The mascot characters (named characters that recur across the site) are illustrated assets; their exact lineage and naming are not formalized in tokens.
|
||||
- Animation and transition timings (3D illustration parallax on scroll, feature card entrance animations) are not in scope.
|
||||
- Form validation states beyond `{component.text-input-focused}` are not extracted.
|
||||
- The actual Clay product surface (in-app data tables, formula editor, agent builder) shares some tokens with the marketing site but adds many product-specific components that are out of scope.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Clay Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/clay/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,544 @@
|
||||
---
|
||||
version: alpha
|
||||
name: ClickHouse
|
||||
description: "A high-performance database interface anchored on near-pure black canvas with electric yellow as the brand voltage. White typography in confident sans, yellow CTAs, and yellow-text stat numbers carry the brand voice across every page. Code blocks and product UI fragments embed directly in dark cards. The yellow + black pairing (and yellow used scarcely as accent) is the system's signature — brand identity without atmospheric decoration."
|
||||
|
||||
colors:
|
||||
primary: "#faff69"
|
||||
primary-active: "#e6eb52"
|
||||
primary-disabled: "#3a3a1f"
|
||||
ink: "#ffffff"
|
||||
body: "#cccccc"
|
||||
body-strong: "#e6e6e6"
|
||||
muted: "#888888"
|
||||
muted-soft: "#5a5a5a"
|
||||
hairline: "#2a2a2a"
|
||||
hairline-strong: "#3a3a3a"
|
||||
canvas: "#0a0a0a"
|
||||
surface-soft: "#121212"
|
||||
surface-card: "#1a1a1a"
|
||||
surface-elevated: "#242424"
|
||||
surface-yellow-band: "#faff69"
|
||||
on-primary: "#0a0a0a"
|
||||
on-dark: "#ffffff"
|
||||
on-yellow: "#0a0a0a"
|
||||
accent-emerald: "#22c55e"
|
||||
accent-rose: "#ef4444"
|
||||
accent-blue: "#3b82f6"
|
||||
success: "#22c55e"
|
||||
warning: "#f59e0b"
|
||||
error: "#ef4444"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 72px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -2.5px
|
||||
display-lg:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 56px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -2px
|
||||
display-md:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 40px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -1.5px
|
||||
display-sm:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -1px
|
||||
title-lg:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.3
|
||||
letterSpacing: -0.3px
|
||||
title-md:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
stat-display:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 56px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -1.5px
|
||||
body-md:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 1.5px
|
||||
code:
|
||||
fontFamily: "JetBrains Mono, ui-monospace, monospace"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "Inter, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.muted}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 40px
|
||||
button-text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 36px
|
||||
text-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-md}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
hero-stat-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.stat-display}"
|
||||
feature-card-yellow:
|
||||
backgroundColor: "{colors.surface-yellow-band}"
|
||||
textColor: "{colors.on-yellow}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
feature-card-dark:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
code-window-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
product-mockup-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-card-featured:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.title-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
stat-callout:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.stat-display}"
|
||||
cta-band-yellow:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 64px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
height: 40px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.md}"
|
||||
category-tab:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 8px 14px
|
||||
category-tab-active:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.nav-link}"
|
||||
rounded: "{rounded.md}"
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
badge-yellow:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
events-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
customer-logo-strip:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 32px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
ClickHouse's marketing surface is the highest-contrast interface in the database / data-platform category. The base atmosphere is **near-pure black canvas** (`{colors.canvas}` — #0a0a0a) with **electric yellow** (`{colors.primary}` — #faff69) as the singular brand voltage. The yellow handles every primary CTA, every stat-callout number, every "GET STARTED" badge — used scarcely on individual elements but generously on full-bleed yellow CTA cards. White typography in confident weight-700 sans-serif anchors the editorial body.
|
||||
|
||||
The yellow + black pairing is what makes ClickHouse instantly recognizable. Where Snowflake uses cool blue gradients and Databricks uses red + slate, ClickHouse leans hard into one electric yellow that does all the brand work. Code blocks, terminal output, and product UI fragments embed directly in dark `{colors.surface-card}` (#1a1a1a) cards across every page.
|
||||
|
||||
Type voice runs **Inter** at confident weights — 700 for display headlines (with negative letter-spacing -1 to -2.5px), 600 for sub-titles and buttons, 400 for body. The system has no display-serif counter-voice; everything is one geometric humanist sans, scaled and weighted for hierarchy.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Near-pure black canvas (`{colors.canvas}` — #0a0a0a) with white type. The system has no light-mode marketing surface.
|
||||
- Electric yellow primary (`{colors.primary}` — #faff69). Used on primary CTAs, large stat-callout numbers ("2.8k+", "74k+"), and full-bleed yellow CTA bands.
|
||||
- Inter at weight 700 for display, weight 600 for sub-titles + buttons, weight 400 for body. No serif counterpoint.
|
||||
- Dark surface cards (`{colors.surface-card}` — #1a1a1a) for feature cards, code windows, and product mockups. Cards barely lighter than canvas — color-block contrast is subtle.
|
||||
- Code blocks render in JetBrains Mono inside `{colors.surface-card}`. SQL syntax-highlighted in muted blues / yellows / grays.
|
||||
- Stat numbers in yellow + sans-700 + huge size carry the credibility moment ("779+", "2.8k+", "47k+" community / contributor / star counts).
|
||||
- Border radius is hierarchical: `{rounded.md}` (8px) for buttons, `{rounded.lg}` (12px) for content cards. No pill except in tag badges.
|
||||
- Section rhythm `{spacing.section}` (96px) between major editorial bands.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Primary (Electric Yellow)** (`{colors.primary}` — #faff69): The signature brand color. All primary CTA backgrounds, large stat-callout numbers, full-bleed yellow CTA cards. The yellow is the brand.
|
||||
- **Primary Active** (`{colors.primary-active}` — #e6eb52): Press / hover-darker variant.
|
||||
- **Primary Disabled** (`{colors.primary-disabled}` — #3a3a1f): Desaturated dark-yellow on dark canvas.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #0a0a0a): The default page floor. Near-pure black.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #121212): Section dividers, very-soft band tints.
|
||||
- **Surface Card** (`{colors.surface-card}` — #1a1a1a): Feature cards, code windows, product mockups, pricing tier cards.
|
||||
- **Surface Elevated** (`{colors.surface-elevated}` — #242424): Nested cards inside larger dark cards.
|
||||
- **Surface Yellow Band** (`{colors.surface-yellow-band}` — #faff69): The yellow CTA card / band fill — same hex as primary.
|
||||
- **Hairline** (`{colors.hairline}` — #2a2a2a): 1px borders on cards.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #3a3a3a): Heavier divider on input underlines and emphasis.
|
||||
|
||||
### Text
|
||||
- **Ink / On Dark** (`{colors.on-dark}` — #ffffff): All headline and primary text.
|
||||
- **Body** (`{colors.body}` — #cccccc): Default running-text color.
|
||||
- **Body Strong** (`{colors.body-strong}` — #e6e6e6): Emphasized paragraphs.
|
||||
- **Muted** (`{colors.muted}` — #888888): Footer links, captions, breadcrumbs.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #5a5a5a): Tertiary text — fine print.
|
||||
- **On Primary / On Yellow** (`{colors.on-primary}` / `{colors.on-yellow}` — #0a0a0a): Black text on yellow CTAs and yellow CTA bands. The high-contrast yellow + black combo is the brand action signal.
|
||||
|
||||
### Semantic / Accent
|
||||
- **Accent Emerald** (`{colors.accent-emerald}` — #22c55e): Success states, "active" status indicators in product UI.
|
||||
- **Accent Rose** (`{colors.accent-rose}` — #ef4444): Error states, "down" indicators.
|
||||
- **Accent Blue** (`{colors.accent-blue}` — #3b82f6): Info states, code-syntax highlighting.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **Inter** for everything — display, body, navigation, buttons, captions. **JetBrains Mono** handles code blocks. The fallback stack walks `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.
|
||||
|
||||
The single-family approach is deliberate: Inter at weight 700 + 600 + 400 covers the entire hierarchy without needing a serif or display counter-voice. The geometric humanist character of Inter at confident bold weight gives ClickHouse a precise, engineered feel that matches the database's performance-first positioning.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 72px | 700 | 1.05 | -2.5px | Homepage h1 ("The leading database for AI") |
|
||||
| `{typography.display-lg}` | 56px | 700 | 1.1 | -2px | Section heads |
|
||||
| `{typography.display-md}` | 40px | 700 | 1.15 | -1.5px | Sub-section heads, CTA-band heads |
|
||||
| `{typography.display-sm}` | 32px | 700 | 1.2 | -1px | Card titles, pricing tier prices |
|
||||
| `{typography.title-lg}` | 24px | 700 | 1.3 | -0.3px | Pricing plan names, larger feature titles |
|
||||
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Card titles, intro paragraphs |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |
|
||||
| `{typography.stat-display}` | 56px | 700 | 1.0 | -1.5px | Stat callouts ("779+", "47k+") — ALWAYS yellow |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |
|
||||
| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |
|
||||
| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 1.5px | Section labels, "NEW" badges |
|
||||
| `{typography.code}` | 14px | 400 | 1.55 | 0 | Code blocks — JetBrains Mono |
|
||||
| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
Display weights stay at 700 across all sizes. Negative letter-spacing (-1 to -2.5px) is essential — Inter at weight 700 without negative tracking reads as too wide / Apple-marketing. The tightened tracking gives ClickHouse the precise, engineered feel.
|
||||
|
||||
Body and labels stay at weights 400 / 500 / 600. The hierarchy is built on size + weight, not on family contrast.
|
||||
|
||||
### Note on Font Substitutes
|
||||
Inter is open-source and the documented choice. **Söhne** is a close commercial alternative if licensed. **Geist** is another modern alternative.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** `{spacing.section}` (96px) between major bands.
|
||||
- **Card internal padding:** `{spacing.xl}` (32px) for feature cards, pricing tiers; `{spacing.lg}` (24px) for code-window cards and event cards.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1280px centered.
|
||||
- **Editorial body:** Single 12-column grid; hero often uses 7/5 split (h1 left, code mockup right).
|
||||
- **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- **Pricing grid:** 3-4 up at desktop, 1-up at mobile.
|
||||
|
||||
### Whitespace Philosophy
|
||||
ClickHouse uses dense, slightly-compressed whitespace appropriate for a developer-tooling brand — generous enough to read editorially, tight enough to feel "engineering-grade" rather than "marketing-soft." Section rhythm at 96px is standard; card internal padding stays at 32px for feature cards.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | Body sections, top nav, hero |
|
||||
| Soft hairline | 1px `{colors.hairline}` border | Code-window cards, content cards |
|
||||
| Surface card | `{colors.surface-card}` background — no shadow | Feature cards, pricing tiers, event cards |
|
||||
| Yellow band | `{colors.primary}` background — no shadow | Full-bleed yellow CTA cards / bands |
|
||||
|
||||
The system uses no drop shadows. Depth comes from the contrast between black canvas and `{colors.surface-card}` (a barely-lighter-than-canvas tone) — the contrast is subtle, more like an "engineering-grade dim panel" than an "elevated card."
|
||||
|
||||
### Decorative Depth
|
||||
- Code-window cards carry their own internal product chrome — line numbers, syntax highlighting, status bars at the bottom — adding visual density without external shadows.
|
||||
- The yellow-on-black contrast does most of the elevation work for CTAs.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Reserved for badge accents |
|
||||
| `{rounded.sm}` | 6px | Small inline buttons |
|
||||
| `{rounded.md}` | 8px | Standard CTA buttons, text inputs |
|
||||
| `{rounded.lg}` | 12px | Content cards, code-window cards, pricing tiers |
|
||||
| `{rounded.pill}` | 9999px | Badge pills |
|
||||
| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Black nav bar pinned to top. 64px tall, `{colors.canvas}` background. Carries the ClickHouse logo + wordmark at left, primary horizontal menu (Product, Use Cases, Pricing, Resources, Customers) center-left, right-side cluster with "Sign in" + "Get Started" `{component.button-primary}` (yellow). Menu items in `{typography.nav-link}` (Inter 14px / 500).
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature yellow CTA. Background `{colors.primary}` (#faff69), text `{colors.on-primary}` (black), type `{typography.button}` (Inter 14px / 600), padding 12px × 20px, height 40px, rounded `{rounded.md}` (8px). The yellow + black combination is iconic.
|
||||
|
||||
**`button-secondary`** — Dark surface card button. Background `{colors.surface-card}`, text `{colors.on-dark}`, same shape as primary.
|
||||
|
||||
**`button-text-link`** — Inline text button, no background. Used for "Sign in" and inline link CTAs.
|
||||
|
||||
**`text-link`** — Inline body links in `{colors.primary}` (yellow on dark). Underlined.
|
||||
|
||||
**`button-icon-circular`** — 36 × 36 circular icon button on dark.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`hero-band`** — Black-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, code-window or product mockup on the right. Vertical padding `{spacing.section}` (96px).
|
||||
|
||||
**`hero-stat-card`** — Yellow stat-display numbers ("779+", "47k+") inline on the canvas. No card surface — just yellow text in `{typography.stat-display}` (56px / 700).
|
||||
|
||||
**`feature-card-yellow`** — Full-bleed yellow card ("Built for every modern data challenge"). Background `{colors.primary}`, text `{colors.on-yellow}` (black), rounded `{rounded.lg}` (12px), padding `{spacing.xl}` (32px). The yellow card IS the visual emphasis.
|
||||
|
||||
**`feature-card-dark`** — Standard dark feature card. Background `{colors.surface-card}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).
|
||||
|
||||
**`code-window-card`** — Dark card showing a SQL code block. Background `{colors.surface-card}`, code in JetBrains Mono with syntax highlighting, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Often the hero's right-side artifact on developer-focused pages.
|
||||
|
||||
**`product-mockup-card`** — Card showing actual ClickHouse product UI (query editor, dashboard, monitoring panel). Same shape as `{component.feature-card-dark}` but with embedded product chrome inside.
|
||||
|
||||
**`pricing-tier-card`** — Standard tier card. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).
|
||||
|
||||
**`pricing-tier-card-featured`** — The featured tier flips to `{colors.primary}` (yellow). The yellow surface IS the featured signal.
|
||||
|
||||
**`stat-callout`** — Inline yellow stat numbers ("779+", "2.8k+", "47k+"). Transparent background, text `{colors.primary}`, type `{typography.stat-display}`. Used as a flat layout block, not a card with surface.
|
||||
|
||||
**`events-card`** — Used on /company/events. Dark card with event title, date in `{typography.caption-uppercase}`, location, and a "Register" CTA. Rounded `{rounded.lg}`, padding `{spacing.lg}`.
|
||||
|
||||
**`customer-logo-strip`** — Horizontal monochrome customer-logo strip. Background `{colors.canvas}`, logos in `{colors.muted}`, vertical padding `{spacing.xl}` (32px).
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Dark text input. Background `{colors.surface-card}`, text `{colors.on-dark}`, rounded `{rounded.md}` (8px), padding 10px × 14px, height 40px.
|
||||
|
||||
**`text-input-focused`** — Border thickens to `{colors.primary}` (yellow) for emphasis.
|
||||
|
||||
### Tags / Badges
|
||||
|
||||
**`badge-pill`** — Small dark pill label. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.caption}`, rounded `{rounded.pill}`.
|
||||
|
||||
**`badge-yellow`** — Yellow pill for "NEW", "GET STARTED" emphasis. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`.
|
||||
|
||||
### Tab / Filter
|
||||
|
||||
**`category-tab`** + **`category-tab-active`** — Dark tab navigation. Inactive: transparent + muted text. Active: surface-card background + on-dark text. Padding 8px × 14px, rounded `{rounded.md}`.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-yellow`** — A pre-footer "Deploy your way" CTA band. Full yellow fill, black type, rounded `{rounded.lg}`, padding 64px. Carries an h2 in `{typography.display-md}` and a CTA — usually a black-button on the yellow surface.
|
||||
|
||||
**`footer`** — Black footer that closes every page. Background `{colors.canvas}`, text `{colors.muted}`. 4-column link list at desktop covering Product / Use Cases / Resources / Company. Vertical padding 64px. The ClickHouse wordmark sits at the top in `{colors.on-dark}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Anchor every page on the black canvas. The yellow + black pairing is the brand voltage.
|
||||
- Reserve `{colors.primary}` (yellow) for primary CTAs, stat-callout numbers, and full-bleed yellow CTA bands. The yellow's scarcity at the element level + abundance at the band level is what makes it powerful.
|
||||
- Use Inter at weight 700 for every display headline, with -1 to -2.5px letter-spacing.
|
||||
- Show actual SQL code blocks inside `{component.code-window-card}` — ClickHouse is a database; show the query, don't paint marketing illustrations of queries.
|
||||
- Use `{component.stat-callout}` numbers to establish credibility (community size, contributors, performance benchmarks). The yellow stat numbers are signature.
|
||||
- Anchor every band with `{spacing.section}` (96px) vertical rhythm.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a second brand color. ClickHouse is monochromatic + yellow.
|
||||
- Don't bold display weight beyond 700 or use weight 500 for headlines. The hierarchy depends on size, not on weight gradation.
|
||||
- Don't use yellow for body text or large surface fills outside of intentional yellow cards.
|
||||
- Don't use rounded buttons / pills outside of small badges. The standard button radius is 8px (md).
|
||||
- Don't repeat the same surface mode in two consecutive bands. Black canvas → dark feature card → yellow CTA card → black canvas → code-window card.
|
||||
- Don't replace SQL code mockups with abstract illustrations. The code IS the marketing voltage.
|
||||
- Don't add hover state styling beyond what the system already encodes.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 768px | Hamburger nav; hero h1 72→36px; code-window-card stacks below; feature grids 1-up; pricing 1-up |
|
||||
| Tablet | 768–1024px | Top nav tightens; feature cards 2-up; pricing 2-up |
|
||||
| Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 3-4 up pricing tiers |
|
||||
| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |
|
||||
|
||||
### Touch Targets
|
||||
- `{component.button-primary}` at minimum 40 × 40px.
|
||||
- `{component.button-icon-circular}` at exactly 36 × 36 — slightly under WCAG 44, visually centered.
|
||||
- `{component.text-input}` height is 40px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav collapses to hamburger at < 768px.
|
||||
- Hero 7-5 grid → single-column on mobile.
|
||||
- Feature card grids reduce columns rather than scaling.
|
||||
- Code-window cards retain font-size; horizontal scroll inside the card on mobile.
|
||||
- Pricing tier cards collapse 4 → 2 → 1; featured tier yellow stays distinct.
|
||||
|
||||
### Image Behavior
|
||||
- Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
|
||||
- Customer logos in monochrome strip retain native widths; row wraps on mobile.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. Reference its YAML key (`{component.code-window-card}`, `{component.pricing-tier-card-featured}`).
|
||||
2. Variants of an existing component (`-active`, `-disabled`, `-focused`) live as separate entries.
|
||||
3. Use `{token.refs}` everywhere — never inline hex.
|
||||
4. Never document hover. Default and Active/Pressed states only.
|
||||
5. Display headlines stay Inter 700 with negative letter-spacing. Body stays Inter 400.
|
||||
6. The yellow + black pairing is the brand contract. Don't soften with secondary accents.
|
||||
7. When in doubt about emphasis: bigger Inter 700 before adding color.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The exact yellow hex (#faff69) was sampled from the screenshot; ClickHouse may publish an official brand color slightly differently.
|
||||
- Inter weight axis values beyond 400 / 500 / 600 / 700 are not formalized — only the static weights observed are documented.
|
||||
- Animation and transition timings (code typewriter effects, stat counter animations) are not in scope.
|
||||
- Form validation states beyond `{component.text-input-focused}` are not extracted.
|
||||
- The actual ClickHouse Cloud product surface (query console, monitoring dashboards, table browser) shares some tokens with the marketing site but adds many product-specific components that are out of scope.
|
||||
- The customer logo strip's exact opacity / treatment varies — the muted gray is approximate.
|
||||
@@ -0,0 +1,5 @@
|
||||
# ClickHouse Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/clickhouse/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,451 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Cohere
|
||||
description: "Cohere's 2026 web system is a controlled enterprise AI interface built from stark white editorial space, deep green-black product bands, soft mineral surfaces, rounded media cards, and a distinctive type split between monospaced-feeling display headlines and precise Unica77 UI text."
|
||||
|
||||
colors:
|
||||
primary: "#17171c"
|
||||
cohere-black: "#000000"
|
||||
ink: "#212121"
|
||||
deep-green: "#003c33"
|
||||
dark-navy: "#071829"
|
||||
canvas: "#ffffff"
|
||||
soft-stone: "#eeece7"
|
||||
pale-green: "#edfce9"
|
||||
pale-blue: "#f1f5ff"
|
||||
hairline: "#d9d9dd"
|
||||
border-light: "#e5e7eb"
|
||||
card-border: "#f2f2f2"
|
||||
muted: "#93939f"
|
||||
slate: "#75758a"
|
||||
body-muted: "#616161"
|
||||
action-blue: "#1863dc"
|
||||
focus-blue: "#4c6ee6"
|
||||
coral: "#ff7759"
|
||||
coral-soft: "#ffad9b"
|
||||
form-focus: "#9b60aa"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
error: "#b30000"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: CohereText
|
||||
fontSize: 96px
|
||||
fontWeight: 400
|
||||
lineHeight: 1
|
||||
letterSpacing: -1.92px
|
||||
product-display:
|
||||
fontFamily: CohereText
|
||||
fontSize: 72px
|
||||
fontWeight: 400
|
||||
lineHeight: 1
|
||||
letterSpacing: -1.44px
|
||||
section-display:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 60px
|
||||
fontWeight: 400
|
||||
lineHeight: 1
|
||||
letterSpacing: -1.2px
|
||||
section-heading:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 48px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.48px
|
||||
card-heading:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 32px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.32px
|
||||
feature-heading:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 24px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: 0
|
||||
body-large:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.71
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
mono-label:
|
||||
fontFamily: CohereMono
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.28px
|
||||
micro:
|
||||
fontFamily: Unica77 Cohere Web
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 8px
|
||||
md: 16px
|
||||
lg: 22px
|
||||
xl: 30px
|
||||
pill: 32px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 2px
|
||||
xs: 6px
|
||||
sm: 8px
|
||||
md: 12px
|
||||
lg: 16px
|
||||
xl: 24px
|
||||
xxl: 32px
|
||||
section: 80px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 24px
|
||||
button-secondary:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 8px 0
|
||||
button-pill-outline:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 6px 12px
|
||||
announcement-bar:
|
||||
backgroundColor: "{colors.cohere-black}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.micro}"
|
||||
height: 36px
|
||||
hero-photo-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
agent-console-card:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 24px
|
||||
trust-logo-strip:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
capability-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 24px
|
||||
dark-feature-band:
|
||||
backgroundColor: "{colors.deep-green}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 80px
|
||||
product-card:
|
||||
backgroundColor: "{colors.soft-stone}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 32px
|
||||
blog-filter-chip:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.coral}"
|
||||
typography: "{typography.card-heading}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 8px 14px
|
||||
research-table:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-large}"
|
||||
contact-form-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
footer-newsletter:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.micro}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Cohere's current web presence feels like a sober enterprise AI command center with editorial restraint. The home page opens on a huge typographic declaration over a white canvas, then uses photography, dark product mockups, trust logos, and generous empty space to make AI infrastructure feel controlled rather than speculative. Product pages invert the tone into deep green-black or dark navy bands, while blog and research pages move toward publishing-system clarity: large filters, thin rules, dense lists, and pale technical backgrounds.
|
||||
|
||||
What makes the system distinctive is the mix of austere black-and-white UI with bursts of tactile brand imagery. The site avoids decorative chrome in the normal interface; color arrives through photography, abstract 3D media, coral blog taxonomy chips, blue research links, and dark product environments. Cards are rounded but not cute. Type is large, tight, and almost monospaced in spirit, creating a research-lab cadence across marketing, product, and editorial surfaces.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Monumental display headlines with very tight line height and negative tracking.
|
||||
- White editorial canvases interrupted by deep green, dark navy, and image-led CTA bands.
|
||||
- Rounded media cards and product cards, usually 8px to 22px.
|
||||
- Pill CTAs in near-black or white, with most secondary actions rendered as underlined text links.
|
||||
- Trust-logo strips with monochrome partner marks and very wide vertical spacing.
|
||||
- Agent-console mockups using dark panels, small status chips, and product integration badges.
|
||||
- Blog and research surfaces with prominent taxonomy chips, long rule-separated lists, and search fields.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
|
||||
- **Cohere Black** (`#000000`): Announcement bar, highest-contrast text, and the global brand anchor.
|
||||
- **Near-Black Primary** (`#17171c`): Primary CTA buttons, dark footer, and deep UI cards.
|
||||
- **Deep Enterprise Green** (`#003c33`): Product hero bands for North and Command-style dark sections.
|
||||
- **Dark Navy** (`#071829`): Financial-services and security-oriented solution bands.
|
||||
- **Action Blue** (`#1863dc`): Editorial links, pagination, and secondary action emphasis.
|
||||
- **Coral** (`#ff7759`): Blog category chips, taxonomy outlines, and warm product markers.
|
||||
- **Soft Coral** (`#ffad9b`): Pale chip borders and segmented article-label details.
|
||||
|
||||
### Surface & Background
|
||||
|
||||
- **Canvas White** (`#ffffff`): Dominant page background and form/card surface.
|
||||
- **Soft Stone** (`#eeece7`): Product cards, testimonial placeholders, and warm neutral surface blocks.
|
||||
- **Pale Green Wash** (`#edfce9`): North page section backdrop behind stacked dark capability panels.
|
||||
- **Pale Blue Wash** (`#f1f5ff`): Blog CTA surface behind abstract 3D imagery.
|
||||
- **Card Border** (`#f2f2f2`): Softest card containment line.
|
||||
|
||||
### Text & Rules
|
||||
|
||||
- **Ink** (`#212121`): Default body text and most link text on light backgrounds.
|
||||
- **Muted Slate** (`#93939f`): Footer links, dates, metadata, and de-emphasized labels.
|
||||
- **Slate** (`#75758a`): Research separators and tertiary text.
|
||||
- **Hairline** (`#d9d9dd`): Standard list rules and section dividers.
|
||||
- **Border Light** (`#e5e7eb`): Secondary divider and utility rule.
|
||||
|
||||
### Semantic
|
||||
|
||||
- **Focus Blue** (`#4c6ee6`): Keyboard focus and ring color.
|
||||
- **Form Focus Violet** (`#9b60aa`): Focus border for text inputs.
|
||||
- **Error Red** (`#b30000`): Extracted ring/shadow color associated with validation-like states.
|
||||
|
||||
### Gradient System
|
||||
|
||||
Cohere does not use gradients as a generic UI fill. Gradients and color fields are media-led: abstract 3D hero imagery, deep blue open-science particle fields, red-orange product video posters, and dark green-to-black product environments. Keep UI surfaces flat; reserve gradient richness for large media panels and CTA image bands.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
|
||||
- **Display**: `CohereText`, falling back to `Space Grotesk`, `Inter`, `ui-sans-serif`, and `system-ui`.
|
||||
- **Body/UI**: `Unica77 Cohere Web`, falling back to `Inter`, `Arial`, `ui-sans-serif`, and `system-ui`.
|
||||
- **Technical labels**: `CohereMono`, falling back to `Arial`, `ui-sans-serif`, and `system-ui`.
|
||||
- **Icons**: Cohere uses custom icon fonts and thin-line geometric illustrations.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|---|---|---:|---:|---:|---:|---|
|
||||
| Hero Display | CohereText | 96px | 400 | 1.00 | -1.92px | Home page declaration scale. |
|
||||
| Product Display | CohereText | 72px | 400 | 1.00 | -1.44px | Product and research hero headlines. |
|
||||
| Section Display | Unica77 | 60px | 400 | 1.00 | -1.2px | Large product-page headings. |
|
||||
| Section Heading | Unica77 | 48px | 400 | 1.20 | -0.48px | Split hero and CTA headings. |
|
||||
| Card Heading | Unica77 | 32px | 400 | 1.20 | -0.32px | Feature card and list section titles. |
|
||||
| Feature Heading | Unica77 | 24px | 400 | 1.30 | 0 | Cards, filters, and article titles. |
|
||||
| Body Large | Unica77 | 18px | 400 | 1.40 | 0 | Lead text and larger paragraphs. |
|
||||
| Body | Unica77 | 16px | 400 | 1.50 | 0 | Default copy and link text. |
|
||||
| Button | Unica77 | 14px | 500 | 1.71 | 0 | Compact CTA labels. |
|
||||
| Caption | Unica77 | 14px | 400 | 1.40 | 0 | Metadata and small explanatory text. |
|
||||
| Mono Label | CohereMono | 14px | 400 | 1.40 | 0.28px | Uppercase technical labels. |
|
||||
| Micro | Unica77 | 12px | 400 | 1.40 | 0 | Footer, nav microcopy, and small links. |
|
||||
|
||||
### Principles
|
||||
|
||||
- Use massive type sparingly; Cohere pages often have one oversized headline and then settle into restrained 16px-24px UI copy.
|
||||
- Keep display type tight. Hero copy should feel compact and carved, not airy.
|
||||
- Avoid heavy bold weights. Size, spacing, and surface contrast do most of the hierarchy work.
|
||||
- Use uppercase mono labels for category and system markers, especially on product and research pages.
|
||||
- Editorial pages can use coral chips and blue links, but the base typography remains black and measured.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
|
||||
The system uses an 8px base with many one-off alignment values: `2px`, `6px`, `8px`, `10px`, `12px`, `16px`, `20px`, `22px`, `24px`, `28px`, `32px`, `36px`, `40px`, `56px`, `60px`, `64px`, and `80px`.
|
||||
|
||||
Large sections rely on dramatic vertical breathing room. The home page places a trust-logo strip far below the hero media. Product pages often hold dark panels inside fields of empty white space, then transition to dense forms or footers only near the end.
|
||||
|
||||
### Grid & Container
|
||||
|
||||
- Global nav uses a three-zone layout: logo left, menu centered, sign-in/CTA right.
|
||||
- Home hero is centered text above a two-card media composition: a wide product mockup card beside a narrower photography card.
|
||||
- Feature sections commonly use 3-column cards on desktop.
|
||||
- Product pages alternate centered hero blocks, trust-logo strips, large single-feature bands, and 2- or 3-column card grids.
|
||||
- Research pages use full-width lists with date and chip columns instead of decorative cards.
|
||||
- Forms use two-column input rows inside a rounded white card on dark or stone section backgrounds.
|
||||
|
||||
### Whitespace Philosophy
|
||||
|
||||
Cohere uses whitespace as a trust signal. Large empty intervals separate the brand claim, customer proof, product proof, and CTA. Dense content appears only where it serves the information architecture: research paper rows, blog card grids, and contact form fields.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Cohere is mostly flat. Depth comes from surface alternation, media contrast, rounded corners, and thin borders rather than drop shadows.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, white or dark field | Hero copy, research lists, editorial surfaces |
|
||||
| Bordered | 1px `#d9d9dd`, `#e5e7eb`, or dark translucent rules | Research rows, forms, pale cards, footer inputs |
|
||||
| Media Lift | Rounded image or video over contrasting section color | Hero photo cards, product videos, CTA imagery |
|
||||
| Dark Product Field | Deep green or navy full-width band | Command, North, financial services, security sections |
|
||||
|
||||
## Shapes
|
||||
|
||||
### Radius Scale
|
||||
|
||||
| Token | Value | Role |
|
||||
|---|---:|---|
|
||||
| `xs` | 4px | Small images, search fields, article thumbnails, utility elements |
|
||||
| `sm` | 8px | Blog chips, cards, small media, dialogs |
|
||||
| `md` | 16px | Medium product cards and grouped blocks |
|
||||
| `lg` | 22px | Signature media-card and soft placeholder radius |
|
||||
| `xl` | 30px | Research/topic filter pills |
|
||||
| `pill` | 32px | Primary CTA buttons |
|
||||
| `full` | 9999px | Round status elements and fully pill-shaped controls |
|
||||
|
||||
### Image Treatment
|
||||
|
||||
Images are not decorative backdrops for text except in CTA bands. Most imagery sits as rounded cards with visible corners: product videos, enterprise photography, article thumbnails, and abstract 3D renders. The dominant radii are 8px and 22px.
|
||||
|
||||
## Components
|
||||
|
||||
### **`button-primary`**
|
||||
|
||||
Near-black or white pill CTA, depending on surface contrast. Uses 14px-16px Unica77, 12px 24px padding, and a 32px pill radius. This is the primary action style for "Request a demo", "Submit", and hero CTAs.
|
||||
|
||||
### **`button-secondary`**
|
||||
|
||||
Text-only action link, usually underlined or rule-aligned, with no filled background. Used for "Explore products", "Try the Playground", newsletter signup, and secondary hero actions.
|
||||
|
||||
### **`button-pill-outline`**
|
||||
|
||||
Outlined pill control with transparent fill, 1px dark border, and 30px radius. Used for research filters, topic tags, and lightweight taxonomy controls.
|
||||
|
||||
### **`announcement-bar`**
|
||||
|
||||
Full-width black strip above the nav, 36px tall, centered microcopy with an underlined "Learn more" link and a close control at the far right.
|
||||
|
||||
### **`hero-photo-card`**
|
||||
|
||||
Rounded media card used in the home hero and solution pages. It combines photography or abstract imagery with an overlaid dark agent-console module. Radius is usually 22px on large cards and 8px on smaller thumbnails.
|
||||
|
||||
### **`agent-console-card`**
|
||||
|
||||
Dark product mockup panel showing agent names, status chips, integration badges, prompt fields, and generated response cards. Background is near-black, text is white or muted, and small accent chips use product colors.
|
||||
|
||||
### **`trust-logo-strip`**
|
||||
|
||||
Centered copy above a row of monochrome customer logos. It is intentionally quiet: no cards, no borders, just large horizontal spacing and black or white logos depending on the background.
|
||||
|
||||
### **`capability-card`**
|
||||
|
||||
Content block with thin-line geometric illustration, 24px heading, body copy, and a text link. On light backgrounds, cards often have only a top rule or a subtle image/card relationship rather than full boxing.
|
||||
|
||||
### **`dark-feature-band`**
|
||||
|
||||
Deep green or navy full-width section used for product capabilities, security claims, and feature breakdowns. Text turns white; cards use darker translucent surfaces, pale borders, and abstract line illustrations.
|
||||
|
||||
### **`product-card`**
|
||||
|
||||
Warm stone card used for product/model summaries. Typically 3-column on desktop, with 8px radius, generous padding, a small pill button, a divider line, and checkmark bullet rows.
|
||||
|
||||
### **`blog-filter-chip`**
|
||||
|
||||
Large coral taxonomy chip used on the blog index. Active chips invert to coral fill with dark text; inactive chips use coral outline and pale fill. Typography is oversized relative to typical filters, making the taxonomy a hero-level control.
|
||||
|
||||
### **`research-table`**
|
||||
|
||||
Rule-separated publication list with title left, topic pills centered, and date right. Rows are tall, white, and border-driven; filters above use many compact outlined pills.
|
||||
|
||||
### **`contact-form-card`**
|
||||
|
||||
Rounded white form panel set against dark green or warm stone sections. Inputs are rectangular with thin gray borders, 12px-16px padding, and compact labels/placeholders. Submit uses the same near-black pill style as primary CTAs.
|
||||
|
||||
### **`footer-newsletter`**
|
||||
|
||||
Dark footer subscription block with coral "AI moves fast" label, white headline, muted legal microcopy, a single-line email field, and arrow submit marker. Footer columns use white section labels and muted links.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Use white canvas as the default surface; introduce dark green or navy as full-width product bands.
|
||||
- Keep primary CTAs pill-shaped and near-black on light surfaces.
|
||||
- Use 22px radius on major media cards and placeholders.
|
||||
- Use coral for editorial taxonomy and small warm accents, not as the main CTA system.
|
||||
- Use monochrome trust logos with wide spacing.
|
||||
- Use thin-line geometric illustrations for research and capability icons.
|
||||
- Let photography and product mockups carry color, while the UI shell stays restrained.
|
||||
|
||||
### Don't
|
||||
|
||||
- Do not turn coral or blue into broad decorative surface colors.
|
||||
- Do not add heavy drop shadows to cards.
|
||||
- Do not make every section card-based; Cohere often uses unframed rows, rules, and open space.
|
||||
- Do not use rounded cards below 8px for major media.
|
||||
- Do not replace the display/body type split with one generic sans-serif voice.
|
||||
- Do not render undocumented interaction variants in documentation or previews.
|
||||
- Do not use saturated gradients as normal UI backgrounds; keep gradients media-led.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---:|---|
|
||||
| Small Mobile | <425px | Single-column cards, compact nav, reduced hero headline scale |
|
||||
| Mobile | 425-640px | Hero media stacks, card grids become one column, form rows stack |
|
||||
| Large Mobile | 640-768px | Wider one-column layouts with larger media cards |
|
||||
| Tablet | 768-1024px | Two-column cards begin, nav spacing tightens |
|
||||
| Desktop | 1024-1440px | Full nav, 3-column card grids, split hero compositions |
|
||||
| Large Desktop | 1440-2560px | Wide containers and large empty vertical intervals |
|
||||
|
||||
### Touch Targets
|
||||
|
||||
Primary CTAs and pills meet comfortable touch sizing through 12px-24px padding and pill radii. Research filter chips and blog category chips are larger than standard tags, making dense taxonomy surfaces usable on touch devices.
|
||||
|
||||
### Collapsing Strategy
|
||||
|
||||
- Nav collapses from full horizontal links to a compact mobile menu.
|
||||
- Hero media moves from split cards to stacked cards.
|
||||
- Product and capability grids collapse from 3 columns to 2 and then 1.
|
||||
- Form fields collapse from paired rows to a single column.
|
||||
- Research rows preserve their rule-separated structure but stack metadata below titles on smaller widths.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Start from a white canvas or a full-width dark green/navy band; avoid mid-tone page backgrounds unless the screenshot shows a specific CTA/form section.
|
||||
2. Use `button-primary` for the single highest-priority action and `button-secondary` for the companion action.
|
||||
3. Use `hero-photo-card` or `agent-console-card` when a page needs visual energy; avoid invented dashboard data.
|
||||
4. For editorial pages, combine `blog-filter-chip`, `button-pill-outline`, and `research-table` instead of generic marketing cards.
|
||||
5. Keep component examples structurally honest: placeholder product frames are better than invented product content.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Exact proprietary font files are not bundled; use the documented fallbacks when implementing externally.
|
||||
- Mobile screenshots were not regenerated in this public update, so mobile behavior is documented from the desktop system and existing responsive patterns.
|
||||
- Some live pages lazy-load content blocks late; blank testimonial placeholders are documented as placeholder skeleton surfaces rather than filled testimonial cards.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Cohere Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/cohere/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,570 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Coinbase
|
||||
description: "An institutional-grade crypto exchange whose marketing surfaces read like a quietly-confident financial-services brand. The base canvas is pure white; Coinbase Blue (`#0052ff`) is the single brand voltage, used scarcely on primary CTAs, signature glyphs, and inline accent moments. Type runs Coinbase's licensed CoinbaseDisplay (display) and CoinbaseSans (body) at modest weights — display sits at weight 400 not 700, signaling editorial calm rather than fintech-bombastic. Page rhythm rotates between bright white sections, soft gray elevation bands, and full-bleed dark editorial heroes (`#0a0b0d`) carrying product-ui mockup cards. Iconography is geometric and minimal; depth comes from card-on-card layering, never decorative shadows."
|
||||
|
||||
colors:
|
||||
primary: "#0052ff"
|
||||
primary-active: "#003ecc"
|
||||
primary-disabled: "#a8b8cc"
|
||||
ink: "#0a0b0d"
|
||||
body: "#5b616e"
|
||||
body-strong: "#0a0b0d"
|
||||
muted: "#7c828a"
|
||||
muted-soft: "#a8acb3"
|
||||
hairline: "#dee1e6"
|
||||
hairline-soft: "#eef0f3"
|
||||
canvas: "#ffffff"
|
||||
surface-soft: "#f7f7f7"
|
||||
surface-card: "#ffffff"
|
||||
surface-strong: "#eef0f3"
|
||||
surface-dark: "#0a0b0d"
|
||||
surface-dark-elevated: "#16181c"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-soft: "#a8acb3"
|
||||
semantic-up: "#05b169"
|
||||
semantic-down: "#cf202f"
|
||||
accent-yellow: "#f4b000"
|
||||
|
||||
typography:
|
||||
display-mega:
|
||||
fontFamily: "'Coinbase Display', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
|
||||
fontSize: 80px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -2px
|
||||
display-xl:
|
||||
fontFamily: "'Coinbase Display', sans-serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -1.6px
|
||||
display-lg:
|
||||
fontFamily: "'Coinbase Display', sans-serif"
|
||||
fontSize: 52px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -1.3px
|
||||
display-md:
|
||||
fontFamily: "'Coinbase Display', sans-serif"
|
||||
fontSize: 44px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.09
|
||||
letterSpacing: -1px
|
||||
display-sm:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.11
|
||||
letterSpacing: -0.5px
|
||||
title-lg:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.13
|
||||
letterSpacing: -0.4px
|
||||
title-md:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.33
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-strong:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption-strong:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
number-display:
|
||||
fontFamily: "'Coinbase Mono', 'Coinbase Sans', monospace"
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.15
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "'Coinbase Sans', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 4px
|
||||
sm: 8px
|
||||
md: 12px
|
||||
lg: 16px
|
||||
xl: 24px
|
||||
pill: 100px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
base: 16px
|
||||
md: 20px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
top-nav-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
top-nav-on-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.pill}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.primary-disabled}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.pill}"
|
||||
button-secondary-light:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
button-secondary-dark:
|
||||
backgroundColor: "{colors.surface-dark-elevated}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
button-outline-on-dark:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 11px 19px
|
||||
height: 44px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button}"
|
||||
button-pill-cta:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 16px 32px
|
||||
height: 56px
|
||||
hero-band-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-mega}"
|
||||
padding: 96px
|
||||
hero-band-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-mega}"
|
||||
padding: 96px
|
||||
product-ui-card-dark:
|
||||
backgroundColor: "{colors.surface-dark-elevated}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
product-ui-card-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
feature-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
asset-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 16px 0
|
||||
price-up-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.semantic-up}"
|
||||
typography: "{typography.number-display}"
|
||||
price-down-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.semantic-down}"
|
||||
typography: "{typography.number-display}"
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
pricing-tier-featured:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
cta-band-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 14px 16px
|
||||
height: 48px
|
||||
search-input-pill:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-strong}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 12px
|
||||
asset-icon-circular:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 32px
|
||||
footer-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px 48px
|
||||
footer-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
legal-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.caption}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Coinbase reads like an institutional financial brand that happens to trade crypto — the marketing surfaces are quiet, white-canvas, editorially-spaced, and almost monochromatic. The single brand voltage is **Coinbase Blue** (`{colors.primary}` — #0052ff), used scarcely: every primary CTA pill, the brand wordmark, and inline emphasis links. Beyond that one blue, the system is white canvas + ink + soft gray elevation bands + a deep near-black editorial canvas (`{colors.surface-dark}` — #0a0b0d) for full-bleed product-mockup heroes.
|
||||
|
||||
Type pairs **CoinbaseDisplay** for hero headlines with **CoinbaseSans** for body, captions, and navigation. Display sits at **weight 400** — not the 700+ typical of trading platforms. The choice signals editorial calm and institutional trust rather than fintech urgency.
|
||||
|
||||
The page rhythm rotates three modes: bright white editorial sections, soft-gray elevation bands, and **full-bleed dark editorial heroes** carrying layered product-UI mockup cards. The dark hero with floating dashboard mockups is the single most distinctive component.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Single accent color: `{colors.primary}` (#0052ff Coinbase Blue) carries every primary CTA, wordmark, and inline brand link. Used scarcely.
|
||||
- Modest display weights — CoinbaseDisplay at weight 400, never 700+.
|
||||
- Editorial pill geometry: every CTA is `{rounded.pill}` (100px), every asset glyph is `{rounded.full}`, every card is `{rounded.xl}` (24px). Sharp corners absent.
|
||||
- Full-bleed dark heroes with floating product-UI cards: `{component.hero-band-dark}` plus inline `{component.product-ui-card-dark}` mockups is the brand's strongest signature pattern.
|
||||
- Trading semantics: `{colors.semantic-up}` (#05b169) and `{colors.semantic-down}` (#cf202f) — text color only, never background fills.
|
||||
- 96px section rhythm — generous editorial pacing.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Coinbase Blue** (`{colors.primary}` — #0052ff): The single brand color. Every primary CTA pill, the Coinbase wordmark, and inline brand links.
|
||||
- **Coinbase Blue Active** (`{colors.primary-active}` — #003ecc): Press-state darken on the primary pill.
|
||||
- **Coinbase Blue Disabled** (`{colors.primary-disabled}` — #a8b8cc): Faded-blue tint for disabled CTAs.
|
||||
- **Accent Yellow** (`{colors.accent-yellow}` — #f4b000): A small sub-brand accent used very sparingly on Bitcoin/asset glyph fills inside feature cards. Illustrative-only, not an action color.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #ffffff): The default page floor.
|
||||
- **Surface Soft** (`{colors.surface-soft}` — #f7f7f7): Subtle alternating band surface.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #eef0f3): The light-gray fill behind secondary buttons, search pills, asset-icon plates.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #0a0b0d): Deep near-black canvas for full-bleed dark heroes, CTA bands. Same hex as `{colors.ink}` — page-floor and text-color share the value.
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #16181c): One step lighter, used for floating product-UI mockup cards inside dark heroes.
|
||||
|
||||
### Hairlines
|
||||
- **Hairline** (`{colors.hairline}` — #dee1e6): Default 1px divider on white surfaces.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #eef0f3): Lighter divider — same hex as `{colors.surface-strong}`.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #0a0b0d): Display headings, primary nav, body emphasis.
|
||||
- **Body** (`{colors.body}` — #5b616e): Default running-text — slightly cool gray.
|
||||
- **Body Strong** (`{colors.body-strong}` — #0a0b0d): Same as ink, used for stronger emphasis.
|
||||
- **Muted** (`{colors.muted}` — #7c828a): Sub-titles, breadcrumbs, footer secondary.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #a8acb3): Disabled link text.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on Coinbase Blue CTAs.
|
||||
- **On Dark** (`{colors.on-dark}` — #ffffff): White text on dark heroes.
|
||||
- **On Dark Soft** (`{colors.on-dark-soft}` — #a8acb3): Muted off-white for secondary text on dark.
|
||||
|
||||
### Trading Semantics
|
||||
- **Semantic Up** (`{colors.semantic-up}` — #05b169): "Price up" green, text color only.
|
||||
- **Semantic Down** (`{colors.semantic-down}` — #cf202f): "Price down" red, text color only.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **CoinbaseDisplay** (display headlines), **CoinbaseSans** (body, navigation, captions, buttons), **CoinbaseIcons** (icon font), and **CoinbaseMono** for tabular numerical data. Fallback stack: `-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`.
|
||||
|
||||
The display/body split is functional: CoinbaseDisplay carries hero headlines only; CoinbaseSans carries everything else.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-mega}` | 80px | 400 | 1.0 | -2px | Homepage hero h1 |
|
||||
| `{typography.display-xl}` | 64px | 400 | 1.0 | -1.6px | Subsidiary heroes |
|
||||
| `{typography.display-lg}` | 52px | 400 | 1.0 | -1.3px | Section heads |
|
||||
| `{typography.display-md}` | 44px | 400 | 1.09 | -1px | CTA-band headlines |
|
||||
| `{typography.display-sm}` | 36px | 400 | 1.11 | -0.5px | Sub-section heads — CoinbaseSans |
|
||||
| `{typography.title-lg}` | 32px | 400 | 1.13 | -0.4px | Card group titles |
|
||||
| `{typography.title-md}` | 18px | 600 | 1.33 | 0 | Component titles, asset row primary |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.25 | 0 | List labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |
|
||||
| `{typography.body-strong}` | 16px | 700 | 1.5 | 0 | Emphasized body |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |
|
||||
| `{typography.caption}` | 13px | 400 | 1.5 | 0 | Photo captions |
|
||||
| `{typography.caption-strong}` | 12px | 600 | 1.5 | 0 | Badge pill labels |
|
||||
| `{typography.number-display}` | 18px | 500 | 1.4 | 0 | Asset prices, percent changes — CoinbaseMono |
|
||||
| `{typography.button}` | 16px | 600 | 1.15 | 0 | Standard CTA pill |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |
|
||||
|
||||
### Principles
|
||||
- **Display weight stays at 400.** The single most distinctive typographic choice — signals "calm institutional brand" rather than "trading-platform urgency."
|
||||
- **Negative letter-spacing on display only.** Display uses -1px to -2px tracking; body stays at 0.
|
||||
- **CoinbaseMono on every number.** Asset prices, percent changes — anything tabular renders in CoinbaseMono.
|
||||
|
||||
### Note on Font Substitutes
|
||||
CoinbaseDisplay, CoinbaseSans, and CoinbaseMono are licensed Coinbase typefaces.
|
||||
- **CoinbaseDisplay → Inter** at weight 400, letter-spacing -1.5%.
|
||||
- **CoinbaseSans → Inter** at weight 400/600.
|
||||
- **CoinbaseMono → JetBrains Mono** or **Geist Mono** at weight 500.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** `{spacing.section}` (96px) for every major editorial band.
|
||||
- **Card internal padding:** `{spacing.xl}` (32px) for feature cards and product-UI mockups.
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width:** ~1200px centered. Hero photography full-bleed.
|
||||
- **Editorial body:** Single 12-column grid.
|
||||
- **Feature card grids:** 2-up at desktop for hero splits, 3-up for benefit grids.
|
||||
- **Footer:** 6-column link list at desktop.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Generous editorial pacing — closer to Bloomberg or the Financial Times than to a trading dashboard. 96px between bands; cards inside bands sit 24px apart. Density lives behind login walls, not on marketing.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat | No shadow, no border | 80% of surfaces |
|
||||
| Hairline border | 1px `{colors.hairline}` | Feature card outlines on white |
|
||||
| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | Single shadow tier — hovered cards |
|
||||
| Photographic | Full-bleed product-UI mockups | Hero depth |
|
||||
|
||||
### Decorative Depth
|
||||
- **Layered product-UI cards inside dark heroes** is the most distinctive decorative pattern — a `{component.product-ui-card-dark}` floats above a darker base canvas, often with a second smaller card overlapping at an angle.
|
||||
- **Geometric brand illustrations** carry illustrative depth where shadows would otherwise.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Reserved (essentially unused) |
|
||||
| `{rounded.xs}` | 4px | Inline tags |
|
||||
| `{rounded.sm}` | 8px | Compact rows |
|
||||
| `{rounded.md}` | 12px | Form inputs |
|
||||
| `{rounded.lg}` | 16px | Mid-size cards |
|
||||
| `{rounded.xl}` | 24px | Feature cards, product-UI mockups, pricing tiers |
|
||||
| `{rounded.pill}` | 100px | All CTA buttons, search pills, badges |
|
||||
| `{rounded.full}` | 9999px | Asset icon circles, avatars |
|
||||
|
||||
Pill for interactive, card-radius (24px) for containers, full circle for icons. Sharp corners absent.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav-light`** — Default top nav on white pages. Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Coinbase wordmark left, primary horizontal menu (Cryptocurrencies / Individuals / Businesses / Institutions / Developers / Company), search-icon + globe + Sign In + Sign Up CTAs right.
|
||||
|
||||
**`top-nav-on-dark`** — Top nav over a dark hero band. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same layout.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature Coinbase Blue pill. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (16px / 600), padding 12px × 20px, height 44px, rounded `{rounded.pill}` (100px).
|
||||
|
||||
**`button-primary-active`** — Press state. Background `{colors.primary-active}`, deeper blue.
|
||||
|
||||
**`button-primary-disabled`** — Faded blue tint. Background `{colors.primary-disabled}`. Cursor not-allowed.
|
||||
|
||||
**`button-secondary-light`** — Soft-gray secondary on white surfaces. Background `{colors.surface-strong}`, text `{colors.ink}`, same pill geometry.
|
||||
|
||||
**`button-secondary-dark`** — Used on dark heroes. Background `{colors.surface-dark-elevated}`, text `{colors.on-dark}`, same pill geometry.
|
||||
|
||||
**`button-outline-on-dark`** — Transparent pill with white outline. Background transparent, text `{colors.on-dark}`, 1px white border.
|
||||
|
||||
**`button-tertiary-text`** — Inline text link. Background transparent, text `{colors.primary}`, type `{typography.button}`.
|
||||
|
||||
**`button-pill-cta`** — Larger pill CTA used on the homepage hero ("Get started"). Same Coinbase Blue palette but with 56px height and 16px × 32px padding for a prouder stance.
|
||||
|
||||
### Hero Bands
|
||||
|
||||
**`hero-band-dark`** — The signature full-bleed dark hero. Background `{colors.surface-dark}`, text `{colors.on-dark}`, full-bleed layered product-UI mockup cards. Display headline left in `{typography.display-mega}` (80px / 400), subhead in `{typography.body-md}`, two CTAs.
|
||||
|
||||
**`hero-band-light`** — White-canvas variant used on Wealth and Explore. Background `{colors.canvas}`, text `{colors.ink}`. Same skeleton, light palette.
|
||||
|
||||
### Cards
|
||||
|
||||
**`product-ui-card-dark`** — The floating product-UI mockup. Background `{colors.surface-dark-elevated}`, text `{colors.on-dark}`, rounded `{rounded.xl}` (24px), padding 32px. Often shown as 2-3 stacked cards at slight rotation, mimicking a layered dashboard.
|
||||
|
||||
**`product-ui-card-light`** — Light-canvas variant used on Explore for asset cards. Background `{colors.canvas}`, text `{colors.ink}`, same geometry, 1px hairline border.
|
||||
|
||||
**`feature-card`** — Used in 3-up and 2-up grids. Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.xl}`, padding 32px.
|
||||
|
||||
### Trading Surfaces
|
||||
|
||||
**`asset-row`** — Horizontal row in asset lists (Explore, Wealth). Background transparent, 1px hairline divider. Layout: 32px circular asset icon left, asset name + ticker, price column in `{typography.number-display}`, 24h change column with `{component.price-up-cell}` or `{component.price-down-cell}`.
|
||||
|
||||
**`price-up-cell`** + **`price-down-cell`** — Inline price-change cells. Color only — green or red text in `{typography.number-display}`, no background fill.
|
||||
|
||||
**`asset-icon-circular`** — Circular plate behind asset glyphs. Background `{colors.surface-strong}`, rounded `{rounded.full}`, 32px diameter.
|
||||
|
||||
### Pricing
|
||||
|
||||
**`pricing-tier-card`** — Standard pricing tier on Developer Platform. Background `{colors.canvas}`, rounded `{rounded.xl}`, padding 32px, 1px hairline border. Layout: tier name + price + feature checklist + CTA pill.
|
||||
|
||||
**`pricing-tier-featured`** — The featured tier. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same skeleton, dark palette — visual inversion signals "highlighted choice" without colored ribbons.
|
||||
|
||||
### Forms
|
||||
|
||||
**`text-input`** — Standard text input. Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.md}` (12px), padding 14px × 16px, height 48px, 1px hairline border. On focus, border thickens to 2px Coinbase Blue.
|
||||
|
||||
**`search-input-pill`** — Pill-shaped search bar. Background `{colors.surface-strong}`, rounded `{rounded.pill}`, padding 12px × 20px, height 44px.
|
||||
|
||||
### Tags & Badges
|
||||
|
||||
**`badge-pill`** — Small uppercase pill used as section labels ("INSTITUTIONAL", "REGULATED"). Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-strong}`, rounded `{rounded.pill}`.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-dark`** — Pre-footer "Take control of your money" band. Background `{colors.surface-dark}`, text `{colors.on-dark}`, vertical padding 96px. Centered headline + two CTAs.
|
||||
|
||||
**`footer-light`** — Closing white-canvas footer. Background `{colors.canvas}`, text `{colors.body}`. 6-column link list.
|
||||
|
||||
**`footer-link`** — Individual footer link. Background transparent, text `{colors.body}`.
|
||||
|
||||
**`legal-band`** — Bottom strip beneath footer columns. All text `{colors.muted}` at `{typography.caption}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (Coinbase Blue) for primary CTAs, wordmark, brand-glyph illustrations, inline accent links.
|
||||
- Set every CTA as `{rounded.pill}` (100px); every asset glyph as `{rounded.full}`.
|
||||
- Keep CoinbaseDisplay headlines at weight 400.
|
||||
- Use the dark/light band rotation as page rhythm.
|
||||
- Render every numerical value in CoinbaseMono via `{typography.number-display}`.
|
||||
- Pair every dark hero with a layered product-UI mockup card stack.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a secondary brand color. Coinbase Blue is the only action color; trading green/red are semantic-only.
|
||||
- Don't bold display copy — display sits at weight 400; bolding shifts the brand voice.
|
||||
- Don't add drop shadow tiers — system has one shadow tier.
|
||||
- Don't use sharp `{rounded.none}` (0px) on CTAs.
|
||||
- Don't mix CoinbaseDisplay and CoinbaseSans inside the same headline.
|
||||
- Don't use trading green/red as a button background.
|
||||
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 640px | Hero h1 80→40px; feature card grid 1-up; asset row stacks; nav collapses to hamburger; layered product-UI cards collapse to single card. |
|
||||
| Tablet | 640–1024px | Hero h1 64px; feature card grid 2-up; asset rows stay horizontal but compress columns. |
|
||||
| Desktop | 1024–1280px | Full hero h1 80px; feature card grid 3-up; full asset row layout. |
|
||||
| Wide | > 1280px | Content caps at 1200px; hero photography full-bleed. |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTA pill at 44px height — at WCAG AAA.
|
||||
- Larger hero pill (`{component.button-pill-cta}`) at 56px — well above AAA.
|
||||
- Asset icon circles at 32px — borderline; padded 8px row creates effective 48px tap zone.
|
||||
- Search pill at 44px height — at AAA.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav switches to hamburger sheet below 768px. Sign Up CTA stays visible.
|
||||
- Hero h1 steps down: 80 → 64 → 52 → 44 → 36px on smallest screens.
|
||||
- Layered product-UI mockup cards collapse from 2-3 stacked into a single card on mobile.
|
||||
- Pricing tier rows: 3-up → 2-up → 1-up.
|
||||
- Asset rows on mobile stack vertically: ticker line on top, price + change line beneath.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on a single component at a time. Reference YAML keys directly.
|
||||
2. New CTAs default to `{rounded.pill}` (100px); new icon plates default to `{rounded.full}`. Cards use `{rounded.xl}`.
|
||||
3. Variants live as separate entries inside the `components:` block.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Hover state never documented. Only Default and Active/Pressed.
|
||||
6. CoinbaseDisplay 400 for display, CoinbaseSans 400/600/700 for body. CoinbaseMono on every number.
|
||||
7. Coinbase Blue stays scarce — one or two blue moments per band.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- CoinbaseDisplay, CoinbaseSans, CoinbaseMono are licensed; Inter and JetBrains Mono are documented substitutes.
|
||||
- In-product trading surfaces (order book, charts, order forms) are behind login walls — this document covers marketing only.
|
||||
- Animation timings out of scope.
|
||||
- Form validation states beyond focus not visible on captured surfaces.
|
||||
- Accent yellow appears only inside Bitcoin asset glyph illustrations; documented as illustrative-only.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Coinbase Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/coinbase/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,506 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Composio
|
||||
description: "A developer-tools brand for AI-agent tool integration whose marketing surfaces lean into a dark, technical aesthetic with a single deep-electric-blue voltage (`#0007cd`). The page floor is near-black (`#0f0f0f`); cards float above on subtle gray-tinted surfaces. abcDiatype carries display and body in a single sans family with weights 400-600. The brand's strongest visual signature is a four-pane terminal-style mockup (a 2×2 grid of dark code/output panels) with a central blue spotlight glow — used as the homepage hero anchor."
|
||||
|
||||
colors:
|
||||
primary: "#0007cd"
|
||||
primary-active: "#0005a3"
|
||||
primary-glow: "#1a26ff"
|
||||
ink: "#ffffff"
|
||||
body: "#a8a8a8"
|
||||
body-strong: "#ffffff"
|
||||
muted: "#888888"
|
||||
muted-soft: "#666666"
|
||||
hairline: "#222222"
|
||||
hairline-soft: "#1a1a1a"
|
||||
hairline-strong: "#333333"
|
||||
canvas: "#0f0f0f"
|
||||
canvas-deep: "#000000"
|
||||
surface-card: "#181818"
|
||||
surface-card-elevated: "#222222"
|
||||
surface-strong: "#2a2a2a"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
accent-cyan: "#00d4ff"
|
||||
accent-violet: "#7b3aed"
|
||||
semantic-error: "#ff4d4d"
|
||||
semantic-success: "#33d17a"
|
||||
|
||||
typography:
|
||||
display-mega:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 72px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -2.16px
|
||||
display-xl:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 56px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -1.68px
|
||||
display-lg:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 44px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1.32px
|
||||
display-md:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -0.96px
|
||||
display-sm:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
letterSpacing: -0.5px
|
||||
title-md:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.88px
|
||||
textTransform: uppercase
|
||||
code:
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.0
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
base: 16px
|
||||
md: 20px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
top-nav-dark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary-dark:
|
||||
backgroundColor: "{colors.surface-card-elevated}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
height: 40px
|
||||
button-outline:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 9px 17px
|
||||
height: 40px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.button}"
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.display-mega}"
|
||||
padding: 96px
|
||||
terminal-mockup-grid:
|
||||
backgroundColor: "{colors.canvas-deep}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
terminal-pane:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 28px
|
||||
toolkit-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.title-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
toolkit-icon:
|
||||
backgroundColor: "{colors.surface-card-elevated}"
|
||||
rounded: "{rounded.md}"
|
||||
size: 40px
|
||||
spotlight-glow-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 48px
|
||||
code-block:
|
||||
backgroundColor: "{colors.canvas-deep}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-card-elevated}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 16px
|
||||
height: 44px
|
||||
search-input:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 16px
|
||||
height: 40px
|
||||
cta-band-spotlight:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body-strong}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
testimonial-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
footer-dark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px 48px
|
||||
footer-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Composio's marketing site reads like a serious developer-infrastructure brand — closer to Vercel or Stripe Docs in atmosphere than to a typical AI-tools startup. The base canvas is a near-black `{colors.canvas}` (#0f0f0f) holding white type and a single voltage of **deep electric blue** (`{colors.primary}` — #0007cd) carrying every primary CTA, brand wordmark, and atmospheric spotlight glow that backs the homepage hero.
|
||||
|
||||
Type runs **abcDiatype** as the single sans family across display, body, navigation, and captions. Display sits at weight 500 — confident but not bombastic. Code blocks and terminal mockups switch to JetBrains Mono.
|
||||
|
||||
The page rhythm is monolithic: dark canvas top to bottom with subtle elevation steps via card surfaces. The brand's strongest visual signature is a **four-pane terminal-style mockup** — a 2×2 grid of dark code/output panels with a central blue spotlight glow behind them.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Single accent: `{colors.primary}` (#0007cd) for primary CTAs, wordmark, spotlight glows.
|
||||
- Single sans family: abcDiatype carries everything except code (JetBrains Mono).
|
||||
- Dark monolithic canvas: `{colors.canvas}` runs top to bottom; depth from `{colors.surface-card}` and `{colors.surface-card-elevated}` brightness steps.
|
||||
- Terminal-mockup hero: 2×2 grid of code/output panes is the brand signature.
|
||||
- Compact pill geometry: CTAs sit at `{rounded.md}` (8px), not full pills — developer-tool dialect.
|
||||
- Spotlight-glow atmospheric backdrop: a radial blue glow centered behind hero content.
|
||||
- 96px section rhythm.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Composio Blue** (`{colors.primary}` — #0007cd): Primary CTAs, wordmark, spotlight glow center.
|
||||
- **Composio Blue Active** (`{colors.primary-active}` — #0005a3): Press state.
|
||||
- **Spotlight Glow Tone** (`{colors.primary-glow}` — #1a26ff): Brighter blue used inside radial atmospheric glows.
|
||||
- **Accent Cyan** (`{colors.accent-cyan}` — #00d4ff): Sparingly on data-flow visualizations.
|
||||
- **Accent Violet** (`{colors.accent-violet}` — #7b3aed): Inside specific product illustrations only.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #0f0f0f): Page floor — near-black.
|
||||
- **Canvas Deep** (`{colors.canvas-deep}` — #000000): Pure black for terminal mockup grids and code blocks.
|
||||
- **Surface Card** (`{colors.surface-card}` — #181818): Default content card.
|
||||
- **Surface Card Elevated** (`{colors.surface-card-elevated}` — #222222): Terminal panes, secondary buttons.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #2a2a2a): Dropdown menus.
|
||||
|
||||
### Hairlines
|
||||
- **Hairline** (`{colors.hairline}` — #222222): Default 1px divider.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #1a1a1a): Lighter divider.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #333333): Stronger panel outline.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #ffffff): Display headlines.
|
||||
- **Body** (`{colors.body}` — #a8a8a8): Default running-text — soft gray.
|
||||
- **Body Strong** (`{colors.body-strong}` — #ffffff): Same as ink.
|
||||
- **Muted** (`{colors.muted}` — #888888): Sub-titles, breadcrumbs.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #666666): Disabled text.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on blue CTAs.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.semantic-success}` — #33d17a): "Online", "active" indicators.
|
||||
- **Error** (`{colors.semantic-error}` — #ff4d4d): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
The system runs **abcDiatype** (Lineto) across every text role. Code blocks switch to **JetBrains Mono**. Fallback: `ui-sans-serif, system-ui, sans-serif`.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-mega}` | 72px | 500 | 1.05 | -2.16px | Homepage hero h1 |
|
||||
| `{typography.display-xl}` | 56px | 500 | 1.05 | -1.68px | Subsidiary heroes |
|
||||
| `{typography.display-lg}` | 44px | 500 | 1.1 | -1.32px | Section heads |
|
||||
| `{typography.display-md}` | 32px | 500 | 1.15 | -0.96px | Sub-section heads |
|
||||
| `{typography.display-sm}` | 24px | 500 | 1.25 | -0.5px | Card group titles |
|
||||
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Toolkit card titles |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |
|
||||
| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |
|
||||
| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, badge pills |
|
||||
| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |
|
||||
| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |
|
||||
|
||||
### Principles
|
||||
- **Display weight stays at 500.** Confident but not display-bold.
|
||||
- **abcDiatype across every role.** No display/body family split.
|
||||
- **JetBrains Mono on every code surface.**
|
||||
|
||||
### Note on Font Substitutes
|
||||
abcDiatype is a Lineto licensed typeface. Open-source substitute: **Inter** at weight 500 with letter-spacing -1.5%.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** `{spacing.section}` (96px) for major bands.
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: ~1200px.
|
||||
- Editorial body: 12-column grid.
|
||||
- Terminal mockup grid: 2×2 equal-size panes.
|
||||
- Toolkit grid: 4-up at desktop, 2-up tablet, 1-up mobile.
|
||||
- Footer: 5-column at desktop.
|
||||
|
||||
### Whitespace Philosophy
|
||||
The dark canvas creates its own depth — whitespace can stay tight without feeling crowded. 96px between bands; 24px between cards inside a band.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system uses **brightness-step elevation**: surfaces step up in brightness instead of casting drop shadows. Combined with subtle radial blue glows, this creates a focused dark-mode atmosphere.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat (canvas) | `{colors.canvas}` (#0f0f0f) | Body bands, footer |
|
||||
| Recessed | `{colors.canvas-deep}` (#000000) | Terminal mockup grid background, code blocks |
|
||||
| Card | `{colors.surface-card}` (#181818) | Default content cards |
|
||||
| Card elevated | `{colors.surface-card-elevated}` (#222222) | Terminal panes, secondary buttons |
|
||||
| Atmospheric glow | Radial gradient using `{colors.primary-glow}` | Hero spotlight backdrop |
|
||||
|
||||
### Decorative Depth
|
||||
- **Spotlight glow backdrops** — radial blue gradient centered behind hero content.
|
||||
- **Terminal-pane brightness ladder** — 2×2 mockup uses canvas-deep outer + surface-card-elevated panes.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Reserved |
|
||||
| `{rounded.xs}` | 4px | Inline tags |
|
||||
| `{rounded.sm}` | 6px | Compact rows |
|
||||
| `{rounded.md}` | 8px | CTA buttons, form inputs |
|
||||
| `{rounded.lg}` | 12px | Toolkit cards, code blocks, terminal panes |
|
||||
| `{rounded.xl}` | 16px | Feature cards, terminal mockup grids |
|
||||
| `{rounded.pill}` | 9999px | Section-label badges |
|
||||
| `{rounded.full}` | 9999px | Avatar plates (rare) |
|
||||
|
||||
Compact developer-ergonomic radii — 8px CTAs, 12-16px cards. Signals "developer tool" rather than "consumer brand."
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav-dark`** — Default top nav. Background `{colors.canvas}`, text `{colors.body-strong}`, height 64px. Layout: Composio wordmark left, primary horizontal menu (Product / Toolkits / Docs / Pricing / Customers / Blog), GitHub stars + Sign In + "Get started" right.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature Composio Blue CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px × 18px, height 40px, rounded `{rounded.md}` (8px).
|
||||
|
||||
**`button-primary-active`** — Press state. Background `{colors.primary-active}`.
|
||||
|
||||
**`button-secondary-dark`** — Surface-elevated secondary. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`.
|
||||
|
||||
**`button-outline`** — Transparent with 1px hairline-strong border.
|
||||
|
||||
**`button-tertiary-text`** — Inline text link.
|
||||
|
||||
### Hero & Atmospheric
|
||||
|
||||
**`hero-band`** — Homepage hero. Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (72px / 500), subhead, two CTAs, and a spotlight-glow backdrop emanating from behind the centered terminal-mockup grid.
|
||||
|
||||
**`terminal-mockup-grid`** — The brand's strongest visual signature. 2×2 grid of dark code/output panels inside a `{rounded.xl}` (16px) container. Background `{colors.canvas-deep}`, padding 32px, gap 16px.
|
||||
|
||||
**`terminal-pane`** — Individual code/output panel inside the mockup grid. Background `{colors.surface-card}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}` (12px), padding 20px.
|
||||
|
||||
**`spotlight-glow-card`** — Large feature card with centered display headline and a radial blue glow behind it. Background `{colors.surface-card}`, text `{colors.body-strong}` in `{typography.display-md}`, rounded `{rounded.xl}`, padding 48px.
|
||||
|
||||
### Cards
|
||||
|
||||
**`feature-card`** — 3-up benefit grid. Background `{colors.surface-card}`, text `{colors.body}`, type `{typography.title-md}`, rounded `{rounded.xl}`, padding 28px.
|
||||
|
||||
**`toolkit-card`** — 4-up toolkit grid (Slack, GitHub, Stripe, Notion, Linear, etc.). Background `{colors.surface-card}`, text `{colors.body-strong}`, type `{typography.title-sm}`, rounded `{rounded.lg}`, padding 20px. 40px square `{component.toolkit-icon}` top, toolkit name, one-line description.
|
||||
|
||||
**`toolkit-icon`** — Square icon plate. Background `{colors.surface-card-elevated}`, rounded `{rounded.md}`, 40px size.
|
||||
|
||||
**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
### Code
|
||||
|
||||
**`code-block`** — Inline code/terminal block. Background `{colors.canvas-deep}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}`, padding 20px.
|
||||
|
||||
### Forms
|
||||
|
||||
**`text-input`** — Background `{colors.surface-card}`, text `{colors.body-strong}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px.
|
||||
|
||||
**`search-input`** — Compact search field. Same surface and radius, smaller padding, 40px height.
|
||||
|
||||
### Tags & Badges
|
||||
|
||||
**`badge-pill`** — Small uppercase pill. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band-spotlight`** — Pre-footer band. Background `{colors.canvas}` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.
|
||||
|
||||
**`footer-dark`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.
|
||||
|
||||
**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` for primary CTAs, wordmark, and spotlight glows.
|
||||
- Use `{rounded.md}` (8px) for every CTA — not full pills.
|
||||
- Use brightness-step ladder for elevation; avoid drop shadows.
|
||||
- Pair every hero with a centered radial blue spotlight glow.
|
||||
- Render code, CLI commands in JetBrains Mono via `{typography.code}`.
|
||||
- Use the 2×2 terminal-mockup grid as the homepage hero anchor.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a secondary brand color. Cyan and violet are illustrative-only.
|
||||
- Don't use full pills on CTAs.
|
||||
- Don't drop display weight to 400.
|
||||
- Don't add drop shadow tiers.
|
||||
- Don't use canvas-deep (#000000) outside terminal/code surfaces.
|
||||
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual page CTAs.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 640px | Hero h1 72→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |
|
||||
| Tablet | 640–1024px | Hero h1 56px; terminal mockup grid stays 2×2; toolkit grid 2-up. |
|
||||
| Desktop | 1024–1280px | Full hero h1 72px; full 2×2 terminal mockup; toolkit grid 4-up. |
|
||||
| Wide | > 1280px | Content caps at 1200px. |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTA at 40px height — at WCAG AA, padded for AAA.
|
||||
- Search input at 40px.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav switches to hamburger below 768px.
|
||||
- Terminal mockup 2×2 grid collapses to a single pane on mobile.
|
||||
- Toolkit grid: 4-up → 2-up → 1-up.
|
||||
- Hero spotlight glow stays at every breakpoint.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on a single component at a time.
|
||||
2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` or `{rounded.xl}`.
|
||||
3. Variants live as separate entries inside `components:`.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Hover state never documented.
|
||||
6. abcDiatype 500 for display, 400/600 for body. JetBrains Mono on every code surface.
|
||||
7. Composio Blue stays scarce.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- abcDiatype is licensed; Inter is the substitute.
|
||||
- Animation timings out of scope.
|
||||
- In-product surfaces (toolkit dashboards, agent playground) are behind login walls.
|
||||
- Form validation states beyond focus not visible on captured surfaces.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Composio Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/composio/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,537 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Cursor
|
||||
description: "An AI-first code editor whose marketing site reads like a quietly-confident developer-tools brand with a warm-cream editorial canvas (`#f7f7f4`) instead of the typical dark IDE atmosphere. Near-black warm ink (`#26251e`) carries body and display alike — display sits at weight 400 with negative letter-spacing for a magazine feel rather than a bold tech voice. The single brand voltage is **Cursor Orange** (`#f54e00`) reserved for primary CTAs and the wordmark. A signature pastel timeline palette (peach, mint, blue, lavender, gold) marks AI-action stages (Thinking / Reading / Editing / Grepping / Done) — only inside in-product timeline visualizations. Cards use minimal hairlines, no shadows, generous 80px section rhythm. CursorGothic for display/body, JetBrains Mono on every code surface (which is roughly half the page)."
|
||||
|
||||
colors:
|
||||
primary: "#f54e00"
|
||||
primary-active: "#d04200"
|
||||
ink: "#26251e"
|
||||
body: "#5a5852"
|
||||
body-strong: "#26251e"
|
||||
muted: "#807d72"
|
||||
muted-soft: "#a09c92"
|
||||
hairline: "#e6e5e0"
|
||||
hairline-soft: "#efeee8"
|
||||
hairline-strong: "#cfcdc4"
|
||||
canvas: "#f7f7f4"
|
||||
canvas-soft: "#fafaf7"
|
||||
surface-card: "#ffffff"
|
||||
surface-strong: "#e6e5e0"
|
||||
on-primary: "#ffffff"
|
||||
timeline-thinking: "#dfa88f"
|
||||
timeline-grep: "#9fc9a2"
|
||||
timeline-read: "#9fbbe0"
|
||||
timeline-edit: "#c0a8dd"
|
||||
timeline-done: "#c08532"
|
||||
semantic-error: "#cf2d56"
|
||||
semantic-success: "#1f8a65"
|
||||
|
||||
typography:
|
||||
display-mega:
|
||||
fontFamily: "'CursorGothic', system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
|
||||
fontSize: 72px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -2.16px
|
||||
display-lg:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.72px
|
||||
display-md:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 26px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.25
|
||||
letterSpacing: -0.325px
|
||||
display-sm:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 22px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: -0.11px
|
||||
title-md:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-tracked:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0.08px
|
||||
body-sm:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.88px
|
||||
textTransform: uppercase
|
||||
code:
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.0
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "'CursorGothic', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
base: 16px
|
||||
md: 20px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 80px
|
||||
|
||||
components:
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 9px 17px
|
||||
height: 40px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
button-download:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.canvas}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 20px
|
||||
height: 44px
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-mega}"
|
||||
padding: 80px
|
||||
ide-mockup-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 0
|
||||
ide-pane:
|
||||
backgroundColor: "{colors.canvas-soft}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 16px
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
comparison-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
timeline-pill-thinking:
|
||||
backgroundColor: "{colors.timeline-thinking}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
timeline-pill-grep:
|
||||
backgroundColor: "{colors.timeline-grep}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
timeline-pill-read:
|
||||
backgroundColor: "{colors.timeline-read}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
timeline-pill-edit:
|
||||
backgroundColor: "{colors.timeline-edit}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
timeline-pill-done:
|
||||
backgroundColor: "{colors.timeline-done}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
code-block:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-featured:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.canvas}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 16px
|
||||
height: 44px
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
cta-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
testimonial-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px 48px
|
||||
footer-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Cursor's marketing site reads as a quietly-confident developer brand that believes in editorial calm over IDE-darkness. The base canvas is **warm cream** (`{colors.canvas}` — #f7f7f4) holding warm near-black ink (`{colors.ink}` — #26251e) for body and display alike. The single brand voltage is **Cursor Orange** (`{colors.primary}` — #f54e00) reserved for primary CTAs and the wordmark — used scarcely.
|
||||
|
||||
Type runs **CursorGothic** as the single sans family. Display sits at weight 400 with negative letter-spacing — a magazine-editorial voice rather than tech-bombastic. JetBrains Mono carries every code surface (and code surfaces are roughly half the page).
|
||||
|
||||
The brand's strongest visual signature is the **AI-timeline pill palette**: five pastel pills (peach `{colors.timeline-thinking}`, mint `{colors.timeline-grep}`, blue `{colors.timeline-read}`, lavender `{colors.timeline-edit}`, gold `{colors.timeline-done}`) marking AI-action stages inside in-product timeline visualizations. Used only in product UI — never as system action colors.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm cream canvas, not white. Ink is warm (#26251e), not pure black.
|
||||
- Single CTA color: `{colors.primary}` (Cursor Orange #f54e00). Used scarcely.
|
||||
- Display weight stays at 400 — never bold. Magazine voice.
|
||||
- AI timeline pastels: 5 dedicated tokens for in-product agent action stages.
|
||||
- Compact 8px CTA radius — developer dialect.
|
||||
- Hairline-only depth; no drop shadows.
|
||||
- 80px section rhythm.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Cursor Orange** (`{colors.primary}` — #f54e00): Primary CTA pills, wordmark, hero accent. Used scarcely.
|
||||
- **Cursor Orange Active** (`{colors.primary-active}` — #d04200): Press state.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #f7f7f4): Warm cream page floor.
|
||||
- **Canvas Soft** (`{colors.canvas-soft}` — #fafaf7): IDE-pane background inside mockups.
|
||||
- **Surface Card** (`{colors.surface-card}` — #ffffff): Pure white card surface — slight contrast against the cream canvas.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #e6e5e0): Badges, tag pills.
|
||||
|
||||
### Hairlines
|
||||
- **Hairline** (`{colors.hairline}` — #e6e5e0): 1px divider.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #efeee8): Lighter divider.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #cfcdc4): Stronger panel outline.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #26251e): Display, body emphasis. Warm near-black.
|
||||
- **Body** (`{colors.body}` — #5a5852): Default running-text.
|
||||
- **Body Strong** (`{colors.body-strong}` — #26251e): Same as ink.
|
||||
- **Muted** (`{colors.muted}` — #807d72): Sub-titles.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #a09c92): Disabled text.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on Cursor Orange.
|
||||
|
||||
### Timeline (AI-action signature)
|
||||
- **Thinking** (`{colors.timeline-thinking}` — #dfa88f): Peach. Used inside in-product agent timeline only.
|
||||
- **Grep** (`{colors.timeline-grep}` — #9fc9a2): Mint.
|
||||
- **Read** (`{colors.timeline-read}` — #9fbbe0): Pastel blue.
|
||||
- **Edit** (`{colors.timeline-edit}` — #c0a8dd): Lavender.
|
||||
- **Done** (`{colors.timeline-done}` — #c08532): Warm gold.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.semantic-success}` — #1f8a65): Confirmation indicators.
|
||||
- **Error** (`{colors.semantic-error}` — #cf2d56): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**CursorGothic** is the licensed display + body family. Fallback: `system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif`. Code surfaces switch to **JetBrains Mono**.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-mega}` | 72px | 400 | 1.1 | -2.16px | Homepage hero h1 |
|
||||
| `{typography.display-lg}` | 36px | 400 | 1.2 | -0.72px | Section heads |
|
||||
| `{typography.display-md}` | 26px | 400 | 1.25 | -0.325px | Sub-section heads |
|
||||
| `{typography.display-sm}` | 22px | 400 | 1.3 | -0.11px | Card group titles |
|
||||
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |
|
||||
| `{typography.body-tracked}` | 16px | 400 | 1.5 | 0.08px | Tracked editorial body |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |
|
||||
| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |
|
||||
| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, timeline pill labels |
|
||||
| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |
|
||||
| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |
|
||||
|
||||
### Principles
|
||||
- **Display weight stays at 400.** Magazine voice, never bold.
|
||||
- **Negative letter-spacing on display only.** -0.11px to -2.16px tracking.
|
||||
- **JetBrains Mono on every code surface.**
|
||||
|
||||
### Note on Font Substitutes
|
||||
CursorGothic is licensed. Open-source substitute: **Inter** at weight 400 with letter-spacing -1.5%. Or **GT Sectra** for a more editorial feel.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
|
||||
- **Section padding:** 80px.
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: ~1200px.
|
||||
- Editorial body: 12-column grid.
|
||||
- Feature card grids: 2-up at desktop for splits, 3-up for benefits.
|
||||
- Footer: 5-column at desktop.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Generous editorial pacing — closer to a print magazine than a tech site. The cream canvas has plenty of breathing room; cards within bands sit close (16-24px gap).
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system uses **hairline-only depth**. No drop shadows, no elevation tiers. Cards float above the canvas via 1px hairlines and the slight white-on-cream contrast.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat (canvas) | `{colors.canvas}` (#f7f7f4) | Body bands, footer |
|
||||
| Card | `{colors.surface-card}` (#ffffff) | Content cards |
|
||||
| Hairline border | 1px `{colors.hairline}` | Card outlines, dividers |
|
||||
| IDE pane | `{colors.canvas-soft}` (#fafaf7) | Inside IDE mockup cards |
|
||||
|
||||
### Decorative Depth
|
||||
- **IDE-mockup cards** are the only "elevated" element. White card on cream canvas with internal pane structure mimicking the actual Cursor editor.
|
||||
- **Timeline pastel pills** add chromatic depth without surface elevation.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Reserved |
|
||||
| `{rounded.xs}` | 4px | Inline tags |
|
||||
| `{rounded.sm}` | 6px | Compact rows |
|
||||
| `{rounded.md}` | 8px | CTA buttons, form inputs |
|
||||
| `{rounded.lg}` | 12px | Cards, IDE panes |
|
||||
| `{rounded.xl}` | 16px | Larger feature cards (rare) |
|
||||
| `{rounded.pill}` | 9999px | Timeline pills, badges |
|
||||
| `{rounded.full}` | 9999px | Avatars (rare) |
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Cursor wordmark left, primary horizontal menu (Pricing / Features / Enterprise / Blog / Forum / Careers), Sign In + Download primary CTA right.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature Cursor Orange CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px × 18px, height 40px, rounded `{rounded.md}` (8px).
|
||||
|
||||
**`button-primary-active`** — Press state. Background `{colors.primary-active}`.
|
||||
|
||||
**`button-secondary`** — White card pill on cream canvas. Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.
|
||||
|
||||
**`button-tertiary-text`** — Inline ink text link.
|
||||
|
||||
**`button-download`** — Larger ink-canvas CTA. Background `{colors.ink}`, text `{colors.canvas}`, padding 12px × 20px, height 44px. Used for "Download for macOS" type CTAs.
|
||||
|
||||
### Hero & IDE Mockups
|
||||
|
||||
**`hero-band`** — Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (72px / 400 / -2.16px), subhead in `{typography.body-md}`, two CTAs (`button-download` + `button-tertiary-text`), and a centered IDE-mockup card below the hero copy.
|
||||
|
||||
**`ide-mockup-card`** — A white card containing a multi-pane IDE mockup (sidebar + main editor + chat panel + terminal). Background `{colors.surface-card}`, rounded `{rounded.lg}` (12px), 1px `{colors.hairline}` border, no padding (panes fill the card edge-to-edge).
|
||||
|
||||
**`ide-pane`** — Individual IDE pane inside the mockup. Background `{colors.canvas-soft}`, text `{colors.body}` in `{typography.code}` (JetBrains Mono 13px), rounded `{rounded.md}` (8px), padding 16px.
|
||||
|
||||
### Cards
|
||||
|
||||
**`feature-card`** — Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.lg}`, padding 24px. 1px `{colors.hairline}` border.
|
||||
|
||||
**`comparison-card`** — Side-by-side "Cursor vs other tools" card. Same surface and rounding; internally split into 2 columns.
|
||||
|
||||
**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
### AI Timeline (signature)
|
||||
|
||||
**`timeline-pill-thinking`** — Peach pill. Background `{colors.timeline-thinking}`, text `{colors.ink}`, type `{typography.caption-uppercase}` (11px / 600 / 0.88px tracking, uppercase), rounded `{rounded.pill}`, padding 4px × 10px. Marks "Thinking" stage in product timeline.
|
||||
|
||||
**`timeline-pill-grep`** — Mint pill. Same shape, background `{colors.timeline-grep}`. Marks "Grepping" stage.
|
||||
|
||||
**`timeline-pill-read`** — Pastel-blue pill. Background `{colors.timeline-read}`. Marks "Reading" stage.
|
||||
|
||||
**`timeline-pill-edit`** — Lavender pill. Background `{colors.timeline-edit}`. Marks "Editing" stage.
|
||||
|
||||
**`timeline-pill-done`** — Gold pill. Background `{colors.timeline-done}`, text `{colors.on-primary}` white. Marks "Done" stage.
|
||||
|
||||
### Code
|
||||
|
||||
**`code-block`** — Inline code block. Background `{colors.surface-card}`, text `{colors.ink}` in `{typography.code}`, rounded `{rounded.lg}`, padding 20px, 1px `{colors.hairline}` border.
|
||||
|
||||
### Pricing
|
||||
|
||||
**`pricing-tier-card`** — Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding 32px, 1px `{colors.hairline}` border.
|
||||
|
||||
**`pricing-tier-featured`** — Featured tier inverts to ink. Background `{colors.ink}`, text `{colors.canvas}`. Same shape, dark inversion signals "highlighted" without colored ribbon.
|
||||
|
||||
### Forms & Tags
|
||||
|
||||
**`text-input`** — Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px.
|
||||
|
||||
**`badge-pill`** — Small uppercase pill. Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band`** — Pre-footer "Try Cursor now" band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single Cursor Orange CTA. 96px vertical padding.
|
||||
|
||||
**`footer`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.
|
||||
|
||||
**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (Cursor Orange) for primary CTAs and brand wordmark.
|
||||
- Keep display weight at 400. The editorial voice depends on this.
|
||||
- Use the cream `{colors.canvas}` page floor — never pure white.
|
||||
- Render every code surface (inline, blocks, IDE panes) in JetBrains Mono.
|
||||
- Use timeline pastels only inside in-product agent visualizations — never as system action colors.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a secondary brand action color. Cursor Orange is the only one.
|
||||
- Don't drop display to bold weights (700+). Magazine voice depends on 400.
|
||||
- Don't add drop shadows. Hairlines + ink-on-cream contrast carry the depth.
|
||||
- Don't use timeline pastels on non-timeline UI. They're scoped to the agent timeline only.
|
||||
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual product CTAs.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 640px | Hero h1 72→32px; IDE mockup collapses to single pane preview; feature grid 1-up; nav hamburger. |
|
||||
| Tablet | 640–1024px | Hero h1 56px; IDE mockup compresses; feature grid 2-up. |
|
||||
| Desktop | 1024–1280px | Full hero h1 72px; full multi-pane IDE mockup; feature grid 3-up. |
|
||||
| Wide | > 1280px | Content caps at 1200px. |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTA at 40px height — at WCAG AA, padded for AAA.
|
||||
- Download CTA at 44px — at AAA.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav switches to hamburger below 768px.
|
||||
- IDE mockup multi-pane collapses to a single primary pane preview on mobile.
|
||||
- Feature grid: 3-up → 2-up → 1-up.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on a single component at a time.
|
||||
2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` (12px).
|
||||
3. Variants live as separate entries inside `components:`.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Hover state never documented.
|
||||
6. CursorGothic 400 for display, 400/500/600 for body. JetBrains Mono on every code surface.
|
||||
7. Cursor Orange stays scarce.
|
||||
8. Timeline pastels stay scoped to in-product agent visualizations.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- CursorGothic is a licensed typeface; Inter is the substitute.
|
||||
- Animation timings (timeline pill entrance, IDE pane reveal) out of scope.
|
||||
- In-app surfaces (code editor, chat panel, agent timeline) only partially captured via marketing IDE mockups.
|
||||
- Form validation states beyond focus not visible on captured surfaces.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Cursor Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/cursor/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,654 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cursor — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/cursor. Every visible
|
||||
value comes from tokens.css; if the agent paste-replaces the
|
||||
:root block and reuses the component selectors below verbatim,
|
||||
the artifact passes lint without further audit. Cursor's
|
||||
signature moves: warm cream surfaces, three typographic voices
|
||||
(CursorGothic / jjannon / berkeleyMono), oklab borders rendered
|
||||
as rgba fallback, hover-text shifts to --danger crimson, and
|
||||
diffused atmospheric shadows."
|
||||
/>
|
||||
|
||||
<style>
|
||||
/* :root paste — sourced verbatim from
|
||||
design-systems/cursor/tokens.css. Keep this block in sync
|
||||
when tokens.css changes. The agent prompt instructs the
|
||||
Designer panelist to paste this block as the FIRST thing in
|
||||
their <style>, then reference everything below via var(...). */
|
||||
:root {
|
||||
--bg: #f2f1ed;
|
||||
--surface: #e6e5e0;
|
||||
--surface-warm: #ebeae5;
|
||||
|
||||
--fg: #26251e;
|
||||
--fg-2: rgba(38, 37, 30, 0.9);
|
||||
--muted: rgba(38, 37, 30, 0.55);
|
||||
--meta: rgba(38, 37, 30, 0.4);
|
||||
|
||||
--border: rgba(38, 37, 30, 0.1);
|
||||
--border-soft: rgba(38, 37, 30, 0.06);
|
||||
|
||||
--accent: #f54e00;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #1f8a65;
|
||||
--warn: #eab308;
|
||||
--danger: #cf2d56;
|
||||
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--text-xs: 11px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 19.2px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 72px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.03em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
0 28px 70px rgba(0, 0, 0, 0.14),
|
||||
0 14px 32px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px var(--border);
|
||||
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease;
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset (minimal) ───────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
/* Body uses jjannon serif. The three-voice system is a brand
|
||||
signature; do not collapse to one font for "simplicity". */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
font-feature-settings: "cswh"; /* contextual swash alternates */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section {
|
||||
/* Cursor's section separation is via tone shift + spacing,
|
||||
not hard rules. The ring is intentionally faint. */
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
/* CursorGothic uses weight 400 almost exclusively; size +
|
||||
tracking carry hierarchy, not weight (DESIGN.md §3.4). */
|
||||
font-weight: 400;
|
||||
}
|
||||
h1 {
|
||||
/* Hero uses --text-4xl=72px with the full -0.03em tracking. */
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-3xl);
|
||||
/* 36px section heading: line-height 1.20, tracking -0.72px (-0.02em).
|
||||
Overrides the shared 1.10 (--leading-tight) set on h1/h2/h3 above. */
|
||||
line-height: 1.20;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-2xl);
|
||||
/* 26px sub-heading: line-height 1.25, tracking -0.325px (-0.0125em).
|
||||
Overrides the shared 1.10 (--leading-tight) set on h1/h2/h3 above. */
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.0125em;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
/* Lead body in serif voice — Cursor's editorial signature. */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.35;
|
||||
color: var(--muted);
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.body-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
|
||||
/* `.eyebrow` — uppercase micro label, system-ui voice. Letter
|
||||
spacing is well above craft/typography.md's 0.06em floor. */
|
||||
.eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 500;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────── */
|
||||
/* Cursor's primary CTA is NOT accent-bg — it is warm-surface bg
|
||||
with dark text, signature for the brand. The accent orange
|
||||
appears on link decoration and on the "accent pill" CTA used
|
||||
sparingly (≤1 per screen). The hover signature is a text-color
|
||||
shift to --danger (warm crimson), not bg-darken. */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-base) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible {
|
||||
outline: none;
|
||||
/* DESIGN.md §7: focus is depth (4 12 0.1), not halo. */
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
/* Primary — warm-surface CTA. */
|
||||
.btn-primary {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg);
|
||||
}
|
||||
.btn-primary:hover { color: var(--danger); }
|
||||
.btn-primary:active { background: var(--surface); }
|
||||
/* Secondary — ghost on warm surface. */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
color: var(--danger);
|
||||
border-color: rgba(38, 37, 30, 0.2);
|
||||
}
|
||||
/* Accent pill — used at most once per screen for the loudest CTA.
|
||||
This is the only place on the page where --accent is a bg. */
|
||||
.btn-accent {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 10px 18px;
|
||||
}
|
||||
.btn-accent:hover { background: var(--accent-hover); }
|
||||
.btn-accent:active { background: var(--accent-active); }
|
||||
|
||||
/* ─── Pill tags ─────────────────────────────────────────── */
|
||||
/* Cursor's full-pill (9999px) badges/filters — DESIGN.md §4.1. */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--surface);
|
||||
color: var(--meta);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.pill-active {
|
||||
background: rgba(38, 37, 30, 0.06); /* deeper surface for selected state */
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.field label {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--fg);
|
||||
}
|
||||
.field input {
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
outline: none;
|
||||
border-color: rgba(38, 37, 30, 0.2);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field-help {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
transition: box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover {
|
||||
/* DESIGN.md §7: hover shadow intensification (ambient → elevated). */
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
.card-featured {
|
||||
/* Featured card uses the larger 10px radius (DESIGN.md §5.4). */
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* ─── Badges ────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 2px var(--space-3);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.badge-success {
|
||||
color: var(--success);
|
||||
background: color-mix(in oklab, var(--success), transparent 90%);
|
||||
}
|
||||
.badge-muted {
|
||||
color: var(--muted);
|
||||
background: color-mix(in oklab, var(--muted), transparent 88%);
|
||||
}
|
||||
.badge-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-color: var(--meta);
|
||||
}
|
||||
|
||||
/* ─── Kbd ───────────────────────────────────────────────── */
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── AI timeline (decorative, signature element) ──────── */
|
||||
/* DESIGN.md §4.7 — Cursor's AI timeline shows four states with
|
||||
soft "warm pastel" colors. These are decorative state markers,
|
||||
intentionally NOT promoted to brand surface tokens. */
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.timeline-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.timeline-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.timeline-thinking .timeline-dot { background: #dfa88f; }
|
||||
.timeline-grep .timeline-dot { background: #9fc9a2; }
|
||||
.timeline-read .timeline-dot { background: #9fbbe0; }
|
||||
.timeline-edit .timeline-dot { background: #c0a8dd; }
|
||||
|
||||
/* ─── Section-specific layout ───────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
/* Asymmetric hero — keeps the page from looking like an
|
||||
AI-default centered template. */
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: end;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-6);
|
||||
}
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg);
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.features-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
max-width: 420px;
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-2);
|
||||
}
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
HERO — exercises: h1 (CursorGothic 72px / -0.03em),
|
||||
.lead (jjannon serif), .eyebrow, .btn-primary (warm-surface
|
||||
CTA + crimson hover), .btn-accent (orange pill, used once
|
||||
per page max), kbd (berkeleyMono), .badge-success.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · cursor</p>
|
||||
<h1>The editor your team writes through, not at.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
Cursor pairs a serif voice with gothic compression so
|
||||
feature copy reads like a publication and headlines hit
|
||||
like an engineered statement. Three fonts, one warm cream
|
||||
canvas, every value below comes from tokens.css.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-accent">
|
||||
View tokens
|
||||
<svg
|
||||
class="icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-primary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm">System status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Stable
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm body-muted">
|
||||
Last reviewed
|
||||
<time datetime="2026-05-14">2026-05-14</time> · v0.1
|
||||
</p>
|
||||
<p class="body-sm body-muted">
|
||||
Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FEATURES — exercises: h2, h3, .card (warm surface + hover
|
||||
shadow lift), .body-muted, .pill / .pill-active (full-pill
|
||||
filter row), .features-grid, AI timeline component (the
|
||||
cursor signature element).
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 28ch">
|
||||
Every component below uses only var(--*) — no raw hex, no
|
||||
off-token type.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="filter-row" style="margin-block-start: var(--space-6)">
|
||||
<button class="pill pill-active">All</button>
|
||||
<button class="pill">Surfaces</button>
|
||||
<button class="pill">Typography</button>
|
||||
<button class="pill">Motion</button>
|
||||
</div>
|
||||
|
||||
<div class="features-grid" style="margin-block-start: var(--space-6)">
|
||||
<article class="card">
|
||||
<h3>Warm surfaces</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--bg, --surface, --surface-warm form a three-tier cream
|
||||
ladder. Pure white only inside code panels; the page
|
||||
never reaches it on the canvas.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect tokens →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3>Three voices</h3>
|
||||
<p class="body-muted body-sm">
|
||||
CursorGothic for display, jjannon serif for body,
|
||||
berkeleyMono for code. Each voice carries one role; the
|
||||
system never collapses to two faces.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the spec →</a>
|
||||
</article>
|
||||
|
||||
<article class="card card-featured">
|
||||
<h3>oklab borders</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Borders ship as rgba fallbacks of the oklab originals at
|
||||
0.1 / 0.06 alpha — perceptually uniform across every
|
||||
warm surface.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect borders →</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="timeline" style="margin-block-start: var(--space-8); max-width: 480px">
|
||||
<p class="eyebrow">AI timeline · signature element</p>
|
||||
<div class="timeline-step timeline-thinking">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>thinking…</span>
|
||||
</div>
|
||||
<div class="timeline-step timeline-grep">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>grep "tokens.css" -r design-systems/</span>
|
||||
</div>
|
||||
<div class="timeline-step timeline-read">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>read default/tokens.css</span>
|
||||
</div>
|
||||
<div class="timeline-step timeline-edit">
|
||||
<span class="timeline-dot" aria-hidden="true"></span>
|
||||
<span>edit cursor/tokens.css → +56 tokens</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FORM — exercises: .field (jjannon body input), focus-visible
|
||||
depth shadow (no halo), .btn-primary (warm-surface CTA),
|
||||
.btn-secondary (ghost border), .field-help.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs inherit the same tokens.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch">
|
||||
The focus state is a soft 4px-12px depth shadow — no
|
||||
cool-blue halo. Border weights stay at oklab 0.1; on
|
||||
focus the active border lifts to 0.2.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@team.dev"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
<p class="field-help">
|
||||
We'll send the spec PDF and nothing else.
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Send the spec
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Skip for now
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,218 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/cursor/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "Cursor" brand — the AI-first code
|
||||
* editor's marketing voice translated into the shared schema. Like
|
||||
* `default/tokens.css` and `kami/tokens.css`, agents are expected to
|
||||
* paste the `:root { … }` block verbatim into the first `<style>` of
|
||||
* every artifact, then reference values via `var(--name)`.
|
||||
*
|
||||
* Why this file exists:
|
||||
* DESIGN.md describes Cursor in prose ("warm cream `#f2f1ed`, warm
|
||||
* near-black `#26251e` text, oklab borders") — agents have to translate
|
||||
* that prose into shared token names without inventing brand variants
|
||||
* like `--cursor-cream`. This file pre-translates once.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Warm-shifted everything — cream surfaces, near-black-with-yellow
|
||||
* text, oklab-space borders. Pure white / pure black are reserved
|
||||
* for code-editor panels and nowhere else.
|
||||
* 2. Three typographic voices — CursorGothic at display sizes with
|
||||
* aggressive negative letter-spacing (signature), jjannon serif for
|
||||
* editorial body, berkeleyMono for code/kbd.
|
||||
* 3. Hover semantic is text→crimson (`--danger`), not bg-darken.
|
||||
* Component CSS reading `--accent-hover` still gets the schema's
|
||||
* darken formula because some artifacts (CTA pills with accent bg)
|
||||
* do need it; the brand-signature crimson hover is component-level
|
||||
* not token-level.
|
||||
*
|
||||
* Schema decisions specific to Cursor:
|
||||
* - --surface-warm binds to a real warmer tier (#ebeae5 — the
|
||||
* "Surface 300" button-default), not aliased to surface. Cursor's
|
||||
* surface scale 100→500 is a hallmark; the schema slot maps to the
|
||||
* middle tier that buttons rest on.
|
||||
* - --fg-2, --meta, --border-soft bind to oklab-fallback rgba values
|
||||
* at distinct alpha levels (0.9 / 0.4 / 0.06) rather than aliasing,
|
||||
* because Cursor genuinely has the richer ramp.
|
||||
* - --tracking-display is set to -0.03em (the 72px hero value
|
||||
* normalized to em). Smaller display sizes in components should
|
||||
* scale tracking proportionally; the schema only carries one slot.
|
||||
* - --elev-raised binds to Cursor's signature 28px/70px diffused
|
||||
* shadow rather than the schema fallback. This is the depth move
|
||||
* that makes Cursor feel like a print publication.
|
||||
* - --focus-ring is depth-only (0 4px 12px), not the halo formula.
|
||||
* Cursor never paints cool-blue rings.
|
||||
* - --ease-standard: ease (per DESIGN.md §Interaction & Motion), not
|
||||
* the schema's cubic-bezier. Brand authenticity over micro-control.
|
||||
*
|
||||
* Tokens NOT lifted (intentional):
|
||||
* - The fine-grained sub-8px spacing scale (1.5px, 2px, 2.5px, 3px,
|
||||
* 5px, 6px) used for icon/text micro-alignment is component-internal
|
||||
* in this fixture. Promote to C-extension via BRAND_EXTENSIONS only
|
||||
* if cross-component reuse demands it.
|
||||
* - The named surface scale 100/200/300/400/500 is encoded via the
|
||||
* three schema slots (--bg / --surface / --surface-warm). The
|
||||
* extreme tiers (100 lightest, 500 deepest) live as inline
|
||||
* declarations in components.html where needed.
|
||||
* - The timeline state colors (Thinking peach, Grep sage, Read blue,
|
||||
* Edit lavender) are decorative state markers, not brand surface
|
||||
* tokens. They belong in component CSS for the AI timeline element,
|
||||
* not in :root.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels) ──────────────────────────────────────────
|
||||
* Cream canvas that defines the entire warm system. Default's
|
||||
* `#fafafa → #ffffff` ladder gets replaced by `#f2f1ed → #e6e5e0`,
|
||||
* with the warmer surface tier (#ebeae5) bound to --surface-warm
|
||||
* for buttons that rest on the page background. */
|
||||
--bg: #f2f1ed; /* Surface 200 — warm off-white */
|
||||
--surface: #e6e5e0; /* Surface 400 — card / lifted */
|
||||
--surface-warm: #ebeae5; /* Surface 300 — button default */
|
||||
|
||||
/* ─── Foreground ramp (4 levels) ────────────────────────────────
|
||||
* Cursor genuinely has a 4-tier ramp: solid for headings/body,
|
||||
* 90% for "light surface" button labels, 55% for secondary text,
|
||||
* 40% for link underlines and metadata. All bind to the same
|
||||
* oklab-fallback rgba (warm brown) at different alphas. */
|
||||
--fg: #26251e; /* warm near-black */
|
||||
--fg-2: rgba(38, 37, 30, 0.9); /* solid headings on light surfaces */
|
||||
--muted: rgba(38, 37, 30, 0.55); /* secondary text */
|
||||
--meta: rgba(38, 37, 30, 0.4); /* metadata, link decoration */
|
||||
|
||||
/* ─── Border (2 levels) ─────────────────────────────────────────
|
||||
* DESIGN.md §Color Palette specifies oklab-space borders as the
|
||||
* brand signature. The CSS-compatible fallback (rgba) is what
|
||||
* actually ships per DESIGN.md §Agent Prompt Guide rule 3. */
|
||||
--border: rgba(38, 37, 30, 0.1); /* primary border, 10% warm brown */
|
||||
--border-soft: rgba(38, 37, 30, 0.06); /* row separators, ghost-button bg */
|
||||
|
||||
/* ─── Accent ──────────────────────────────────────────────────────
|
||||
* Cursor Orange — primary CTAs, link color, ONE hero accent per
|
||||
* screen. Hard cap of 2 visible uses per screen still applies via
|
||||
* lint. Note: the signature hover semantic in DESIGN.md is text
|
||||
* shifting to --danger (crimson) on buttons; the schema's
|
||||
* --accent-hover is reserved for the bg-darken case (when accent
|
||||
* IS the bg, e.g. accent-pill CTA). */
|
||||
--accent: #f54e00;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ────────────────────────────────────────────────────
|
||||
* --danger is Cursor's signature interaction color (hover crimson
|
||||
* on buttons), so it gets the brand-specific warm value rather
|
||||
* than the schema fallback's pure red. --success is a muted
|
||||
* teal-green (warm-shifted). --warn keeps the schema fallback;
|
||||
* Cursor's marketing site has no native warn token. */
|
||||
--success: #1f8a65; /* muted teal-green */
|
||||
--warn: #eab308;
|
||||
--danger: #cf2d56; /* warm crimson — hover signature */
|
||||
|
||||
/* ─── Typography ──────────────────────────────────────────────────
|
||||
* Three voices, three roles:
|
||||
* --font-display: CursorGothic for headings + UI labels
|
||||
* --font-body: jjannon serif for editorial body (literary warmth)
|
||||
* --font-mono: berkeleyMono for code, kbd, terminal text
|
||||
* The three-voice system is the typographic signature; component
|
||||
* CSS should never substitute fewer voices for "simplicity". */
|
||||
--font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
/* Type scale — distilled from DESIGN.md §Typography Hierarchy.
|
||||
* Cursor has more than 8 sizes in production (caption 11, body
|
||||
* sans 16, body serif sm 17.28, body serif 19.2, title small 22,
|
||||
* sub-heading 26, section 36, hero 72); the schema's 8 slots
|
||||
* cover the spine. 17.28px / 19.2px live inline in components.html
|
||||
* where the body-serif distinction matters. */
|
||||
--text-xs: 11px; /* caption, system micro */
|
||||
--text-sm: 14px; /* button label, system caption */
|
||||
--text-base: 16px; /* body sans, ui body */
|
||||
--text-lg: 19.2px; /* body serif (1.20rem) */
|
||||
--text-xl: 22px; /* title small */
|
||||
--text-2xl: 26px; /* sub-heading */
|
||||
--text-3xl: 36px; /* section heading */
|
||||
--text-4xl: 72px; /* display hero */
|
||||
|
||||
/* Leading + tracking — DESIGN.md §Typography Hierarchy.
|
||||
* --leading-tight=1.10 is Cursor's hero rhythm (matches the
|
||||
* 72px display); brands with relaxed display rhythms set 1.20.
|
||||
* --tracking-display=-0.03em is the 72px-normalized hero tracking
|
||||
* (-2.16px / 72px). Smaller display sizes in components.html
|
||||
* use proportional inline overrides. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.03em;
|
||||
|
||||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||||
* 8px-rooted scale from DESIGN.md §Layout Principles (with the
|
||||
* --space-1=4px tier kept for icon/dot rhythm). Cursor's
|
||||
* sub-8px micro-scale (1.5/2/2.5/3/5/6) is component-internal —
|
||||
* see the elev-ring / icon-rule decisions in components.html. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — DESIGN.md §Responsive Behavior collapsing
|
||||
* strategy: "Section spacing: 80px+ → 48px → 32px on mobile". */
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ──────────────────────────────────────────────────────
|
||||
* DESIGN.md §Border Radius Scale: comfortable 8px (primary
|
||||
* buttons/cards/menus), featured 10px (larger containers), full
|
||||
* pill 9999px (tags/filters). Schema's --radius-md gets 10px
|
||||
* rather than 12px to honor the cursor-specific featured tier;
|
||||
* --radius-lg keeps 12px because no Cursor surface uses 16px+. */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ───────────────────────────────────────────────────
|
||||
* Cursor's depth signature (DESIGN.md §Depth & Elevation): no
|
||||
* crisp drop shadows. Border ring + diffused atmospheric lift.
|
||||
* --elev-flat: pages, text blocks
|
||||
* --elev-ring: standard card edge (1px warm-brown ring)
|
||||
* --elev-raised: signature heavy-blur shadow with oklab ring,
|
||||
* used for elevated cards / popovers / modals. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
0 28px 70px rgba(0, 0, 0, 0.14),
|
||||
0 14px 32px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px var(--border);
|
||||
|
||||
/* ─── Focus ───────────────────────────────────────────────────────
|
||||
* DESIGN.md §Interaction & Motion: "Shadow-based focus:
|
||||
* rgba(0,0,0,0.1) 0px 4px 12px for depth-based focus indication.
|
||||
* Consistent warm tone in all focus states — no cold blue focus
|
||||
* rings." Implemented as box-shadow so it layers without
|
||||
* affecting layout. */
|
||||
--focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* ─── Motion ──────────────────────────────────────────────────────
|
||||
* DESIGN.md §Interaction & Motion specifies 150ms color / 200ms
|
||||
* shadow with `ease` easing. Cursor uses the keyword `ease`
|
||||
* rather than a custom cubic-bezier; component authors should
|
||||
* not rebind to a more aggressive curve. */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease;
|
||||
|
||||
/* ─── Layout ──────────────────────────────────────────────────────
|
||||
* DESIGN.md §Grid & Container: "Max content width: approximately
|
||||
* 1200px". Gutters not explicitly specified; using cross-brand
|
||||
* defaults that match default. */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Discord
|
||||
description: "Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments."
|
||||
category: "Productivity & SaaS"
|
||||
colors:
|
||||
palette: ["#313338", "#1e1f22", "#5865f2", "#2b2d31", "#4752c4", "#7289da"]
|
||||
typography:
|
||||
fonts: "Helvetica Neue, Helvetica"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Discord
|
||||
|
||||
> Category: Productivity & SaaS
|
||||
> Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Discord's product is engineered for evenings, raids, and group voice — so the entire surface is dark-first. The default canvas is the deep `Background Primary` (`#313338` light theme, `#1e1f22` dark theme), with chat columns layered on slightly lighter or darker shades to denote channels, threads, and side panels. The signature **Blurple** (`#5865f2`) is reserved for the brand mark, primary CTAs, mentions, and the "you" affordance — used sparingly so it pops against the muted neutrals.
|
||||
|
||||
Typography is **gg sans** (Discord's custom Whitney-replacement) for prose and chrome, with rounded geometric shapes that feel approachable but still legible at the small sizes a chat client demands. Headings step up incrementally; chat rows are tight (4–8px between message groups) so hours of scrollback feel scannable.
|
||||
|
||||
The shape language is rounded but not balloon-soft: 8px radii on cards, 4px on inputs, full pills on status badges and tags. Servers are rounded-square avatars at 48px that morph to circles on hover — a tiny piece of motion that has become part of the brand's identity.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dark-first surfaces: `#1e1f22` / `#2b2d31` / `#313338` (3-step depth)
|
||||
- Blurple `#5865f2` as the only saturated accent in the chat surface
|
||||
- gg sans (Whitney-style) for all text — friendly, geometric, neutral
|
||||
- Rounded-square server avatars (16px radius) that snap to circles on hover
|
||||
- Tight chat-row spacing, generous side-panel padding
|
||||
- Status dots: green online, yellow idle, red dnd, gray offline
|
||||
- Pixel-snapped 1px dividers in subtle off-white at low alpha
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Blurple** (`#5865f2`): Brand primary, primary CTA, mention highlight.
|
||||
- **Blurple Hover** (`#4752c4`): Hover/active for blurple.
|
||||
- **Blurple Soft** (`#7289da`): Legacy blurple, secondary accent in marketing.
|
||||
|
||||
### Surface (Dark Theme — default)
|
||||
- **Background Tertiary** (`#1e1f22`): Server list rail, deepest background.
|
||||
- **Background Secondary** (`#2b2d31`): Channel sidebar, settings sidebar.
|
||||
- **Background Primary** (`#313338`): Chat surface, message column.
|
||||
- **Background Floating** (`#111214`): Floating popovers, tooltips, autocomplete.
|
||||
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Hover overlay on rows.
|
||||
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Active row.
|
||||
|
||||
### Surface (Light Theme)
|
||||
- **Light Bg Primary** (`#ffffff`): Chat surface in light theme.
|
||||
- **Light Bg Secondary** (`#f2f3f5`): Sidebar in light theme.
|
||||
- **Light Bg Tertiary** (`#e3e5e8`): Deepest light surface.
|
||||
|
||||
### Text
|
||||
- **Header Primary** (`#f2f3f5`): Channel headers, modal titles in dark theme.
|
||||
- **Header Secondary** (`#b5bac1`): Muted headers.
|
||||
- **Text Normal** (`#dbdee1`): Body text in dark theme — slightly cooler than pure white.
|
||||
- **Text Muted** (`#949ba4`): Timestamps, server names, secondary metadata.
|
||||
- **Text Link** (`#00a8fc`): Hyperlinks in messages — sky blue, distinct from blurple.
|
||||
- **Channels Default** (`#80848e`): Inactive channel name in sidebar.
|
||||
|
||||
### Status & Semantic
|
||||
- **Status Online** (`#23a55a`): Online dot, success states.
|
||||
- **Status Idle** (`#f0b232`): Idle dot, away.
|
||||
- **Status DND** (`#f23f43`): Do-not-disturb, also serves as destructive red.
|
||||
- **Status Streaming** (`#593695`): "Streaming" purple.
|
||||
- **Status Offline** (`#80848e`): Offline gray.
|
||||
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Soft blurple wash on @mention rows.
|
||||
|
||||
### Border & Divider
|
||||
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Standard divider in dark.
|
||||
- **Border Subtle** (`#3f4147`): Solid divider for cards.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Body / UI / Headings**: `gg sans`, with fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
|
||||
- **Display (legacy / Whitney)**: `Whitney`, with fallback: `gg sans`
|
||||
- **Code / Mono**: `"gg mono"`, with fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Marketing hero |
|
||||
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Settings/profile titles |
|
||||
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, channel header |
|
||||
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Standard chat text |
|
||||
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Author of a message |
|
||||
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
|
||||
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Channel list rows |
|
||||
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Server header |
|
||||
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Status text, edited tag |
|
||||
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Inline `code` |
|
||||
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```triple-fenced``` block |
|
||||
|
||||
### Principles
|
||||
- **Friendly geometry**: gg sans replaces Whitney with rounded terminals on a/g/s — the brand wants warmth without breaking legibility.
|
||||
- **Weight contrast over color contrast**: hierarchy comes from 400→500→600→700→800 weight steps; the surface stays neutral.
|
||||
- **16px body**: chat messages do not shrink below 16px. Density comes from line-height (1.375), not font size.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary**
|
||||
- Background: `#5865f2`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#4752c4`
|
||||
- Use: Primary CTAs, "Continue", "Join Server"
|
||||
|
||||
**Secondary**
|
||||
- Background: `#4e5058`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Hover: `#6d6f78`
|
||||
|
||||
**Tertiary / Subtle (Link-style)**
|
||||
- Background: transparent
|
||||
- Text: `#dbdee1`
|
||||
- Hover: text underlined, no background change
|
||||
|
||||
**Danger**
|
||||
- Background: `#da373c`
|
||||
- Text: `#ffffff`
|
||||
- Hover: `#a12d2f`
|
||||
|
||||
### Inputs
|
||||
- Background: `#1e1f22`
|
||||
- Text: `#dbdee1`
|
||||
- Border: 1px solid `#1e1f22`
|
||||
- Radius: 4px
|
||||
- Padding: 10px 12px
|
||||
- Focus: border `#5865f2`
|
||||
|
||||
### Server Avatars
|
||||
- Size: 48×48px
|
||||
- Radius: 16px (rounded square) by default; transitions to 50% on hover and active.
|
||||
- Active state: 4px white pill on the left edge of the icon column.
|
||||
|
||||
### Status Dots
|
||||
- Size: 10×10px
|
||||
- Border: 3px solid background-tertiary (creates the "notch" effect)
|
||||
- Position: bottom-right of avatar.
|
||||
|
||||
### Cards / Embeds
|
||||
- Background: `#2b2d31` (dark) or `#f2f3f5` (light)
|
||||
- Left border: 4px solid embed accent color.
|
||||
- Radius: 4px
|
||||
- Padding: 8px 16px
|
||||
|
||||
### Mention Pill
|
||||
- Background: `rgba(88, 101, 242, 0.3)`
|
||||
- Text: `#c9cdfb`
|
||||
- Padding: 0 2px
|
||||
- Radius: 3px
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40.
|
||||
- **Server rail**: 72px wide, fixed.
|
||||
- **Channel sidebar**: 240px wide.
|
||||
- **Member list**: 240px wide on desktop.
|
||||
- **Chat column**: fluid, min 380px.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 200ms for hover; 350ms for the avatar circle-morph; 80ms for tooltip fade.
|
||||
- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` for the avatar morph (snappy then settle).
|
||||
- **Notification pulse**: 1.4s ease-in-out infinite on unread mention indicator.
|
||||
@@ -0,0 +1,359 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Discord — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/discord. Every visible
|
||||
value comes from tokens.css. Discord's signature moves: dark-first
|
||||
three-step depth ladder, gg sans with friendly geometry, Blurple
|
||||
accent (#5865f2), semi-transparent white borders."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #313338;
|
||||
--surface: #2b2d31;
|
||||
--surface-warm: #1e1f22;
|
||||
|
||||
--fg: #dbdee1;
|
||||
--fg-2: #f2f3f5;
|
||||
--muted: #949ba4;
|
||||
--meta: #80848e;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-soft: #3f4147;
|
||||
|
||||
--accent: #5865f2;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #4752c4;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #23a55a;
|
||||
--warn: #f0b232;
|
||||
--danger: #f23f43;
|
||||
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 56px;
|
||||
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 40px;
|
||||
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
rgba(0, 0, 0, 0.4) 0px 2px 4px,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ─────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
color: var(--fg-2);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-3xl);
|
||||
/* 32px section: line-height 1.20, normal tracking. */
|
||||
line-height: 1.20;
|
||||
font-weight: 700;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-2xl);
|
||||
/* 24px page heading: line-height 1.25 per DESIGN.md.
|
||||
Overrides the shared 1.10 set above. */
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--muted); font-weight: 400; }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); color: var(--muted); }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--meta);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
|
||||
/* ─── Buttons ─────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.btn-primary { background: var(--accent); color: var(--accent-on); }
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-secondary { background: #4e5058; color: #ffffff; }
|
||||
.btn-secondary:hover { background: #6d6f78; }
|
||||
.btn-danger { background: #da373c; color: #ffffff; }
|
||||
|
||||
/* ─── Server avatars ─────────────────────── */
|
||||
.server-rail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3);
|
||||
background: var(--surface-warm);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.server-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.server-icon:hover { border-radius: 50%; }
|
||||
|
||||
/* ─── Mention pill ───────────────────────── */
|
||||
.mention {
|
||||
display: inline;
|
||||
background: rgba(88, 101, 242, 0.3);
|
||||
color: #c9cdfb;
|
||||
padding: 0 2px;
|
||||
border-radius: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ─── Card ───────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* ─── Inputs ─────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.field input {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--surface-warm);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field input:focus { border-color: var(--accent); }
|
||||
|
||||
/* ─── Layout ─────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · discord</p>
|
||||
<h1>Your place to talk.</h1>
|
||||
<p class="lead" style="max-width:46ch">
|
||||
Discord is the easiest way to talk over voice, video, and text.
|
||||
Dark-first, Blurple accent, gg sans — every value from tokens.css.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">Download for free</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside style="display:flex;gap:var(--space-4);align-items:flex-start">
|
||||
<div class="server-rail">
|
||||
<div class="server-icon">OD</div>
|
||||
<div style="width:32px;height:2px;background:var(--border-soft);border-radius:2px"></div>
|
||||
<div class="server-icon" style="background:#23a55a;font-size:18px">🎮</div>
|
||||
<div class="server-icon" style="background:#8250df;font-size:18px">🎨</div>
|
||||
</div>
|
||||
<div class="card stack-3" style="flex:1">
|
||||
<p class="eyebrow"># general</p>
|
||||
<p style="font-size:var(--text-base);color:var(--fg)">
|
||||
<span style="font-weight:500;color:#f2f3f5">Ada</span>
|
||||
<span style="font-size:var(--text-xs);color:var(--meta)">Today at 4:32 PM</span>
|
||||
</p>
|
||||
<p style="font-size:var(--text-base)">
|
||||
Adding token fixtures for <span class="mention">@batch-2</span> brands today.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3" style="margin-bottom:var(--space-6)">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2>Dark depth through luminance steps.</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card stack-3">
|
||||
<h3>Three-step depth</h3>
|
||||
<p class="body-sm">
|
||||
#1e1f22 server rail → #2b2d31 sidebar → #313338 chat. Each step
|
||||
slightly lighter. No color variation — only luminance.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3>Blurple accent</h3>
|
||||
<p class="body-sm">
|
||||
#5865f2 — reserved for CTAs, mentions, and "you" affordances.
|
||||
Hover: #4752c4. Used sparingly so it pops against muted neutrals.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3>gg sans geometry</h3>
|
||||
<p class="body-sm">
|
||||
Friendly rounded terminals on a/g/s. Weight 400/500/600/700/800 —
|
||||
hierarchy through contrast, not color. 16px body never shrinks.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FORM -->
|
||||
<section data-od-id="form">
|
||||
<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs on dark surfaces.</h2>
|
||||
<p class="lead" style="max-width:44ch">
|
||||
Background: #1e1f22. Border shifts to Blurple on focus.
|
||||
Labels: uppercase, 0.04em tracking, weight 600.
|
||||
</p>
|
||||
</div>
|
||||
<form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
|
||||
onsubmit="event.preventDefault()">
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" placeholder="you@example.com" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<input id="username" type="text" placeholder="cooluser#1234" />
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
|
||||
<button type="submit" class="btn btn-primary">Continue</button>
|
||||
<button type="button" class="btn btn-secondary">Back</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/discord/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "Discord" brand — deep blurple,
|
||||
* dark-first surfaces, voice-and-chat for gaming and community.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Dark-first: three-step depth ladder (#1e1f22 deepest → #2b2d31
|
||||
* sidebar → #313338 chat surface), pixel-snapped 1px dividers at
|
||||
* low alpha, rounded-square server avatars that morph to circles.
|
||||
* 2. gg sans (friendly geometric, Whitney-replacement) for all text at
|
||||
* 400/500/600/700/800 weights; 16px body never shrinks; hierarchy
|
||||
* comes from weight contrast over color contrast.
|
||||
* 3. Blurple (#5865f2) as the single saturated accent — reserved for
|
||||
* brand mark, primary CTAs, mentions, and "you" affordances; used
|
||||
* sparingly so it pops against the muted dark surface.
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #313338 (chat surface / primary dark); --surface: #2b2d31.
|
||||
* - --surface-warm: #191a1e (deepest — server list rail, level below).
|
||||
* - --fg: #dbdee1 (text-normal — cooler than pure white).
|
||||
* - --fg-2: #f2f3f5 (header-primary — modal titles, channel headers).
|
||||
* - --muted: #949ba4 (text-muted — timestamps, metadata).
|
||||
* - --border: rgba(255,255,255,0.06); --border-soft: same.
|
||||
* - --accent: #5865f2 (Blurple); --accent-hover: #4752c4.
|
||||
* - --tracking-display: -0.02em (display 56px hero per DESIGN.md).
|
||||
* - --radius-sm: 4px (buttons/inputs); --radius-md: 8px (cards).
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #313338; /* chat surface / primary dark */
|
||||
--surface: #2b2d31; /* channel sidebar, settings sidebar */
|
||||
--surface-warm: #1e1f22; /* server list rail — deepest layer */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #dbdee1; /* text-normal — slightly cooler than white */
|
||||
--fg-2: #f2f3f5; /* header-primary — modal titles */
|
||||
--muted: #949ba4; /* text-muted — timestamps, server names */
|
||||
--meta: #80848e; /* channels-default — inactive sidebar names */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: rgba(255, 255, 255, 0.06); /* standard divider */
|
||||
--border-soft: #3f4147; /* solid divider for cards */
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
--accent: #5865f2; /* Blurple — brand primary CTA */
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #4752c4; /* darker hover */
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #23a55a; /* status-online green */
|
||||
--warn: #f0b232; /* status-idle yellow */
|
||||
--danger: #f23f43; /* status-dnd / destructive red */
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §Typography Hierarchy.
|
||||
* Discord: 56px display, 24px page heading, 16px body (never shrinks).
|
||||
* Schema spine: xs=12 (timestamp/caption), base=16, 4xl=56. */
|
||||
--text-xs: 12px; /* timestamp / caption / meta */
|
||||
--text-sm: 14px; /* compact metadata */
|
||||
--text-base: 16px; /* message body — never below 16px */
|
||||
--text-lg: 18px; /* feature heading */
|
||||
--text-xl: 20px; /* sub-heading */
|
||||
--text-2xl: 24px; /* page heading — settings/profile */
|
||||
--text-3xl: 32px; /* section heading */
|
||||
--text-4xl: 56px; /* display hero — marketing */
|
||||
|
||||
/* Leading + tracking.
|
||||
* --leading-tight=1.10: 56px hero compression.
|
||||
* h2 (32px) → 1.20; h3 (24px) → 1.25 per brand feel.
|
||||
* --tracking-display: -0.02em (display 56px per DESIGN.md). */
|
||||
--leading-body: 1.375;
|
||||
--leading-tight: 1.10;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
/* 4px base grid per DESIGN.md §Spacing & Layout. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 40px;
|
||||
|
||||
/* Section rhythm. */
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* 4px for buttons/inputs; 8px for cards. Rounded but not balloon-soft. */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* Dark surfaces: luminance stepping; semi-transparent white borders
|
||||
as depth signal rather than drop shadows. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Duolingo
|
||||
description: "Language-learning platform. Bright owl green, chunky shadows, gamified joy."
|
||||
category: "Productivity & SaaS"
|
||||
colors:
|
||||
palette: ["#58cc02", "#ffffff", "#e5e5e5", "#ff9600", "#ce82ff", "#58a700"]
|
||||
typography:
|
||||
fonts: "Inter, Helvetica Neue, JetBrains Mono"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Duolingo
|
||||
|
||||
> Category: Productivity & SaaS
|
||||
> Language-learning platform. Bright owl green, chunky shadows, gamified joy.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Duolingo is gamification rendered as visual language. The interface is unapologetically bright, with **owl green** (`#58cc02`) as the brand primary and a chunky 4px bottom-shadow on every interactive element that reads like a 3D button waiting to be pressed. The page is white (`#ffffff`) with thick 2–3px borders in a deep gray (`#e5e5e5`) and the entire system reads like an iOS app from 2015 reborn with better hierarchy.
|
||||
|
||||
Typography uses **Feather Bold** (a custom rounded sans) for chrome and **Mona Sans** (or Inter) for body. Display sizes are big and confident — Duolingo never whispers. Headings often carry the green underline-stroke or sit on a green pill, and the mascot Duo (a green owl) appears as an active illustration character, not a static logo.
|
||||
|
||||
Shape language is friendly: 16–20px radii on cards, 12px on buttons, 9999px on chips and progress bars. Iconography is filled, rounded, and color-coded by skill — every lesson surface has an instantly identifiable color pairing.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Owl green (`#58cc02`) as the dominant brand color, used in 30%+ of the surface
|
||||
- Chunky 4px bottom-shadow on every button (the "tactile press" affordance)
|
||||
- 2–3px solid borders, never hairlines
|
||||
- Feather Bold (rounded display) + Mona Sans (body)
|
||||
- Big confident type — display sizes start at 48px and climb
|
||||
- Mascot-as-character: Duo the owl appears in onboarding, errors, streaks
|
||||
- Streak orange (`#ff9600`) and gem pink (`#ce82ff`) as secondary brand colors
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Owl Green** (`#58cc02`): Brand primary, primary CTA, correct answer.
|
||||
- **Owl Green Deep** (`#58a700`): Pressed/shadow color for green buttons.
|
||||
- **Owl Green Light** (`#89e219`): Hover, soft fills.
|
||||
- **Owl Green Pale** (`#dbf8c5`): Soft surface, success banner.
|
||||
|
||||
### Secondary Accents
|
||||
- **Streak Orange** (`#ff9600`): Streak counter, fire icon, premium energy.
|
||||
- **Streak Orange Deep** (`#cc7a00`): Pressed orange.
|
||||
- **Gem Pink** (`#ce82ff`): Gem currency, Super Duolingo.
|
||||
- **Eel Blue** (`#1cb0f6`): Hint button, info link.
|
||||
- **Cardinal Red** (`#ff4b4b`): Wrong answer, life lost.
|
||||
- **Bee Yellow** (`#ffc800`): Pro badge, achievement.
|
||||
|
||||
### Surface
|
||||
- **Snow** (`#ffffff`): Primary background.
|
||||
- **Eel** (`#f7f7f7`): Section break, secondary surface.
|
||||
- **Swan** (`#e5e5e5`): Disabled background, inset block.
|
||||
- **Wolf** (`#777777`): Dark divider, secondary text.
|
||||
|
||||
### Ink & Text
|
||||
- **Eel Black** (`#3c3c3c`): Primary text.
|
||||
- **Wolf** (`#777777`): Secondary text, captions.
|
||||
- **Hare** (`#afafaf`): Disabled, placeholder.
|
||||
|
||||
### Border
|
||||
- **Swan** (`#e5e5e5`): Standard 2px border.
|
||||
- **Hare** (`#afafaf`): Emphasized border on hover.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display / UI / Headings**: `Feather Bold`, with fallback: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
|
||||
- **Body / Long-form**: `Mona Sans`, with fallback: `'Helvetica Neue', system-ui, sans-serif`
|
||||
- **Code (rare, schools/admin)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, monospace`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Onboarding hero |
|
||||
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Page title |
|
||||
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Section heading |
|
||||
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Card title, lesson row |
|
||||
| Body Large | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Lesson prompt, instruction |
|
||||
| Body | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Standard prose |
|
||||
| Caption | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP counter, metadata |
|
||||
| Button | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Standard button label |
|
||||
| Streak | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Streak number, on flame |
|
||||
|
||||
### Principles
|
||||
- **800 is default**: Feather Bold runs at 800 across headings and buttons. 700 feels weak in this system.
|
||||
- **Big type**: heading sizes are 25–40% larger than typical product brands — confidence as identity.
|
||||
- **Rounded letterforms**: every glyph has soft terminals; sharp serifs would break the friendliness contract.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Owl Green)**
|
||||
- Background: `#58cc02`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 14px 24px
|
||||
- Radius: 16px
|
||||
- Border-bottom: 4px solid `#58a700` (the chunky shadow)
|
||||
- Hover: background `#89e219`
|
||||
- Active: translate-y 4px, border-bottom 0 (button "presses")
|
||||
- Use: "Continue", "Check", main CTA.
|
||||
|
||||
**Secondary (White with Bottom-Shadow)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#777777`
|
||||
- Border: 2px solid `#e5e5e5`
|
||||
- Border-bottom: 4px solid `#e5e5e5`
|
||||
- Radius: 16px
|
||||
- Padding: 14px 24px
|
||||
- Hover: text `#3c3c3c`, border `#afafaf`
|
||||
|
||||
**Streak Orange**
|
||||
- Background: `#ff9600`
|
||||
- Text: `#ffffff`
|
||||
- Border-bottom: 4px solid `#cc7a00`
|
||||
- Use: streak goal, "Start streak"
|
||||
|
||||
**Error (Cardinal Red)**
|
||||
- Background: `#ff4b4b`
|
||||
- Text: `#ffffff`
|
||||
- Border-bottom: 4px solid `#cc3b3b`
|
||||
- Use: wrong answer feedback.
|
||||
|
||||
### Cards / Lesson Tiles
|
||||
- Background: `#ffffff`
|
||||
- Border: 2px solid `#e5e5e5`
|
||||
- Border-bottom: 4px solid `#e5e5e5`
|
||||
- Radius: 16px
|
||||
- Padding: 16px
|
||||
- Hover: lift 2px, shadow `0 4px 0 #d7d7d7`
|
||||
|
||||
### Skill Tree Node (Lesson Bubble)
|
||||
- Size: 80×72px
|
||||
- Background: skill-color tinted (green for active, gray for locked)
|
||||
- Border-bottom: 6px solid darker variant
|
||||
- Radius: 50% (circular)
|
||||
- Active: pulses 1.0 → 1.05 every 1.6s
|
||||
|
||||
### Inputs
|
||||
- Background: `#ffffff`
|
||||
- Border: 2px solid `#e5e5e5`
|
||||
- Radius: 12px
|
||||
- Padding: 12px 16px
|
||||
- Focus: border `#1cb0f6` (eel blue), ring `0 0 0 3px rgba(28, 176, 246, 0.2)`
|
||||
|
||||
### Progress Bar
|
||||
- Track: `#e5e5e5`
|
||||
- Fill: `#58cc02` (or `#ff9600` for streak)
|
||||
- Radius: 9999px
|
||||
- Height: 16px
|
||||
- Animated fill: 320ms ease-out on increment.
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
|
||||
- **Container**: max 1080px, 24px gutter.
|
||||
- **Lesson tree column**: 320px wide; centered on desktop.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 180ms for button press; 320ms for skill-node unlock; 1.6s for active-node pulse.
|
||||
- **Easing**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out, slight overshoot) for unlocks.
|
||||
- **Mascot**: Duo blinks every 4–6s, jumps on streak milestones (480ms ease-out spring).
|
||||
@@ -0,0 +1,504 @@
|
||||
---
|
||||
version: alpha
|
||||
name: ElevenLabs
|
||||
description: "A voice-AI brand whose marketing surfaces read like a quietly editorial print magazine. The base canvas is off-white (`#f5f5f5`) holding warm near-black ink (`#292524`); the brand voltage is photographic, not chromatic — soft pastel atmospheric gradient orbs (mint → peach → lavender → sky) drift through the page as the only \"color\" moments. Display runs Waldenburg Light at weight 300 — the editorial signature. Inter carries body, navigation, captions. CTAs are subtle: a near-black ink pill is the primary, a transparent outline is the secondary. The brand trusts atmospheric photography and modest type weights to do all of the brand work; there is no neon accent, no saturated CTA color, no developer-tools dark canvas."
|
||||
|
||||
colors:
|
||||
primary: "#292524"
|
||||
primary-active: "#0c0a09"
|
||||
ink: "#0c0a09"
|
||||
body: "#4e4e4e"
|
||||
body-strong: "#292524"
|
||||
muted: "#777169"
|
||||
muted-soft: "#a8a29e"
|
||||
hairline: "#e7e5e4"
|
||||
hairline-soft: "#f0efed"
|
||||
hairline-strong: "#d6d3d1"
|
||||
canvas: "#f5f5f5"
|
||||
canvas-soft: "#fafafa"
|
||||
canvas-deep: "#0c0a09"
|
||||
surface-card: "#ffffff"
|
||||
surface-strong: "#f0efed"
|
||||
surface-dark: "#0c0a09"
|
||||
surface-dark-elevated: "#1c1917"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-soft: "#a8a29e"
|
||||
gradient-mint: "#a7e5d3"
|
||||
gradient-peach: "#f4c5a8"
|
||||
gradient-lavender: "#c8b8e0"
|
||||
gradient-sky: "#a8c8e8"
|
||||
gradient-rose: "#e8b8c4"
|
||||
semantic-error: "#dc2626"
|
||||
semantic-success: "#16a34a"
|
||||
|
||||
typography:
|
||||
display-mega:
|
||||
fontFamily: "'Waldenburg', 'Times New Roman', serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -1.92px
|
||||
display-xl:
|
||||
fontFamily: "'Waldenburg', serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.08
|
||||
letterSpacing: -0.96px
|
||||
display-lg:
|
||||
fontFamily: "'Waldenburg', serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.17
|
||||
letterSpacing: -0.36px
|
||||
display-md:
|
||||
fontFamily: "'Waldenburg', serif"
|
||||
fontSize: 32px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.13
|
||||
letterSpacing: -0.32px
|
||||
display-sm:
|
||||
fontFamily: "'Waldenburg', serif"
|
||||
fontSize: 24px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 0
|
||||
title-md:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 20px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.35
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.44
|
||||
letterSpacing: 0.18px
|
||||
body-md:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0.16px
|
||||
body-strong:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0.16px
|
||||
body-sm:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 15px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.47
|
||||
letterSpacing: 0.15px
|
||||
caption:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.96px
|
||||
textTransform: uppercase
|
||||
button:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 15px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.0
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 15px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 24px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
base: 16px
|
||||
md: 20px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 10px 20px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.pill}"
|
||||
button-outline:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 9px 19px
|
||||
height: 40px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-mega}"
|
||||
padding: 96px
|
||||
gradient-orb-card:
|
||||
backgroundColor: "{colors.canvas-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xxl}"
|
||||
padding: 32px
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 24px
|
||||
product-card-stack:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 0
|
||||
voice-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 12px 0
|
||||
voice-icon-circular:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 32px
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
pricing-tier-featured:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 16px
|
||||
height: 44px
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
cta-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
testimonial-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
audio-waveform-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 24px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px 48px
|
||||
footer-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
ElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white `{colors.canvas}` (#f5f5f5) holding warm near-black ink `{colors.ink}` (#0c0a09). The brand voltage is **photographic, not chromatic**: soft pastel atmospheric gradient orbs (mint, peach, lavender, sky, rose) drift through the page as the only "color" moments. There is no neon accent, no saturated CTA color, no dark-canvas dev-tools atmosphere.
|
||||
|
||||
Type pairs **Waldenburg Light** (custom serif at weight 300) for display with **Inter** for body, navigation, captions. The display weight at 300 is the editorial signature — never bold, never heavy.
|
||||
|
||||
CTAs are subtle: a near-black ink pill (`{component.button-primary}`) is the primary, a transparent outline (`{component.button-outline}`) is the secondary. The brand trusts atmospheric photography and modest type weights to carry brand work.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Off-white canvas, warm near-black ink. No saturated CTA color.
|
||||
- Single primary action: ink pill at `{rounded.pill}`. Atmospheric gradients carry visual brand voltage.
|
||||
- Display runs Waldenburg Light at weight 300 — editorial magazine voice.
|
||||
- Body runs Inter at 400 with subtle letter-spacing (+0.15-0.18px).
|
||||
- Pastel gradient orbs (5 tokens: mint, peach, lavender, sky, rose) used as atmospheric brand decoration only.
|
||||
- Soft pill geometry (`{rounded.pill}` for CTAs, `{rounded.xl}` for cards).
|
||||
- 96px section rhythm.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Ink Primary** (`{colors.primary}` — #292524): The primary action color — warm near-black pill. Used scarcely.
|
||||
- **Ink Primary Active** (`{colors.primary-active}` — #0c0a09): Press state.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #f5f5f5): Off-white page floor.
|
||||
- **Canvas Soft** (`{colors.canvas-soft}` — #fafafa): Lighter band for subtle alternating sections.
|
||||
- **Canvas Deep** (`{colors.canvas-deep}` — #0c0a09): Same as ink — used for the rare dark-mode hero (Agents page).
|
||||
- **Surface Card** (`{colors.surface-card}` — #ffffff): Pure white card.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #f0efed): Badges, voice-icon plates.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #0c0a09): Dark hero/CTA band canvas.
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1c1917): Cards on dark canvas.
|
||||
|
||||
### Hairlines
|
||||
- **Hairline** (`{colors.hairline}` — #e7e5e4): Default 1px divider.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #f0efed): Lighter divider.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #d6d3d1): Stronger panel outline.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #0c0a09): Display, primary text.
|
||||
- **Body** (`{colors.body}` — #4e4e4e): Default running-text.
|
||||
- **Body Strong** (`{colors.body-strong}` — #292524): Same as primary — emphasis.
|
||||
- **Muted** (`{colors.muted}` — #777169): Sub-titles.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #a8a29e): Disabled text.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on ink pill.
|
||||
- **On Dark** (`{colors.on-dark}` — #ffffff): White text on dark hero.
|
||||
- **On Dark Soft** (`{colors.on-dark-soft}` — #a8a29e): Muted off-white on dark.
|
||||
|
||||
### Atmospheric Gradient Stops (signature)
|
||||
- **Gradient Mint** (`{colors.gradient-mint}` — #a7e5d3): Mint green orb.
|
||||
- **Gradient Peach** (`{colors.gradient-peach}` — #f4c5a8): Peach orb.
|
||||
- **Gradient Lavender** (`{colors.gradient-lavender}` — #c8b8e0): Lavender orb.
|
||||
- **Gradient Sky** (`{colors.gradient-sky}` — #a8c8e8): Sky-blue orb.
|
||||
- **Gradient Rose** (`{colors.gradient-rose}` — #e8b8c4): Rose orb.
|
||||
|
||||
These appear ONLY as soft radial-gradient atmospheric orbs inside `{component.gradient-orb-card}` and as background atmospheric blooms behind hero copy. Never as button fills, never as text colors.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`{colors.semantic-success}` — #16a34a): Confirmation.
|
||||
- **Error** (`{colors.semantic-error}` — #dc2626): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**Waldenburg Light** is the licensed display serif at weight 300. **Inter** carries body, navigation, captions, and buttons. Fallback: `'Times New Roman', serif` for Waldenburg, `sans-serif` for Inter.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-mega}` | 64px | 300 | 1.05 | -1.92px | Homepage hero h1 |
|
||||
| `{typography.display-xl}` | 48px | 300 | 1.08 | -0.96px | Subsidiary heroes |
|
||||
| `{typography.display-lg}` | 36px | 300 | 1.17 | -0.36px | Section heads |
|
||||
| `{typography.display-md}` | 32px | 300 | 1.13 | -0.32px | Sub-section heads |
|
||||
| `{typography.display-sm}` | 24px | 300 | 1.2 | 0 | Card group titles |
|
||||
| `{typography.title-md}` | 20px | 500 | 1.35 | 0 | Component titles — Inter |
|
||||
| `{typography.title-sm}` | 18px | 500 | 1.44 | 0.18px | List labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0.16px | Default body — Inter |
|
||||
| `{typography.body-strong}` | 16px | 500 | 1.5 | 0.16px | Emphasized body |
|
||||
| `{typography.body-sm}` | 15px | 400 | 1.47 | 0.15px | Footer body |
|
||||
| `{typography.caption}` | 14px | 400 | 1.5 | 0 | Photo captions |
|
||||
| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 0.96px | Section labels, badges |
|
||||
| `{typography.button}` | 15px | 500 | 1.0 | 0 | CTA pill |
|
||||
| `{typography.nav-link}` | 15px | 500 | 1.4 | 0 | Top-nav menu |
|
||||
|
||||
### Principles
|
||||
- **Display weight stays at 300.** Waldenburg Light is the editorial signature. Never bold display copy.
|
||||
- **Subtle letter-spacing on body.** Inter at +0.15-0.18px tracking — slightly looser than default Inter for a more editorial feel.
|
||||
- **Negative letter-spacing on display.** Waldenburg pulls -0.32px to -1.92px tighter on display sizes.
|
||||
|
||||
### Note on Font Substitutes
|
||||
Waldenburg is licensed. Open-source substitute: **EB Garamond** at weight 300 (slightly more humanist) or **GT Sectra** (closer to Waldenburg's modernity). Use Inter directly for body — it's the same family ElevenLabs uses.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** 96px.
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: ~1200px.
|
||||
- Editorial body: 12-column grid.
|
||||
- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
|
||||
- Footer: 5-column at desktop.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Generous editorial pacing — print-magazine feel. 96px between bands; cards inside bands sit close (16-24px gap). The atmospheric gradient orbs occupy generous breathing space without competing with copy.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system uses **hairline + soft drop**. Cards float above the off-white canvas via 1px hairlines and a single subtle shadow tier. Atmospheric depth comes from gradient orbs.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat (canvas) | `{colors.canvas}` (#f5f5f5) | Body bands, footer |
|
||||
| Card | `{colors.surface-card}` (#ffffff) | Content cards |
|
||||
| Hairline border | 1px `{colors.hairline}` | Card outlines |
|
||||
| Soft drop | `0 4px 16px rgba(0, 0, 0, 0.04)` | Hovered cards (single shadow tier) |
|
||||
| Gradient orb | Radial gradient with one of `{colors.gradient-*}` | Atmospheric depth — never a card surface |
|
||||
|
||||
### Decorative Depth
|
||||
- **Pastel gradient orbs** are the brand's strongest atmospheric pattern. Soft radial blooms in mint, peach, lavender, sky, or rose drift through hero bands and feature sections without containing any content — they are pure atmosphere.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Reserved |
|
||||
| `{rounded.xs}` | 4px | Inline tags |
|
||||
| `{rounded.sm}` | 6px | Compact rows |
|
||||
| `{rounded.md}` | 8px | Form inputs |
|
||||
| `{rounded.lg}` | 12px | Compact cards |
|
||||
| `{rounded.xl}` | 16px | Feature cards, pricing tiers |
|
||||
| `{rounded.xxl}` | 24px | Gradient orb cards (extra-soft) |
|
||||
| `{rounded.pill}` | 9999px | All CTA buttons, badges |
|
||||
| `{rounded.full}` | 9999px | Voice icon circles, avatars |
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: ElevenLabs wordmark left, primary horizontal menu (Creative / Agents / Video / Pricing / Enterprise / Docs), Sign In + "Try free" primary CTA right.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Near-black ink pill. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (15px / 500), padding 10px × 20px, height 40px, rounded `{rounded.pill}`.
|
||||
|
||||
**`button-primary-active`** — Press state. Background `{colors.primary-active}`.
|
||||
|
||||
**`button-outline`** — Transparent pill with 1px ink border. Background transparent, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.
|
||||
|
||||
**`button-tertiary-text`** — Inline ink text link.
|
||||
|
||||
### Hero & Atmospheric
|
||||
|
||||
**`hero-band`** — Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (64px / 300 / -1.92px), subhead in `{typography.body-md}`, two CTAs, and an atmospheric gradient orb behind the centered headline.
|
||||
|
||||
**`gradient-orb-card`** — A large card with a soft radial-gradient orb behind centered display copy. Background `{colors.canvas-soft}`, rounded `{rounded.xxl}` (24px), padding 32px. Each variant uses one of the five gradient tokens (`gradient-mint`, `gradient-peach`, `gradient-lavender`, `gradient-sky`, `gradient-rose`).
|
||||
|
||||
**`audio-waveform-card`** — A waveform visualization card. Background `{colors.surface-card}`, rounded `{rounded.xl}`, padding 24px. Holds a play button + waveform glyph + voice metadata.
|
||||
|
||||
### Cards
|
||||
|
||||
**`feature-card`** — 2-up or 3-up grids. Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.xl}`, padding 24px, 1px hairline border.
|
||||
|
||||
**`product-card-stack`** — Stacked product preview cards. Background `{colors.surface-card}`, rounded `{rounded.xl}`, no padding (children fill the card edge-to-edge).
|
||||
|
||||
**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.xl}`, padding 32px.
|
||||
|
||||
### Voice Library
|
||||
|
||||
**`voice-row`** — Horizontal row in voice list. Background transparent, 1px hairline divider. Layout: 32px circular voice icon (`{component.voice-icon-circular}`) left, voice name + accent stack, optional preview button right.
|
||||
|
||||
**`voice-icon-circular`** — Background `{colors.surface-strong}`, rounded `{rounded.full}`, 32px diameter. Holds initials or voice glyph.
|
||||
|
||||
### Pricing
|
||||
|
||||
**`pricing-tier-card`** — Background `{colors.surface-card}`, rounded `{rounded.xl}`, padding 32px, 1px hairline border.
|
||||
|
||||
**`pricing-tier-featured`** — Featured tier inverts. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.
|
||||
|
||||
### Forms & Tags
|
||||
|
||||
**`text-input`** — Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px, 1px `{colors.hairline-strong}` border. On focus, border thickens to 2px ink.
|
||||
|
||||
**`badge-pill`** — Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band`** — Pre-footer. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single ink pill CTA. 96px padding.
|
||||
|
||||
**`footer`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.
|
||||
|
||||
**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (ink pill) for primary CTAs.
|
||||
- Use Waldenburg Light at weight 300 for every display headline. Never bold.
|
||||
- Use Inter at +0.15-0.18px tracking for body — the editorial dialect.
|
||||
- Use atmospheric gradient orbs (mint/peach/lavender/sky/rose) as decoration only.
|
||||
- Use the pill shape for every CTA and badge.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a saturated brand action color. Ink pill is the only CTA color.
|
||||
- Don't bold display copy. Display sits at weight 300 — bolding shifts the brand voice from editorial to consumer-marketing.
|
||||
- Don't use gradient orbs as button fills, text colors, or component backgrounds. They are pure atmosphere.
|
||||
- Don't use sharp `{rounded.none}` (0px) on CTAs. Pill geometry is the brand button.
|
||||
- Don't drop body Inter to weight 300 to match Waldenburg — body stays at 400/500 for legibility.
|
||||
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 640px | Hero h1 64→32px; feature cards 1-up; nav hamburger; gradient orbs shrink. |
|
||||
| Tablet | 640–1024px | Hero h1 48px; feature cards 2-up. |
|
||||
| Desktop | 1024–1280px | Full hero h1 64px; feature cards 3-up. |
|
||||
| Wide | > 1280px | Content caps at 1200px. |
|
||||
|
||||
### Touch Targets
|
||||
- Primary pill at 40px height — at WCAG AA, padded for AAA.
|
||||
- Voice icon circles 32px — padded row creates effective 48px tap zone.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav switches to hamburger below 768px.
|
||||
- Feature grid: 3-up → 2-up → 1-up.
|
||||
- Gradient orbs reduce diameter at every breakpoint but never disappear.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on a single component at a time.
|
||||
2. CTAs default to `{rounded.pill}`. Cards use `{rounded.xl}` (16px).
|
||||
3. Variants live as separate entries.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Hover state never documented.
|
||||
6. Waldenburg 300 for display, Inter 400/500 for body.
|
||||
7. Gradient orbs scoped to atmospheric decoration.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Waldenburg is a licensed typeface; EB Garamond / GT Sectra are documented substitutes.
|
||||
- Animation timings (orb drift, waveform pulse, hero entrance) out of scope.
|
||||
- In-product surfaces (voice library editor, agent playground) only partially captured via marketing mockups.
|
||||
- Form validation states beyond focus not visible on captured surfaces.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Elevenlabs Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/elevenlabs/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,526 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Expo
|
||||
description: "A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (`#171717`) carries body and display alike. The single brand voltage is **pure black** (`#000000`) for primary CTAs — minimal and editorial-feeling, paired with a small blue text-link accent (`#0d74ce`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces — over the gradient sky wash."
|
||||
|
||||
colors:
|
||||
primary: "#000000"
|
||||
primary-active: "#1a1a1a"
|
||||
text-link: "#0d74ce"
|
||||
text-link-secondary: "#476cff"
|
||||
ink: "#171717"
|
||||
body: "#60646c"
|
||||
body-strong: "#171717"
|
||||
muted: "#999999"
|
||||
muted-soft: "#cccccc"
|
||||
hairline: "#f0f0f3"
|
||||
hairline-soft: "#f5f5f7"
|
||||
hairline-strong: "#dcdee0"
|
||||
canvas: "#ffffff"
|
||||
canvas-soft: "#fafafa"
|
||||
surface-card: "#ffffff"
|
||||
surface-strong: "#f0f0f3"
|
||||
surface-dark: "#171717"
|
||||
surface-dark-elevated: "#1a1a1a"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-soft: "#b0b4ba"
|
||||
gradient-sky-light: "#cfe7ff"
|
||||
gradient-sky-mid: "#a8c8e8"
|
||||
accent-warning: "#ab6400"
|
||||
accent-preview: "#8145b5"
|
||||
accent-link-bright: "#47c2ff"
|
||||
semantic-error: "#eb8e90"
|
||||
semantic-success: "#16a34a"
|
||||
|
||||
typography:
|
||||
display-mega:
|
||||
fontFamily: "'Inter', -apple-system, system-ui, sans-serif"
|
||||
fontSize: 64px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -1.92px
|
||||
display-xl:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 48px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1.44px
|
||||
display-lg:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -1.08px
|
||||
display-md:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 28px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.84px
|
||||
display-sm:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 22px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.25
|
||||
letterSpacing: -0.5px
|
||||
title-md:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
body-md:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.88px
|
||||
textTransform: uppercase
|
||||
code:
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.0
|
||||
letterSpacing: 0
|
||||
nav-link:
|
||||
fontFamily: "'Inter', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 24px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
base: 16px
|
||||
md: 20px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
height: 40px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 9px 17px
|
||||
height: 40px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.text-link}"
|
||||
typography: "{typography.button}"
|
||||
hero-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-mega}"
|
||||
padding: 96px
|
||||
device-mockup-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 0
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
feature-card-dark:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
workflow-step-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
workflow-step-icon:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
rounded: "{rounded.md}"
|
||||
size: 32px
|
||||
code-block:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.code}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 20px
|
||||
ide-mockup-card:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 0
|
||||
pricing-tier-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-tier-featured:
|
||||
backgroundColor: "{colors.surface-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 16px
|
||||
height: 44px
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.surface-strong}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
ecosystem-tile:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
rounded: "{rounded.md}"
|
||||
size: 64px
|
||||
cta-band:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
testimonial-card:
|
||||
backgroundColor: "{colors.surface-card}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
footer-light:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px 48px
|
||||
footer-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Expo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is **pure white** (`{colors.canvas}` — #ffffff) with a soft **sky-blue gradient atmospheric wash** behind the hero band. Near-black ink `{colors.ink}` (#171717) carries body and display alike. The single brand voltage is **pure black** (`{colors.primary}` — #000000) for primary CTAs — minimal and editorial-feeling. A small blue text-link accent (`{colors.text-link}` — #0d74ce) is reserved for inline body links, never as a CTA.
|
||||
|
||||
Type runs **Inter** as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface — the brand trusts Inter's editorial neutrality.
|
||||
|
||||
The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) — over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.
|
||||
- Single primary CTA: pure black pill at `{rounded.md}` (8px) — compact developer-tool dialect.
|
||||
- Text-link blue (`{colors.text-link}`) for inline links only — never on a CTA.
|
||||
- Inter as the single sans family — no custom display typeface.
|
||||
- JetBrains Mono on every code surface.
|
||||
- Device-mockup hero with real Expo product surfaces is the brand chrome.
|
||||
- Hairline + soft drop depth; no atmospheric brand decoration outside the hero.
|
||||
- 96px section rhythm.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Black** (`{colors.primary}` — #000000): Primary CTA fill. Used scarcely.
|
||||
- **Black Active** (`{colors.primary-active}` — #1a1a1a): Press state.
|
||||
- **Text Link Blue** (`{colors.text-link}` — #0d74ce): Inline body links inside long-form copy. Scoped narrowly — never on CTAs.
|
||||
- **Legal Link Blue** (`{colors.text-link-secondary}` — #476cff): Inline links inside legal copy footer.
|
||||
- **Bright Cyan** (`{colors.accent-link-bright}` — #47c2ff): Used very sparingly inside docs widget links.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #ffffff): Pure white page floor.
|
||||
- **Canvas Soft** (`{colors.canvas-soft}` — #fafafa): Subtle alternating band.
|
||||
- **Surface Card** (`{colors.surface-card}` — #ffffff): Pure white card.
|
||||
- **Surface Strong** (`{colors.surface-strong}` — #f0f0f3): Badges, ecosystem tiles, secondary buttons.
|
||||
- **Surface Dark** (`{colors.surface-dark}` — #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.
|
||||
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): One step lighter inside dark cards.
|
||||
|
||||
### Atmospheric Backdrop
|
||||
- **Sky Light** (`{colors.gradient-sky-light}` — #cfe7ff) + **Sky Mid** (`{colors.gradient-sky-mid}` — #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.
|
||||
|
||||
### Hairlines
|
||||
- **Hairline** (`{colors.hairline}` — #f0f0f3): Default 1px divider.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #f5f5f7): Lighter divider.
|
||||
- **Hairline Strong** (`{colors.hairline-strong}` — #dcdee0): Stronger panel outline.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #171717): Display, body emphasis.
|
||||
- **Body** (`{colors.body}` — #60646c): Default running-text — slightly cool gray.
|
||||
- **Body Strong** (`{colors.body-strong}` — #171717): Same as ink.
|
||||
- **Muted** (`{colors.muted}` — #999999): Sub-titles.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #cccccc): Disabled text.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on black CTA.
|
||||
- **On Dark** (`{colors.on-dark}` — #ffffff): White text on dark cards.
|
||||
- **On Dark Soft** (`{colors.on-dark-soft}` — #b0b4ba): Muted off-white on dark.
|
||||
|
||||
### Semantic
|
||||
- **Warning** (`{colors.accent-warning}` — #ab6400): Warning text inside docs callouts.
|
||||
- **Preview** (`{colors.accent-preview}` — #8145b5): "Preview" tag color.
|
||||
- **Success** (`{colors.semantic-success}` — #16a34a): Confirmation.
|
||||
- **Error** (`{colors.semantic-error}` — #eb8e90): Validation errors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**Inter** is the single sans family across every text role. **JetBrains Mono** carries every code surface. Fallback: `-apple-system, system-ui, sans-serif`.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-mega}` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |
|
||||
| `{typography.display-xl}` | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |
|
||||
| `{typography.display-lg}` | 36px | 600 | 1.15 | -1.08px | Section heads |
|
||||
| `{typography.display-md}` | 28px | 600 | 1.2 | -0.84px | Sub-section heads |
|
||||
| `{typography.display-sm}` | 22px | 600 | 1.25 | -0.5px | Card group titles |
|
||||
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |
|
||||
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List labels |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |
|
||||
| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |
|
||||
| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, badges |
|
||||
| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |
|
||||
| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA labels |
|
||||
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |
|
||||
|
||||
### Principles
|
||||
- **Display weight stays at 600** — confident but not bombastic. Inter at 600 reads cleaner than 700.
|
||||
- **Negative letter-spacing on display** — -0.5px to -1.92px tracking.
|
||||
- **JetBrains Mono on every code surface.**
|
||||
|
||||
### Note on Font Substitutes
|
||||
Inter and JetBrains Mono are both freely available — the system uses them directly.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- **Section padding:** 96px.
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: ~1200px.
|
||||
- Editorial body: 12-column grid.
|
||||
- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
|
||||
- Ecosystem tile grid: 8-up at desktop.
|
||||
- Footer: 5-column at desktop.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Generous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat (canvas) | `{colors.canvas}` (#ffffff) | Body bands, footer |
|
||||
| Card | `{colors.surface-card}` (#ffffff) | Content cards |
|
||||
| Hairline border | 1px `{colors.hairline}` | Card outlines |
|
||||
| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | Hovered cards (single shadow tier) |
|
||||
| Atmospheric gradient | Sky-blue radial wash | Hero backdrop only |
|
||||
| Dark inversion | `{colors.surface-dark}` (#171717) | Dark feature cards, code blocks, featured pricing |
|
||||
|
||||
### Decorative Depth
|
||||
- **Sky-blue gradient backdrop** in the hero only — atmospheric depth without claiming to be a brand color.
|
||||
- **Device mockup composite** as page chrome — MacBook + iPhone showing real Expo dev surfaces.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Reserved |
|
||||
| `{rounded.xs}` | 4px | Inline tags |
|
||||
| `{rounded.sm}` | 6px | Compact rows |
|
||||
| `{rounded.md}` | 8px | CTA buttons, form inputs, ecosystem tiles |
|
||||
| `{rounded.lg}` | 12px | Feature cards, code blocks, pricing tiers |
|
||||
| `{rounded.xl}` | 16px | Device mockup cards |
|
||||
| `{rounded.xxl}` | 24px | Larger atmospheric cards (rare) |
|
||||
| `{rounded.pill}` | 9999px | Badges only |
|
||||
| `{rounded.full}` | 9999px | Avatar plates (rare) |
|
||||
|
||||
Compact developer-ergonomic radii — 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav`** — Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Pure black pill. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px × 18px, height 40px, rounded `{rounded.md}` (8px).
|
||||
|
||||
**`button-primary-active`** — Press state. Background `{colors.primary-active}`.
|
||||
|
||||
**`button-secondary`** — White card with 1px hairline-strong border. Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.
|
||||
|
||||
**`button-tertiary-text`** — Inline blue text link. Background transparent, text `{colors.text-link}`.
|
||||
|
||||
### Hero & Device Mockup
|
||||
|
||||
**`hero-band`** — Background `{colors.canvas}` with a soft sky-blue gradient wash behind the centered headline. Display headline in `{typography.display-mega}` (64px / 600 / -1.92px), subhead in `{typography.body-md}`, single primary CTA, then below — the device mockup composite.
|
||||
|
||||
**`device-mockup-card`** — A layered MacBook + iPhone composite showing real Expo dev surfaces. Background `{colors.surface-card}`, rounded `{rounded.xl}`. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.
|
||||
|
||||
### Cards
|
||||
|
||||
**`feature-card`** — Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.lg}`, padding 24px, 1px `{colors.hairline-strong}` border.
|
||||
|
||||
**`feature-card-dark`** — Dark variant. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.
|
||||
|
||||
**`workflow-step-card`** — Step in the "Get your app on every device" workflow row. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 20px. Layout: 32px square `{component.workflow-step-icon}` + step number + label + body.
|
||||
|
||||
**`workflow-step-icon`** — Square plate. Background `{colors.surface-strong}`, rounded `{rounded.md}`, 32px size.
|
||||
|
||||
**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
### Code & IDE
|
||||
|
||||
**`code-block`** — Inline code block. Background `{colors.surface-dark}`, text `{colors.on-dark}` in `{typography.code}` (JetBrains Mono 13px), rounded `{rounded.lg}`, padding 20px. White text on dark.
|
||||
|
||||
**`ide-mockup-card`** — Stylized IDE mockup. Background `{colors.surface-dark}`, rounded `{rounded.lg}`. Multi-pane editor + terminal preview.
|
||||
|
||||
### Pricing
|
||||
|
||||
**`pricing-tier-card`** — Standard pricing tier. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding 32px, 1px `{colors.hairline-strong}` border.
|
||||
|
||||
**`pricing-tier-featured`** — Featured tier. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.
|
||||
|
||||
### Ecosystem
|
||||
|
||||
**`ecosystem-tile`** — Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background `{colors.surface-card}`, rounded `{rounded.md}`, 64px size, 1px `{colors.hairline}` border.
|
||||
|
||||
### Forms & Tags
|
||||
|
||||
**`text-input`** — Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px, 1px `{colors.hairline-strong}` border. Focus thickens border to 2px ink.
|
||||
|
||||
**`badge-pill`** — Small uppercase pill. Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.
|
||||
|
||||
### CTA / Footer
|
||||
|
||||
**`cta-band`** — Pre-footer band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single black pill CTA. 96px padding.
|
||||
|
||||
**`footer-light`** — Closing white footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.
|
||||
|
||||
**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (black) for primary CTAs.
|
||||
- Use `{colors.text-link}` (blue) for inline body links only — never on CTAs or buttons.
|
||||
- Set every CTA at `{rounded.md}` (8px) — developer dialect.
|
||||
- Use Inter at weight 600 for display, 400 for body.
|
||||
- Render every code surface in JetBrains Mono.
|
||||
- Pair the hero with the device-mockup composite — it's the page chrome.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a saturated brand action color. Black is the only CTA fill.
|
||||
- Don't use blue (`{colors.text-link}`) on a CTA. Inline links only.
|
||||
- Don't drop display below weight 600 or above 700.
|
||||
- Don't use full pills on CTAs — pills are for badges only.
|
||||
- Don't replicate the sky-blue gradient backdrop outside the hero.
|
||||
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 640px | Hero h1 64→32px; device mockup → single iPhone screen; feature grid 1-up; nav hamburger. |
|
||||
| Tablet | 640–1024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |
|
||||
| Desktop | 1024–1280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |
|
||||
| Wide | > 1280px | Content caps at 1200px. |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTA at 40px height — at WCAG AA, padded for AAA.
|
||||
- Search input 44px — at AAA.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav switches to hamburger below 768px.
|
||||
- Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.
|
||||
- Feature grid: 3-up → 2-up → 1-up.
|
||||
- Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on a single component at a time.
|
||||
2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` (12px).
|
||||
3. Variants live as separate entries.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Hover state never documented.
|
||||
6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.
|
||||
7. Black stays the only CTA color; text-link blue stays inline-only.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Inter and JetBrains Mono are freely available — no licensing concerns.
|
||||
- Animation timings (device mockup parallax, hero entrance) out of scope.
|
||||
- In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.
|
||||
- Form validation states beyond focus not visible on captured surfaces.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Expo Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/expo/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,531 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Ferrari
|
||||
description: "A luxury-automotive brand whose marketing surfaces read as cinematic editorial. The base canvas is **near-black** (`#181818`) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables). The single brand voltage is **Rosso Corsa** (`#da291c`) — the iconic Ferrari racing red — used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights. Type runs **FerrariSans** at modest weights (display 500, body 400) — never bombastic. Spacing follows an explicit 8px token ladder (`xxxs` 4px through `super` 128px); generous editorial pacing throughout. The brand's strongest visual signature is the **full-bleed cinematic hero photograph** that fills the viewport top with car photography, model details, or trackside livery — followed by a tighter editorial body layout below."
|
||||
|
||||
colors:
|
||||
primary: "#da291c"
|
||||
primary-active: "#b01e0a"
|
||||
primary-hover: "#9d2211"
|
||||
ink: "#ffffff"
|
||||
body: "#969696"
|
||||
body-strong: "#ffffff"
|
||||
body-on-light: "#181818"
|
||||
muted: "#666666"
|
||||
muted-soft: "#8f8f8f"
|
||||
hairline: "#303030"
|
||||
hairline-on-light: "#d2d2d2"
|
||||
hairline-soft: "#ebebeb"
|
||||
canvas: "#181818"
|
||||
canvas-elevated: "#303030"
|
||||
canvas-light: "#ffffff"
|
||||
surface-card: "#303030"
|
||||
surface-soft-light: "#f7f7f7"
|
||||
surface-strong-light: "#ebebeb"
|
||||
on-primary: "#ffffff"
|
||||
on-dark: "#ffffff"
|
||||
on-light: "#181818"
|
||||
accent-yellow-hypersail: "#fff200"
|
||||
accent-yellow: "#f6e500"
|
||||
semantic-info: "#4c98b9"
|
||||
semantic-success: "#03904a"
|
||||
semantic-warning: "#f13a2c"
|
||||
|
||||
typography:
|
||||
display-mega:
|
||||
fontFamily: "'FerrariSans', -apple-system, system-ui, sans-serif"
|
||||
fontSize: 80px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -1.6px
|
||||
display-xl:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 56px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.1
|
||||
letterSpacing: -1.12px
|
||||
display-lg:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 36px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.2
|
||||
letterSpacing: -0.36px
|
||||
display-md:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 26px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0.195px
|
||||
title-md:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 18px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.2
|
||||
letterSpacing: 0
|
||||
title-sm:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.08px
|
||||
body-md:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.5
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0
|
||||
caption-uppercase:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 1.1px
|
||||
textTransform: uppercase
|
||||
button:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 14px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.0
|
||||
letterSpacing: 1.4px
|
||||
textTransform: uppercase
|
||||
nav-link:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 13px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.4
|
||||
letterSpacing: 0.65px
|
||||
textTransform: uppercase
|
||||
number-display:
|
||||
fontFamily: "'FerrariSans', sans-serif"
|
||||
fontSize: 80px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -1.6px
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 2px
|
||||
sm: 4px
|
||||
md: 6px
|
||||
lg: 8px
|
||||
xl: 12px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxxs: 4px
|
||||
xxs: 8px
|
||||
xs: 16px
|
||||
sm: 24px
|
||||
md: 32px
|
||||
lg: 48px
|
||||
xl: 64px
|
||||
xxl: 96px
|
||||
super: 128px
|
||||
|
||||
components:
|
||||
top-nav-on-dark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
top-nav-on-light:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.nav-link}"
|
||||
height: 64px
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 14px 32px
|
||||
height: 48px
|
||||
button-primary-active:
|
||||
backgroundColor: "{colors.primary-active}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.none}"
|
||||
button-outline-on-dark:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 13px 31px
|
||||
height: 48px
|
||||
button-outline-on-light:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 13px 31px
|
||||
height: 48px
|
||||
button-tertiary-text:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
hero-band-cinema:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-mega}"
|
||||
padding: 0
|
||||
hero-band-light:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.display-xl}"
|
||||
padding: 96px
|
||||
feature-card-photo:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 0
|
||||
feature-card-light:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 32px
|
||||
livery-band:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
preowned-listing-card:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
spec-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.number-display}"
|
||||
padding: 24px 0
|
||||
race-position-cell:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.number-display}"
|
||||
race-calendar-row:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: 16px 0
|
||||
driver-card:
|
||||
backgroundColor: "{colors.canvas-elevated}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.title-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
text-input-on-dark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 14px 16px
|
||||
height: 48px
|
||||
text-input-on-light:
|
||||
backgroundColor: "{colors.canvas-light}"
|
||||
textColor: "{colors.body-on-light}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 14px 16px
|
||||
height: 48px
|
||||
badge-pill:
|
||||
backgroundColor: "{colors.canvas-elevated}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-uppercase}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: 4px 12px
|
||||
cta-band-dark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-lg}"
|
||||
padding: 96px
|
||||
newsletter-input-band:
|
||||
backgroundColor: "{colors.canvas-elevated}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: 32px
|
||||
footer-dark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: 64px 48px
|
||||
footer-link:
|
||||
backgroundColor: transparent
|
||||
textColor: "{colors.body}"
|
||||
typography: "{typography.body-sm}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Ferrari's marketing site reads as cinematic editorial — closer to a luxury-magazine spread than a typical car-OEM site. The base canvas is **near-black** (`{colors.canvas}` — #181818) holding pure white display type; white-canvas bands appear only inside specific editorial contexts (preowned listings, pricing tables, dealer surfaces). The single brand voltage is **Rosso Corsa** (`{colors.primary}` — #da291c), the iconic Ferrari racing red, used scarcely on primary CTAs, the Cavallino mark, and Formula 1 race-position highlights.
|
||||
|
||||
Type runs **FerrariSans** as the single sans family at modest weights — display 500, body 400. CTA labels render in uppercase with generous tracking (1.1-1.4px). The brand never uses bold display copy.
|
||||
|
||||
The brand's strongest visual signature is the **full-bleed cinematic hero photograph** — top-of-page imagery shows car photography, model details, or trackside livery without any chrome competing with it. Headlines float over the bottom of the photo or sit in a tight band beneath. Spacing follows the explicit 8px token ladder: `xxxs` 4 / `xxs` 8 / `xs` 16 / `sm` 24 / `md` 32 / `lg` 48 / `xl` 64 / `xxl` 96 / `super` 128.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Single accent: `{colors.primary}` (Rosso Corsa #da291c) for primary CTAs, the Cavallino, F1 race-position highlights. Used scarcely.
|
||||
- Near-black canvas (#181818) — never pure black. White-canvas bands only inside editorial contexts.
|
||||
- Single sans family: FerrariSans across every text role.
|
||||
- Display weight stays at 500 — never bold.
|
||||
- CTA labels render uppercase with 1.4px tracking.
|
||||
- Sharp `{rounded.none}` (0px) corners on every CTA, card, and band — luxury-automotive precision.
|
||||
- Full-bleed cinematic hero photography is the page chrome.
|
||||
- Explicit 8px spacing token ladder with named scale (xxxs through super).
|
||||
- Hairlines + photographic depth — no drop shadow tiers.
|
||||
|
||||
## Colors
|
||||
|
||||
### Brand & Accent
|
||||
- **Rosso Corsa** (`{colors.primary}` — #da291c): The iconic Ferrari racing red. Primary CTA fill, Cavallino mark, F1 driver-position highlights. Used scarcely.
|
||||
- **Rosso Corsa Active** (`{colors.primary-active}` — #b01e0a): Press state.
|
||||
- **Rosso Corsa Hover-darker** (`{colors.primary-hover}` — #9d2211): Documented for completeness; per the no-hover policy this is not used in preview HTML.
|
||||
- **Hypersail Yellow** (`{colors.accent-yellow-hypersail}` — #fff200) + **Yellow** (`{colors.accent-yellow}` — #f6e500): Sub-brand accents reserved for the Hypersail sailing program and the global focus-ring color. Not part of the main automotive palette.
|
||||
|
||||
### Surface
|
||||
- **Canvas** (`{colors.canvas}` — #181818): Near-black page floor — never pure black, slight warmth.
|
||||
- **Canvas Elevated** (`{colors.canvas-elevated}` — #303030): Cards and panels on dark canvas.
|
||||
- **Canvas Light** (`{colors.canvas-light}` — #ffffff): White editorial bands (preowned listings, pricing).
|
||||
- **Surface Card** (`{colors.surface-card}` — #303030): Same as canvas-elevated — driver cards, livery photo plates.
|
||||
- **Surface Soft Light** (`{colors.surface-soft-light}` — #f7f7f7): Light editorial alternating band.
|
||||
- **Surface Strong Light** (`{colors.surface-strong-light}` — #ebebeb): Light-canvas dividers, badges.
|
||||
|
||||
### Hairlines
|
||||
- **Hairline** (`{colors.hairline}` — #303030): 1px divider on dark — same hex as `{colors.canvas-elevated}`.
|
||||
- **Hairline On Light** (`{colors.hairline-on-light}` — #d2d2d2): 1px divider on light bands.
|
||||
- **Hairline Soft** (`{colors.hairline-soft}` — #ebebeb): Lighter divider.
|
||||
|
||||
### Text
|
||||
- **Ink** (`{colors.ink}` — #ffffff): Display, body emphasis on dark.
|
||||
- **Body** (`{colors.body}` — #969696): Default running-text on dark.
|
||||
- **Body Strong** (`{colors.body-strong}` — #ffffff): Same as ink.
|
||||
- **Body On Light** (`{colors.body-on-light}` — #181818): Default text on light bands.
|
||||
- **Muted** (`{colors.muted}` — #666666): Sub-titles, captions on dark.
|
||||
- **Muted Soft** (`{colors.muted-soft}` — #8f8f8f): Disabled link text.
|
||||
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on Rosso Corsa.
|
||||
|
||||
### Semantic
|
||||
- **Info** (`{colors.semantic-info}` — #4c98b9): Info badges, callout backgrounds.
|
||||
- **Success** (`{colors.semantic-success}` — #03904a): Confirmation.
|
||||
- **Warning** (`{colors.semantic-warning}` — #f13a2c): Validation warnings.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**FerrariSans** is the licensed single sans family across every text role. Fallback: `-apple-system, system-ui, sans-serif`. No display/body family split.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-mega}` | 80px | 500 | 1.05 | -1.6px | Homepage hero h1 |
|
||||
| `{typography.display-xl}` | 56px | 500 | 1.1 | -1.12px | Subsidiary heroes |
|
||||
| `{typography.display-lg}` | 36px | 500 | 1.2 | -0.36px | Section heads, livery band |
|
||||
| `{typography.display-md}` | 26px | 500 | 1.5 | 0.195px | Sub-section heads |
|
||||
| `{typography.title-md}` | 18px | 700 | 1.2 | 0 | Component titles |
|
||||
| `{typography.title-sm}` | 16px | 500 | 1.4 | 0.08px | List labels |
|
||||
| `{typography.body-md}` | 14px | 400 | 1.5 | 0 | Default body |
|
||||
| `{typography.body-sm}` | 13px | 400 | 1.5 | 0 | Footer body |
|
||||
| `{typography.caption}` | 12px | 400 | 1.4 | 0 | Photo captions |
|
||||
| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 1.1px | Section labels, badges |
|
||||
| `{typography.button}` | 14px | 700 | 1.0 | 1.4px (uppercase) | CTA pill labels |
|
||||
| `{typography.nav-link}` | 13px | 600 | 1.4 | 0.65px (uppercase) | Top-nav menu items |
|
||||
| `{typography.number-display}` | 80px | 700 | 1.0 | -1.6px | Race position highlights, spec values |
|
||||
|
||||
### Principles
|
||||
- **Display weight stays at 500.** Editorial confidence, not bombastic. The cinematic photography is doing the visual heavy-lifting — type doesn't need to compete.
|
||||
- **CTA labels are uppercase with 1.4px tracking.** Luxury-precision feel.
|
||||
- **Nav labels are uppercase with 0.65px tracking.** Consistent with CTA voice.
|
||||
- **Negative letter-spacing on display only.** -0.36px to -1.6px on display sizes; body stays at 0.
|
||||
|
||||
### Note on Font Substitutes
|
||||
FerrariSans is licensed. Open-source substitute: **Inter** at weight 500 with letter-spacing -1%, or **Söhne** for closer humanist proportions.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit:** 4px.
|
||||
- **Tokens:** `{spacing.xxxs}` 4px · `{spacing.xxs}` 8px · `{spacing.xs}` 16px · `{spacing.sm}` 24px · `{spacing.md}` 32px · `{spacing.lg}` 48px · `{spacing.xl}` 64px · `{spacing.xxl}` 96px · `{spacing.super}` 128px.
|
||||
- **Section padding:** `{spacing.xxl}` (96px) for major bands; `{spacing.super}` (128px) reserved for hero band depth.
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: ~1280px on editorial bands. Hero photography goes full-bleed.
|
||||
- Editorial body: 12-column grid.
|
||||
- Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids, 4-up for preowned listing tiles.
|
||||
- Footer: 5-column at desktop.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Generous editorial pacing. Cinematic hero photography occupies generous viewport real-estate; body sections sit in tighter editorial layouts beneath. The canvas-light editorial bands (preowned, pricing) carry tighter density than the dark cinema bands.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system uses **photographic depth + brightness-step** elevation. No drop shadows except a single soft-small `{shadow.small}` documented in extracted tokens.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| Flat (canvas) | `{colors.canvas}` (#181818) | Body bands, footer |
|
||||
| Card | `{colors.canvas-elevated}` (#303030) | Driver cards, livery plates |
|
||||
| Light band | `{colors.canvas-light}` (#ffffff) | Preowned listings, pricing |
|
||||
| Hairline border | 1px `{colors.hairline}` or `{colors.hairline-on-light}` | Card outlines, dividers |
|
||||
| Soft drop | `0 4px 8px rgba(0,0,0,0.1)` | Hovered cards (single shadow tier) |
|
||||
| Photographic | Full-bleed cinema imagery | Hero band, livery photographs |
|
||||
|
||||
### Decorative Depth
|
||||
- **Full-bleed cinema photography** is the brand's primary depth treatment.
|
||||
- **Brand red gradient** (`linear-gradient(180deg, #a00c01, #da291c 64%)`): The Rosso Corsa gradient used inside accent bands and CTA hover states.
|
||||
- **Dark grey gradient** (`linear-gradient(180deg, #3c3c3c, #030303 64%)`): Atmospheric darken used at section transitions.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Every CTA, card, band — dominant radius |
|
||||
| `{rounded.xs}` | 2px | Tight badges (rare) |
|
||||
| `{rounded.sm}` | 4px | Form inputs |
|
||||
| `{rounded.md}` | 6px | Compact cards (rare) |
|
||||
| `{rounded.lg}` | 8px | Mobile-only collapse cards |
|
||||
| `{rounded.xl}` | 12px | Modal/dialog corners (rare) |
|
||||
| `{rounded.full}` | 9999px | Avatar plates, badge pills |
|
||||
|
||||
The radius vocabulary is **sharp by default**. Sharp 0px corners are the brand button shape — never rounded pills. Pill geometry is reserved for badge labels only.
|
||||
|
||||
## Components
|
||||
|
||||
### Top Navigation
|
||||
|
||||
**`top-nav-on-dark`** — Default top nav on dark hero pages. Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Cavallino mark left, primary horizontal menu (Models / F1 / Lifestyle / Owners / Preowned), language picker + utilities right. Menu items render uppercase with 0.65px tracking.
|
||||
|
||||
**`top-nav-on-light`** — White-canvas variant for editorial light bands.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The signature Rosso Corsa CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 700 / 1.4px tracking, uppercase), padding 14px × 32px, height 48px, **rounded `{rounded.none}` (0px — sharp corners)**.
|
||||
|
||||
**`button-primary-active`** — Press state. Background `{colors.primary-active}`.
|
||||
|
||||
**`button-outline-on-dark`** — Transparent with 1px white border. Background transparent, text `{colors.ink}`, 1px white border, same sharp 0px corners.
|
||||
|
||||
**`button-outline-on-light`** — Transparent with 1px ink border on light bands.
|
||||
|
||||
**`button-tertiary-text`** — Inline text link, uppercase tracking.
|
||||
|
||||
### Hero Bands
|
||||
|
||||
**`hero-band-cinema`** — Full-bleed cinematic photograph. Background `{colors.canvas}` underneath, but the photo fills the viewport. Display headline floats over the bottom of the photo or sits in a tight band beneath, in `{typography.display-mega}` (80px / 500 / -1.6px). One primary CTA + one outline CTA. Zero padding — the photo fills edge-to-edge.
|
||||
|
||||
**`hero-band-light`** — White-canvas variant for editorial bands. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, padding 96px.
|
||||
|
||||
### Cards
|
||||
|
||||
**`feature-card-photo`** — Image-first card. Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.none}`. Image fills the top edge-to-edge; title + body sit beneath in tight typography.
|
||||
|
||||
**`feature-card-light`** — White-canvas variant. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, rounded `{rounded.none}`, padding 32px.
|
||||
|
||||
**`driver-card`** — F1 driver portrait card. Background `{colors.canvas-elevated}`, text `{colors.ink}`, rounded `{rounded.none}`, padding 24px. Layout: driver portrait + name + race number + team badge.
|
||||
|
||||
### Editorial Surfaces
|
||||
|
||||
**`livery-band`** — A full-width Rosso Corsa accent band. Background `{colors.primary}`, text `{colors.ink}`, type `{typography.display-lg}`, 96px padding. Used as a standout livery callout between dark editorial bands.
|
||||
|
||||
**`preowned-listing-card`** — Used in the preowned Ferrari listing grid. Background `{colors.canvas-light}`, text `{colors.body-on-light}`, rounded `{rounded.none}`, padding 24px. Layout: car photo top + model name + year/mileage + price.
|
||||
|
||||
### Spec & Race Surfaces
|
||||
|
||||
**`spec-cell`** — Technical spec callout. Transparent background, value in `{typography.number-display}` (80px / 700 / -1.6px white), label below in `{typography.caption-uppercase}`.
|
||||
|
||||
**`race-position-cell`** — F1 driver finishing position. Same number-display geometry but text in `{colors.primary}` Rosso Corsa for the brand's racing identity.
|
||||
|
||||
**`race-calendar-row`** — Hairline-divided row in the F1 race calendar. Layout: date column left, race name + circuit middle, results column right.
|
||||
|
||||
### Forms & Tags
|
||||
|
||||
**`text-input-on-dark`** — Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.sm}` (4px), padding 14px × 16px, height 48px, 1px `{colors.hairline}` border.
|
||||
|
||||
**`text-input-on-light`** — White-canvas variant.
|
||||
|
||||
**`badge-pill`** — Small uppercase pill. Background `{colors.canvas-elevated}`, text `{colors.ink}`, type `{typography.caption-uppercase}` (11px / 600 / 1.1px tracking, uppercase), rounded `{rounded.full}` (9999px), padding 4px × 12px. The only place pill geometry is used.
|
||||
|
||||
### Newsletter / CTA / Footer
|
||||
|
||||
**`newsletter-input-band`** — Newsletter signup band. Background `{colors.canvas-elevated}`, padding 32px, rounded `{rounded.sm}`. Holds an inline email input + primary CTA.
|
||||
|
||||
**`cta-band-dark`** — Pre-footer band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single Rosso Corsa CTA. 96px padding.
|
||||
|
||||
**`footer-dark`** — Closing dark footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.
|
||||
|
||||
**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (Rosso Corsa) for primary CTAs, the Cavallino mark, and F1 race-position highlights.
|
||||
- Set every CTA at `{rounded.none}` (0px sharp corners) — the brand's signature precision.
|
||||
- Render CTA labels in uppercase with 1.4px tracking via `{typography.button}`.
|
||||
- Pair every hero with a full-bleed cinematic photograph — the photograph IS the depth.
|
||||
- Use the explicit 8px spacing ladder (`xxxs` through `super`) rather than ad-hoc px values.
|
||||
- Keep display weight at 500 — never bold.
|
||||
|
||||
### Don't
|
||||
- Don't introduce a saturated brand color other than Rosso Corsa.
|
||||
- Don't use rounded or pill CTAs — sharp 0px corners are the brand button.
|
||||
- Don't bold display copy. The cinematic photography does the visual heavy-lifting.
|
||||
- Don't use Hypersail yellow outside the Hypersail sailing program context.
|
||||
- Don't use pure black canvas. The brand canvas is `{colors.canvas}` (#181818) — slightly warm.
|
||||
- Don't add drop shadow tiers. Photography + brightness-step elevation carry the depth.
|
||||
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs, not on injected modals.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile | < 640px | Hero photograph crops vertically; hero h1 80→32px; feature card grid 1-up; nav hamburger; preowned listing 1-up. |
|
||||
| Tablet | 640–1024px | Hero h1 56px; feature card grid 2-up; preowned listing 2-up. |
|
||||
| Desktop | 1024–1280px | Full hero h1 80px; feature card grid 3-up; preowned listing 4-up. |
|
||||
| Wide | > 1280px | Editorial body content caps at 1280px; hero photography continues full-bleed. |
|
||||
|
||||
### Touch Targets
|
||||
- Primary CTA at 48px height — at WCAG AAA (44 × 44).
|
||||
- Nav items render uppercase with 0.65px tracking, padded for an effective 48px tap area.
|
||||
|
||||
### Collapsing Strategy
|
||||
- Top nav switches to hamburger below 768px.
|
||||
- Hero photograph reframes per breakpoint via art direction — desktop carries wide cinematic; mobile crops tighter or shifts to vertical.
|
||||
- Feature card grid: 4-up → 3-up → 2-up → 1-up.
|
||||
- F1 driver cards: 2-up at desktop, 1-up at mobile.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on a single component at a time.
|
||||
2. CTAs default to `{rounded.none}` (0px sharp). Cards use `{rounded.none}` too. Pill is reserved for badges.
|
||||
3. Variants live as separate entries inside `components:`.
|
||||
4. Use `{token.refs}` everywhere — never inline hex.
|
||||
5. Hover state never documented.
|
||||
6. FerrariSans 500 for display, 400/700 for body. Uppercase + tracking on CTAs and nav.
|
||||
7. Rosso Corsa stays scarce — primary CTAs, Cavallino, race-position highlights only.
|
||||
8. Use the explicit 8px named spacing ladder.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- FerrariSans is a licensed typeface; Inter at weight 500 is the documented substitute.
|
||||
- Animation timings (hero parallax, livery band entrance, race position counter) out of scope.
|
||||
- In-product surfaces (preowned configurator, F1 telemetry overlays) only partially captured via marketing surfaces.
|
||||
- Form validation states beyond focus not visible on captured surfaces.
|
||||
- Hypersail yellow tokens are extracted but only appear in the Hypersail sailing program context — documented as scoped accents.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Ferrari Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/ferrari/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,578 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Figma
|
||||
description: "A confident black-and-white editorial frame interrupted by oversized, hand-cut pastel color blocks. The marketing canvas is rigorously monochrome — figmaSans variable type, pure white surfaces, pure black ink, pill-shaped CTAs — while each story section drops the page into a saturated lime, lavender, cream, mint, or pink panel that reads like a sticky note placed on a clean desk. The result is a design system that feels both technical and joyful — a tool for serious work, made by people who like color."
|
||||
|
||||
colors:
|
||||
primary: "#000000"
|
||||
on-primary: "#ffffff"
|
||||
ink: "#000000"
|
||||
canvas: "#ffffff"
|
||||
inverse-canvas: "#000000"
|
||||
inverse-ink: "#ffffff"
|
||||
on-inverse-soft: "#ffffff"
|
||||
hairline: "#e6e6e6"
|
||||
hairline-soft: "#f1f1f1"
|
||||
surface-soft: "#f7f7f5"
|
||||
block-lime: "#dceeb1"
|
||||
block-lilac: "#c5b0f4"
|
||||
block-cream: "#f4ecd6"
|
||||
block-pink: "#efd4d4"
|
||||
block-mint: "#c8e6cd"
|
||||
block-coral: "#f3c9b6"
|
||||
block-navy: "#1f1d3d"
|
||||
accent-magenta: "#ff3d8b"
|
||||
semantic-success: "#1ea64a"
|
||||
overlay-scrim: "#000000"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 86px
|
||||
fontWeight: 340
|
||||
lineHeight: 1.00
|
||||
letterSpacing: -1.72px
|
||||
fontFeature: kern
|
||||
display-lg:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 64px
|
||||
fontWeight: 340
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -0.96px
|
||||
fontFeature: kern
|
||||
headline:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 26px
|
||||
fontWeight: 540
|
||||
lineHeight: 1.35
|
||||
letterSpacing: -0.26px
|
||||
fontFeature: kern
|
||||
subhead:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 26px
|
||||
fontWeight: 340
|
||||
lineHeight: 1.35
|
||||
letterSpacing: -0.26px
|
||||
fontFeature: kern
|
||||
card-title:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 24px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.45
|
||||
letterSpacing: 0
|
||||
fontFeature: kern
|
||||
body-lg:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 20px
|
||||
fontWeight: 330
|
||||
lineHeight: 1.40
|
||||
letterSpacing: -0.14px
|
||||
fontFeature: kern
|
||||
body:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 18px
|
||||
fontWeight: 320
|
||||
lineHeight: 1.45
|
||||
letterSpacing: -0.26px
|
||||
fontFeature: kern
|
||||
body-sm:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 16px
|
||||
fontWeight: 330
|
||||
lineHeight: 1.45
|
||||
letterSpacing: -0.14px
|
||||
fontFeature: kern
|
||||
link:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 20px
|
||||
fontWeight: 480
|
||||
lineHeight: 1.40
|
||||
letterSpacing: -0.10px
|
||||
fontFeature: kern
|
||||
button:
|
||||
fontFamily: figmaSans
|
||||
fontSize: 20px
|
||||
fontWeight: 480
|
||||
lineHeight: 1.40
|
||||
letterSpacing: -0.10px
|
||||
fontFeature: kern
|
||||
eyebrow:
|
||||
fontFamily: figmaMono
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.30
|
||||
letterSpacing: 0.54px
|
||||
fontFeature: kern
|
||||
caption:
|
||||
fontFamily: figmaMono
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.00
|
||||
letterSpacing: 0.60px
|
||||
fontFeature: kern
|
||||
|
||||
rounded:
|
||||
xs: 2px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
pill: 50px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
hair: 1px
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 10px 20px
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 18px 10px
|
||||
button-tertiary-text:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.link}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: 8px 12px
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 40px
|
||||
button-icon-circular-inverse:
|
||||
backgroundColor: "{colors.on-inverse-soft}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 40px
|
||||
button-magenta-promo:
|
||||
backgroundColor: "{colors.accent-magenta}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 10px 18px
|
||||
pricing-tab-default:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 18px
|
||||
pricing-tab-selected:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 18px
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 14px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 12px 14px
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
pricing-card-feature-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
color-block-section:
|
||||
backgroundColor: "{colors.block-lime}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.subhead}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
color-block-section-lilac:
|
||||
backgroundColor: "{colors.block-lilac}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.subhead}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
color-block-section-navy:
|
||||
backgroundColor: "{colors.block-navy}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.subhead}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
promo-banner-lilac:
|
||||
backgroundColor: "{colors.block-lilac}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 16px 24px
|
||||
template-card:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 16px
|
||||
feature-illustration-tile:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.eyebrow}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 24px
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
height: 56px
|
||||
marquee-strip:
|
||||
backgroundColor: "{colors.inverse-canvas}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
height: 36px
|
||||
comparison-checkmark:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.semantic-success}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 16px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 64px 32px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Figma's marketing canvas is, at the system level, an editor-clean black-and-white frame. The chrome — top nav, body type, footer, primary CTA — is monochrome. Headlines are oversized `{typography.display-xl}` set in `figmaSans` with aggressive negative tracking, body copy hovers around weight 320–340 of the same variable family, and small mono `{typography.eyebrow}` and `{typography.caption}` labels (figmaMono, all-caps, positive tracking) act as section markers. Every CTA is a pill — `{rounded.pill}` — and the primary action across the entire site is the same black `{components.button-primary}` paired with the same white `{components.button-secondary}`.
|
||||
|
||||
What makes the design unique is what happens **between** those monochrome bookends: the page repeatedly drops into oversized pastel **color-block sections** — lime, lavender, cream, mint, pink, coral, and a deep navy — that span the full content width with `{rounded.lg}` corners and `{spacing.xxl}` interior padding. These blocks are where the storytelling lives. They aren't accents tucked into a card; they take over a whole viewport's worth of vertical space, like a designer arranging giant sticky notes on a clean wall. FigJam is the most pastel-saturated, the home page rotates through the full set, and the pricing page ends with a lime FAQ panel — same vocabulary, different rhythm per route.
|
||||
|
||||
This is a system built on contrast: the monochrome chrome makes the color blocks feel intentional rather than decorative, and the color blocks make the monochrome chrome feel like editorial paper rather than enterprise SaaS. Density is generous, line-heights are tight on display sizes, and the interface never reaches for shadows or gradients to do the work that color blocks and confident typography already do.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Monochrome system core: `{colors.primary}` (black) and `{colors.canvas}` (white) carry every CTA, every body line, every footer link.
|
||||
- Oversized pastel **color-block sections** (`{colors.block-lime}`, `{colors.block-lilac}`, `{colors.block-cream}`, `{colors.block-mint}`, `{colors.block-pink}`, `{colors.block-coral}`, `{colors.block-navy}`) define the narrative rhythm of every long-form page.
|
||||
- Pill is the only button shape — `{rounded.pill}` for text CTAs, `{rounded.full}` for icon buttons. No square buttons anywhere.
|
||||
- `figmaSans` variable typeface used at unusually fine weight increments (320, 330, 340, 450, 480, 540) — the type system reads as a single voice that flexes rather than a multi-weight family.
|
||||
- Tight negative letter-spacing on display sizes (-1.72px at 86px, -0.96px at 64px) creates a confident editorial cadence.
|
||||
- `figmaMono` reserved for category labels, eyebrows, and captions — always uppercase, positive tracking — to flag taxonomy without competing with display type.
|
||||
- Color-block page rhythm (home): white hero → marquee strip → white feature → lime systems block → navy ship-products block → coral developer block → white template grid → white footer.
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: figma.com (home), /design/, /figjam/brainstorming-tool/, /pricing/, /contact/.
|
||||
|
||||
### Brand & Accent
|
||||
- **Black** ({colors.primary}): The system primary. Every primary CTA, every headline, every body line, the marquee strip, the inverse canvas of dark sections.
|
||||
- **White** ({colors.on-primary}): Inverse text on black surfaces; also the canvas color used as the foreground of secondary pill buttons (`{components.button-secondary}`).
|
||||
- **Magenta Promo** ({colors.accent-magenta}): A single saturated CTA pink reserved for promotional inline buttons — appears, for example, on the lilac "Save your spot" Release Notes banner. Use scarcely; it is not a section color.
|
||||
|
||||
### Surface
|
||||
- **Canvas** ({colors.canvas}): Default page background and the body of every white card.
|
||||
- **Inverse Canvas** ({colors.inverse-canvas}): Footer, marquee strip, and a subset of "ship products"-style story sections.
|
||||
- **Surface Soft** ({colors.surface-soft}): Off-white tile background used for icon buttons, template cards, and feature illustration tiles when they sit on the white canvas.
|
||||
- **Hairline** ({colors.hairline}): 1px borders on form inputs, pricing cards, and table dividers.
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Even subtler dividers — comparison-table row separators and footer column rules.
|
||||
- **Block Lime** ({colors.block-lime}): The signature **systems / FAQ / contact-form** color block. Recurs across home, pricing, contact.
|
||||
- **Block Lilac** ({colors.block-lilac}): Hero block on `/design/`; also the inline Release Notes promo banner.
|
||||
- **Block Cream** ({colors.block-cream}): Soft warm background — FigJam hero strip, template-grid section.
|
||||
- **Block Mint** ({colors.block-mint}): FigJam pastel section.
|
||||
- **Block Pink** ({colors.block-pink}): FigJam pastel section.
|
||||
- **Block Coral** ({colors.block-coral}): "Ship products" coral story block on home.
|
||||
- **Block Navy** ({colors.block-navy}): Deep indigo story block — only place dark surfaces appear above the footer.
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): All headline, body, and caption type on light surfaces. There is no softer mid-gray text role on marketing — body copy is always black at weight 320–340, and weight (not opacity) carries the hierarchy.
|
||||
- **Inverse Ink** ({colors.inverse-ink}): Type on inverse-canvas surfaces (footer, marquee strip, navy color block).
|
||||
- **On-Inverse Soft** ({colors.on-inverse-soft}): White used at ~16% opacity for circular icon-button surfaces against dark sections (token captures the base color; the translucency is applied at render time).
|
||||
|
||||
### Semantic
|
||||
- **Success Green** ({colors.semantic-success}): Comparison-table checkmarks on pricing. Used as a glyph fill, not a surface.
|
||||
- **Overlay Scrim** ({colors.overlay-scrim}): Black used at ~60% opacity behind modal / video-overlay surfaces (token captures the base; opacity applied at render time).
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
|
||||
- **figmaSans** — Figma's proprietary variable typeface; fallback stack `figmaSans Fallback, SF Pro Display, system-ui, helvetica`. Variable weight axis is exercised at unusually fine increments (320, 330, 340, 450, 480, 540, 700) — the design system reads as a single voice modulating rather than a stepped weight family.
|
||||
- **figmaMono** — Proprietary monospace; fallback `figmaMono Fallback, SF Mono, menlo`. Used exclusively for eyebrow labels and captions, always uppercase with positive letter-spacing.
|
||||
|
||||
OpenType `kern` is enabled across every role.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 86px | 340 | 1.00 | -1.72px | Hero headlines (home, FigJam) |
|
||||
| `{typography.display-lg}` | 64px | 340 | 1.10 | -0.96px | Section opener headlines |
|
||||
| `{typography.headline}` | 26px | 540 | 1.35 | -0.26px | Story-block titles inside color blocks |
|
||||
| `{typography.subhead}` | 26px | 340 | 1.35 | -0.26px | Long-form intro paragraphs that sit at near-headline scale |
|
||||
| `{typography.card-title}` | 24px | 700 | 1.45 | 0 | Pricing-tier titles, feature card titles |
|
||||
| `{typography.body-lg}` | 20px | 330 | 1.40 | -0.14px | Lead body copy on hero, contact form labels |
|
||||
| `{typography.body}` | 18px | 320 | 1.45 | -0.26px | Default body |
|
||||
| `{typography.body-sm}` | 16px | 330 | 1.45 | -0.14px | Card body, footer link list |
|
||||
| `{typography.link}` | 20px | 480 | 1.40 | -0.10px | Inline link emphasis |
|
||||
| `{typography.button}` | 20px | 480 | 1.40 | -0.10px | All pill buttons, primary and secondary |
|
||||
| `{typography.eyebrow}` | 18px | 400 | 1.30 | 0.54px | figmaMono uppercase section eyebrows |
|
||||
| `{typography.caption}` | 12px | 400 | 1.00 | 0.60px | figmaMono uppercase captions, footer column heads |
|
||||
|
||||
### Principles
|
||||
|
||||
- **Weight, not size, carries hierarchy on body copy.** A 20px paragraph at weight 330 sits next to a 20px link at weight 480 — the eye reads emphasis without scale change.
|
||||
- **Negative letter-spacing scales with size.** Display-xl pulls -1.72px; subhead pulls only -0.26px. Body copy stays near-zero. The result is editorial-feeling display type without sacrificing readability at body size.
|
||||
- **Mono is taxonomy, not body.** figmaMono is reserved for eyebrows and captions — never used to set a paragraph.
|
||||
- **Tight line-heights on display, generous on body.** Display sizes run 1.00–1.10; body runs 1.40–1.45. The contrast reinforces that headlines are graphics and body copy is for reading.
|
||||
|
||||
### Note on Font Substitutes
|
||||
|
||||
If implementing without access to figmaSans / figmaMono, suitable open-source substitutes are **Inter** (or **Geist**) for the sans, and **JetBrains Mono** (or **Geist Mono**) for the mono. Inter at variable weights closely matches the fine-grained weight axis figmaSans uses; expect to manually adjust line-heights down by ~0.02 to compensate for Inter's slightly taller x-height.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
|
||||
- **Base unit**: 8px.
|
||||
- **Tokens (front matter)**: `{spacing.hair}` 1px · `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- Section interior padding: `{spacing.xxl}` (48px) on color-block sections.
|
||||
- Card interior padding: `{spacing.lg}` (24px) on pricing cards and template tiles.
|
||||
- Form input padding: `{spacing.sm}` 12px vertical · 14px horizontal.
|
||||
- Button padding: `{spacing.xs}` 8px vertical · `{spacing.lg}` 24px horizontal for pill buttons (the asymmetric `8px 18px 10px` extracted on `button-secondary` nudges the type optically inside the pill).
|
||||
- Universal rhythm constant: `{spacing.section}` (96px) — the vertical gap between major content sections holds across home, pricing, and FigJam pages.
|
||||
|
||||
### Grid & Container
|
||||
|
||||
- Max content width sits around 1280px (one of the explicit breakpoints), with side gutters that scale from `{spacing.xxl}` on desktop down to `{spacing.lg}` on mobile.
|
||||
- Three- and four-column grids on the desktop pricing comparison and FigJam template galleries.
|
||||
- Color-block sections break the column grid — they span content width with full bleed inside the rounded `{rounded.lg}` corners, then place a single editorial column of headline + body inside.
|
||||
|
||||
### Whitespace Philosophy
|
||||
|
||||
White space is used to make the color blocks feel deliberate. Between every colored panel and the next, the page returns to white canvas with `{spacing.section}` of breathing room. Inside a color block, the type itself is given generous side margins (often more than 1/4 of the block's width on each side) so the panel reads as a poster, not a wall of copy.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow, no border | Default for color-block sections, inverse-canvas footer, hero |
|
||||
| 1 (hairline) | 1px `{colors.hairline}` border on `{colors.canvas}` | Pricing cards, form inputs, comparison table cells |
|
||||
| 2 (soft elevation) | Subtle drop shadow approx 0 4px 16px rgba(0,0,0,0.06) | Floating template tiles, dropdown menus |
|
||||
| 3 (modal) | Stronger shadow + `{colors.overlay-scrim}` behind | Video / image lightbox overlays |
|
||||
|
||||
Figma's marketing system is shadow-light by design — the color blocks substitute for traditional elevation. Where most SaaS sites use a shadowed white card to draw attention, Figma uses a saturated background panel. This makes the rare actual shadow (e.g., a floating template card hovering over a cream section) feel like an exception worth noticing.
|
||||
|
||||
### Decorative Depth
|
||||
|
||||
- **Color-block sections** are the primary depth device. The change from white canvas to lime / lavender / cream is the section break.
|
||||
- **Sticky-note style component thumbnails** in FigJam — slightly off-axis pastel rectangles arranged like notes on a board — read as collage, not card-stack.
|
||||
- **Embedded product UI mocks** (Figma Design panels, FigJam canvas snippets) appear as flat compositions on color blocks; their internal shadows are subtle and stay within the mock.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 2px | Anchor / link decoration corners |
|
||||
| `{rounded.sm}` | 6px | Small chips, sub-nav tabs |
|
||||
| `{rounded.md}` | 8px | Form inputs, list items, image frames |
|
||||
| `{rounded.lg}` | 24px | Pricing cards, color-block sections, large image containers |
|
||||
| `{rounded.xl}` | 32px | Hero feature panels, oversized callouts |
|
||||
| `{rounded.pill}` | 50px | All text CTAs (primary, secondary, tab toggles) |
|
||||
| `{rounded.full}` | 9999px | Circular icon buttons, comparison-table checkmark glyphs |
|
||||
|
||||
### Photography & Illustration Geometry
|
||||
|
||||
- Image frames use `{rounded.md}` (8px) — generous enough to feel friendly, conservative enough to read as editorial.
|
||||
- Template thumbnails on the home grid sit in `{rounded.md}` tiles with `{spacing.md}` interior padding around the embedded preview.
|
||||
- FigJam pastel sticky-note component thumbnails preserve a small `{rounded.sm}` corner that mimics actual sticky paper.
|
||||
- No avatar circles appear in marketing surfaces — Figma's marketing avoids personification.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — The black "Get started for free" pill that appears in the top nav, every hero, and every closing CTA.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 10px 20px, rounded `{rounded.pill}`.
|
||||
- Pressed state lives in `button-primary-pressed` (same surface; the live site relies on micro-scale rather than a darkened fill).
|
||||
|
||||
**`button-secondary`** — White pill with black text. Used for tertiary navigation actions ("Contact sales") and as the visual counterpart to the primary pill.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, padding 8px 18px 10px (asymmetric vertical to optically center the type), rounded `{rounded.pill}`. No border.
|
||||
|
||||
**`button-tertiary-text`** — Plain text link styled as a button hit target inside top nav and footer.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.link}`, rounded `{rounded.full}` (hit target only), padding `{spacing.xs}` `{spacing.sm}`.
|
||||
|
||||
**`button-icon-circular`** — 40px circular icon button used for carousel controls, social links, and inline actions on light surfaces.
|
||||
- Background `{colors.surface-soft}`, text `{colors.ink}`, rounded `{rounded.full}`, size 40px.
|
||||
|
||||
**`button-icon-circular-inverse`** — Same shape, used on inverse-canvas / dark color blocks.
|
||||
- Background `{colors.on-inverse-soft}` (translucent white), text `{colors.inverse-ink}`, rounded `{rounded.full}`, size 40px.
|
||||
|
||||
**`button-magenta-promo`** — Saturated pink pill used only inside promotional surfaces such as the lilac "Save your spot" Release Notes banner. Reserved for moments where Figma's product team wants the CTA to pop against an already-colored panel.
|
||||
- Background `{colors.accent-magenta}`, text `{colors.on-primary}`, type `{typography.button}`, rounded `{rounded.pill}`, padding 10px 18px.
|
||||
|
||||
### Pricing Tabs
|
||||
|
||||
**`pricing-tab-default`** + **`pricing-tab-selected`** — The pill-toggle that switches between Starter / Professional / Organization / Enterprise on `/pricing/`.
|
||||
- Default: `{colors.canvas}` background, `{colors.ink}` text, rounded `{rounded.pill}`.
|
||||
- Selected: `{colors.primary}` background, `{colors.on-primary}` text — exactly the same surface as `button-primary`, which makes the selected tab feel like an active CTA, not a passive state.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** + **`text-input-focused`** — Form fields on `/contact/` and pricing seat-count steppers.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 12px 14px.
|
||||
- Focused state retains the same surface — focus is communicated via ring, not via fill change.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`pricing-card`** — Each tier on `/pricing/`.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding `{spacing.lg}`. Stroked with `{colors.hairline}` rather than shadowed.
|
||||
|
||||
**`pricing-card-feature-row`** — Single row inside the comparison table.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`. Row separator is `{colors.hairline-soft}`.
|
||||
|
||||
**`template-card`** — Thumbnail tile in the home "Explore what people are making" grid and the FigJam template gallery.
|
||||
- Background `{colors.surface-soft}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.md}`, padding `{spacing.md}`.
|
||||
|
||||
**`feature-illustration-tile`** — Larger composition tile that holds a product UI mock or pastel illustration.
|
||||
- Background `{colors.surface-soft}`, text `{colors.ink}`, type `{typography.eyebrow}`, rounded `{rounded.md}`, padding `{spacing.lg}`.
|
||||
|
||||
### Color-Block Sections (signature)
|
||||
|
||||
The defining surface of Figma's marketing. Each is a full-content-width panel with `{rounded.lg}` corners and `{spacing.xxl}` interior padding. Variants:
|
||||
|
||||
**`color-block-section`** — lime ground for "systems" stories (home), pricing FAQ, and the contact form.
|
||||
- Background `{colors.block-lime}`, text `{colors.ink}`, type `{typography.subhead}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`color-block-section-lilac`** — lavender ground for `/design/` hero and FigJam highlight sections.
|
||||
- Background `{colors.block-lilac}`, otherwise identical structure.
|
||||
|
||||
**`color-block-section-navy`** — deep indigo ground for the home "Ship products" story block. The only inverse color-block surface above the footer.
|
||||
- Background `{colors.block-navy}`, text `{colors.inverse-ink}`, otherwise identical structure.
|
||||
|
||||
(Cream, mint, pink, and coral block variants follow the same shape with their respective `{colors.block-*}` surface.)
|
||||
|
||||
### Promo Banner
|
||||
|
||||
**`promo-banner-lilac`** — The Release Notes / "Save your spot" inline banner that floats above the contact form.
|
||||
- Background `{colors.block-lilac}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.md}`, padding `{spacing.md}` `{spacing.lg}`. Carries a `button-magenta-promo` on the right edge.
|
||||
|
||||
### Navigation
|
||||
|
||||
**`top-nav`** — Sticky white bar with logo, primary nav links, sign-in link, and the right-anchored `button-secondary` ("Contact sales") + `button-primary` ("Get started for free") pair.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.
|
||||
- Mobile: collapses primary links into a hamburger that opens a full-canvas overlay; the two pill CTAs remain visible on the bar.
|
||||
|
||||
**`marquee-strip`** — Thin black ribbon directly under the nav that scrolls through customer logos in white.
|
||||
- Background `{colors.inverse-canvas}`, text `{colors.inverse-ink}`, type `{typography.body-sm}`, height 36px.
|
||||
|
||||
### Comparison Glyphs
|
||||
|
||||
**`comparison-checkmark`** — Green check used in the pricing comparison matrix.
|
||||
- Background `{colors.canvas}`, glyph color `{colors.semantic-success}`, rounded `{rounded.full}`, size 16px.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Dense link grid on white canvas with the wordmark "Figma" set in display weight at the top-left.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.caption}` for column headings and small links, padding `{spacing.section}` top/bottom · `{spacing.xl}` sides.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Reserve `{colors.primary}` for genuine primary CTAs and selected states (e.g., `pricing-tab-selected`). Don't use it as a decorative accent.
|
||||
- When introducing a story section, choose **one** color block from the `{colors.block-*}` family and let it span full content width with `{rounded.lg}` corners and `{spacing.xxl}` interior padding.
|
||||
- Keep type in `figmaSans` at variable weights — pick from 320, 330, 340, 480, 540, 700 to express hierarchy. Avoid intermediate weights outside this set.
|
||||
- Use `figmaMono` only for eyebrows and captions, always uppercase, with the documented positive letter-spacing.
|
||||
- Compose every CTA as a pill (`{rounded.pill}`) and every icon button as a circle (`{rounded.full}`).
|
||||
- Allow the page to **return to white canvas** between every two color blocks so each block reads as deliberate.
|
||||
- Pair `button-primary` and `button-secondary` whenever a section needs both a primary action and a sales / secondary action — the black-and-white pair is the brand signature.
|
||||
|
||||
### Don't
|
||||
|
||||
- Don't introduce mid-gray text. Body hierarchy comes from `figmaSans` weight, not from opacity.
|
||||
- Don't add drop shadows to color-block sections — the color is the depth device.
|
||||
- Don't introduce new accent colors outside the documented `{colors.block-*}` palette and `{colors.accent-magenta}`. Adding, e.g., a saturated brand orange would break the system.
|
||||
- Don't combine more than one color block visible inside a single viewport — Figma's pacing always lets the white canvas separate them.
|
||||
- Don't square off CTAs. Square buttons read as a different brand.
|
||||
- Don't put `figmaMono` in body copy — it's a taxonomy tool, not a reading typeface.
|
||||
- Don't replace the `pricing-tab-selected` black fill with a colored tab; the brand pattern is "selected = primary surface".
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| 4k | 1920px | Max content width holds at 1280px; gutters expand |
|
||||
| Desktop-XL | 1440px | Default desktop layout |
|
||||
| Desktop | 1400px | Comparison table column widths normalize |
|
||||
| Desktop-S | 1280px | Pricing 4-up tier grid maintained |
|
||||
| Tablet | 960px | Pricing collapses 4-up → 2-up; nav becomes hamburger |
|
||||
| Mobile-L | 768px | Color-block sections become full-bleed (no rounded corners on edges) |
|
||||
| Mobile | 560px | Display-xl reduces from 86px to ~48px; pill CTAs go full-width |
|
||||
| Mobile-XS | 559px | Two-column footer collapses to single column |
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- Pill buttons (`button-primary`, `button-secondary`) maintain a minimum 44px tap height across all viewports — achieved by combining `{typography.button}` 20px line-height with the documented vertical padding.
|
||||
- Circular icon buttons (`button-icon-circular`) are 40px on desktop and grow to 44px on touch viewports.
|
||||
- Form input minimum tap target on `/contact/` is 48px high.
|
||||
|
||||
### Collapsing Strategy
|
||||
|
||||
- **Nav**: desktop horizontal nav with two right-anchored pills collapses to a hamburger overlay below 960px. The two pills (`Contact sales`, `Get started for free`) stay visible on the bar above 560px and stack in the overlay below.
|
||||
- **Pricing tier grid**: 4-up → 2-up at 960px → 1-up below 768px. The pill toggle stays horizontal and scrolls horizontally if needed below 560px.
|
||||
- **Color-block sections**: above 768px the section keeps `{spacing.xxl}` of canvas around it so the rounded corners read; below 768px the corners are removed and the block bleeds to viewport edge for a poster effect.
|
||||
- **Comparison table**: below 960px the matrix collapses into per-tier accordions to avoid horizontal scroll.
|
||||
|
||||
### Image Behavior
|
||||
|
||||
- Product UI mocks inside color blocks scale proportionally and never crop. Below 768px they shrink rather than reflow.
|
||||
- Template thumbnails in the home grid use lazy loading and animate in on scroll.
|
||||
- Sticky-note style FigJam thumbnails maintain their slight off-axis rotation across breakpoints — the rotation is a brand signal, not a desktop-only flourish.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time and reference it by its `components:` token name (e.g., `{components.button-primary}`, `{components.color-block-section}`).
|
||||
2. When introducing a new section, decide **first** which `{colors.block-*}` token it sits on; the surface choice is the most consequential decision.
|
||||
3. Default body type to `{typography.body}`; reach for `{typography.subhead}` or `{typography.headline}` only inside a color block.
|
||||
4. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.
|
||||
5. Add new variants as separate component entries (`-pressed`, `-selected`) — do not bury them in prose.
|
||||
6. Keep `{colors.primary}` scarce. If two `button-primary` instances appear in the same viewport, the section is doing too much — neutralize one to `button-secondary`.
|
||||
7. Treat `{colors.accent-magenta}` as a single-shot color: one promo CTA per page, never two.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The exact pastel hex values of `{colors.block-*}` are derived from screenshot pixels; the production source likely uses named tokens that aren't exposed via CSS variables. Treat the documented hex values as faithful approximations rather than exact brand specs.
|
||||
- Dark mode is not documented because the marketing site does not ship a dark theme — the closest analog is the navy color-block (`color-block-section-navy`) and the inverse-canvas footer.
|
||||
- Form-field error and validation styling is not visible on `/contact/` because no error states render in the static screenshot. Inputs have hairline borders and rounded `{rounded.md}` corners; error treatment is not documented.
|
||||
- The animated marquee-strip and color-block reveal animations are not documented (per the no-interaction policy).
|
||||
@@ -0,0 +1,5 @@
|
||||
# Figma Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/figma/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,344 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Figma — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/figma. Every visible
|
||||
value comes from tokens.css. Figma's signature moves: strictly
|
||||
black-and-white interface, figmaSans variable weights (320–700),
|
||||
pill (50px) and circular (50%) geometry, dashed focus outlines,
|
||||
figmaMono uppercase labels with positive letter-spacing."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #000000;
|
||||
--fg-2: #000000;
|
||||
--muted: rgba(0, 0, 0, 0.55);
|
||||
--meta: rgba(0, 0, 0, 0.40);
|
||||
|
||||
--border: rgba(0, 0, 0, 0.12);
|
||||
--border-soft: rgba(0, 0, 0, 0.06);
|
||||
|
||||
--accent: #000000;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: rgba(0, 0, 0, 0.85);
|
||||
--accent-active: rgba(0, 0, 0, 0.08);
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
|
||||
--font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
|
||||
--font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 16px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 26px;
|
||||
--text-2xl: 26px;
|
||||
--text-3xl: 64px;
|
||||
--text-4xl: 86px;
|
||||
|
||||
--leading-body: 1.40;
|
||||
--leading-tight: 1.00;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 40px;
|
||||
|
||||
--radius-sm: 50px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
|
||||
--focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1920px;
|
||||
--container-gutter-desktop: 40px;
|
||||
--container-gutter-tablet: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
/* OpenType kern on all text — structural, not decorative. */
|
||||
font-feature-settings: "kern";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ─────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400; /* figmaSans light — base display weight */
|
||||
margin: 0;
|
||||
line-height: var(--leading-tight);
|
||||
font-feature-settings: "kern";
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-3xl);
|
||||
/* 64px section: line-height 1.10, tracking -0.96px (-0.015em). */
|
||||
line-height: 1.10;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-xl);
|
||||
/* 26px sub-heading: line-height 1.35, tracking -0.26px (-0.01em).
|
||||
Overrides the shared 1.00 set above. */
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: 540;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.40;
|
||||
color: var(--muted);
|
||||
font-weight: 330;
|
||||
letter-spacing: -0.007em;
|
||||
}
|
||||
/* figmaMono uppercase label — section signpost. */
|
||||
.mono-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.54px;
|
||||
color: var(--fg);
|
||||
line-height: 1.30;
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ─────────────────────────────── */
|
||||
/* All buttons use pill (50px) or circle (50%) — non-negotiable. */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--radius-sm); /* 50px pill */
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400;
|
||||
font-feature-settings: "kern";
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Figma focus: dashed 2px outline — the editor selection handle echo. */
|
||||
.btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
|
||||
.btn-black {
|
||||
background: var(--fg);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.btn-black:hover { background: rgba(0, 0, 0, 0.85); }
|
||||
.btn-white {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.btn-white:hover { background: rgba(0, 0, 0, 0.04); }
|
||||
|
||||
/* ─── Product tab bar ─────────────────────── */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tab {
|
||||
padding: 8px 18px;
|
||||
border-radius: var(--radius-sm); /* 50px pill */
|
||||
font-size: var(--text-base);
|
||||
font-weight: 480;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
font-feature-settings: "kern";
|
||||
transition: background-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.tab:hover { background: rgba(0, 0, 0, 0.06); }
|
||||
.tab.active { background: var(--fg); color: var(--accent-on); }
|
||||
.tab:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
|
||||
|
||||
/* ─── Cards ──────────────────────────────── */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="mono-label">Reference fixture · figma</p>
|
||||
<h1>Nothing great is made alone.</h1>
|
||||
<p class="lead" style="max-width:48ch">
|
||||
Figma brings teams together to design, prototype, and build.
|
||||
A strictly black-and-white interface where product content is the
|
||||
hero. Every value below from tokens.css.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-black">
|
||||
Get started for free
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M5 12h14M13 6l6 6-6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-white">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<div class="card">
|
||||
<p class="mono-label" style="margin-bottom:var(--space-4)">Product areas</p>
|
||||
<div class="tab-bar">
|
||||
<button class="tab active">Design</button>
|
||||
<button class="tab">Dev Mode</button>
|
||||
<button class="tab">Prototype</button>
|
||||
<button class="tab">Slides</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section data-od-id="features">
|
||||
<p class="mono-label" style="margin-bottom:var(--space-6)">What this fixture exercises</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card stack-3">
|
||||
<h3>Variable precision</h3>
|
||||
<p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
|
||||
Weight stops 320, 330, 340, 450, 480, 540, 700 — the granular
|
||||
control IS the design. Hierarchy through micro-differences.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3 style="font-weight:340">Monochrome chrome</h3>
|
||||
<p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
|
||||
#000000 and #ffffff only. Color lives in product content —
|
||||
gradients, screenshots, and embedded designs — never the shell.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3>Dashed focus</h3>
|
||||
<p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
|
||||
2px dashed outline on all interactive elements — echoes selection
|
||||
handles in the Figma editor. The website speaks the product's UI.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FORM / ACTIONS -->
|
||||
<section data-od-id="actions">
|
||||
<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
|
||||
<div class="stack-4">
|
||||
<p class="mono-label">Actions</p>
|
||||
<h2 style="font-size:var(--text-xl);line-height:1.35;letter-spacing:-0.01em;font-weight:540">All buttons use pill (50px) radius.</h2>
|
||||
<p class="lead" style="max-width:44ch">
|
||||
No sharp corners on interactive elements. Black solid for primary;
|
||||
bordered white for secondary. Focus is dashed, never solid.
|
||||
</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-4)">
|
||||
<div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
|
||||
<button class="btn btn-black">Primary action</button>
|
||||
<button class="btn btn-white">Secondary</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
|
||||
<button class="tab active">Active tab</button>
|
||||
<button class="tab">Inactive tab</button>
|
||||
<button class="tab">Another</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/figma/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "Figma" brand — vibrant product
|
||||
* content inside a strictly black-and-white interface shell.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Monochrome interface absolutely — pure black (#000000) for all
|
||||
* text, borders, and solid buttons; pure white (#ffffff) for all
|
||||
* backgrounds; no mid-tones in the chrome layer whatsoever.
|
||||
* 2. figmaSans variable font at unusual weight stops (320, 330, 340,
|
||||
* 450, 480, 540, 700); figmaMono for uppercase section labels with
|
||||
* positive letter-spacing; OpenType "kern" on all text.
|
||||
* 3. Pill (50px) and circular (50%) geometry on all interactive
|
||||
* elements; dashed 2px focus outlines echoing editor selection
|
||||
* handles; negative tracking even on body text (-0.14px).
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #ffffff; --surface: #ffffff (gallery wall — no surface tint).
|
||||
* - --surface-warm aliases --surface (B&W system has no warm tier).
|
||||
* - --fg: #000000; --muted: rgba(0,0,0,0.55) for secondary text.
|
||||
* - --accent: #000000 (black IS the accent in a monochrome system).
|
||||
* - --accent-on: #ffffff; hover and active via glass tint overlays.
|
||||
* - --tracking-display: -0.02em (-1.72px / 86px normalized).
|
||||
* - --leading-tight: 1.00 (display hero line-height).
|
||||
* - --radius-sm: 50px (pill — all interactive elements); pill = pill.
|
||||
* - Focus: dashed 2px outline — encoded in components.html, not ring.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #ffffff;
|
||||
--surface: #ffffff; /* gallery wall — no surface tint */
|
||||
--surface-warm: var(--surface); /* no warm tier in B&W system */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #000000;
|
||||
--fg-2: #000000; /* B&W — no secondary ink tier */
|
||||
--muted: rgba(0, 0, 0, 0.55); /* secondary text on white */
|
||||
--meta: rgba(0, 0, 0, 0.40); /* metadata, captions */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: rgba(0, 0, 0, 0.12); /* minimal — only where structurally needed */
|
||||
--border-soft: rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
/* In a strictly B&W system, black IS the accent (solid CTA). */
|
||||
--accent: #000000;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: rgba(0, 0, 0, 0.85);
|
||||
--accent-active: rgba(0, 0, 0, 0.08); /* glass dark — secondary button bg */
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
--font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
|
||||
--font-body: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
|
||||
--font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §Typography Hierarchy.
|
||||
* Figma's display range 86px→12px. The schema spine: 86px hero,
|
||||
* 64px section, 26px sub-heading, 20px body-large, 16px body. */
|
||||
--text-xs: 12px; /* mono small — uppercase tiny labels */
|
||||
--text-sm: 16px; /* body / button */
|
||||
--text-base: 16px; /* body baseline */
|
||||
--text-lg: 20px; /* body large — descriptions */
|
||||
--text-xl: 26px; /* sub-heading */
|
||||
--text-2xl: 26px; /* sub-heading (same tier, weight varies) */
|
||||
--text-3xl: 64px; /* section heading */
|
||||
--text-4xl: 86px; /* display / hero */
|
||||
|
||||
/* Leading + tracking.
|
||||
* --leading-tight=1.00: 86px hero compression.
|
||||
* --tracking-display: -0.02em = -1.72px / 86px normalized.
|
||||
* Body text: -0.14px inline; mono labels: +0.54px inline. */
|
||||
--leading-body: 1.40;
|
||||
--leading-tight: 1.00;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — gallery-like pacing between product sections. */
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 40px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* Figma uses pill (50px) for all CTAs/tabs; 8px for card containers. */
|
||||
--radius-sm: 50px; /* pill — all interactive elements */
|
||||
--radius-md: 8px; /* cards, images, dialogs */
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* Depth via background contrast, not shadows. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
/* Figma's signature: dashed 2px outline encoded at component level.
|
||||
--focus-ring is used as the fallback shadow for keyboard nav. */
|
||||
--focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1920px;
|
||||
--container-gutter-desktop: 40px;
|
||||
--container-gutter-tablet: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
@@ -0,0 +1,544 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Framer
|
||||
description: "A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. The page rhythm is broken by oversized vibrant gradient atmosphere panels — magenta, violet, orange spotlights — that act as living showcase tiles, not decoration. Every CTA is a white pill on dark; every card is a translucent or charcoal surface; every section title pulls letter-spacing tight enough to feel like a poster."
|
||||
|
||||
colors:
|
||||
primary: "#ffffff"
|
||||
on-primary: "#000000"
|
||||
accent-blue: "#0099ff"
|
||||
ink: "#ffffff"
|
||||
ink-muted: "#999999"
|
||||
canvas: "#090909"
|
||||
surface-1: "#141414"
|
||||
surface-2: "#1c1c1c"
|
||||
hairline: "#262626"
|
||||
hairline-soft: "#1a1a1a"
|
||||
inverse-canvas: "#ffffff"
|
||||
inverse-ink: "#000000"
|
||||
gradient-magenta: "#d44df0"
|
||||
gradient-violet: "#6a4cf5"
|
||||
gradient-orange: "#ff7a3d"
|
||||
gradient-coral: "#ff5577"
|
||||
semantic-success: "#22c55e"
|
||||
|
||||
typography:
|
||||
display-xxl:
|
||||
fontFamily: GT Walsheim Framer Medium
|
||||
fontSize: 110px
|
||||
fontWeight: 500
|
||||
lineHeight: 0.85
|
||||
letterSpacing: -5.5px
|
||||
display-xl:
|
||||
fontFamily: GT Walsheim Medium
|
||||
fontSize: 85px
|
||||
fontWeight: 500
|
||||
lineHeight: 0.95
|
||||
letterSpacing: -4.25px
|
||||
fontFeature: ss02
|
||||
display-lg:
|
||||
fontFamily: GT Walsheim Medium
|
||||
fontSize: 62px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.00
|
||||
letterSpacing: -3.1px
|
||||
fontFeature: ss02
|
||||
display-md:
|
||||
fontFamily: GT Walsheim Medium
|
||||
fontSize: 32px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.13
|
||||
letterSpacing: -1.0px
|
||||
headline:
|
||||
fontFamily: Inter
|
||||
fontSize: 22px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.8px
|
||||
fontFeature: cv05
|
||||
subhead:
|
||||
fontFamily: Inter Variable
|
||||
fontSize: 24px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.30
|
||||
letterSpacing: -0.01px
|
||||
fontFeature: cv11
|
||||
body-lg:
|
||||
fontFamily: Inter Variable
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.30
|
||||
letterSpacing: -0.18px
|
||||
fontFeature: cv11
|
||||
body:
|
||||
fontFamily: Inter Variable
|
||||
fontSize: 15px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.30
|
||||
letterSpacing: -0.15px
|
||||
fontFeature: cv11
|
||||
body-sm:
|
||||
fontFamily: Inter Variable
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.40
|
||||
letterSpacing: -0.14px
|
||||
fontFeature: cv11
|
||||
caption:
|
||||
fontFamily: Inter Variable
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.13px
|
||||
fontFeature: cv11
|
||||
micro:
|
||||
fontFamily: Inter Variable
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.12px
|
||||
fontFeature: cv11
|
||||
button:
|
||||
fontFamily: Inter Variable
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.0
|
||||
letterSpacing: -0.14px
|
||||
fontFeature: cv11
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 10px
|
||||
lg: 15px
|
||||
xl: 20px
|
||||
xxl: 30px
|
||||
pill: 100px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
hair: 1px
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 15px
|
||||
lg: 20px
|
||||
xl: 30px
|
||||
xxl: 40px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 10px 15px
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 10px 15px
|
||||
button-translucent:
|
||||
backgroundColor: "{colors.surface-2}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.xxl}"
|
||||
padding: 8px 14px
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 40px
|
||||
pricing-tab-default:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 14px
|
||||
pricing-tab-selected:
|
||||
backgroundColor: "{colors.surface-2}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 14px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 24px
|
||||
pricing-card-featured:
|
||||
backgroundColor: "{colors.surface-2}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 24px
|
||||
template-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 12px
|
||||
gradient-spotlight-card:
|
||||
backgroundColor: "{colors.gradient-violet}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.subhead}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
gradient-spotlight-card-magenta:
|
||||
backgroundColor: "{colors.gradient-magenta}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.subhead}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
gradient-spotlight-card-orange:
|
||||
backgroundColor: "{colors.gradient-orange}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.subhead}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 32px
|
||||
product-mockup-tile:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 16px
|
||||
feature-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.xs}"
|
||||
comparison-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
height: 56px
|
||||
faq-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 24px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 64px 32px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Framer's marketing canvas is a near-pure black artboard. The dominant surface is `{colors.canvas}` — almost pure black with a faint warmth — and on top of it sits oversized white display type set in **GT Walsheim Medium** with letter-spacing pulled to extreme negative values (-5.5px on the 110px display, -4.25px on the 85px hero). The page reads like a poster: one assertive statement per band, generous breathing room above and below.
|
||||
|
||||
The single accent is `{colors.accent-blue}` — used scarcely, mostly for hyperlinks, selection halos, and a subtle blue-tinted shadow ring on focused inputs. The brand chrome itself is monochrome: white pill buttons, charcoal cards, gray secondary text. What makes Framer distinctive is the rhythm break — every few sections the page drops in a **vibrant gradient atmosphere card**: a magenta-violet spotlight, a sunset-orange wash, a coral-pink panel. These aren't section backgrounds; they're individual cards arranged in a card grid, each one a small living poster that shows what Framer can produce.
|
||||
|
||||
Body type is **Inter Variable**, with Framer leaning hard into Inter's character variants (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`, `dlig`) — the result is a body voice that feels custom-tuned, with single-storey "a", straight-leg "l", and tabular figures. There's no light mode on the marketing site; the brand IS dark.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Black-canvas marketing system: `{colors.canvas}` is the surface for hero, body, pricing, FAQ, and footer alike — no light interludes.
|
||||
- Massive negative letter-spacing on display sizes (-5.5px / -4.25px / -3.1px) creates a poster-grade headline cadence.
|
||||
- White pill (`{components.button-primary}`) is the only primary CTA shape across the site; secondary actions live as charcoal pills (`{components.button-secondary}`) or text links.
|
||||
- Oversized **gradient spotlight cards** (violet, magenta, orange, coral) act as showcase tiles inside the dark grid; they are individual cards, not section backgrounds.
|
||||
- Inter Variable with bespoke OpenType character variants (`cv01/05/09/11`, `ss03/ss07`, `dlig`) used everywhere body type appears — the typographic voice is unmistakable.
|
||||
- Border radius scale runs from 4px utility chips up to 100px pills and full circles, with 15–20px the default for cards and 30px for atmospheric gradient cards.
|
||||
- A single chromatic accent `{colors.accent-blue}` reserved for hyperlinks, focus, and selection — never decorative.
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: framer.com (home), /ai/, /startups/, /marketplace/templates/nudge/, /gallery/a16z-speedrun-×-tonik, /pricing.
|
||||
|
||||
### Brand & Accent
|
||||
- **Pure White** ({colors.primary}): The brand primary surface. Every primary CTA pill, every display headline, every body line on canvas.
|
||||
- **Sky Blue** ({colors.accent-blue}): The single chromatic accent. Hyperlinks, focused-input rings, and a few selection states. Never used for backgrounds or as a brand fill.
|
||||
|
||||
### Surface
|
||||
- **Canvas** ({colors.canvas}): Default page background — near-black with a faint warmth. Footer, pricing, hero, and FAQ all sit on it.
|
||||
- **Surface 1** ({colors.surface-1}): One step above canvas — pricing cards, secondary buttons, mockup tiles.
|
||||
- **Surface 2** ({colors.surface-2}): Two steps above — featured pricing card, hero pill backdrop, selected pricing tab.
|
||||
- **Hairline** ({colors.hairline}): 1px borders on input groups, comparison-table dividers.
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Subtler dividers — between FAQ rows and footer column rules.
|
||||
- **Inverse Canvas** ({colors.inverse-canvas}): Pure white — used as the surface of light-on-dark pill CTAs and a small set of light-mode template thumbnails embedded in the showcase grid.
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): All headline and emphasized body type — pure white.
|
||||
- **Ink Muted** ({colors.ink-muted}): Secondary type — gray (#999999) used for meta info, footer columns, comparison-row labels, deselected pricing tabs. Hierarchy on the dark canvas is carried by ink → ink-muted contrast, not by weight changes.
|
||||
|
||||
### Semantic
|
||||
- **Success Green** ({colors.semantic-success}): Pricing comparison-table checkmarks. Glyph fill, not surface.
|
||||
|
||||
### Brand Gradient (signature)
|
||||
- **Gradient Magenta** ({colors.gradient-magenta}): Spotlight card variant.
|
||||
- **Gradient Violet** ({colors.gradient-violet}): Spotlight card variant — most common.
|
||||
- **Gradient Orange** ({colors.gradient-orange}): Spotlight card variant — sunset wash.
|
||||
- **Gradient Coral** ({colors.gradient-coral}): Spotlight card variant — coral/pink.
|
||||
|
||||
These four sit as oversized atmospheric tiles inside otherwise monochrome card grids — a dark canvas with one or two glowing spotlight cards is a recurring page signature.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
|
||||
- **GT Walsheim Framer Medium** / **GT Walsheim Medium** — Framer's display typeface. Geometric, slightly humanist, very confident at large sizes with extreme negative tracking. Fallbacks: `GT Walsheim Medium Placeholder` system font.
|
||||
- **Inter Variable** — System body typeface. Used with extensive OpenType character variants: `cv01` (alternate "1"), `cv05` (alternate "g"), `cv09` (alternate "i" / "l"), `cv11` (alternate "0"), `ss03` / `ss07` stylistic sets, `dlig` discretionary ligatures, and `tnum` for numerics in tabular contexts. The result is a body voice that feels bespoke without commissioning a custom face.
|
||||
- **Inter** — Used selectively for `{typography.headline}` (the 22px / 20px tier). The non-variable cut catches small tracking targets that the variable file rounds.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xxl}` | 110px | 500 | 0.85 | -5.5px | Largest hero headline (home, AI page) |
|
||||
| `{typography.display-xl}` | 85px | 500 | 0.95 | -4.25px | Section opener headlines |
|
||||
| `{typography.display-lg}` | 62px | 500 | 1.00 | -3.1px | Sub-section openers |
|
||||
| `{typography.display-md}` | 32px | 500 | 1.13 | -1.0px | Card titles, smaller display |
|
||||
| `{typography.headline}` | 22px | 700 | 1.20 | -0.8px | Pricing tier headlines, FAQ category titles |
|
||||
| `{typography.subhead}` | 24px | 400 | 1.30 | -0.01px | Lead body next to display headlines |
|
||||
| `{typography.body-lg}` | 18px | 400 | 1.30 | -0.18px | Hero subhead, lead paragraphs |
|
||||
| `{typography.body}` | 15px | 400 | 1.30 | -0.15px | Default body, card descriptions |
|
||||
| `{typography.body-sm}` | 14px | 500 | 1.40 | -0.14px | Pricing comparison rows, dense data |
|
||||
| `{typography.caption}` | 13px | 500 | 1.20 | -0.13px | Eyebrows, footer columns, meta |
|
||||
| `{typography.micro}` | 12px | 400 | 1.20 | -0.12px | Disclaimer, footnote |
|
||||
| `{typography.button}` | 14px | 500 | 1.0 | -0.14px | Pill buttons |
|
||||
|
||||
### Principles
|
||||
|
||||
- **Letter-spacing scales with size, hard.** Display-xxl pulls -5.5px (5% of size); body sticks to about -1% (-0.15px on 15px). The result: posters at the top, comfortable reading at body.
|
||||
- **OpenType character variants are the brand voice.** Switching off `cv11`, `ss03`, etc. visibly changes the body voice — the brand depends on them.
|
||||
- **Weight stays in a narrow band.** Display sits at 500, body at 400, body-sm/caption at 500. Hierarchy is carried by size + tracking, not by 700/900 ramps.
|
||||
- **Tight line-heights everywhere.** Even body runs at 1.30 — Framer's editorial tone is denser than typical SaaS marketing.
|
||||
|
||||
### Note on Font Substitutes
|
||||
|
||||
If implementing without GT Walsheim Medium, suitable open-source substitutes include **Mona Sans**, **Geist**, or **Inter** at weight 600–700 with manually tightened tracking. Mona Sans's hairline weights at 100–300 are particularly close to Framer's cleaner section openers. Inter Variable is open-source — keep it as-is and preserve the documented OpenType variants.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
|
||||
- **Base unit**: 5px (Framer uses non-standard 5/10/15/20/30 increments rather than the more common 4/8/16/24).
|
||||
- **Tokens (front matter)**: `{spacing.hair}` 1px · `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 15px · `{spacing.lg}` 20px · `{spacing.xl}` 30px · `{spacing.xxl}` 40px · `{spacing.section}` 96px.
|
||||
- Card interior padding: `{spacing.lg}` 20px on pricing cards; `{spacing.xl}` 30px on gradient spotlight cards.
|
||||
- Pill button padding: 10px vertical · 15px horizontal — `{components.button-primary}`.
|
||||
- Section padding (vertical): roughly `{spacing.section}` 96px on home; tighter (~64px) on pricing comparison.
|
||||
|
||||
### Grid & Container
|
||||
|
||||
- Max content width sits around the 1199px breakpoint, with side gutters that scale toward `{spacing.xl}` on desktop.
|
||||
- Card grids on the home gallery use 2-up at desktop, collapsing to 1-up below 810px.
|
||||
- Pricing tier grid is 4-up across the documented breakpoints; comparison table beneath it uses fixed-width left column with horizontally scrolling tier columns at narrow widths.
|
||||
|
||||
### Whitespace Philosophy
|
||||
|
||||
The dark canvas IS the whitespace. Where lighter brands lean on white air to separate sections, Framer leans on long stretches of black with a single oversized statement floating in the middle. Sections separate by mode change: a band of charcoal cards, then a band of black with a gradient spotlight, then back to charcoal — like cuts in a dark film.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow, no border | Default for canvas-mounted display type, FAQ rows, footer |
|
||||
| 1 (charcoal) | `{colors.surface-1}` lift on canvas | Pricing cards, mockup tiles, secondary buttons |
|
||||
| 2 (light-edge) | `rgba(255,255,255,0.10)` 0.5px top edge + `rgba(0,0,0,0.25)` 0px 10px 30px drop | Floating product cards, modal cards |
|
||||
| 3 (selected) | `rgba(0,153,255,0.15)` 0px 0px 0px 1px ring | Focused inputs, selected option |
|
||||
|
||||
Four shadow signatures recur across the homepage: a 1px subtle drop, a translucent blue ring, a thick near-black 2px outline (used as the active-element marker on sub-nav), and the layered light-edge + drop-shadow used for floating cards.
|
||||
|
||||
### Decorative Depth
|
||||
|
||||
- **Gradient spotlight cards** are the dominant depth device — color saturation against black canvas substitutes for shadow-driven elevation.
|
||||
- **Layered product mockups** (browser frames containing live Framer-built sites) sit inside `{colors.surface-1}` cards with the level-2 light-edge treatment.
|
||||
- **Subtle blue ring (focus / selected)** is the only chromatic depth signal — used to mark the active state of input groups and pricing tier toggles without changing the underlying surface.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
Framer's extracted radius set is unusually granular (1px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 40px, 100px). The named scale below picks the levels the marketing surface actually consumes.
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Small chip / utility radius |
|
||||
| `{rounded.sm}` | 6px | Inline tag, badge |
|
||||
| `{rounded.md}` | 10px | Form input, list item |
|
||||
| `{rounded.lg}` | 15px | Template card thumbnails |
|
||||
| `{rounded.xl}` | 20px | Pricing cards, mockup tiles |
|
||||
| `{rounded.xxl}` | 30px | Gradient spotlight cards, oversized panels |
|
||||
| `{rounded.pill}` | 100px | All primary text CTAs |
|
||||
| `{rounded.full}` | 9999px | Circular icon buttons, avatar circles |
|
||||
|
||||
### Photography & Illustration Geometry
|
||||
|
||||
- Embedded site mockups (browser-chromed previews of Framer-built sites) sit in `{rounded.xl}` 20px tiles with `{spacing.md}` 15px interior padding.
|
||||
- Gradient spotlight cards use `{rounded.xxl}` 30px corners — softer than the 20px content cards by design, to make them feel like atmospheric panels rather than tighter UI.
|
||||
- Icon glyphs and sub-nav glyphs render in `{rounded.full}` circles at 32–40px sizes.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — White pill on dark canvas. The primary CTA across home, pricing, AI, and gallery pages.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 10px 15px, rounded `{rounded.pill}`.
|
||||
- Pressed state lives in `button-primary-pressed` (the live site uses a transform-scale shrink rather than a darkened fill).
|
||||
|
||||
**`button-secondary`** — Charcoal pill. Used for secondary navigation actions ("Sign in", "Talk to sales") and as the visual counterpart to the primary pill.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.button}`, padding 10px 15px, rounded `{rounded.pill}`.
|
||||
|
||||
**`button-translucent`** — Translucent / lifted secondary used on top of busy backgrounds (gallery hero, gradient cards).
|
||||
- Background `{colors.surface-2}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.xxl}`, padding 8px 14px.
|
||||
|
||||
**`button-icon-circular`** — 40px circle for inline icon actions (carousel arrows, social links).
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, rounded `{rounded.full}`, size 40px.
|
||||
|
||||
### Pricing Tabs
|
||||
|
||||
**`pricing-tab-default`** + **`pricing-tab-selected`** — The pill-toggle that switches between Basic / Pro / Business / Enterprise on `/pricing`.
|
||||
- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.pill}`.
|
||||
- Selected: `{colors.surface-2}` background, `{colors.ink}` text — selected = lift, not color. Surface depth communicates "active" without needing a chromatic fill.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** + **`text-input-focused`** — Form fields on `/pricing` (seat-count, currency switcher) and the in-product preview surfaces.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 10px 14px.
|
||||
- Focused state retains the same surface; the focus ring is the level-3 blue-tinted shadow `rgba(0,153,255,0.15)` 0 0 0 1px.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`pricing-card`** — Each tier on `/pricing`.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.
|
||||
|
||||
**`pricing-card-featured`** — The Pro tier (visually emphasized).
|
||||
- Background `{colors.surface-2}`, otherwise identical structure. The lift is one surface step up — no chromatic outline.
|
||||
|
||||
**`template-card`** — Thumbnail tile in the home "Built with Framer" gallery and `/marketplace`.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.lg}`, padding 12px.
|
||||
|
||||
**`product-mockup-tile`** — Larger tile that frames a live product UI mock (Framer canvas, Workshop video, AI translate panel).
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.xl}`, padding 16px.
|
||||
|
||||
### Gradient Spotlight Cards (signature)
|
||||
|
||||
The defining decorative surface of Framer's marketing — oversized atmospheric tiles dropped into otherwise monochrome card grids. Variants:
|
||||
|
||||
**`gradient-spotlight-card`** — violet ground (most common).
|
||||
- Background `{colors.gradient-violet}`, text `{colors.ink}`, type `{typography.subhead}`, rounded `{rounded.xl}`, padding 32px. (The on-site card often pushes to `{rounded.xxl}` 30px when it spans a wider tile.)
|
||||
|
||||
**`gradient-spotlight-card-magenta`** — magenta-pink ground.
|
||||
- Background `{colors.gradient-magenta}`, otherwise identical.
|
||||
|
||||
**`gradient-spotlight-card-orange`** — sunset-orange wash.
|
||||
- Background `{colors.gradient-orange}`, otherwise identical.
|
||||
|
||||
(Coral pink follows the same shape with `{colors.gradient-coral}`.)
|
||||
|
||||
### Comparison & FAQ
|
||||
|
||||
**`feature-row`** + **`comparison-row`** — Single rows inside the pricing comparison table.
|
||||
- `feature-row`: `{colors.canvas}` background, `{colors.ink}` text. Header rows.
|
||||
- `comparison-row`: `{colors.canvas}` background, `{colors.ink-muted}` text. Data rows with `{typography.body-sm}` and 1px `{colors.hairline-soft}` underlines.
|
||||
|
||||
**`faq-row`** — Each accordion line in the pricing-page FAQ.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 24px.
|
||||
|
||||
### Navigation
|
||||
|
||||
**`top-nav`** — Sticky bar on `{colors.canvas}` with the Framer wordmark left, primary nav links centered, and a `button-secondary` ("Sign in") + `button-primary` ("Get started for free") pair right.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.
|
||||
- Mobile: collapses primary links into a hamburger; the two pill CTAs collapse into a single primary pill on the bar.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Dense link grid on `{colors.canvas}` with the Framer wordmark left and 5–6 columns of caption-sized links.
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, padding 64px 32px.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Reserve `{colors.primary}` (white) and `{colors.canvas}` (near-black) as the system's two anchor surfaces. Every band of the page chooses one or the other.
|
||||
- Push display-size letter-spacing aggressively negative — `{typography.display-xxl}` at -5.5px is the brand signature, not a stylistic accident.
|
||||
- Use `{colors.accent-blue}` only for hyperlinks, focus rings, and selected indicators. Never as a background or button fill.
|
||||
- Drop one or two `gradient-spotlight-card` variants into a card grid; they are the brand's atmosphere device. Don't overdo it — three or more in the same viewport reads as a moodboard, not a system.
|
||||
- Compose every CTA as a pill (`{rounded.pill}`); secondary actions live as charcoal pills, never as bordered ghost buttons.
|
||||
- Keep body type Inter Variable with character variants `cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07` enabled — the brand voice depends on them.
|
||||
- Use surface lift (canvas → surface-1 → surface-2) to mark hierarchy on dark, not opacity changes on white type.
|
||||
|
||||
### Don't
|
||||
|
||||
- Don't ship a light-mode marketing page. Framer's identity is dark.
|
||||
- Don't introduce mid-tone gray text outside `{colors.ink-muted}`. The hierarchy is binary: `ink` or `ink-muted`.
|
||||
- Don't use `{colors.accent-blue}` as a brand fill (e.g., a blue CTA pill). The blue is a signal color, not a surface.
|
||||
- Don't square off CTAs. Pill (`{rounded.pill}`) or full circle is the brand vocabulary.
|
||||
- Don't reduce the negative letter-spacing on display sizes "for accessibility". The compression is intrinsic to the brand voice; reduce the SIZE if needed, but keep the percentage.
|
||||
- Don't apply gradient backgrounds to whole sections. Gradients are CARDS, not section grounds.
|
||||
- Don't combine more than one chromatic accent. The palette is monochrome plus one blue plus the gradient family — not "blue, green, and red".
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Desktop | 1199px | Default desktop layout |
|
||||
| Tablet | 810px | Card grids collapse 4-up → 2-up; nav becomes hamburger |
|
||||
| Mobile-Lg | 809px | Pricing comparison table becomes per-tier accordion |
|
||||
| Mobile-XS | 98px | Smallest documented breakpoint — single-column everything |
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- Pill buttons (`button-primary`, `button-secondary`) maintain a minimum 44px tap height across all viewports — combine `{typography.button}` 14px line-height with the documented 10px vertical padding.
|
||||
- Circular icon buttons (`button-icon-circular`) are 40px on desktop and grow to 44px on touch viewports.
|
||||
- Pricing-tab pills hold ≥40px tap height; below 810px they may collapse into a horizontal-scroll row instead of stacking.
|
||||
|
||||
### Collapsing Strategy
|
||||
|
||||
- **Nav**: horizontal nav with a centered link group + right-anchored pill pair collapses to a hamburger overlay below 810px. The `button-primary` stays visible on the bar.
|
||||
- **Card grids**: the gallery and template-card grids go 2-up on desktop → 1-up on mobile. Gradient spotlight cards retain `{rounded.xxl}` corners at every viewport — they don't bleed.
|
||||
- **Pricing comparison table**: collapses into per-tier accordions below 810px to avoid horizontal scroll.
|
||||
- **Display type**: `{typography.display-xxl}` 110px scales down toward `{typography.display-lg}` 62px on tablet and `{typography.display-md}` 32px on mobile, preserving the percentage-negative letter-spacing.
|
||||
|
||||
### Image Behavior
|
||||
|
||||
- Embedded product mockups (browser frames containing live Framer-built sites) maintain their aspect ratio and never crop.
|
||||
- Gradient spotlight cards keep their gradient orientations across breakpoints — the gradient direction is part of the brand spec.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time and reference it by its `components:` token name (e.g., `{components.button-primary}`, `{components.gradient-spotlight-card}`).
|
||||
2. When introducing a new section on the dark canvas, decide first which surface lift it lives on — `{colors.canvas}` for hero/FAQ, `{colors.surface-1}` for cards, `{colors.surface-2}` for featured cards. The depth choice is the most consequential decision.
|
||||
3. Default body to `{typography.body}` with all the documented OpenType variants; reach for `{typography.subhead}` only inside spotlight cards.
|
||||
4. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.
|
||||
5. Add new variants as separate component entries (`-pressed`, `-featured`, `-selected`) — do not bury them in prose.
|
||||
6. Treat `{colors.accent-blue}` as a single-shot signal color: hyperlinks, focus, and selection — that's it. If you find yourself reaching for a second blue, the brand is drifting.
|
||||
7. Gradient spotlight cards are scarce by design. One or two per long page is the spec; three is a moodboard.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The exact gradient stops for the spotlight cards are derived from screenshot pixels rather than from CSS variables — the production gradients are likely defined as `linear-gradient` strings on individual elements rather than as design tokens. Treat the documented `{colors.gradient-*}` hex values as base anchors, not as exact gradient specs.
|
||||
- Form-field validation / error styling is not visible on the inspected pages because no error states render in the static screenshots.
|
||||
- Dark mode is the only mode — no light-mode adaptation is documented because the marketing site does not ship one.
|
||||
- The marketplace template detail page returned sparser CSS variable data than the other pages; surface tokens for that page were inferred from the matching home / gallery treatment rather than extracted directly.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Framer Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/framer/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,166 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Github
|
||||
description: "Code-forward platform. Functional density, blue-on-white precision, Primer foundations."
|
||||
category: "Developer Tools"
|
||||
colors:
|
||||
palette: ["#ffffff", "#0d1117", "#0969da", "#1a7f37", "#d0d7de", "#f6f8fa"]
|
||||
typography:
|
||||
fonts: "Helvetica"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by GitHub
|
||||
|
||||
> Category: Developer Tools
|
||||
> Code-forward platform. Functional density, blue-on-white precision, Primer foundations.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
GitHub's surface is engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. The page background is a clean `#ffffff` (light) or `#0d1117` (dark), with content arranged on dense rectangular panes separated by hairline borders rather than negative space. Information density is the brand — list rows, code lines, repository headers, and notification cards are all packed close together so a power user can scan a hundred items without scrolling.
|
||||
|
||||
The signature accents are the **Primer blue** (`#0969da`) for links and primary actions, and **GitHub green** (`#1a7f37`) for merged states, success, and the merge button itself. Both feel slightly muted compared to consumer-product blues and greens — saturated enough to read against the dense gray text, restrained enough to disappear into the background when several appear in one viewport.
|
||||
|
||||
Typography uses the **system-ui** stack across the entire product so text renders crisply on every OS, paired with **SFMono / Menlo / Consolas** for code. There is no editorial display font; GitHub's voice is the voice of the system you're already on.
|
||||
|
||||
**Key Characteristics:**
|
||||
- True white canvas (`#ffffff`) or deep navy-black (`#0d1117`) — no warmth, no tint
|
||||
- Hairline gray borders (`#d0d7de`) define every pane and panel
|
||||
- Primer blue (`#0969da`) for links/primary; GitHub green (`#1a7f37`) for success/merge
|
||||
- system-ui for prose; SFMono for code — no custom typeface
|
||||
- Dense list rows with minimal padding; whitespace is rare
|
||||
- Octicon iconography at 16px / 24px — single-stroke, geometric, consistent
|
||||
- Pill-shaped status badges with strong color semantics
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Canvas Default** (`#ffffff`): Primary page background, light theme.
|
||||
- **Canvas Subtle** (`#f6f8fa`): Secondary surface, sidebar, input background, header strip.
|
||||
- **Canvas Inset** (`#eaeef2`): Code block background, deep-inset surface.
|
||||
- **Fg Default** (`#1f2328`): Primary text, headlines, ink.
|
||||
- **Fg Muted** (`#656d76`): Secondary text, captions, file paths.
|
||||
|
||||
### Brand Accent
|
||||
- **Primer Blue** (`#0969da`): Links, primary CTAs, focus ring base — the universal interactive color.
|
||||
- **Primer Blue Hover** (`#0550ae`): Hover/pressed for primary blue.
|
||||
- **Accent Subtle** (`#ddf4ff`): Soft blue surface for callouts, info banners.
|
||||
|
||||
### Semantic
|
||||
- **Success / Merge Green** (`#1a7f37`): Merged PRs, success badges, merge button.
|
||||
- **Success Subtle** (`#dafbe1`): Success surface tint.
|
||||
- **Open Green** (`#1a7f37`): "Open" issue/PR state.
|
||||
- **Closed / Danger Red** (`#cf222e`): Closed PRs, destructive action, validation error.
|
||||
- **Danger Subtle** (`#ffebe9`): Error banner surface.
|
||||
- **Attention / Warning Yellow** (`#9a6700`): Warning text on amber surface.
|
||||
- **Attention Subtle** (`#fff8c5`): Warning banner surface.
|
||||
- **Done Purple** (`#8250df`): Merged-and-archived, "done" state, premium badge.
|
||||
- **Sponsor Pink** (`#bf3989`): Sponsors heart, GitHub sponsors brand.
|
||||
|
||||
### Border & Divider
|
||||
- **Border Default** (`#d0d7de`): Standard hairline border, panel outline.
|
||||
- **Border Muted** (`#d8dee4`): Inner dividers within a panel.
|
||||
- **Border Subtle** (`#eaeef2`): Faint table row dividers.
|
||||
|
||||
### Dark Theme
|
||||
- **Dark Canvas** (`#0d1117`): Dark page background.
|
||||
- **Dark Surface** (`#161b22`): Sidebar, header, secondary surface.
|
||||
- **Dark Border** (`#30363d`): Standard dark-mode border.
|
||||
- **Dark Fg** (`#e6edf3`): Primary text on dark.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
|
||||
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
|
||||
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repo header, marketing hero |
|
||||
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Page heading |
|
||||
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Section heading |
|
||||
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-section, panel header |
|
||||
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Default text size — not 16px |
|
||||
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Captions, file metadata |
|
||||
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Code blocks, diff |
|
||||
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Inline `code` spans |
|
||||
|
||||
### Principles
|
||||
- **14px body, not 16px**: GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport.
|
||||
- **Weight binary**: 400 for everything by default; 600 for headlines and emphasis. No 500, no 700.
|
||||
- **System fonts always**: never load a webfont for chrome — text must render instantly on slow connections.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Green)**
|
||||
- Background: `#1f883d`
|
||||
- Text: `#ffffff`
|
||||
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
|
||||
- Hover: background `#1a7f37`
|
||||
- Use: "Create repository", "Merge pull request"
|
||||
|
||||
**Default**
|
||||
- Background: `#f6f8fa`
|
||||
- Text: `#1f2328`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Padding: 5px 16px
|
||||
- Radius: 6px
|
||||
- Hover: background `#f3f4f6`, border `#d0d7de`
|
||||
|
||||
**Outline (Blue Link Style)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0969da`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#0969da`, text `#ffffff`
|
||||
|
||||
**Danger**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#cf222e`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
|
||||
|
||||
### Cards / Boxes
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 16px (header) + 16px (body)
|
||||
- Header has a `#f6f8fa` strip with bottom border.
|
||||
|
||||
### Inputs
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#d0d7de`
|
||||
- Radius: 6px
|
||||
- Padding: 5px 12px
|
||||
- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
|
||||
|
||||
### Status Pills (Issue / PR)
|
||||
- **Open**: background `#1a7f37`, text white, padding 4px 10px, radius 9999px.
|
||||
- **Closed**: background `#cf222e`, text white.
|
||||
- **Merged**: background `#8250df`, text white.
|
||||
- **Draft**: background `#6e7781`, text white.
|
||||
|
||||
### Labels (Tags on Issues/PRs)
|
||||
- Padding: 0 7px
|
||||
- Radius: 9999px
|
||||
- Font: 12px / 500
|
||||
- Background and text are programmatic (label color → text computed for contrast).
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48.
|
||||
- **Page max-width**: 1280px (`Container-xl`).
|
||||
- **Sidebar**: 296px on desktop, collapses below 1012px.
|
||||
- **Row padding**: 16px horizontal, 12px vertical (lists are dense by design).
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 80ms for hover; 200ms for menu/popover open.
|
||||
- **Easing**: `ease-out` for opens, `ease-in` for closes.
|
||||
- **Avoided**: page-load animation, parallax, persistent micro-interactions. Things appear; they do not perform.
|
||||
@@ -0,0 +1,383 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>GitHub — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/github. Every visible
|
||||
value comes from tokens.css. GitHub's signature moves: true white
|
||||
canvas, hairline borders (#d0d7de), Primer blue CTAs, GitHub green
|
||||
for success/merge, system-ui fonts, 14px body density."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #f6f8fa;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #1f2328;
|
||||
--fg-2: #1f2328;
|
||||
--muted: #656d76;
|
||||
--meta: #656d76;
|
||||
|
||||
--border: #d0d7de;
|
||||
--border-soft: #d8dee4;
|
||||
|
||||
--accent: #0969da;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #0550ae;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #1a7f37;
|
||||
--warn: #9a6700;
|
||||
--danger: #cf222e;
|
||||
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--tracking-display: -0.01em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease-out;
|
||||
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ─────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
/* 20px section heading: line-height 1.25, normal tracking. */
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
/* 16px sub-section/panel header: line-height 1.25.
|
||||
Overrides the shared --leading-tight set above. */
|
||||
}
|
||||
p { margin: 0; }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.body-xs { font-size: var(--text-xs); }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
|
||||
/* ─── Buttons ────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 5px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.btn-primary {
|
||||
background: #1f883d;
|
||||
color: #ffffff;
|
||||
border-color: rgba(31, 35, 40, 0.15);
|
||||
box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-primary:hover { background: var(--success); }
|
||||
.btn-default {
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-default:hover { background: #f3f4f6; }
|
||||
.btn-outline {
|
||||
background: var(--bg);
|
||||
color: var(--accent);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-outline:hover { background: var(--accent); color: white; }
|
||||
|
||||
/* ─── Status pills ───────────────────────── */
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
}
|
||||
.status-open { background: #1a7f37; }
|
||||
.status-closed { background: #cf222e; }
|
||||
.status-merged { background: #8250df; }
|
||||
.status-draft { background: #6e7781; }
|
||||
|
||||
/* ─── Box / Card ─────────────────────────── */
|
||||
.box {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.box-header {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.box-body { padding: var(--space-4); }
|
||||
|
||||
/* ─── Inputs ─────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
|
||||
.field input {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 5px 12px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: var(--space-8);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-4); flex-wrap: wrap; }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · github</p>
|
||||
<h1>Where the world builds software.</h1>
|
||||
<p class="body-muted" style="max-width:48ch;font-size:var(--text-lg);line-height:1.5;margin-top:var(--space-3)">
|
||||
Millions of developers and companies build, ship, and maintain
|
||||
their software on GitHub. Every value below comes from tokens.css
|
||||
— no raw hex, no off-token type.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">Sign up for free</a>
|
||||
<a href="./DESIGN.md" class="btn btn-default">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<div class="box">
|
||||
<div class="box-header">open-design / design-systems</div>
|
||||
<div class="box-body stack-3">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||||
<span class="body-sm" style="font-weight:600;color:var(--accent)">Pull requests</span>
|
||||
<span class="status-pill status-open">Open</span>
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--muted)">
|
||||
#1652 · feat: add structured tokens for 5 brands
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--muted)">
|
||||
#1653 · feat: add batch 2 token fixtures
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
|
||||
<span class="status-pill status-merged">Merged</span>
|
||||
<span class="status-pill status-draft">Draft</span>
|
||||
<span class="status-pill status-closed">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2>Dense, functional, system-native.</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid" style="margin-block-start:var(--space-6)">
|
||||
<article class="box stack-3">
|
||||
<div class="box-header">14px body</div>
|
||||
<div class="box-body">
|
||||
<p class="body-sm body-muted">
|
||||
Not 16px — GitHub's prose density is its identity. 14px base
|
||||
fits more content per viewport. system-ui renders instantly on
|
||||
every OS with zero webfont load.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="box stack-3">
|
||||
<div class="box-header">Hairline borders</div>
|
||||
<div class="box-body">
|
||||
<p class="body-sm body-muted">
|
||||
<code>#d0d7de</code> — every pane, panel, and card. Structure
|
||||
communicated by stroke, not shadow. Density without visual noise.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="box stack-3">
|
||||
<div class="box-header">Primer blue + green</div>
|
||||
<div class="box-body">
|
||||
<p class="body-sm body-muted">
|
||||
<code>#0969da</code> for all interactive affordances.
|
||||
<code>#1a7f37</code> exclusively for success/merge states.
|
||||
Both restrained — never decorative.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FORM -->
|
||||
<section data-od-id="form">
|
||||
<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Primer form inputs.</h2>
|
||||
<p class="body-muted" style="max-width:44ch">
|
||||
Focus: border <code>#0969da</code> + <code>0 0 0 3px rgba(9,105,218,0.3)</code>.
|
||||
5px 12px padding. 6px radius. Weight 600 label.
|
||||
</p>
|
||||
</div>
|
||||
<form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
|
||||
onsubmit="event.preventDefault()">
|
||||
<div class="field">
|
||||
<label for="email">Email address</label>
|
||||
<input id="email" type="email" placeholder="you@example.com" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="repo">Repository name</label>
|
||||
<input id="repo" type="text" placeholder="my-project" />
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
|
||||
<button type="submit" class="btn btn-primary">Create repository</button>
|
||||
<button type="button" class="btn btn-default">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/github/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "GitHub" brand — Primer foundations,
|
||||
* functional density, blue-on-white precision.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. True white canvas (#ffffff) with a clean canvas-subtle (#f6f8fa)
|
||||
* secondary surface; hairline borders (#d0d7de) define every pane
|
||||
* — density over decoration, information over aesthetics.
|
||||
* 2. System-ui stack throughout — no custom webfont; type renders at
|
||||
* instant on every OS; 14px body (not 16px) is the identity.
|
||||
* 3. Primer blue (#0969da) for all interactive affordances; GitHub
|
||||
* green (#1a7f37) reserved for success/merge states only.
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #ffffff; --surface: #f6f8fa (canvas-subtle).
|
||||
* - --surface-warm aliases --surface (no warm tier in Primer).
|
||||
* - --fg: #1f2328 (fg-default); --muted: #656d76 (fg-muted).
|
||||
* - --border: #d0d7de (1px hairline — the structural backbone).
|
||||
* - --accent: #0969da (Primer Blue); --accent-hover: #0550ae.
|
||||
* - --success bound to GitHub green (#1a7f37) — merge / open state.
|
||||
* - --tracking-display: -0.01em (only display-size headings use it).
|
||||
* - --text-base: 14px (the 14px body IS GitHub's product density).
|
||||
* - --radius-sm: 6px (universal Primer radius for buttons/inputs).
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #ffffff;
|
||||
--surface: #f6f8fa; /* canvas-subtle — sidebar, input bg */
|
||||
--surface-warm: var(--surface); /* Primer has no warm tier */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #1f2328; /* fg-default — ink */
|
||||
--fg-2: #1f2328; /* same ink; no B-slot split in Primer */
|
||||
--muted: #656d76; /* fg-muted — captions, file paths */
|
||||
--meta: #656d76; /* same muted tier */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: #d0d7de; /* border-default — hairline structural */
|
||||
--border-soft: #d8dee4; /* border-muted — inner panel dividers */
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
--accent: #0969da; /* Primer Blue — links, primary CTAs */
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #0550ae; /* darker pressed state */
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #1a7f37; /* GitHub green — merge, open, success */
|
||||
--warn: #9a6700; /* attention amber text */
|
||||
--danger: #cf222e; /* closed / destructive red */
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
/* System fonts only — no webfonts load in GitHub. */
|
||||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §Typography.
|
||||
* GitHub's prose density: 14px body (not 16px). Display sits at 32px.
|
||||
* h2 (20px) and h3 (16px) collapse close together for density. */
|
||||
--text-xs: 12px; /* body-small — captions, metadata */
|
||||
--text-sm: 14px; /* body — default UI (GitHub's base) */
|
||||
--text-base: 14px; /* body baseline = 14px for density */
|
||||
--text-lg: 16px; /* h3 / panel header */
|
||||
--text-xl: 20px; /* h2 — section heading */
|
||||
--text-2xl: 24px; /* h1 — page heading */
|
||||
--text-3xl: 28px; /* subpage display */
|
||||
--text-4xl: 32px; /* display — repo header / hero */
|
||||
|
||||
/* Leading + tracking.
|
||||
* GitHub uses 1.25 for headings (tight-but-readable), 1.5 for body.
|
||||
* Only display gets the -0.01em tracking. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--tracking-display: -0.01em;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
/* 4px base grid — Primer spacing. Row padding 16px h, 12px v. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — GitHub marketing pages. */
|
||||
--section-y-desktop: 64px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* 6px is the universal Primer radius for all interactive elements. */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* GitHub uses hairline borders, not shadows, as the primary depth
|
||||
signal. --elev-raised is a whisper for the rare floating element. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
/* Primer focus: 3px rgba ring on the accent color. */
|
||||
--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
/* GitHub avoids animation. 80ms hover, 200ms open — short and purposeful. */
|
||||
--motion-fast: 80ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: ease-out;
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
@@ -0,0 +1,575 @@
|
||||
---
|
||||
version: alpha
|
||||
name: HashiCorp
|
||||
description: "An enterprise-infrastructure marketing canvas built around a near-black ground (#000000) and a system of per-product accent colors — Terraform purple, Vault yellow, Consul pink, Waypoint cyan, Vagrant blue — that act as identity tokens rather than decorative palette. Display type is hashicorpSans set in 600/700 with tight 1.17–1.21 line-heights; body type runs the same family at 500 weight with relaxed 1.50–1.71 line-heights. Cards live as charcoal surfaces with 1px translucent gray borders; product showcase cards lift into per-product chromatic gradients. The system reads as confident, technical, and intentionally multi-product — every section quietly signals which HashiCorp tool it represents."
|
||||
|
||||
colors:
|
||||
primary: "#000000"
|
||||
on-primary: "#ffffff"
|
||||
accent-blue: "#2b89ff"
|
||||
ink: "#ffffff"
|
||||
ink-muted: "#b2b6bd"
|
||||
ink-subtle: "#656a76"
|
||||
canvas: "#000000"
|
||||
surface-1: "#15181e"
|
||||
surface-2: "#1f232b"
|
||||
surface-3: "#3b3d45"
|
||||
hairline: "#3b3d45"
|
||||
hairline-soft: "#252830"
|
||||
inverse-canvas: "#ffffff"
|
||||
inverse-ink: "#000000"
|
||||
product-terraform: "#7b42bc"
|
||||
product-terraform-bright: "#911ced"
|
||||
product-vault: "#ffcf25"
|
||||
product-consul: "#e62b1e"
|
||||
product-waypoint: "#14c6cb"
|
||||
product-waypoint-deep: "#12b6bb"
|
||||
product-vagrant: "#1868f2"
|
||||
product-nomad: "#00ca8e"
|
||||
product-boundary: "#f24c53"
|
||||
amber-100: "#fbeabf"
|
||||
amber-200: "#bb5a00"
|
||||
blue-7: "#101a59"
|
||||
semantic-success: "#00ca8e"
|
||||
semantic-warning: "#ffcf25"
|
||||
semantic-error: "#e62b1e"
|
||||
semantic-visited: "#a737ff"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 80px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.17
|
||||
letterSpacing: -2.5px
|
||||
display-lg:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 56px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.18
|
||||
letterSpacing: -1.6px
|
||||
display-md:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 40px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.19
|
||||
letterSpacing: -1.0px
|
||||
headline:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 28px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.21
|
||||
letterSpacing: -0.6px
|
||||
card-title:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 22px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.18
|
||||
letterSpacing: -0.4px
|
||||
subhead:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 20px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.35
|
||||
letterSpacing: -0.2px
|
||||
body-lg:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.69
|
||||
letterSpacing: 0
|
||||
body:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.71
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.38
|
||||
letterSpacing: 0.2px
|
||||
button:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.29
|
||||
letterSpacing: 0
|
||||
eyebrow:
|
||||
fontFamily: hashicorpSans
|
||||
fontSize: 12px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.23
|
||||
letterSpacing: 0.6px
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 24px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
hair: 1px
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.inverse-canvas}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.inverse-canvas}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.surface-2}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-tertiary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-product-terraform:
|
||||
backgroundColor: "{colors.product-terraform}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-product-vault:
|
||||
backgroundColor: "{colors.product-vault}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-product-waypoint:
|
||||
backgroundColor: "{colors.product-waypoint}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
product-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
product-card-terraform:
|
||||
backgroundColor: "{colors.product-terraform}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
product-card-vault:
|
||||
backgroundColor: "{colors.product-vault}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
product-card-waypoint:
|
||||
backgroundColor: "{colors.product-waypoint}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
pricing-card-featured:
|
||||
backgroundColor: "{colors.surface-2}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
resource-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 16px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
product-pill:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 4px 10px
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
height: 64px
|
||||
comparison-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
cta-banner:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.subhead}"
|
||||
rounded: "{rounded.xxl}"
|
||||
padding: 48px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 64px 32px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
HashiCorp's marketing canvas is a near-black ground that serves a multi-product portfolio without ever feeling generic. The dominant surface is `{colors.canvas}` (pure black) layered with `{colors.surface-1}` charcoal cards and 1px translucent gray hairlines. The chrome is monochrome — white pill-rounded buttons (`{components.button-primary}`), white type, gray secondary type — but the system is held together by a **palette of per-product accent colors** that signal which HashiCorp tool a given section belongs to: Terraform purple, Vault yellow, Consul red, Waypoint cyan, Vagrant blue, Nomad green, Boundary coral.
|
||||
|
||||
Display type is **hashicorpSans** at weights 600/700 with tight line-heights (1.17–1.21); body type is the same family at 500 weight with deliberately relaxed line-heights (1.50–1.71) — the contrast feels editorial, not enterprise-templated. CTAs use small `{rounded.md}` 8px corners rather than pills, which keeps the system reading as developer-facing rather than consumer-y.
|
||||
|
||||
The signature device is the **product-card** family — each HashiCorp product gets its own colored card variant on the home and infrastructure pages, lifting Terraform into a violet ground, Vault into yellow, Waypoint into cyan. These aren't decorative gradients — they're identity surfaces. A reader scrolling the page can tell which product a section is about from the corner of their eye.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Black-canvas marketing system: `{colors.canvas}` is the surface for hero, body, pricing, comparison tables, and footer alike.
|
||||
- **Per-product color identity**: Terraform `{colors.product-terraform}`, Vault `{colors.product-vault}`, Waypoint `{colors.product-waypoint}`, Vagrant `{colors.product-vagrant}`, Consul `{colors.product-consul}`, Nomad `{colors.product-nomad}`, Boundary `{colors.product-boundary}` — each with its own button + card variant.
|
||||
- Display headlines run hashicorpSans 600/700 with line-height 1.17–1.21 (tight); body runs the same family at 500 with 1.50–1.71 (relaxed) — the proportional gap is the brand's voice.
|
||||
- CTA shape is `{rounded.md}` 8px — not a pill — keeping the system reading as developer-tool rather than consumer-app.
|
||||
- Charcoal surface lift (canvas → surface-1 → surface-2) instead of shadow-driven elevation.
|
||||
- 1px translucent gray hairlines (`rgba(178,182,189,0.1)`) define cards and dividers — the borders are felt more than seen.
|
||||
- Eyebrow typography (12–13px, 600 weight, 0.6px positive tracking, uppercase) marks every section as a category label.
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: hashicorp.com/en (home), /en/infrastructure-cloud, /en/products/terraform, /en/pricing, /en/resources?contentType=PDF.
|
||||
|
||||
### Brand & Accent
|
||||
- **Black** ({colors.primary}): The system primary surface. Canvas, footer, comparison tables, hero — all black.
|
||||
- **White** ({colors.on-primary}): Inverse text on black; canvas of `button-primary`.
|
||||
- **Accent Blue** ({colors.accent-blue}): Hyperlinks across the marketing surface.
|
||||
- **Visited Purple** ({colors.semantic-visited}): Visited-link state.
|
||||
|
||||
### Surface
|
||||
- **Canvas** ({colors.canvas}): Default page background.
|
||||
- **Surface 1** ({colors.surface-1}): Charcoal one step above canvas — feature cards, pricing cards, resource tiles.
|
||||
- **Surface 2** ({colors.surface-2}): Two steps above — featured pricing card, secondary buttons, hovered product chrome.
|
||||
- **Surface 3** ({colors.surface-3}): Three steps above — small chips, badges, sub-nav backgrounds.
|
||||
- **Hairline** ({colors.hairline}): 1px borders on cards and dividers.
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Subtler dividers — comparison-table rows.
|
||||
- **Inverse Canvas** ({colors.inverse-canvas}): Pure white — used as the surface of `button-primary` only.
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): All headline and emphasized body type — pure white.
|
||||
- **Ink Muted** ({colors.ink-muted}): Secondary type at #b2b6bd — meta info, footer columns.
|
||||
- **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #656a76 — form helper text, timestamps, footnotes.
|
||||
|
||||
### Per-Product Identity (signature)
|
||||
HashiCorp's marketing isn't held together by a single accent color — it's held together by a system of product-specific accents, each used to mark which tool a section represents.
|
||||
|
||||
- **Terraform Purple** ({colors.product-terraform}): Terraform sections, terraform CTAs, the violet 3D cube on the home hero.
|
||||
- **Terraform Bright** ({colors.product-terraform-bright}): Saturated highlight — link emphasis on Terraform pages.
|
||||
- **Vault Yellow** ({colors.product-vault}): Vault sections and CTAs.
|
||||
- **Consul Red** ({colors.product-consul}): Consul sections.
|
||||
- **Waypoint Cyan** ({colors.product-waypoint}): Waypoint sections, deep variant `{colors.product-waypoint-deep}` for hover/active.
|
||||
- **Vagrant Blue** ({colors.product-vagrant}): Vagrant sections.
|
||||
- **Nomad Green** ({colors.product-nomad}): Nomad sections.
|
||||
- **Boundary Coral** ({colors.product-boundary}): Boundary sections.
|
||||
|
||||
### Semantic
|
||||
- **Success** ({colors.semantic-success}): Positive states (also reused as Nomad green).
|
||||
- **Warning** ({colors.semantic-warning}): Warning states (also Vault yellow).
|
||||
- **Error** ({colors.semantic-error}): Error states (also Consul red).
|
||||
- **Amber 100** ({colors.amber-100}): Soft warm highlight — extracted but used sparingly.
|
||||
- **Amber 200** ({colors.amber-200}): Saturated amber for caution badges.
|
||||
- **Blue 7** ({colors.blue-7}): Deep navy used in unified-core gradients.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
|
||||
- **hashicorpSans** — HashiCorp's proprietary marketing typeface. Geometric, clean, slightly humanist. Fallback stack `__hashicorpSans_Fallback_96f0ca` (system font), then `-apple-system, BlinkMacSystemFont, Segoe UI, helvetica, arial`.
|
||||
|
||||
The same family carries display, body, button, and caption — no separate display + body pairing. Hierarchy is carried by weight (500 body / 600 emphasis / 700 display) and by a deliberate line-height contrast (tight on display, relaxed on body).
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 80px | 700 | 1.17 | -2.5px | Largest hero headline |
|
||||
| `{typography.display-lg}` | 56px | 700 | 1.18 | -1.6px | Section opener headlines |
|
||||
| `{typography.display-md}` | 40px | 600 | 1.19 | -1.0px | Sub-section headlines |
|
||||
| `{typography.headline}` | 28px | 600 | 1.21 | -0.6px | Pricing tier titles, CTA banner heading |
|
||||
| `{typography.card-title}` | 22px | 600 | 1.18 | -0.4px | Feature card title |
|
||||
| `{typography.subhead}` | 20px | 600 | 1.35 | -0.2px | Long-form intro paragraphs |
|
||||
| `{typography.body-lg}` | 18px | 500 | 1.69 | 0 | Hero subhead, lead body |
|
||||
| `{typography.body}` | 16px | 500 | 1.50 | 0 | Default body |
|
||||
| `{typography.body-sm}` | 14px | 500 | 1.71 | 0 | Card body, footer columns |
|
||||
| `{typography.caption}` | 13px | 500 | 1.38 | 0.2px | Meta, comparison cell labels |
|
||||
| `{typography.button}` | 14px | 600 | 1.29 | 0 | Pill / square CTA buttons |
|
||||
| `{typography.eyebrow}` | 12px | 600 | 1.23 | 0.6px | Uppercase section eyebrows |
|
||||
|
||||
### Principles
|
||||
|
||||
- **Tight on display, relaxed on body.** Display sits at line-height 1.17–1.21; body lifts to 1.50–1.71. The size + line-height contrast carries hierarchy.
|
||||
- **Weight hierarchy is small.** 500 body / 600 emphasis / 700 display. No light / black extremes — the brand reads as engineered.
|
||||
- **Eyebrow positive-tracked uppercase 12px is the section header.** Every meaningful section has one above the headline.
|
||||
- **No mono.** Despite being a developer-tools brand, the marketing surface uses no monospace face — code voice is reserved for in-product surfaces.
|
||||
|
||||
### Note on Font Substitutes
|
||||
|
||||
If implementing without hashicorpSans, suitable open-source substitutes include **Inter** (closest geometric character set), **Geist Sans**, or **IBM Plex Sans**. Inter at weights 500 / 600 / 700 closely approximates hashicorpSans's proportions; expect to manually adjust line-heights down by ~0.02 to match.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
|
||||
- **Base unit**: 8px (the primary increments are 4 / 8 / 12 / 16 / 24 / 32 / 48).
|
||||
- **Tokens (front matter)**: `{spacing.hair}` 1px · `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- Card interior padding: `{spacing.lg}` 24px on product cards; `{spacing.xl}` 32px on pricing cards; `{spacing.xxl}` 48px on CTA banners.
|
||||
- Button padding: 10px vertical · 18px horizontal on `{components.button-primary}`.
|
||||
- Universal rhythm constant: `{spacing.section}` (96px) vertical gap between major sections.
|
||||
|
||||
### Grid & Container
|
||||
|
||||
- Max content width sits around 1280px with side gutters scaling from `{spacing.xxl}` on desktop down to `{spacing.lg}` on mobile.
|
||||
- Product card grids are 3-up on desktop, 2-up at tablet, 1-up on mobile.
|
||||
- Pricing tier grid is 3-up across desktop; comparison table beneath uses fixed-width left column.
|
||||
- Resource directory (PDF library) uses 4-up dense thumbnail grid.
|
||||
|
||||
### Whitespace Philosophy
|
||||
|
||||
The dark canvas IS the whitespace. Sections separate by surface lift (canvas → surface-1) rather than by gaps in white. Within a section, generous `{spacing.xl}` 32px gaps separate cards; `{spacing.lg}` 24px separates rows.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow, no border | Canvas-mounted display type, hero, footer |
|
||||
| 1 (charcoal lift) | `{colors.surface-1}` background + 1px `rgba(178,182,189,0.1)` border | Default cards, resource tiles, pricing cards |
|
||||
| 2 (surface-2 lift) | `{colors.surface-2}` background + 1px `{colors.hairline}` border | Featured pricing card, hovered cards, sub-nav |
|
||||
| 3 (product chromatic) | Per-product accent color background — Terraform purple, Vault yellow, Waypoint cyan | Product showcase cards |
|
||||
|
||||
The product chromatic level isn't a "modal lift" — it's an identity device. A Terraform card sits at the same z-plane as a feature-card; the difference is meaning, not depth.
|
||||
|
||||
### Decorative Depth
|
||||
|
||||
- **3D product visuals** — isometric purple cubes (Terraform), translucent yellow safes (Vault), and similar product-tinted illustrations sit in the right column of hero sections.
|
||||
- **1px translucent gray hairlines** are the dominant edge — borders are visible without competing.
|
||||
- **No drop shadows on dark.** Cards lift via surface change, never shadow.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Small chips / badges |
|
||||
| `{rounded.sm}` | 6px | Inline tag |
|
||||
| `{rounded.md}` | 8px | All CTA buttons, form inputs, list items |
|
||||
| `{rounded.lg}` | 12px | Feature cards, product cards, pricing cards |
|
||||
| `{rounded.xl}` | 16px | Large illustrative tiles |
|
||||
| `{rounded.xxl}` | 24px | CTA banner panels |
|
||||
| `{rounded.pill}` | 9999px | Eyebrow-style product pills (small chips) |
|
||||
| `{rounded.full}` | 9999px | Avatar circles (rare on marketing) |
|
||||
|
||||
### Photography & Illustration Geometry
|
||||
|
||||
- Product 3D illustrations use full-bleed within their container — no rounded inner mask.
|
||||
- Logo chips in the customer marquee sit on `{rounded.sm}` 6px tiles with 1px hairline.
|
||||
- Resource thumbnails use `{rounded.lg}` 12px corners.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — White rounded-rect CTA. Used as primary CTA on all pages.
|
||||
- Background `{colors.inverse-canvas}`, text `{colors.inverse-ink}`, type `{typography.button}`, padding 10px 18px, rounded `{rounded.md}`.
|
||||
- Pressed state lives in `button-primary-pressed`.
|
||||
|
||||
**`button-secondary`** — Charcoal rounded-rect. Secondary CTA, "Read docs" / "Talk to sales".
|
||||
- Background `{colors.surface-2}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
**`button-tertiary`** — Bare ghost button on canvas with text-only treatment.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
**`button-product-terraform`** — Terraform-tinted CTA on Terraform pages.
|
||||
- Background `{colors.product-terraform}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
**`button-product-vault`** — Vault-yellow CTA.
|
||||
- Background `{colors.product-vault}`, text `{colors.inverse-ink}` (yellow needs dark text), type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
**`button-product-waypoint`** — Waypoint-cyan CTA.
|
||||
- Background `{colors.product-waypoint}`, text `{colors.inverse-ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
(Vagrant blue, Nomad green, Consul red, Boundary coral follow the same pattern with their respective `{colors.product-*}` token.)
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`product-card`** — Default product showcase card — surface-1 charcoal.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
**`product-card-terraform`** — Product card with Terraform purple ground (used as identity surface, not modal elevation).
|
||||
- Background `{colors.product-terraform}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
**`product-card-vault`** — Vault-yellow ground.
|
||||
- Background `{colors.product-vault}`, text `{colors.inverse-ink}`, otherwise identical structure.
|
||||
|
||||
**`product-card-waypoint`** — Waypoint-cyan ground.
|
||||
- Background `{colors.product-waypoint}`, text `{colors.inverse-ink}`, otherwise identical structure.
|
||||
|
||||
(Other product variants follow the same shape with their respective product token.)
|
||||
|
||||
**`feature-card`** — Generic feature highlight on surface-1.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
**`pricing-card`** — Pricing tier on `/en/pricing`.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 32px.
|
||||
|
||||
**`pricing-card-featured`** — Recommended tier (visually emphasized via surface lift).
|
||||
- Background `{colors.surface-2}`, otherwise identical structure.
|
||||
|
||||
**`resource-card`** — PDF / whitepaper / guide tile in the resources directory.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.lg}`, padding 16px.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** + **`text-input-focused`** — Form fields on pricing seat-count and contact forms.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 10px 14px.
|
||||
- Focused state retains the same surface; the focus ring is a 1px `{colors.accent-blue}` outline.
|
||||
|
||||
### Pills & Chips
|
||||
|
||||
**`product-pill`** — Small product-name chip used above hero headlines and on resource cards to label which product a piece of content belongs to.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.pill}`, padding 4px 10px.
|
||||
|
||||
### Comparison Table
|
||||
|
||||
**`comparison-row`** — Single row inside the pricing comparison table.
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.body-sm}`. Row separator is `{colors.hairline-soft}`.
|
||||
|
||||
### CTA Banner
|
||||
|
||||
**`cta-banner`** — Large rounded panel used at the bottom of long-form pages with a closing CTA.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.subhead}`, rounded `{rounded.xxl}`, padding 48px.
|
||||
|
||||
### Navigation
|
||||
|
||||
**`top-nav`** — Sticky black bar with HashiCorp logomark left, primary nav links centered, and a `button-primary` ("Sign up") + `button-secondary` ("Sign in") pair right.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 64px.
|
||||
- Mobile: collapses primary links into a hamburger; the primary CTA remains visible.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Dense link grid on `{colors.canvas}` with the wordmark at left and 5–6 columns of caption-sized links.
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, padding 64px 32px.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Reserve `{colors.canvas}` (black) and `{colors.surface-1}` (charcoal) as the system's two anchor surfaces. Every band of the page is one or the other.
|
||||
- When introducing a section about a specific HashiCorp product, use that product's `{colors.product-*}` token consistently — for the section pill, the CTA button, and (where appropriate) the showcase card background.
|
||||
- Use `{rounded.md}` 8px on CTA buttons; HashiCorp's brand reads as engineered, not consumer.
|
||||
- Pair tight display line-heights (1.17–1.21) with relaxed body line-heights (1.50–1.71). The contrast IS the brand voice.
|
||||
- Use the eyebrow typography (`{typography.eyebrow}`, uppercase, 0.6px tracking) above every meaningful section.
|
||||
- Use surface lift (canvas → surface-1 → surface-2) to express hierarchy on dark.
|
||||
- Reserve product-chromatic cards for product identity; keep generic feature cards on `{colors.surface-1}`.
|
||||
|
||||
### Don't
|
||||
|
||||
- Don't ship a light-mode marketing page. HashiCorp's marketing brand IS dark.
|
||||
- Don't introduce mid-tone gray text outside the documented `ink` / `ink-muted` / `ink-subtle` set.
|
||||
- Don't square off CTA corners — use `{rounded.md}` 8px, not 0px.
|
||||
- Don't use a product accent color for a CTA on a page that isn't about that product. Terraform purple on the Vault page is a brand violation.
|
||||
- Don't combine multiple product accents in the same viewport — the system says "this section is about THIS tool", and mixing accents breaks that signal.
|
||||
- Don't add drop shadows on dark; surface lift carries elevation.
|
||||
- Don't replace `hashicorpSans` with a display-only sans for headlines and a different family for body. The brand is held together by one family across the full hierarchy.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Desktop-XL | 1440px | Default desktop layout |
|
||||
| Desktop | 1280px | Pricing 3-up grid maintained |
|
||||
| Tablet | 1024px | Product card grid 3-up → 2-up |
|
||||
| Mobile-Lg | 768px | Pricing comparison becomes per-tier accordion; nav becomes hamburger |
|
||||
| Mobile | 480px | Single-column everything; display-xl scales 80px → ~36px |
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- CTA buttons (`button-primary`, `button-secondary`) maintain ≥40px tap height across viewports.
|
||||
- Product pills are 24px tall on desktop and grow to 28px on touch viewports.
|
||||
- Form inputs hold ≥44px tap target on touch viewports.
|
||||
|
||||
### Collapsing Strategy
|
||||
|
||||
- **Nav**: horizontal nav with right-anchored CTAs collapses to a hamburger overlay below 768px. The primary CTA stays visible on the bar.
|
||||
- **Product card grid**: 3-up → 2-up at 1024px → 1-up below 768px.
|
||||
- **Pricing comparison table**: collapses into per-tier accordions below 768px to avoid horizontal scroll.
|
||||
- **Display type**: `{typography.display-xl}` 80px scales toward `{typography.display-md}` 40px on mobile while preserving the negative-tracking percentage.
|
||||
|
||||
### Image Behavior
|
||||
|
||||
- 3D product illustrations (cubes, safes, etc.) maintain aspect ratio and never crop; below 768px they shrink rather than reflow.
|
||||
- Customer logo marquee scales horizontally and may wrap to a second row at narrow widths.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time and reference it by its `components:` token name.
|
||||
2. When introducing a new section, decide first whether it's a generic feature (surface-1) or a product-identity section (product-* color).
|
||||
3. Default body to `{typography.body}` at 500 weight; reach for `{typography.subhead}` only inside CTA banners and feature cards.
|
||||
4. Run `npx @google/design.md lint DESIGN.md` after edits.
|
||||
5. Add new product variants as separate component entries (`product-card-nomad`, `button-product-consul`, etc.).
|
||||
6. Treat the per-product palette as identity tokens, not decoration. If you reach for a product color outside its product context, the brand is drifting.
|
||||
7. Eyebrow type is mandatory above every section — skipping it makes sections read as floating.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The exact product-color hex values come from the `--mds-color-*` CSS variable set extracted directly; they are HashiCorp's canonical brand spec.
|
||||
- Shadow tokens are not extensively documented because the dark surface system uses surface lift instead of shadow elevation.
|
||||
- Form-field error and validation styling is not visible on the inspected pages.
|
||||
- Dark mode is the only marketing mode — light-mode adaptation is not documented.
|
||||
- Product-card variants for Consul, Nomad, Vagrant, and Boundary follow the documented Terraform / Vault / Waypoint pattern but are referenced in prose only; if they need formal entries they can be added as `product-card-consul`, `product-card-nomad`, etc.
|
||||
@@ -0,0 +1,5 @@
|
||||
# HashiCorp Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/hashicorp/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Huggingface
|
||||
description: "ML community hub. Sunny yellow accent, monospace identity, cheerful and dense."
|
||||
category: "AI & LLM"
|
||||
colors:
|
||||
palette: ["#ffd21e", "#fafafa", "#0d1117", "#f3f4f6", "#e5e7eb", "#f59e0b"]
|
||||
typography:
|
||||
fonts: "Inter"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Hugging Face
|
||||
|
||||
> Category: AI & LLM
|
||||
> ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Hugging Face is the rare ML brand that refuses to look serious. The hub leans into a sunshine-yellow accent (`#ffd21e`), a cartoon hugging-face emoji as the logo, and a confident **IBM Plex Mono** voice that reads more like a community zine than a research lab. The page background is a clean off-white (`#fafafa`) with text in a deep slate (`#0d1117`), and the yellow appears in pull quotes, tags, "new" badges, and the model-card header strip — never as an entire surface, always as punctuation.
|
||||
|
||||
The typographic system is monospace-forward in a way few product brands attempt: **IBM Plex Mono** for headings and tags, **Source Sans Pro** (or Inter) for body. The mix gives every page a "config file is the README" vibe — fitting for a platform built around .gitattributes and model-card files.
|
||||
|
||||
Shapes are crisp, not soft: 4–6px radii, 1px solid borders that announce themselves rather than hide. Tables are dense, with row hover in a faint gray (`#f3f4f6`). The brand emoji punctuates everything — chips, headings, even error states wear a 🤗 — so the system feels human even when displaying technical data.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Sunshine yellow `#ffd21e` as the lone saturated accent
|
||||
- IBM Plex Mono for headings and tags; Source Sans Pro for body
|
||||
- Off-white canvas (`#fafafa`) with crisp 1px borders (`#e5e7eb`)
|
||||
- 4–6px radii — closer to brutalist than rounded
|
||||
- Hugging-face emoji 🤗 used unironically as a system glyph
|
||||
- Dense tables, minimal padding — a community hub for power users
|
||||
- Color-coded model categories (NLP blue, vision green, audio purple)
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **HF Yellow** (`#ffd21e`): Brand primary, badges, "new" pill, model-card header bar.
|
||||
- **HF Yellow Deep** (`#f59e0b`): Hover/active for yellow.
|
||||
- **HF Yellow Soft** (`#fff4cc`): Surface tint, callout background.
|
||||
|
||||
### Surface & Background
|
||||
- **Canvas** (`#ffffff`): Primary page background.
|
||||
- **Canvas Subtle** (`#fafafa`): Alternate section background, footer.
|
||||
- **Canvas Inset** (`#f3f4f6`): Code block background, hover row.
|
||||
- **Canvas Dark** (`#0d1117`): Dark theme background.
|
||||
|
||||
### Ink & Text
|
||||
- **Ink Primary** (`#0d1117`): Primary text, headings.
|
||||
- **Ink Secondary** (`#374151`): Body prose.
|
||||
- **Ink Muted** (`#6b7280`): Captions, file paths, model authors.
|
||||
- **Ink Inverse** (`#f9fafb`): Text on dark surface.
|
||||
|
||||
### Category Accents (Model Tasks)
|
||||
- **NLP Blue** (`#2563eb`): Text/NLP task badges.
|
||||
- **Vision Green** (`#16a34a`): Computer-vision task badges.
|
||||
- **Audio Purple** (`#9333ea`): Audio/speech task badges.
|
||||
- **Multimodal Pink** (`#db2777`): Multimodal/diffusion task badges.
|
||||
- **Tabular Orange** (`#ea580c`): Tabular/structured task badges.
|
||||
|
||||
### Semantic
|
||||
- **Success** (`#16a34a`): Build succeeded, deploy live.
|
||||
- **Warning** (`#f59e0b`): Slow inference, rate limit.
|
||||
- **Error** (`#dc2626`): Failed build, broken model.
|
||||
- **Info** (`#2563eb`): Notice banner.
|
||||
|
||||
### Border
|
||||
- **Border Default** (`#e5e7eb`): Standard 1px hairline.
|
||||
- **Border Strong** (`#d1d5db`): Emphasized border on hover.
|
||||
- **Border Subtle** (`#f3f4f6`): Inner divider.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display / UI / Headings / Tags**: `IBM Plex Mono`, with fallback: `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
|
||||
- **Body / Prose**: `Source Sans Pro`, with fallback: `Inter, system-ui, -apple-system, sans-serif`
|
||||
- **Editorial (rare, blog only)**: `Source Serif Pro`, with fallback: `Georgia, serif`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display | IBM Plex Mono | 48px (3rem) | 600 | 1.1 | -0.01em | Marketing hero |
|
||||
| H1 | IBM Plex Mono | 32px (2rem) | 600 | 1.2 | normal | Page heading, model name |
|
||||
| H2 | IBM Plex Mono | 24px (1.5rem) | 600 | 1.25 | normal | Section heading |
|
||||
| H3 | IBM Plex Mono | 18px (1.125rem) | 600 | 1.3 | normal | Sub-section |
|
||||
| Body Large | Source Sans Pro | 18px (1.125rem) | 400 | 1.6 | normal | Lede, blog intro |
|
||||
| Body | Source Sans Pro | 15px (0.9375rem) | 400 | 1.55 | normal | Standard prose, model card |
|
||||
| Caption | Source Sans Pro | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Author byline, timestamp |
|
||||
| Tag / Badge | IBM Plex Mono | 12px (0.75rem) | 500 | 1.2 | 0.02em | Task tags, framework chips |
|
||||
| Code | IBM Plex Mono | 14px (0.875rem) | 400 | 1.55 | normal | Code blocks, inline `model_id` |
|
||||
|
||||
### Principles
|
||||
- **Mono everywhere it matters**: nav links, headings, tags, and metadata are all monospaced. Sans is reserved for paragraphs of prose.
|
||||
- **Weight under 600**: 600 is the cap; 700 is too loud against yellow. Hierarchy is size and color.
|
||||
- **Tags read as code**: model tags use mono so they look like the strings developers will paste into Python.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary**
|
||||
- Background: `#0d1117`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Hover: `#374151`
|
||||
- Use: "Use this model", primary forms.
|
||||
|
||||
**Yellow CTA**
|
||||
- Background: `#ffd21e`
|
||||
- Text: `#0d1117`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Hover: `#f59e0b`
|
||||
- Use: "Pro upgrade", "Sponsor".
|
||||
|
||||
**Outline**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#0d1117`
|
||||
- Border: 1px solid `#e5e7eb`
|
||||
- Hover: background `#f3f4f6`
|
||||
|
||||
### Cards / Model Cards
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#e5e7eb`
|
||||
- Radius: 6px
|
||||
- Padding: 16px 20px
|
||||
- Header strip: `#ffd21e` background, 4px tall, only on featured model cards.
|
||||
|
||||
### Inputs
|
||||
- Background: `#ffffff`
|
||||
- Border: 1px solid `#e5e7eb`
|
||||
- Radius: 6px
|
||||
- Padding: 8px 12px
|
||||
- Focus: border `#0d1117`, ring `0 0 0 3px rgba(13,17,23,0.1)`
|
||||
|
||||
### Tags / Chips (Task / Framework)
|
||||
- Background: category-tinted soft (`#dbeafe` for NLP, `#dcfce7` for vision, etc.)
|
||||
- Text: matching strong category color.
|
||||
- Padding: 2px 8px
|
||||
- Radius: 4px
|
||||
- Font: IBM Plex Mono 12px / 500
|
||||
|
||||
### Tables
|
||||
- Header: background `#fafafa`, border-bottom 1px `#e5e7eb`.
|
||||
- Row: border-bottom 1px `#f3f4f6`, hover `#f3f4f6`.
|
||||
- Padding: 8px 16px per cell — dense by design.
|
||||
|
||||
## 5. Spacing & Layout
|
||||
|
||||
- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
|
||||
- **Container**: max 1280px, 24px gutter.
|
||||
- **Sidebar (model browser)**: 280px wide.
|
||||
- **Section rhythm**: 64–96px vertical between major sections.
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- **Duration**: 120ms for hover; 200ms for menu open.
|
||||
- **Easing**: `ease-out`.
|
||||
- **Tag pop**: a 1.05× scale on hover at 120ms — the only exception to flat-on-hover.
|
||||
@@ -0,0 +1,550 @@
|
||||
---
|
||||
version: alpha
|
||||
name: IBM
|
||||
description: "An enterprise-marketing canvas faithful to Carbon Design System: white surfaces, charcoal type, IBM Blue (#0f62fe) as the single confident accent, and a deliberately flat-square aesthetic where corners stay at 0–4px. Type runs IBM Plex Sans at light weight 300 for display sizes (a brand signature) and 400/600 for body and emphasis. Cards live as thin-bordered tiles with no shadow; sections separate via subtle gray rows. The chrome is square, the typography is light, and the only color in the system is one assertive blue — the result reads as old-world enterprise gravitas reframed for the cloud era."
|
||||
|
||||
colors:
|
||||
primary: "#0f62fe"
|
||||
on-primary: "#ffffff"
|
||||
ink: "#161616"
|
||||
ink-muted: "#525252"
|
||||
ink-subtle: "#8c8c8c"
|
||||
canvas: "#ffffff"
|
||||
surface-1: "#f4f4f4"
|
||||
surface-2: "#e0e0e0"
|
||||
inverse-canvas: "#161616"
|
||||
inverse-surface-1: "#262626"
|
||||
inverse-ink: "#ffffff"
|
||||
inverse-ink-muted: "#c6c6c6"
|
||||
hairline: "#e0e0e0"
|
||||
hairline-strong: "#161616"
|
||||
blue-60: "#0043ce"
|
||||
blue-80: "#002d9c"
|
||||
blue-hover: "#0050e6"
|
||||
semantic-success: "#24a148"
|
||||
semantic-warning: "#f1c21b"
|
||||
semantic-error: "#da1e28"
|
||||
semantic-info: "#0f62fe"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 76px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.17
|
||||
letterSpacing: -0.5px
|
||||
display-lg:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 60px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.17
|
||||
letterSpacing: -0.4px
|
||||
display-md:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 42px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.20
|
||||
letterSpacing: 0
|
||||
headline:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 32px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.25
|
||||
letterSpacing: 0
|
||||
card-title:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 24px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.33
|
||||
letterSpacing: 0
|
||||
subhead:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 20px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
letterSpacing: 0
|
||||
body-lg:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
letterSpacing: 0
|
||||
body:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
letterSpacing: 0.16px
|
||||
body-sm:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.29
|
||||
letterSpacing: 0.16px
|
||||
body-emphasis:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.29
|
||||
letterSpacing: 0.16px
|
||||
caption:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.33
|
||||
letterSpacing: 0.32px
|
||||
button:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.29
|
||||
letterSpacing: 0.16px
|
||||
eyebrow:
|
||||
fontFamily: IBM Plex Sans
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.29
|
||||
letterSpacing: 0.16px
|
||||
|
||||
rounded:
|
||||
none: 0px
|
||||
xs: 2px
|
||||
sm: 4px
|
||||
md: 6px
|
||||
lg: 8px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 12px 16px
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.blue-80}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.inverse-ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 12px 16px
|
||||
button-tertiary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 12px 16px
|
||||
button-ghost:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 12px 16px
|
||||
button-danger:
|
||||
backgroundColor: "{colors.semantic-error}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 12px 16px
|
||||
feature-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
feature-card-elevated:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
product-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 32px
|
||||
hero-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.display-md}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 48px
|
||||
cta-banner:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.headline}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 48px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 11px 16px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 11px 16px
|
||||
text-input-error:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 11px 16px
|
||||
newsletter-input:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 11px 16px
|
||||
product-tab:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px 20px
|
||||
product-tab-selected:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-emphasis}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px 20px
|
||||
resource-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 16px
|
||||
customer-logo-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 24px
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
height: 48px
|
||||
utility-bar:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.none}"
|
||||
height: 32px
|
||||
footer:
|
||||
backgroundColor: "{colors.inverse-canvas}"
|
||||
textColor: "{colors.inverse-ink-muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.none}"
|
||||
padding: 64px 32px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
IBM's marketing system is a faithful application of **Carbon Design System** — IBM's open-source enterprise design system. The dominant surface is `{colors.canvas}` pure white with `{colors.surface-1}` light gray for elevation, charcoal `{colors.ink}` (#161616) for text, and IBM Blue `{colors.primary}` (#0f62fe) as the single brand accent.
|
||||
|
||||
The defining choice is **flat geometry**: every CTA, every card, every input, every container uses square corners (`{rounded.none}` 0px) with thin 1px borders. There are no rounded pills, no soft shadows, no atmospheric gradients. The system is engineered, not stylized.
|
||||
|
||||
**IBM Plex Sans** carries the entire type hierarchy. Display sizes (76 / 60 / 42px) run at weight **300** — IBM's signature light display treatment that makes 76px feel calmer than competing brands' 700-weight display. Body type sits at weight 400 with `letter-spacing: 0.16px` (a Carbon precision detail) and line-height 1.50. The voice reads as careful, technical, and trustworthy.
|
||||
|
||||
The system reaches for color rarely — IBM Blue marks links, primary CTAs, and the rare full-bleed CTA banner. Charcoal carries every other surface that isn't white. The result is enterprise gravitas without the enterprise stiffness: rigorous, light-weighted, and intentionally restrained.
|
||||
|
||||
**Key Characteristics:**
|
||||
- **Carbon Design System** — IBM's marketing chrome IS Carbon. Buttons are square, inputs are square-with-bottom-rule, corners stay at 0px.
|
||||
- **Light-weight display type**: Plex Sans at weight 300 for 42–76px headlines is the brand's typographic signature.
|
||||
- **One accent color**: `{colors.primary}` IBM Blue carries every link, primary CTA, and CTA banner. There is no second brand color.
|
||||
- White canvas + light gray (`{colors.surface-1}`) + charcoal (`{colors.ink}`) cover 95% of surfaces.
|
||||
- Footer inverts to charcoal (`{colors.inverse-canvas}` #161616) — the only dark surface above the page break.
|
||||
- Card hierarchy is carried by 1px hairlines and surface change, never by drop shadow.
|
||||
- `letter-spacing: 0.16px` on body is a Carbon precision detail — the small positive tracking is part of the brand voice.
|
||||
- Page rhythm: utility bar → top nav → hero with light-weight headline → feature card grid → customer logo marquee → enterprise feature row → training section → newsletter / sign-in CTA → dark footer.
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: ibm.com (home), /software/ai-productivity, /consulting, /products/cloud-pak-for-aiops, /products/bare-metal-servers, community.ibm.com.
|
||||
|
||||
### Brand & Accent
|
||||
- **IBM Blue** ({colors.primary}): The single brand accent. Links, primary CTAs, CTA banner backgrounds, focus rings.
|
||||
- **Blue 60** ({colors.blue-60}): Hovered link state.
|
||||
- **Blue 80** ({colors.blue-80}): Pressed primary button.
|
||||
- **Blue Hover** ({colors.blue-hover}): Hover state for primary buttons.
|
||||
|
||||
### Surface
|
||||
- **Canvas** ({colors.canvas}): Default page background.
|
||||
- **Surface 1** ({colors.surface-1}): Light gray (#f4f4f4) — input fields, alternate-row stripes, subtle section bands.
|
||||
- **Surface 2** ({colors.surface-2}): Slightly darker gray (#e0e0e0) — disabled fields, hairline-as-fill for separators.
|
||||
- **Hairline** ({colors.hairline}): 1px borders on cards, inputs, dividers.
|
||||
- **Hairline Strong** ({colors.hairline-strong}): 1px charcoal underline on focused inputs (Carbon's signature focus treatment).
|
||||
- **Inverse Canvas** ({colors.inverse-canvas}): Charcoal #161616 — footer surface.
|
||||
- **Inverse Surface 1** ({colors.inverse-surface-1}): One step lighter than inverse canvas — footer column dividers, hovered footer items.
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): All headlines and emphasized body type — charcoal #161616.
|
||||
- **Ink Muted** ({colors.ink-muted}): Secondary type at #525252 — meta, sub-headlines, footer body.
|
||||
- **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #8c8c8c — disabled, helper text, captions.
|
||||
- **Inverse Ink** ({colors.inverse-ink}): White on charcoal — footer headings.
|
||||
- **Inverse Ink Muted** ({colors.inverse-ink-muted}): Light gray on charcoal — footer body.
|
||||
|
||||
### Semantic
|
||||
- **Success Green** ({colors.semantic-success}): Carbon green-50 — success states.
|
||||
- **Warning Yellow** ({colors.semantic-warning}): Carbon yellow-30 — warning states.
|
||||
- **Error Red** ({colors.semantic-error}): Carbon red-60 — error states; danger button background.
|
||||
- **Info Blue** ({colors.semantic-info}): Identical to primary — informational badges.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
|
||||
- **IBM Plex Sans** — IBM's open-source proprietary typeface (free for any use). Geometric, slightly humanist, designed specifically for enterprise UI. Fallback: `Helvetica Neue, Arial, sans-serif`.
|
||||
|
||||
The same family carries display, body, and caption — there is no display + body pairing. Hierarchy is carried by **size + weight** rather than by family change. Plex Sans is also free / open-source under the SIL Open Font License — making it the easiest custom face on this list to substitute for in implementation.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 76px | 300 | 1.17 | -0.5px | Largest hero headline |
|
||||
| `{typography.display-lg}` | 60px | 300 | 1.17 | -0.4px | Section opener headlines |
|
||||
| `{typography.display-md}` | 42px | 300 | 1.20 | 0 | Sub-section headlines, hero card title |
|
||||
| `{typography.headline}` | 32px | 400 | 1.25 | 0 | Card collection heading, FAQ category |
|
||||
| `{typography.card-title}` | 24px | 400 | 1.33 | 0 | Feature card title |
|
||||
| `{typography.subhead}` | 20px | 400 | 1.40 | 0 | Lead body next to display headlines |
|
||||
| `{typography.body-lg}` | 18px | 400 | 1.50 | 0 | Hero subhead, lead paragraphs |
|
||||
| `{typography.body}` | 16px | 400 | 1.50 | 0.16px | Default body |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.29 | 0.16px | Card body, footer columns |
|
||||
| `{typography.body-emphasis}` | 14px | 600 | 1.29 | 0.16px | Selected tab label, emphasized body line |
|
||||
| `{typography.caption}` | 12px | 400 | 1.33 | 0.32px | Captions, meta, utility bar |
|
||||
| `{typography.button}` | 14px | 400 | 1.29 | 0.16px | All button labels |
|
||||
| `{typography.eyebrow}` | 14px | 400 | 1.29 | 0.16px | Section eyebrows (Carbon avoids strong eyebrows; uses sentence case 14px) |
|
||||
|
||||
### Principles
|
||||
|
||||
- **Light-weight display is the brand voice.** Plex Sans at weight 300 for 76px headlines reads as quietly authoritative — switching to 700 would make it look like every other enterprise site.
|
||||
- **Carbon's `letter-spacing: 0.16px`** on body sizes is a precision detail. Don't remove it.
|
||||
- **No mono** on marketing surfaces (Plex Mono exists but lives in product surfaces only).
|
||||
- **Eyebrow typography uses sentence case 14px** — Carbon resists the all-caps tracked eyebrow common to other enterprise brands.
|
||||
- **Line-heights tighten on display, relax on body**: 1.17 at display-xl, 1.50 at body — proportional to size.
|
||||
|
||||
### Note on Font Substitutes
|
||||
|
||||
IBM Plex Sans is **free and open-source** (SIL OFL license) and available on Google Fonts. It is the recommended implementation. The Plex family also includes Plex Mono and Plex Serif if expanded typographic needs arise.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
|
||||
- **Base unit**: 4px (Carbon's signature 4-pixel grid).
|
||||
- **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- Card interior padding: `{spacing.lg}` 24px on feature cards; `{spacing.xl}` 32px on product cards; `{spacing.xxl}` 48px on hero cards and CTA banners.
|
||||
- Button padding: 12px vertical · 16px horizontal — Carbon spec.
|
||||
- Form input padding: 11px vertical · 16px horizontal.
|
||||
|
||||
### Grid & Container
|
||||
|
||||
- Carbon's 16-column grid at desktop, scaling to 8 / 4 columns at tablet / mobile.
|
||||
- Max content width sits around 1584px (Carbon's max-grid breakpoint).
|
||||
- Card grids are 4-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- The customer logo marquee uses fixed-width tiles in a flex row, scrolling horizontally on smaller viewports.
|
||||
|
||||
### Whitespace Philosophy
|
||||
|
||||
Carbon uses precise alignment to a 4-pixel grid as its whitespace system. Sections separate via thin gray rows (`{colors.surface-1}`) rather than via large vertical gaps. Content is dense by design — IBM's customers expect to see a lot on a page, not a lot of air.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow, no border | Default for body type, hero text, footer body |
|
||||
| 1 (hairline) | 1px `{colors.hairline}` border on canvas | Feature cards, inputs, list items |
|
||||
| 2 (surface lift) | `{colors.surface-1}` background on canvas | Alternate-row banners, hovered cards |
|
||||
| 3 (focus ring) | 2px `{colors.primary}` outline + 1px `{colors.hairline-strong}` underline | Focused input, focused button |
|
||||
|
||||
Carbon resists drop shadows on marketing — depth is carried by surface change and 1px hairlines. The exception is product / app surfaces (Carbon documents shadow tokens for elevated panels), but the marketing site barely uses them.
|
||||
|
||||
### Decorative Depth
|
||||
|
||||
- **Soft blue gradient backdrops** appear behind some hero illustrations — a faint blue-to-white wash that warms the canvas without competing with the headline.
|
||||
- **No atmospheric depth.** No spotlight cards, no pastel section blocks, no gradient panels.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.none}` | 0px | Default — every button, card, input, container |
|
||||
| `{rounded.xs}` | 2px | Small badges (rare exception) |
|
||||
| `{rounded.sm}` | 4px | Avatar circles squared, dropdown menus |
|
||||
| `{rounded.md}` | 6px | (Used rarely; documented for completeness) |
|
||||
| `{rounded.lg}` | 8px | (Used rarely; documented for completeness) |
|
||||
| `{rounded.pill}` | 9999px | Status pills, badges in product UI (rare on marketing) |
|
||||
|
||||
The brand commits to flat 0px corners. The other tokens exist for product / mobile surfaces but rarely surface on marketing.
|
||||
|
||||
### Photography & Illustration Geometry
|
||||
|
||||
- IBM uses photography (people, hardware, sports cars) and abstract illustration (geometric mesh, dotted patterns) interchangeably.
|
||||
- Image frames are flat — no rounded corners.
|
||||
- Customer logo tiles sit on `{rounded.none}` 0px tiles with thin 1px borders.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Blue solid CTA. The default primary across all pages.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 12px 16px, rounded `{rounded.none}`.
|
||||
- Pressed state lives in `button-primary-pressed` (background shifts to `{colors.blue-80}`).
|
||||
|
||||
**`button-secondary`** — Charcoal solid button — Carbon's "secondary" treatment.
|
||||
- Background `{colors.ink}`, text `{colors.inverse-ink}`, type `{typography.button}`, padding 12px 16px, rounded `{rounded.none}`.
|
||||
|
||||
**`button-tertiary`** — White button with blue 1px border + blue text. Used for tertiary CTAs.
|
||||
- Background `{colors.canvas}`, text `{colors.primary}`, type `{typography.button}`, rounded `{rounded.none}`, padding 12px 16px. (Border in implementation: 1px `{colors.primary}`.)
|
||||
|
||||
**`button-ghost`** — Plain text + chevron, no background until hover.
|
||||
- Background `{colors.canvas}`, text `{colors.primary}`, type `{typography.button}`, rounded `{rounded.none}`, padding 12px 16px.
|
||||
|
||||
**`button-danger`** — Carbon's destructive variant.
|
||||
- Background `{colors.semantic-error}`, text `{colors.on-primary}`, type `{typography.button}`, rounded `{rounded.none}`, padding 12px 16px.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`feature-card`** — Default feature highlight tile on the home and product pages.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 24px. Stroked with 1px `{colors.hairline}`.
|
||||
|
||||
**`feature-card-elevated`** — Same shape on `{colors.surface-1}` ground — used for "Recommended" cards in the latest-content carousel.
|
||||
- Background `{colors.surface-1}`, otherwise identical structure.
|
||||
|
||||
**`product-card`** — Larger product showcase tile.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 32px.
|
||||
|
||||
**`hero-card`** — Hero composition card with light-weight title, body, and CTA.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.display-md}`, rounded `{rounded.none}`, padding 48px.
|
||||
|
||||
**`cta-banner`** — Full-width blue CTA panel near the bottom of the page.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.headline}`, rounded `{rounded.none}`, padding 48px.
|
||||
|
||||
**`resource-tile`** — Smaller article / case-study tile.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.none}`, padding 16px.
|
||||
|
||||
**`customer-logo-tile`** — Single tile in the customer marquee on the home page (Ferrari, Pfizer, etc.).
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.none}`, padding 24px. 1px hairline border.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** + **`text-input-focused`** + **`text-input-error`** — Carbon's input chrome.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 11px 16px.
|
||||
- Focus state replaces the bottom 1px hairline with a 2px `{colors.primary}` underline (Carbon's signature focus treatment).
|
||||
- Error state adds 2px `{colors.semantic-error}` bottom underline.
|
||||
|
||||
**`newsletter-input`** — The "Stay connected" newsletter capture on the home page.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.none}`, padding 11px 16px. Adjacent submit is `button-primary`.
|
||||
|
||||
### Tabs
|
||||
|
||||
**`product-tab`** + **`product-tab-selected`** — The horizontal tab strip on product pages and the home "Recommended" carousel.
|
||||
- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.none}`, padding 16px 20px. Bottom 1px hairline.
|
||||
- Selected: `{colors.canvas}` background, `{colors.ink}` text, `{typography.body-emphasis}` weight, bottom 2px `{colors.primary}` underline. Same padding / rounding.
|
||||
|
||||
### Navigation
|
||||
|
||||
**`top-nav`** — Sticky white bar with the IBM logomark left, nav categories center, and search / sign-in icons right.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 48px. 1px bottom hairline.
|
||||
|
||||
**`utility-bar`** — Slim gray ribbon above the top nav with location switch, contact, search shortcuts.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink-muted}`, type `{typography.caption}`, height 32px.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Charcoal footer (`{colors.inverse-canvas}`) with the IBM wordmark left and 5–6 columns of caption-sized links. The only inverted surface above the page break.
|
||||
- Background `{colors.inverse-canvas}`, text `{colors.inverse-ink-muted}`, type `{typography.body-sm}`, padding 64px 32px.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Use `{rounded.none}` 0px on every CTA, card, input, and container. The flat-square aesthetic is the brand.
|
||||
- Pair Plex Sans weight 300 for display sizes (42px+) with weight 400 for body. Resist the urge to bold the headline.
|
||||
- Reserve `{colors.primary}` IBM Blue for primary CTAs, links, focused-input underlines, and CTA banner. Do not use it as a card background or eyebrow color.
|
||||
- Apply `letter-spacing: 0.16px` to body sizes. It's a Carbon precision detail and part of the typographic voice.
|
||||
- Use surface change (`canvas` → `surface-1`) and 1px hairlines for card hierarchy. Skip drop shadows.
|
||||
- Stick to sentence case for eyebrows and section labels — Carbon resists all-caps tracking.
|
||||
- Invert to `{colors.inverse-canvas}` only at the footer; the rest of the page stays light.
|
||||
|
||||
### Don't
|
||||
|
||||
- Don't round corners on buttons, cards, or inputs. Even 4px rounded corners break the Carbon look.
|
||||
- Don't bold display headlines. Plex Sans at weight 300 is the brand voice; weight 700 makes it look generic.
|
||||
- Don't add atmospheric depth (gradient backdrops, drop shadows, atmospheric overlays) outside the documented soft-blue hero gradient.
|
||||
- Don't introduce a second brand color. IBM Blue is the only chromatic accent; status semantics use the documented green / yellow / red.
|
||||
- Don't replace IBM Plex Sans with Inter or Helvetica without preserving the `letter-spacing: 0.16px` and weight-300 display treatment.
|
||||
- Don't use pill-shaped buttons. Carbon uses square corners; pills read as a different brand.
|
||||
- Don't write all-caps tracked eyebrows. Carbon's eyebrows are sentence case at 14px.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Max | 1584px | Carbon max grid; gutters expand |
|
||||
| Desktop-XL | 1312px | Default desktop layout |
|
||||
| Desktop | 1056px | Card grid 4-up maintained |
|
||||
| Tablet | 672px | Card grid 4-up → 2-up; nav becomes hamburger |
|
||||
| Mobile | 320px | Single-column; display-xl scales 76px → ~32px |
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- Carbon spec: 48px minimum tap target. Buttons and inputs hold 48px on touch viewports.
|
||||
- Top-nav links grow from 36px to 48px tap height on touch.
|
||||
- Tab strip rows hold 48px tap height.
|
||||
|
||||
### Collapsing Strategy
|
||||
|
||||
- **Top nav**: links collapse to a hamburger overlay below 672px. Logomark and search icon stay on the bar.
|
||||
- **Utility bar**: hides below 672px to reclaim vertical space.
|
||||
- **Card grid**: 4-up → 2-up at 1056px → 1-up below 672px.
|
||||
- **Display type**: `{typography.display-xl}` 76px scales toward 42px on mobile while preserving the weight-300 treatment.
|
||||
- **Footer**: 6-column link grid → 3-column at tablet → 1-column at mobile.
|
||||
|
||||
### Image Behavior
|
||||
|
||||
- Customer logos in the marquee maintain aspect ratio and may collapse to 2-row scroll below 672px.
|
||||
- Hero illustrations scale proportionally; below 672px they may stack above the headline rather than sit beside it.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time and reference it by its `components:` token name.
|
||||
2. Default body to `{typography.body}` at weight 400 with `letter-spacing: 0.16px`. Don't remove the tracking.
|
||||
3. When introducing a new section, decide whether it sits on `{colors.canvas}` (default) or on `{colors.surface-1}` (alternate band). The two-surface rhythm is the rhythm.
|
||||
4. Run `npx @google/design.md lint DESIGN.md` after edits.
|
||||
5. Add new variants as separate component entries (`button-primary-pressed`, `text-input-error`, `text-input-focused`).
|
||||
6. Treat IBM Blue as scarce: links, primary CTA, CTA banner, focus underline. Anything beyond that is drift.
|
||||
7. Resist rounded corners. If a designer pushes for 4px rounding, the brand is shifting away from Carbon.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- IBM's product surfaces (cloud-pak, watson, datacap) have richer Carbon component usage (data tables, graph cells, breadcrumbs, contextual menus) that aren't present on the marketing pages inspected — those components live in Carbon's documentation rather than in the marketing extraction.
|
||||
- Form-field error and validation styling is documented in Carbon docs; the inspected pages didn't render error states.
|
||||
- Dark mode is documented in Carbon as Gray-100 theme but isn't exposed on these marketing pages — only the footer inverts. The full dark theme is a separate Carbon palette not extracted here.
|
||||
- The community.ibm.com sub-domain uses a different chrome (community-platform white-label) that approximates Carbon but isn't strict — the documented system applies to ibm.com proper.
|
||||
@@ -0,0 +1,5 @@
|
||||
# IBM Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/ibm/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,546 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Intercom
|
||||
description: "An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and minimal radii (8–16px). Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA."
|
||||
|
||||
colors:
|
||||
primary: "#111111"
|
||||
on-primary: "#ffffff"
|
||||
ink: "#111111"
|
||||
ink-muted: "#626260"
|
||||
ink-subtle: "#7b7b78"
|
||||
ink-tertiary: "#9c9fa5"
|
||||
canvas: "#f5f1ec"
|
||||
surface-1: "#ffffff"
|
||||
surface-2: "#ebe7e1"
|
||||
inverse-canvas: "#000000"
|
||||
inverse-surface-1: "#313130"
|
||||
inverse-ink: "#ffffff"
|
||||
inverse-ink-muted: "#9c9fa5"
|
||||
hairline: "#d3cec6"
|
||||
hairline-soft: "#ebe7e1"
|
||||
fin-orange: "#ff5600"
|
||||
report-orange: "#fe4c02"
|
||||
report-blue: "#65b5ff"
|
||||
report-green: "#0bdf50"
|
||||
report-pink: "#ff2067"
|
||||
report-lime: "#b3e01c"
|
||||
report-cyan: "#03b2cb"
|
||||
brand-blue: "#0007cb"
|
||||
semantic-error: "#c41c1c"
|
||||
semantic-success: "#0bdf50"
|
||||
|
||||
typography:
|
||||
display-xl:
|
||||
fontFamily: Saans
|
||||
fontSize: 72px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -2.0px
|
||||
display-lg:
|
||||
fontFamily: Saans
|
||||
fontSize: 56px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1.4px
|
||||
display-md:
|
||||
fontFamily: Saans
|
||||
fontSize: 40px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -0.8px
|
||||
headline:
|
||||
fontFamily: Saans
|
||||
fontSize: 28px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.5px
|
||||
card-title:
|
||||
fontFamily: Saans
|
||||
fontSize: 22px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
letterSpacing: -0.3px
|
||||
subhead:
|
||||
fontFamily: Saans
|
||||
fontSize: 20px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
letterSpacing: -0.2px
|
||||
body-lg:
|
||||
fontFamily: Saans
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
letterSpacing: -0.1px
|
||||
body:
|
||||
fontFamily: Saans
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
letterSpacing: 0
|
||||
body-sm:
|
||||
fontFamily: Saans
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
letterSpacing: 0
|
||||
caption:
|
||||
fontFamily: Saans
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
letterSpacing: 0
|
||||
button:
|
||||
fontFamily: Saans
|
||||
fontSize: 15px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.20
|
||||
letterSpacing: 0
|
||||
eyebrow:
|
||||
fontFamily: Saans
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
letterSpacing: 0
|
||||
mono:
|
||||
fontFamily: SaansMono
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
letterSpacing: 0
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 24px
|
||||
pill: 9999px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
section: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.inverse-canvas}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
button-secondary:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-tertiary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
button-fin:
|
||||
backgroundColor: "{colors.fin-orange}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 18px
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
pricing-card-featured:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
feature-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 24px
|
||||
product-mockup-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: 24px
|
||||
testimonial-card:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-lg}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
customer-logo-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 16px
|
||||
text-input:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 10px 14px
|
||||
pricing-tab-default:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 16px
|
||||
pricing-tab-selected:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button}"
|
||||
rounded: "{rounded.pill}"
|
||||
padding: 8px 16px
|
||||
faq-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: 24px
|
||||
cta-banner:
|
||||
backgroundColor: "{colors.surface-1}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.headline}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 48px
|
||||
startup-discount-card:
|
||||
backgroundColor: "{colors.surface-2}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: 32px
|
||||
top-nav:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.xs}"
|
||||
height: 56px
|
||||
footer:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: 64px 32px
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Intercom's marketing canvas is a soft cream-white ground (`{colors.canvas}` ≈ #f5f1ec) — not pure white. The warmth is the brand's signal: this is editorial, calm, and product-focused, not bright SaaS. On top of the cream canvas sit white floating cards (`{colors.surface-1}`), thin hairline dividers (`{colors.hairline}`), and charcoal type (`{colors.ink}` #111111).
|
||||
|
||||
Display type is **Saans** — Intercom's proprietary geometric sans — set at weight 500 with measured negative letter-spacing (-2.0px on 72px display). Body type is the same family at weight 400. The single proprietary mono is **SaansMono**, used sparingly for code snippets and product UI screenshots embedded in the marketing surface.
|
||||
|
||||
The single chromatic accent is **Fin Orange** (`{colors.fin-orange}` #ff5600) — Intercom's AI-product brand color. It surfaces on the Fin product CTA, the Fin badge in pricing, and a few inline emphasis moments. It is NOT a system primary; the system primary is charcoal `{colors.ink}`. Intercom also maintains a small **report palette** (`{colors.report-blue}`, `{colors.report-green}`, `{colors.report-pink}`, `{colors.report-lime}`) used inside in-product analytics surfaces shown in mockups.
|
||||
|
||||
The page rhythm is heavy on **product mockups**: every section's payload is a high-fidelity screenshot of Intercom's product UI, framed in white cards with `{rounded.xl}` 16px corners. The marketing chrome is intentionally quiet so the product can be the protagonist.
|
||||
|
||||
**Key Characteristics:**
|
||||
- **Cream canvas** (`{colors.canvas}` #f5f1ec) is the brand's defining surface — neither white nor gray, deliberately warm.
|
||||
- Product-screenshot-led page rhythm: every section centers a product mockup card, marketing chrome stays minimal.
|
||||
- **Saans** proprietary sans-serif carries the entire hierarchy; SaansMono for code-only contexts.
|
||||
- **Charcoal** `{colors.ink}` (#111111) is the system primary — buttons, headlines, body type all sit on charcoal.
|
||||
- **Fin Orange** (`{colors.fin-orange}` #ff5600) is the AI product color — used on the Fin CTA and Fin badge, never decoratively.
|
||||
- Display tracking pulls aggressively negative (-2.0px on 72px); body stays at 0.
|
||||
- Card corners stay modest at `{rounded.lg}` 12px and `{rounded.xl}` 16px — never pill-rounded; never square.
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: intercom.com (home), /pricing, /helpdesk, /customers, /helpdesk/inbox.
|
||||
|
||||
### Brand & Accent
|
||||
- **Charcoal** ({colors.ink}): The system primary surface. Headlines, body type, primary CTA pill background — all charcoal.
|
||||
- **White** ({colors.on-primary}): Text on charcoal CTAs; canvas of floating cards.
|
||||
- **Fin Orange** ({colors.fin-orange}): The AI-product accent. Used on the Fin CTA, Fin badge, and a small set of inline emphasis moments.
|
||||
- **Report Orange** ({colors.report-orange}): A slightly different orange used inside the report / analytics palette for in-product mockups.
|
||||
- **Brand Blue** ({colors.brand-blue}): Saturated brand blue (#0007cb) — used on a small set of marketing illustrations.
|
||||
|
||||
### Surface
|
||||
- **Canvas** ({colors.canvas}): Default page background — soft cream-white #f5f1ec.
|
||||
- **Surface 1** ({colors.surface-1}): Pure white — used for floating cards (pricing, feature, product-mockup).
|
||||
- **Surface 2** ({colors.surface-2}): Slightly darker cream — startup-discount banner, alt-row stripes.
|
||||
- **Hairline** ({colors.hairline}): 1px borders on cards — soft warm gray (#d3cec6).
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Even softer dividers between FAQ rows and footer columns.
|
||||
- **Inverse Canvas** ({colors.inverse-canvas}): Pure black — only on the testimonial / quote callout strip.
|
||||
- **Inverse Surface 1** ({colors.inverse-surface-1}): One step lighter — hovered footer items in dark contexts.
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): All headlines, body type, button labels — charcoal #111111.
|
||||
- **Ink Muted** ({colors.ink-muted}): Secondary type at #626260 — meta info, deselected pricing tabs.
|
||||
- **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #7b7b78 — footer columns, helper text.
|
||||
- **Ink Tertiary** ({colors.ink-tertiary}): Quaternary type at #9c9fa5 — disabled, footnotes.
|
||||
- **Inverse Ink** ({colors.inverse-ink}): White on black — quote-strip type.
|
||||
- **Inverse Ink Muted** ({colors.inverse-ink-muted}): Light gray on black — quote-strip meta.
|
||||
|
||||
### Semantic & Report Palette (in-product mockups)
|
||||
- **Error Red** ({colors.semantic-error}): Form validation, destructive states.
|
||||
- **Success Green** ({colors.semantic-success}): Positive states (also `{colors.report-green}`).
|
||||
- **Report Blue** ({colors.report-blue}): Analytics chart blue.
|
||||
- **Report Pink** ({colors.report-pink}): Analytics chart pink.
|
||||
- **Report Lime** ({colors.report-lime}): Analytics chart lime.
|
||||
- **Report Cyan** ({colors.report-cyan}): Phone country selector accent.
|
||||
|
||||
The report palette appears INSIDE product UI mockups — these are Intercom's in-product chart colors, not marketing surface colors.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
|
||||
- **Saans** — Intercom's proprietary geometric sans, fallback `Saans Fallback, ui-sans-serif, system-ui`. Carries display, body, eyebrow, and button.
|
||||
- **SaansMono** — Proprietary mono, fallback `SaansMono Fallback, ui-monospace`. Used inside code snippets shown in product mockups.
|
||||
|
||||
The same family carries the entire hierarchy. Hierarchy is carried by size + weight + tracking, not by family change.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.display-xl}` | 72px | 500 | 1.05 | -2.0px | Largest hero headline |
|
||||
| `{typography.display-lg}` | 56px | 500 | 1.10 | -1.4px | Section opener headlines |
|
||||
| `{typography.display-md}` | 40px | 500 | 1.15 | -0.8px | Sub-section headlines |
|
||||
| `{typography.headline}` | 28px | 500 | 1.20 | -0.5px | Pricing tier titles, CTA banner |
|
||||
| `{typography.card-title}` | 22px | 500 | 1.25 | -0.3px | Card title, feature card |
|
||||
| `{typography.subhead}` | 20px | 400 | 1.40 | -0.2px | Lead body, intro paragraphs |
|
||||
| `{typography.body-lg}` | 18px | 400 | 1.50 | -0.1px | Hero subhead, lead paragraphs |
|
||||
| `{typography.body}` | 16px | 400 | 1.50 | 0 | Default body |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Card body, footer |
|
||||
| `{typography.caption}` | 12px | 400 | 1.40 | 0 | Captions, meta |
|
||||
| `{typography.button}` | 15px | 500 | 1.20 | 0 | Pill / square button labels |
|
||||
| `{typography.eyebrow}` | 14px | 500 | 1.30 | 0 | Section eyebrow (sentence case) |
|
||||
| `{typography.mono}` | 13px | 400 | 1.50 | 0 | SaansMono for code in mockups |
|
||||
|
||||
### Principles
|
||||
|
||||
- **Weight 500 carries display.** Saans at 500 reads as confident without bold.
|
||||
- **Negative letter-spacing scales with size.** -2.0px at 72px (≈3% of size), down to 0 on body.
|
||||
- **Line-heights tighten on display, relax on body.** 1.05 at display-xl, 1.50 at body.
|
||||
- **No mono on chrome.** SaansMono lives in product UI; marketing chrome stays in Saans.
|
||||
- **Eyebrow uses sentence case** at 14px / 500 weight — no all-caps tracking.
|
||||
|
||||
### Note on Font Substitutes
|
||||
|
||||
If implementing without Saans, suitable substitutes include **Söhne** (paid), **Inter** (free, weight 500), or **Geist Sans** (free). Inter at weight 500 is the closest free substitute; SaansMono can be approximated with **JetBrains Mono** at weight 400.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
|
||||
- **Base unit**: 8px.
|
||||
- **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
|
||||
- Card interior padding: `{spacing.lg}` 24px on pricing/feature cards; `{spacing.xl}` 32px on testimonial/discount cards; `{spacing.xxl}` 48px on CTA banners.
|
||||
- Pill button padding: 10px vertical · 18px horizontal.
|
||||
|
||||
### Grid & Container
|
||||
|
||||
- Max content width sits around 1280px.
|
||||
- Card grids are 3-up at desktop, 2-up at tablet, 1-up at mobile.
|
||||
- Pricing tier grid is 3-up; comparison strip below shows checkmarks per tier.
|
||||
- Product mockup cards span full content width — they're the protagonist of every section.
|
||||
|
||||
### Whitespace Philosophy
|
||||
|
||||
The cream canvas does the work white space would in another brand. Sections separate by ample vertical breathing room (`{spacing.section}` 96px) plus the lift-onto-white cards.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow, no border | Default for body type, hero text, footer |
|
||||
| 1 (lift on cream) | `{colors.surface-1}` white background on `{colors.canvas}` cream | Pricing cards, feature cards, product mockups |
|
||||
| 2 (hairline lift) | `{colors.surface-1}` + 1px `{colors.hairline}` border | Floating tiles with extra definition |
|
||||
| 3 (deep accent) | `{colors.inverse-canvas}` true black | Quote / testimonial callout strip |
|
||||
|
||||
Intercom resists drop shadows. Depth is communicated by the white-on-cream surface change.
|
||||
|
||||
### Decorative Depth
|
||||
|
||||
- **Product UI mockups** dominate every section's right column or center band — these are screenshots, not illustrations.
|
||||
- **No atmospheric gradients, no spotlight cards, no pastel section blocks.** The cream + white system is deliberately restrained.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Small chips, badges |
|
||||
| `{rounded.sm}` | 6px | Inline tags |
|
||||
| `{rounded.md}` | 8px | All buttons, form inputs |
|
||||
| `{rounded.lg}` | 12px | Pricing cards, feature cards, FAQ rows |
|
||||
| `{rounded.xl}` | 16px | Product mockup cards |
|
||||
| `{rounded.xxl}` | 24px | Oversized CTA banners |
|
||||
| `{rounded.pill}` | 9999px | Tab toggles |
|
||||
| `{rounded.full}` | 9999px | Avatar circles |
|
||||
|
||||
### Photography & Illustration Geometry
|
||||
|
||||
- Product UI screenshots dominate the marketing surface; they sit in `{rounded.xl}` 16px tiles.
|
||||
- Customer logo tiles render at small sizes (~24–32px logo height) on `{colors.canvas}` cream with no border.
|
||||
- Avatar circles in testimonial cards use `{rounded.full}` at 40–48px sizes.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Charcoal CTA. The default primary CTA across all pages.
|
||||
- Background `{colors.ink}`, text `{colors.on-primary}`, type `{typography.button}`, padding 10px 18px, rounded `{rounded.md}`.
|
||||
- Pressed state lives in `button-primary-pressed`.
|
||||
|
||||
**`button-secondary`** — White button on cream. Used for secondary CTAs.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.button}`, padding 10px 18px, rounded `{rounded.md}`. 1px `{colors.hairline}` border.
|
||||
|
||||
**`button-tertiary`** — Plain text button.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
**`button-fin`** — Fin Orange CTA — reserved for Fin AI product CTAs.
|
||||
- Background `{colors.fin-orange}`, text `{colors.on-primary}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
### Pricing Tabs
|
||||
|
||||
**`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`.
|
||||
- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.pill}`.
|
||||
- Selected: `{colors.surface-1}` white background, `{colors.ink}` text — selected = lift onto white.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`pricing-card`** — Each tier on `/pricing`.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
**`pricing-card-featured`** — Featured / recommended tier — inverts to charcoal.
|
||||
- Background `{colors.ink}`, text `{colors.on-primary}`, otherwise identical structure.
|
||||
|
||||
**`feature-card`** — Generic feature highlight.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
**`product-mockup-card`** — The dominant card type — frames a high-fidelity product UI screenshot.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.
|
||||
|
||||
**`testimonial-card`** — Customer quote with avatar + name + company.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-lg}`, rounded `{rounded.lg}`, padding 32px.
|
||||
|
||||
**`startup-discount-card`** — The "Startups get 90% off" tinted card.
|
||||
- Background `{colors.surface-2}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 32px.
|
||||
|
||||
**`customer-logo-tile`** — Small tile in the customer marquee.
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.xs}`, padding 16px.
|
||||
|
||||
**`cta-banner`** — Closing CTA panel near page bottom.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.headline}`, rounded `{rounded.lg}`, padding 48px.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** + **`text-input-focused`** — Form fields on contact and search overlays.
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 10px 14px.
|
||||
|
||||
### FAQ
|
||||
|
||||
**`faq-row`** — Expandable accordion row in the pricing FAQ.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 24px. 1px `{colors.hairline-soft}` bottom rule.
|
||||
|
||||
### Navigation
|
||||
|
||||
**`top-nav`** — Sticky cream bar with the Intercom wordmark left, nav links centered, log-in + sign-up pair right.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Dense link grid on `{colors.canvas}` cream with the Intercom wordmark left.
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, padding 64px 32px.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Reserve `{colors.canvas}` cream as the system's anchor surface — never replace with pure white.
|
||||
- Lift cards from cream onto white (`{colors.surface-1}`) for hierarchy.
|
||||
- Use **`button-fin`** Fin Orange ONLY on Fin AI product CTAs and Fin badges.
|
||||
- Pair Saans display at weight 500 with body at 400.
|
||||
- Use product UI screenshots as the protagonist of every section.
|
||||
- Use `{rounded.lg}` 12px for cards and `{rounded.xl}` 16px for product mockup tiles.
|
||||
- Apply negative tracking proportionally to display sizes.
|
||||
|
||||
### Don't
|
||||
|
||||
- Don't use pure white as the canvas.
|
||||
- Don't use Fin Orange as a section background or as a generic primary CTA.
|
||||
- Don't add drop shadows to floating cards.
|
||||
- Don't introduce a second display family.
|
||||
- Don't pill-round CTAs.
|
||||
- Don't write all-caps tracked eyebrows.
|
||||
- Don't promote the report palette colors to brand-level surfaces.
|
||||
- Don't combine charcoal CTAs and Fin Orange CTAs in the same viewport.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Desktop-XL | 1440px | Default desktop layout |
|
||||
| Desktop | 1280px | Card grid 3-up maintained |
|
||||
| Tablet | 1024px | Card grid 3-up → 2-up |
|
||||
| Mobile-Lg | 768px | Pricing comparison becomes accordion; nav hamburger |
|
||||
| Mobile | 480px | Single-column; display-xl scales 72px → ~32px |
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- CTAs hold ≥40px tap height across viewports.
|
||||
- Pricing tab pills hold ≥40px tap height.
|
||||
- Form inputs hold ≥44px tap target on touch.
|
||||
|
||||
### Collapsing Strategy
|
||||
|
||||
- **Top nav**: links collapse to hamburger below 768px; primary CTA stays visible.
|
||||
- **Card grids**: 3-up → 2-up at 1024px → 1-up below 768px.
|
||||
- **Pricing comparison**: collapses into per-tier accordion below 768px.
|
||||
- **Display type**: `{typography.display-xl}` 72px scales toward `{typography.display-md}` 40px on mobile.
|
||||
|
||||
### Image Behavior
|
||||
|
||||
- Product UI screenshots maintain aspect ratio and never crop.
|
||||
- Customer logos in the marquee may collapse from 6-up to 3-up below 768px.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time and reference it by its `components:` token name.
|
||||
2. When introducing a section, decide first whether it sits on `{colors.canvas}` cream (default) or whether it lifts onto a `{colors.surface-1}` white card.
|
||||
3. Default body to `{typography.body}` at weight 400.
|
||||
4. Run `npx @google/design.md lint DESIGN.md` after edits.
|
||||
5. Add new variants as separate component entries.
|
||||
6. Treat Fin Orange as a product accent: Fin CTA and Fin badge only.
|
||||
7. Lead every section with a product screenshot.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- The **report palette** lives in product analytics dashboards rendered inside marketing mockups; they are documented for completeness but are not brand surface colors.
|
||||
- Form-field error and validation styling is not visible on the inspected pages.
|
||||
- Dark mode is not documented because the marketing site does not ship a dark theme.
|
||||
- The helpdesk / inbox product surfaces show in-product UI states that aren't formal marketing chrome.
|
||||
- Saans and SaansMono are proprietary; an open-source substitute (Inter, Söhne, Geist) is acceptable.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Intercom Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/intercom/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,421 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Kami
|
||||
description: "Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks — anything that should feel like high-quality print rather than UI. Multilingual by design (EN · zh-CN · ja)."
|
||||
category: "Editorial & Print"
|
||||
colors:
|
||||
palette: ["#f5f4ed", "#1b365d", "#ffffff", "#e4ecf5", "#2d5a8a", "#faf9f5"]
|
||||
typography:
|
||||
fonts: "JetBrains Mono"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by kami (紙 / 纸)
|
||||
|
||||
> Category: Editorial & Print
|
||||
> Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks — anything that should feel like high-quality print rather than UI. Multilingual by design (EN · zh-CN · ja).
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
kami compresses into one sentence: **warm parchment canvas, ink-blue accent, serif carries hierarchy, no cool grays, no hard shadows.** It is not a UI framework — it is a constraint system for the page, designed to keep deliverables stable, clear, and unmistakably *printed*. The name reads as **kami / 紙 / 纸** — the same word for "paper" across Japanese and Chinese — and the system is co-designed across English, Simplified Chinese, and Japanese typesetting from the ground up, not retrofitted.
|
||||
|
||||
The page background is parchment (`#f5f4ed`), never pure white. Text sits on cream. The single chromatic move is ink-blue (`#1B365D`) — used on section numbers, primary CTAs, the left rule of a quote, the W500 weight in a metric. Everything else is a warm neutral with a yellow-brown undertone; cool blue-grays are absent on purpose.
|
||||
|
||||
Hierarchy is carried almost entirely by **serif type at a single weight (500)**. There is no bold, no italic, no second accent color. Density is achieved through tight line-heights (1.10–1.55), four-level gray ramps, and ring/whisper shadows that act as halos rather than drops. The aesthetic borrows from editorial print, technical white papers, and old typewritten correspondence — the goal is "good content on good paper," not "modern app UI."
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm parchment canvas (`#f5f4ed`) — never `#ffffff`
|
||||
- Single accent: ink-blue (`#1B365D`), covers ≤ 5% of any surface
|
||||
- All grays warm (R ≈ G > B), no cool blue-grays anywhere
|
||||
- Serif everywhere for hierarchy: Charter (EN), TsangerJinKai02 / Source Han Serif (CN), YuMincho (JA)
|
||||
- Locked at weight 500 — no synthetic bold (700/900) and **no italic**
|
||||
- Tight print rhythm (line-heights 1.10–1.55), much denser than typical web body
|
||||
- Depth via 1px rings and whisper shadows (`0 4px 24px rgba(0,0,0,0.05)`), never hard drop shadows
|
||||
- Tag fills are solid hex (e.g. `#E4ECF5`), never `rgba()` — print renderers double-paint alpha tags
|
||||
- Numbers sit in `font-variant-numeric: tabular-nums` so columns of metrics don't shimmy
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Brand
|
||||
- **Ink Blue** (`#1B365D`): The only chromatic color. CTAs, section numbers, link text on light surfaces, the left rule on a section title or quote, the active state of a switcher, the W500 metric value.
|
||||
- **Ink Light** (`#2D5A8A`): Brighter variant, only for links sitting on dark surfaces.
|
||||
|
||||
> Rule: ink-blue covers ≤ **5% of document surface area**. More than that turns into ornament and the restraint collapses.
|
||||
|
||||
### Surface
|
||||
- **Parchment** (`#f5f4ed`): The page background — warm cream, the emotional foundation. Never replace with white.
|
||||
- **Ivory** (`#faf9f5`): Cards and lifted containers. Sits one half-shade brighter than parchment.
|
||||
- **Warm Sand** (`#e8e6dc`): Default button background, secondary interactive surfaces.
|
||||
- **Dark Surface** (`#30302e`): Dark-theme containers — warm charcoal, not slate.
|
||||
- **Deep Dark** (`#141413`): Dark-theme page background. Olive-tinted near-black, never `#000000`.
|
||||
|
||||
### Text (four levels — no fifth)
|
||||
- **Near Black** (`#141413`): Primary text. Slight olive warmth, gentler than pure black.
|
||||
- **Dark Warm** (`#3d3d3a`): Secondary text, table headers, link defaults.
|
||||
- **Olive** (`#504e49`): Subtext, captions, descriptions. (JA override: `#4d4c48` because YuMincho strokes are thinner.)
|
||||
- **Stone** (`#6b6a64`): Tertiary — dates, metadata, meta labels.
|
||||
|
||||
### Border
|
||||
- **Border** (`#e8e6dc`): Primary border — section dividers, card edges, table headers.
|
||||
- **Border Soft** (`#e5e3d8`): Row separators, inner dividers, subtle internal lines.
|
||||
|
||||
### Tag tints (solid, NOT rgba)
|
||||
Print renderers (WeasyPrint and friends) double-paint alpha fills, leaving a visible "double rectangle" on zoom. Tag and chip backgrounds must be solid hex, pre-blended over parchment:
|
||||
|
||||
| Effective alpha of `#1B365D` over parchment | Solid hex |
|
||||
|---|---|
|
||||
| 0.08 | `#EEF2F7` |
|
||||
| 0.14 | `#E4ECF5` |
|
||||
| **0.18 (default tag)** | **`#E4ECF5`** |
|
||||
| 0.22 | `#D0DCE9` |
|
||||
| 0.30 | `#D6E1EE` |
|
||||
|
||||
### Gradient System
|
||||
kami is **gradient-free** by default. The only sanctioned gradient is the soft tag brush running `#D6E1EE → #E4ECF5 → #EEF2F7` left-to-right at very low contrast — used at most once per page on a single decorative tag. Do not introduce hero gradients, brand-color washes, or backdrop-filter blurs.
|
||||
|
||||
### Forbidden colors
|
||||
- `#ffffff` as a page background
|
||||
- `#000000` anywhere
|
||||
- Any cool-gray surface (`#f8f9fa`, `#f3f4f6`, `slate-*`)
|
||||
- Any second saturated color (no second accent — pick ink-blue or pick nothing)
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Stacks
|
||||
|
||||
```css
|
||||
/* English (default) */
|
||||
--serif: Charter, Georgia, Palatino, "Times New Roman", serif;
|
||||
|
||||
/* Chinese */
|
||||
--serif: "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
|
||||
"Songti SC", "STSong", Georgia, serif;
|
||||
|
||||
/* Japanese */
|
||||
--serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
|
||||
"Noto Serif CJK JP", "Source Han Serif JP",
|
||||
"TsangerJinKai02", Georgia, serif;
|
||||
|
||||
/* Mono — must include CJK fallback so labels/comments don't render as boxes */
|
||||
--mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
|
||||
"TsangerJinKai02", "Source Han Serif SC", monospace;
|
||||
|
||||
/* Sans always equals serif. There is no separate sans-serif family. */
|
||||
--sans: var(--serif);
|
||||
```
|
||||
|
||||
### When to swap the stack
|
||||
|
||||
The three stacks above are **alternative values for `--serif`**, not three families layered together. When generating an artifact, set the primary stack on `:root` based on the dominant language of the content; let the browser's per-glyph fallback resolve mixed-script text inline. Concretely:
|
||||
|
||||
- `<html lang="en">` (or English-dominant content) → leave `--serif` on the EN stack. CJK glyphs that appear inline will fall through to the system Han fallback.
|
||||
- `<html lang="zh-CN">` → override `--serif` to the CN stack on `:root` or on `html[lang="zh-CN"]`. Latin glyphs render via the Georgia tail of the stack.
|
||||
- `<html lang="ja">` → override `--serif` to the JA stack and apply the `--olive: #4d4c48` text-color override (YuMincho strokes are thinner; the standard olive looks anemic against parchment).
|
||||
- Multi-language artifacts (e.g. a deck with one Japanese chapter): set the dominant-language stack on `:root`, then scope the override on a wrapper element (`section[lang="ja"] { --serif: …; }`). Do **not** chain all three families inside a single `font-family` — that dilutes the visual character of every page.
|
||||
|
||||
### Hierarchy (screen, px)
|
||||
|
||||
The hierarchy table below is sized for **screen-rendered web pages** (resume, one-pager, portfolio shown at desktop width). For other surfaces, scale from the print pt baseline using these ratios — the same rules the kami `slides.py` template applies:
|
||||
|
||||
| Surface | Macro tokens (font, padding) | Micro tokens (border, radius, tracking) |
|
||||
|---|---|---|
|
||||
| Page / web artifact (one-pager, resume, white paper) | print pt × ~1.33 | print pt × 1 |
|
||||
| Slide / 1920×1080 deck | print pt × ~1.6 | print pt × ~0.6 |
|
||||
|
||||
Concretely: a 22pt H1 in print becomes ~29px on a web page and ~36px on a slide; an 8pt letter-spacing value that reads as confident in print drops to ~5px on a slide. Letter-spacing always uses the slide micro ratio — print tracking applied at slide scale falls apart.
|
||||
|
||||
| Role | Family | Size | Weight | Line-height | Letter-spacing | Notes |
|
||||
|------|--------|------|--------|-------------|----------------|-------|
|
||||
| Hero / Display | serif | 96–106px | 500 | 1.05–1.10 | -1.2px | One per page max — cover or one-pager hero |
|
||||
| Display CN/JA | serif | 48–64px | 500 | 1.10–1.12 | 0–0.3px | CJK glyphs need looser tracking and smaller absolute size |
|
||||
| Section title | serif | 28–32px | 500 | 1.20 | 0.4px | Anchors a chapter; preceded by section number |
|
||||
| H2 | serif | 22px | 500 | 1.25 | 0 | Subsection |
|
||||
| H3 | serif | 17–18px | 500 | 1.30 | 0 | Item title, card heading |
|
||||
| Manifesto / pull quote | serif | 20px | 400 | 1.65 | 0.05em | The one place letter-spacing earns its keep |
|
||||
| Lede | serif | 15–16px | 500 | 1.55 | 0 | Intro paragraph under a section title |
|
||||
| Body | serif | 14px | 400 | 1.55 | 0 (EN) · 0.35px (CN) · 0.02em (JA) | Reading body |
|
||||
| Body dense | serif | 13–14px | 400 | 1.40–1.45 | 0 | Resume, one-pager, dense lists |
|
||||
| Caption | serif | 12px | 500 | 1.45 | 0 | Notes, figure captions |
|
||||
| Eyebrow / overline | sans | 12px | 500 | 1 | 1.2px, **uppercase** | Section eyebrow, switcher, meta header |
|
||||
| Label | sans | 12px | 500 | 1.35 | 0.4px, uppercase | Small inline label, ink-blue if active |
|
||||
| Mono / spec | mono | 12–13px | 400 | 1.55 | 0.4px | Hex codes, type specs, code |
|
||||
|
||||
### Weight rules
|
||||
- Serif uses **only weights 400 and 500**. No 600, no 700, no 900.
|
||||
- `strong { font-weight: 500 }` is explicitly set so browsers don't synthesize bold.
|
||||
- Sans labels may use 500 or 600 at small sizes for legibility.
|
||||
- **No italic anywhere.** No `font-style: italic`. If emphasis is needed, switch the color to ink-blue or wrap in a tag.
|
||||
|
||||
### Line-height
|
||||
- Tight headline: 1.10–1.30 (display, H1, H2)
|
||||
- Dense body: 1.40–1.45 (resume, one-pager, dense lists)
|
||||
- Reading body: 1.50–1.55 (long-form chapters, letters)
|
||||
- Label / caption: 1.30–1.40
|
||||
|
||||
Forbidden: 1.6+ (web rhythm, floats off the page) and 1.0–1.05 (lines collide except at giant display sizes).
|
||||
|
||||
### Letter-spacing
|
||||
- EN body: `0`
|
||||
- CN body (TsangerJinKai02): `0.35px` to compensate for the font's natural density
|
||||
- JA body: `0.02em`
|
||||
- All-caps overlines and small labels (< 10pt): +0.5 to +1.2px is mandatory
|
||||
- Display CJK at 24px+: `0.2–1px` of optical breathing room
|
||||
- On slides, tracking is roughly **half** of print values — 8px tracking that reads as confident in a printed deck disintegrates at slide scale.
|
||||
|
||||
### Tabular-nums contexts
|
||||
|
||||
`font-variant-numeric: tabular-nums` is mandatory anywhere kami numbers stack vertically or sit alongside other numbers — uneven proportional digits read as a layout bug at print resolution. Apply it to:
|
||||
|
||||
- Metric values (the big ink-blue number in `.metric-value`) and any side-by-side metric row
|
||||
- Slide footers and slide counters (`02 / 05`), page numbers, deck pagination
|
||||
- Section numbers in chapter heads (`01`, `02`, …) when they appear in a stacked TOC
|
||||
- Resume dates, employment ranges, and education years
|
||||
- Financial figures: revenue, ARR/MRR, valuations, tables of P&L line items
|
||||
- White-paper and equity-report data tables (every numeric column)
|
||||
- Stat-dashboard hero numbers and KPI grids
|
||||
- Changelog version numbers (`1.4.2 → 1.4.3`) and any inline release dates
|
||||
- Any inline numeric span inside a paragraph that compares values (`from 142 to 168`)
|
||||
|
||||
Do **not** apply tabular-nums to running prose where a single number appears mid-sentence — proportional digits read better there. The rule is "stacks and tables, yes; sentences, no."
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Cards / Containers
|
||||
```css
|
||||
background: var(--ivory); /* never parchment — cards lift one shade */
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px; /* default; featured cards 12px; hero 16–24px */
|
||||
padding: 28px 28px 24px; /* component interior */
|
||||
transition: box-shadow 0.2s;
|
||||
/* Hover lifts via whisper shadow only — no transform, no brightness shift */
|
||||
&:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
|
||||
```
|
||||
|
||||
### Buttons
|
||||
```css
|
||||
.btn-primary {
|
||||
background: var(--brand); /* #1B365D */
|
||||
color: var(--ivory);
|
||||
box-shadow: 0 0 0 1px var(--brand); /* ring shadow as edge */
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
font: 500 12px/1 var(--sans);
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: var(--warm-sand);
|
||||
color: var(--dark-warm);
|
||||
box-shadow: 0 0 0 1px var(--border);
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--brand);
|
||||
box-shadow: 0 0 0 1px var(--brand);
|
||||
}
|
||||
```
|
||||
|
||||
### Tags / Chips
|
||||
```css
|
||||
.tag {
|
||||
font: 500 12px/1 var(--sans);
|
||||
padding: 2px 7px;
|
||||
border-radius: 2px;
|
||||
color: var(--brand);
|
||||
background: #EEF2F7; /* solid hex, NOT rgba */
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
.tag.standard { background: #E4ECF5; padding: 2px 8px; border-radius: 4px; }
|
||||
|
||||
/* The single sanctioned gradient — see §2 "Gradient System".
|
||||
* Use at most once per page on a "featured" or "new" tag. The gradient
|
||||
* runs darkest-to-lightest left-to-right so the eye reads it as a
|
||||
* watercolor wash, not a button highlight. */
|
||||
.tag.brush {
|
||||
background: linear-gradient(to right, #D6E1EE, #E4ECF5 70%, #EEF2F7);
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Example: a single brush tag flagging the new chapter in a long doc -->
|
||||
<span class="tag brush">New · Edition 02</span>
|
||||
```
|
||||
|
||||
### Quote
|
||||
```css
|
||||
.quote {
|
||||
border-left: 2px solid var(--brand);
|
||||
padding: 4px 0 4px 14px;
|
||||
font: 500 15px/1.55 var(--serif);
|
||||
color: var(--olive);
|
||||
}
|
||||
```
|
||||
|
||||
### Section title pattern
|
||||
```html
|
||||
<div class="section-head">
|
||||
<p class="section-num">01</p> <!-- ink-blue, 14px serif, tracking 0.4px -->
|
||||
<h2 class="section-title">Color</h2> <!-- 32px serif 500 -->
|
||||
<p class="section-lede">Optional one-line description in olive.</p>
|
||||
</div>
|
||||
```
|
||||
The number is set in the same serif as the title, in ink-blue, the same size as caption text. There is no underline, no left bar, no eyebrow — the number *is* the marker.
|
||||
|
||||
### Metrics
|
||||
```html
|
||||
<div class="metric">
|
||||
<div class="metric-value">8.4×</div> <!-- serif 500 24px ink-blue, tabular-nums -->
|
||||
<div class="metric-label">faster ship</div> <!-- serif 12px olive -->
|
||||
</div>
|
||||
```
|
||||
Numbers always sit in `font-variant-numeric: tabular-nums` so adjacent metrics align.
|
||||
|
||||
### Lists
|
||||
```css
|
||||
ul.dash {
|
||||
list-style: none; padding: 0;
|
||||
}
|
||||
ul.dash li {
|
||||
position: relative; padding-left: 14px;
|
||||
}
|
||||
ul.dash li::before {
|
||||
content: "\2013"; /* en-dash, ink-blue */
|
||||
position: absolute; left: 0;
|
||||
color: var(--brand);
|
||||
}
|
||||
```
|
||||
Bullets are en-dashes in ink-blue, never filled discs.
|
||||
|
||||
### Code block
|
||||
```css
|
||||
.code {
|
||||
background: var(--ivory);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 12px 14px;
|
||||
font: 12px/1.55 var(--mono);
|
||||
color: var(--near-black);
|
||||
white-space: pre;
|
||||
}
|
||||
.code .k { color: var(--brand); } /* keyword */
|
||||
.code .c { color: var(--stone); } /* comment */
|
||||
```
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Page geometry (print A4)
|
||||
|
||||
| Document | Top | Right | Bottom | Left |
|
||||
|---|---|---|---|---|
|
||||
| Resume (dense) | 11mm | 13mm | 11mm | 13mm |
|
||||
| One-Pager | 15mm | 18mm | 15mm | 18mm |
|
||||
| Long Doc | 20mm | 22mm | 22mm | 22mm |
|
||||
| Letter | 25mm | 25mm | 25mm | 25mm |
|
||||
| Portfolio | 12mm | 15mm | 12mm | 15mm |
|
||||
|
||||
Rule: **denser = smaller margins, more formal = larger margins.**
|
||||
|
||||
### Web / screen pages
|
||||
- Max content width: `1120px`, centered, with `padding: 88px 64px 120px` on desktop.
|
||||
- Section gap: `72px` between top-level sections.
|
||||
- Card-grid columns: 2 by default at desktop; collapse to 1 below 768px.
|
||||
- Table columns sized in absolute px (not %), so kami tables don't reflow into spaghetti.
|
||||
|
||||
### Slides (1920×1080)
|
||||
- Four-side padding baseline: `--slide-pad: 80px`.
|
||||
- Padding-top of a content slide: 72–80px (print is 96–120px; slides are more compact).
|
||||
- Sizing follows the surface ratios from §3 ("Hierarchy"): macro tokens × 1.6, micro tokens × 0.6 against the print pt baseline.
|
||||
- Cover and chapter slides may flip background to ink-blue (`#1B365D`) with ivory text; everything else stays on parchment.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
Three sanctioned levels — that is the entire system:
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (0) | No shadow, no border | Body text, manifesto, paragraphs on parchment |
|
||||
| Ring (1) | `1px solid var(--border)` or `0 0 0 1px var(--brand)` | Cards, primary buttons, table edges |
|
||||
| Whisper (2) | `0 4px 24px rgba(0,0,0,0.05)` | Hovered cards, lifted hero containers, screenshots |
|
||||
|
||||
Forbidden:
|
||||
- Hard drop shadows (`0 12px 40px rgba(0,0,0,0.25)` and the like) — the page is paper, not a UI panel
|
||||
- Neumorphism, glassmorphism, backdrop-filter blurs
|
||||
- Multi-layer composite shadows
|
||||
|
||||
### Border radius scale
|
||||
`2px → 4px → 6px → 8px (default) → 12px → 16px`. Tags hover at 2–4px, buttons and cards at 8px, featured / hero containers at 12–16px. Anything above 16px is reserved for cover-slide visuals.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use parchment (`#f5f4ed`) as the page background — the warm cream tone *is* the kami personality.
|
||||
- Use a single serif weight (500) for every heading; let size carry hierarchy.
|
||||
- Use ink-blue (`#1B365D`) only for primary CTAs, section numbers, links, the left rule of a quote, and the W500 in metrics.
|
||||
- Keep every gray warm (yellow-brown undertone). When in doubt, sample with `R ≈ G > B`.
|
||||
- Use ring shadows or whisper shadows for elevation; never hard drops.
|
||||
- Set tag backgrounds as solid hex pre-blended over parchment, never `rgba()`.
|
||||
- Set numbers in `font-variant-numeric: tabular-nums`.
|
||||
- Pair the section number with the section title in the same serif — no eyebrow needed.
|
||||
- Default bullets to ink-blue en-dashes (`–`).
|
||||
|
||||
### Don't
|
||||
- Don't use `#ffffff` as page background, anywhere.
|
||||
- Don't introduce a second accent color or a chromatic gradient.
|
||||
- Don't use cool blue-grays (`slate-*`, `#f3f4f6`, `#6b7280`). Every neutral is warm.
|
||||
- Don't use bold (700+) on serif — weight 500 is the ceiling.
|
||||
- **Don't use italic anywhere.** No `font-style: italic`. Swap to ink-blue or a tag instead.
|
||||
- Don't use sans-serif for headlines or body — sans is reserved for eyebrows, switchers, and small labels (and the sans stack literally equals the serif stack).
|
||||
- Don't drop body line-height below 1.4 or push it above 1.55 — that range *is* kami's reading rhythm.
|
||||
- Don't use round-disc bullets, drop shadows, or pill-shaped chips with heavy borders.
|
||||
- Don't apply `backdrop-filter`, `mix-blend-mode`, or any modern compositing trick — the system targets print fidelity.
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Phone | < 768px | Single column. Hero 46px, section title 24px, manifesto 17px. Card padding drops to 20px 16px. Hide `.hero-tokens` row. |
|
||||
| Tablet | 768–979px | Most 2-col grids hold; switch tag tints from 5 to 3 columns. |
|
||||
| Desktop | ≥ 980px | Full 2-col / 4-col grids, JA gets `white-space: nowrap` rescue rules on long ledes. |
|
||||
|
||||
### Touch targets
|
||||
- Buttons keep `8 14px` padding minimum.
|
||||
- Tap targets stay above 44×44 by giving cards generous internal padding rather than oversizing chrome.
|
||||
|
||||
### Print
|
||||
- `@page { size: A4; margin: 14mm 16mm; background: #f5f4ed; }`.
|
||||
- Section, hero, family, comp, swatch, tint, quote, blockquote, pre, tr, anti-pattern blocks all use `break-inside: avoid` so kami pages don't snap mid-card.
|
||||
- `-webkit-print-color-adjust: exact` is required so the parchment background actually reaches paper.
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Page Background: "Parchment (#f5f4ed)"
|
||||
- Card Surface: "Ivory (#faf9f5)"
|
||||
- Brand / CTA: "Ink Blue (#1B365D)"
|
||||
- Primary Text: "Near Black (#141413)"
|
||||
- Secondary Text: "Dark Warm (#3d3d3a)"
|
||||
- Subtext / Caption: "Olive (#504e49)"
|
||||
- Tertiary / Meta: "Stone (#6b6a64)"
|
||||
- Border: "Border (#e8e6dc)"
|
||||
- Tag fill (default): "#E4ECF5 solid (NOT rgba)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Build a kami one-pager hero on Parchment (#f5f4ed). Eyebrow row in 12px sans uppercase Stone (#6b6a64), letter-spacing 1.2px. Headline in serif 500 at 96px Near Black (#141413), line-height 1.05, letter-spacing -1.2px. Tagline below in serif 500 at 21px Olive (#504e49)."
|
||||
- "Design a kami section header. A two-line stack: section number `01` in serif 500 at 14px Ink Blue (#1B365D) tracking 0.4px, then the title in serif 500 at 32px Near Black. Optional lede in serif 500 at 16px Olive."
|
||||
- "Render a kami metric row of three metrics. Each metric is a vertical pair: value in serif 500 at 24px Ink Blue with `font-variant-numeric: tabular-nums`, label in 12px Olive. Gap between metrics: 28px."
|
||||
- "Build a kami card on Ivory (#faf9f5) with 1px Border (#e8e6dc), 8px radius, 28px padding. Title in serif 500 at 16px Near Black. Hint underneath in 12px mono Stone. On hover, add a whisper shadow `0 4px 24px rgba(0,0,0,0.05)`. No transform, no color shift."
|
||||
- "Build a kami slide cover at 1920×1080. Background ink-blue (#1B365D). Centered title in serif 500 at 96px Ivory (#faf9f5). Below, a 1px ivory rule, 96px wide. Author and date below in serif 500 at 18px Ivory at 70% opacity."
|
||||
|
||||
### Iteration Guide
|
||||
1. **Start by checking the gray temperature.** If a gray reads cool, the design is no longer kami. Replace with the warm ramp.
|
||||
2. **Audit the accent.** If ink-blue covers more than ~5% of the visible surface, reduce — push elements back to Olive or Dark Warm.
|
||||
3. **Audit weight.** Any weight above 500 on serif is wrong. Replace with weight 500 and let size carry the contrast.
|
||||
4. **Audit italic.** No italic, ever. Swap to ink-blue color or a small tag.
|
||||
5. **Audit shadows.** If a shadow is visible at a glance, it's too strong. The only shadows are 1px rings and the `0 4px 24px rgba(0,0,0,0.05)` whisper.
|
||||
6. **Tag fills must be solid hex.** If you wrote `rgba(27, 54, 93, 0.18)`, replace with `#E4ECF5`.
|
||||
7. **Numbers tabular-nums.** Any column of numbers without `font-variant-numeric: tabular-nums` will look wrong on a print render.
|
||||
8. **For slide work, halve tracking and scale macro tokens by 1.6.** Print rhythm is too loose at 1920×1080 without the adjustment.
|
||||
|
||||
## Attribution
|
||||
|
||||
Aesthetic inspiration drawn from [tw93/kami](https://github.com/tw93/kami) (MIT, © Tw93 and contributors). kami is a Claude skill for typesetting professional documents and slide decks; the tokens, type rules, and "ten invariants" above adapt its print-first design language for use as an Open Design system.
|
||||
@@ -0,0 +1,601 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>kami — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/kami. Every visible
|
||||
token comes from tokens.css; the page itself follows kami's
|
||||
print-first rules — parchment background, ink-blue accent
|
||||
capped at ≤5%, serif at one weight, no italic, no rgba tints,
|
||||
no hard drop shadows, no cool grays."
|
||||
/>
|
||||
|
||||
<style>
|
||||
/* :root paste — sourced verbatim from
|
||||
design-systems/kami/tokens.css. Keep this block in sync
|
||||
when tokens.css changes. CJK overrides (`:root[lang="zh-CN"]`,
|
||||
`:root[lang="ja"]`) live in tokens.css and should be pasted
|
||||
only when the artifact's <html lang="..."> matches. */
|
||||
:root {
|
||||
--bg: #f5f4ed;
|
||||
--surface: #faf9f5;
|
||||
--surface-warm: #e8e6dc;
|
||||
|
||||
--fg: #141413;
|
||||
--fg-2: #3d3d3a;
|
||||
--muted: #504e49;
|
||||
--meta: #6b6a64;
|
||||
|
||||
--border: #e8e6dc;
|
||||
--border-soft: #e5e3d8;
|
||||
|
||||
--accent: #1b365d;
|
||||
--accent-on: #faf9f5;
|
||||
--accent-light: #2d5a8a;
|
||||
--accent-hover: var(--accent);
|
||||
--accent-active: #142a48;
|
||||
|
||||
--success: #4a6b3a;
|
||||
--warn: #8a6b1f;
|
||||
--danger: #8a3a30;
|
||||
|
||||
--font-display:
|
||||
Charter, Georgia, Palatino, "Times New Roman", serif;
|
||||
--font-body:
|
||||
Charter, Georgia, Palatino, "Times New Roman", serif;
|
||||
--font-mono:
|
||||
"JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
|
||||
"TsangerJinKai02", "Source Han Serif SC", monospace;
|
||||
|
||||
--text-xs: 11px;
|
||||
--text-sm: 12px;
|
||||
--text-base: 14px;
|
||||
--text-md: 15px;
|
||||
--text-lg: 17px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 96px;
|
||||
|
||||
--leading-display: 1.1;
|
||||
--leading-tight: 1.25;
|
||||
--leading-body: 1.55;
|
||||
--leading-dense: 1.4;
|
||||
|
||||
--tracking-display: -1.2px;
|
||||
--tracking-eyebrow: 1.2px;
|
||||
--tracking-label: 0.4px;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-7: 28px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
--space-18: 72px;
|
||||
--space-22: 88px;
|
||||
|
||||
--section-y-desktop: 72px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-ring-accent: 0 0 0 1px var(--accent);
|
||||
--elev-raised: 0 4px 24px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--focus-ring: 0 0 0 2px var(--accent-active);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1120px;
|
||||
--container-gutter-desktop: 64px;
|
||||
--container-gutter-tablet: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
|
||||
--tag-bg-faint: #eef2f7;
|
||||
--tag-bg-soft: #e4ecf5;
|
||||
--tag-bg-base: #d6e1ee;
|
||||
--tag-bg-strong: #d0dce9;
|
||||
}
|
||||
|
||||
/* ─── Reset (minimal) ───────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Print fidelity — kami is page-first. The on-screen render
|
||||
still benefits from the same color-adjust hint so background
|
||||
parchment doesn't get optimized away in print preview. */
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
strong { font-weight: 500; } /* kami forbids synthetic bold (>500) */
|
||||
em, i { font-style: normal; } /* kami forbids italic — keep upright */
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section {
|
||||
padding-block: var(--section-y-desktop);
|
||||
}
|
||||
section + section {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.3;
|
||||
}
|
||||
p { margin: 0; }
|
||||
|
||||
.lede {
|
||||
font-size: var(--text-md);
|
||||
line-height: var(--leading-body);
|
||||
color: var(--muted);
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-meta { color: var(--meta); font-size: var(--text-sm); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
|
||||
/* `.eyebrow` is the only place sans is used (and "sans" literally
|
||||
equals serif here per DESIGN.md §3 — kami has no separate
|
||||
sans family). Uppercase + tracking 1.2px — well above the
|
||||
craft 0.06em floor. */
|
||||
.eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
color: var(--meta);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-eyebrow);
|
||||
}
|
||||
|
||||
/* Section number pattern — DESIGN.md §4: the number IS the
|
||||
marker. No underline, no left bar, no eyebrow. Same serif
|
||||
as the title, ink-blue, 14px. */
|
||||
.section-num {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: var(--text-base);
|
||||
color: var(--accent);
|
||||
letter-spacing: var(--tracking-label);
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-block-end: var(--space-3);
|
||||
}
|
||||
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────────
|
||||
* kami buttons use `box-shadow: 0 0 0 1px ...` as the edge
|
||||
* instead of border, so the rectangle aligns perfectly with
|
||||
* the fill. Hover lifts via whisper shadow only — no color
|
||||
* shift, no transform. This is kami's elevation-led
|
||||
* interaction, encoded in tokens. */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1;
|
||||
letter-spacing: var(--tracking-label);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
box-shadow: var(--elev-ring-accent);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
/* Layered: ring stays as edge; whisper adds lift. */
|
||||
box-shadow: var(--elev-ring-accent), var(--elev-raised);
|
||||
}
|
||||
.btn-secondary {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg-2);
|
||||
box-shadow: var(--elev-ring);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
box-shadow: var(--elev-ring), var(--elev-raised);
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
box-shadow: var(--elev-ring-accent);
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
box-shadow: var(--elev-ring-accent), var(--elev-raised);
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────────
|
||||
* Cards lift one shade above bg (ivory on parchment). 1px
|
||||
* hairline border + whisper shadow on hover — no transform,
|
||||
* no brightness shift. */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-7) var(--space-7) var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
transition: box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
|
||||
/* ─── Tags / chips ──────────────────────────────────────────
|
||||
* Solid hex backgrounds, NEVER rgba — print renderers double-
|
||||
* paint alpha. The pre-blends live as --tag-bg-* tokens.
|
||||
* radius is 2px, 4px max — kami forbids pill chips with heavy
|
||||
* borders. */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1;
|
||||
color: var(--accent);
|
||||
letter-spacing: var(--tracking-label);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--tag-bg-soft);
|
||||
}
|
||||
.tag-faint { background: var(--tag-bg-faint); }
|
||||
.tag-strong {
|
||||
background: var(--tag-bg-strong);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* ─── Quote ─────────────────────────────────────────────────
|
||||
* Left rule in ink-blue, olive body, 1.55 line-height. The
|
||||
* single place letter-spacing 0.05em earns its keep. */
|
||||
.quote {
|
||||
border-left: 2px solid var(--accent);
|
||||
padding: var(--space-1) 0 var(--space-1) var(--space-3);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: var(--text-md);
|
||||
line-height: var(--leading-body);
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ─── Metric (DESIGN.md §4) ─────────────────────────────────
|
||||
* Big ink-blue value with tabular-nums so columns of metrics
|
||||
* align across the row; olive label below. */
|
||||
.metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.metric-value {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1.1;
|
||||
color: var(--accent);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.metric-label {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Dash list (DESIGN.md §4) ──────────────────────────────
|
||||
* Bullets are en-dashes in ink-blue. Never filled discs. */
|
||||
ul.dash {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
ul.dash li {
|
||||
position: relative;
|
||||
padding-left: var(--space-4);
|
||||
line-height: var(--leading-body);
|
||||
}
|
||||
ul.dash li::before {
|
||||
content: "\2013"; /* en-dash */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ─── Code block ────────────────────────────────────────────
|
||||
* Ivory bg + hairline border + warm fg. Mono font has CJK
|
||||
* fallback so labels in CJK code don't render as boxes. */
|
||||
.code {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-body);
|
||||
color: var(--fg);
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.code .k { color: var(--accent); } /* keyword */
|
||||
.code .c { color: var(--meta); } /* comment */
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────────
|
||||
* Default link color is ink-blue. Underline on hover at
|
||||
* generous offset so the rule reads as a deliberate gesture,
|
||||
* not a default. */
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
/* ─── Section-specific layout ───────────────────────────── */
|
||||
.hero {
|
||||
padding-block: var(--space-22) var(--space-18);
|
||||
}
|
||||
.hero h1 { margin-block-end: var(--space-6); max-width: 14ch; }
|
||||
.hero .lede { max-width: 56ch; }
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-8);
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-12);
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.metric-row { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-5);
|
||||
margin-block-start: var(--space-8);
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.quote-block {
|
||||
max-width: 56ch;
|
||||
margin-block-start: var(--space-6);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
HERO — exercises: section-num pattern, h1 (96px serif at
|
||||
tracking -1.2px), .lede, .btn-primary (ring-shadow edge),
|
||||
.btn-secondary (warm-sand bg), .tag (solid hex). The grid
|
||||
is single-column intentionally — kami heroes don't use
|
||||
asymmetric two-column layouts; the page IS the column.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section class="hero" data-od-id="hero">
|
||||
<p class="section-num">00 · Reference</p>
|
||||
<h1>One paper, set carefully, can hold every brand decision.</h1>
|
||||
<p class="lede">
|
||||
A token system distilled from the kami print rules: warm
|
||||
parchment canvas, single ink-blue accent capped under five
|
||||
percent of the page, serif at one weight. The fixture you
|
||||
are reading uses the same token block agents paste into
|
||||
every artifact.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">View tokens</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">
|
||||
Read the spec
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
METRICS — exercises: .metric pattern with tabular-nums
|
||||
values, ink-blue at the W500 weight, olive label. Numbers
|
||||
describe the fixture itself, not invented claims.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="metrics">
|
||||
<p class="section-num">01</p>
|
||||
<h2>Schema in numbers</h2>
|
||||
|
||||
<div class="metric-row" style="margin-block-start: var(--space-8)">
|
||||
<div class="metric">
|
||||
<div class="metric-value">42</div>
|
||||
<div class="metric-label">tokens in :root</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="metric-value">3</div>
|
||||
<div class="metric-label">font stacks (EN · zh · ja)</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="metric-value">≤5%</div>
|
||||
<div class="metric-label">accent surface cap</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FEATURE CARDS — exercises: .card (ivory bg, hairline
|
||||
border, whisper shadow on hover), h3, body text, dash list,
|
||||
tag (solid hex bg).
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="components">
|
||||
<p class="section-num">02</p>
|
||||
<h2>What this fixture exercises</h2>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card">
|
||||
<span class="tag tag-faint">Surface</span>
|
||||
<h3>Three-tier surface ramp</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Parchment for the page, ivory for cards, warm sand for
|
||||
secondary buttons. Cards lift one half-shade above the
|
||||
page; the contrast is what gives them edge without a
|
||||
shadow.
|
||||
</p>
|
||||
<ul class="dash body-sm">
|
||||
<li>--bg covers the page</li>
|
||||
<li>--surface lifts containers</li>
|
||||
<li>--surface-warm fills secondary controls</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<span class="tag">Accent</span>
|
||||
<h3>One color, two states</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Ink blue is the only chromatic move. Hover holds the
|
||||
same color — kami expresses lift through elevation, not
|
||||
brightness. Active darkens by a hand-picked value, not a
|
||||
formula.
|
||||
</p>
|
||||
<ul class="dash body-sm">
|
||||
<li>--accent appears at most twice on this page</li>
|
||||
<li>--accent-hover identical to --accent</li>
|
||||
<li>Active state is a hand-picked deeper ink</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<span class="tag tag-strong">Type</span>
|
||||
<h3>One weight does the work</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Serif at weight 500 carries every heading. There is no
|
||||
bold, no italic, no second face. Hierarchy comes from
|
||||
size, tracking, and color — never from another type
|
||||
family.
|
||||
</p>
|
||||
<ul class="dash body-sm">
|
||||
<li>--font-display equals --font-body equals serif</li>
|
||||
<li>Display tracking compresses (-1.2px at 96px)</li>
|
||||
<li>Eyebrow tracking opens (1.2px on uppercase)</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<span class="tag">Elevation</span>
|
||||
<h3>Ring before whisper before drop</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Three sanctioned levels. A 1px hairline ring is the
|
||||
default edge; a 4-24-rgba whisper appears only on hover.
|
||||
The schema reserves --elev-ring as a first-class level so
|
||||
brands like this one don't have to misuse --elev-raised
|
||||
for hairlines.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
QUOTE + CODE — exercises: .quote (left rule in ink-blue),
|
||||
.code with .k / .c spans, link.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="quote">
|
||||
<p class="section-num">03</p>
|
||||
<h2>The token block, in full</h2>
|
||||
|
||||
<div class="quote-block">
|
||||
<blockquote class="quote">
|
||||
kami is not a UI framework. It is a constraint system for
|
||||
the page, designed to keep deliverables stable, clear, and
|
||||
unmistakably printed.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<pre class="code" style="margin-block-start: var(--space-8)"><span class="c">/* Paste this block into the first <style> of every kami artifact. */</span>
|
||||
<span class="k">:root</span> {
|
||||
<span class="c">/* Surface */</span>
|
||||
<span class="k">--bg</span>: <span>#f5f4ed</span>;
|
||||
<span class="k">--surface</span>: <span>#faf9f5</span>;
|
||||
<span class="k">--accent</span>: <span>#1b365d</span>;
|
||||
<span class="c">/* … 38 more, see tokens.css */</span>
|
||||
}</pre>
|
||||
|
||||
<p class="body-meta" style="margin-block-start: var(--space-4)">
|
||||
Full reference at
|
||||
<a href="./tokens.css">tokens.css</a> ·
|
||||
spec at
|
||||
<a href="./DESIGN.md">DESIGN.md</a>
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,272 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/kami/tokens.css
|
||||
*
|
||||
* Structured token bindings for "kami / 紙 / 纸" — a print-first
|
||||
* editorial system: warm parchment canvas, single ink-blue accent,
|
||||
* serif at one weight (500), no italic, no cool grays.
|
||||
*
|
||||
* This file pre-compiles the values described in `DESIGN.md` into
|
||||
* the schema shared with all OD design systems. Two paste paths:
|
||||
*
|
||||
* 1. Agents generating an artifact for kami should paste the
|
||||
* :root block verbatim into the first <style> of the artifact,
|
||||
* then reference everything via var(--*).
|
||||
* 2. The optional `:root[lang="zh-CN"]` and `:root[lang="ja"]`
|
||||
* blocks below override --font-display / --font-body for
|
||||
* Chinese and Japanese typesetting. Include them only when
|
||||
* the artifact's <html lang="..."> matches; otherwise drop
|
||||
* to keep the paste minimal.
|
||||
*
|
||||
* Schema notes (kami pushed the schema in five places — see comments
|
||||
* inline tagged "#Gap N" for the matching item in the design log):
|
||||
* #Gap 1 — 4-level foreground ramp (--fg / --fg-2 / --muted / --meta)
|
||||
* #Gap 2 — 3-level surface (--bg / --surface / --surface-warm)
|
||||
* #Gap 3 — 2-level border (--border / --border-soft)
|
||||
* #Gap 4 — accent-hover binds to value, not formula
|
||||
* #Gap 5 — ring elevation as a first-class level (--elev-ring)
|
||||
*
|
||||
* Brand-specific extensions (NOT part of the shared schema, only in
|
||||
* kami because of print-fidelity needs — see DESIGN.md §2 "Tag tints"):
|
||||
* --tag-bg-soft / --tag-bg-base / --tag-bg-strong — solid-hex
|
||||
* pre-blends of ink-blue over parchment, replacing rgba/color-mix
|
||||
* tints because print renderers double-paint alpha fills.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels — #Gap 2) ────────────────────────────────
|
||||
* Warm parchment canvas; cards lift one half-shade brighter to
|
||||
* ivory; secondary interactive surfaces drop to warm-sand. Never
|
||||
* #ffffff anywhere — the cream tone *is* kami's identity.
|
||||
* `--surface-warm` is new in the shared schema; brands without a
|
||||
* tertiary surface tier should alias it to var(--surface). */
|
||||
--bg: #f5f4ed; /* parchment — page background */
|
||||
--surface: #faf9f5; /* ivory — cards, lifted containers */
|
||||
--surface-warm: #e8e6dc; /* warm sand — default button bg, secondary surfaces */
|
||||
|
||||
/* ─── Foreground ramp (4 levels — #Gap 1) ───────────────────────
|
||||
* kami's text uses four named levels — primary / secondary /
|
||||
* subtext / metadata. Cool blue-grays are forbidden everywhere;
|
||||
* each token below has the warm yellow-brown undertone (R ≈ G > B)
|
||||
* the brand requires.
|
||||
*
|
||||
* `--fg-2` and `--meta` are new in the shared schema; brands that
|
||||
* only differentiate two levels should alias these to var(--fg)
|
||||
* and var(--muted). */
|
||||
--fg: #141413; /* near-black — primary text, slight olive warmth */
|
||||
--fg-2: #3d3d3a; /* dark warm — secondary text, table headers */
|
||||
--muted: #504e49; /* olive — subtext, captions */
|
||||
--meta: #6b6a64; /* stone — tertiary, dates, metadata */
|
||||
|
||||
/* ─── Border (2 levels — #Gap 3) ────────────────────────────────
|
||||
* Primary border for card edges and section dividers; soft border
|
||||
* for inner row separators that should not visually compete.
|
||||
* `--border-soft` is new in the shared schema; brands with one
|
||||
* border tier should alias it to var(--border). */
|
||||
--border: #e8e6dc;
|
||||
--border-soft: #e5e3d8;
|
||||
|
||||
/* ─── Accent ─────────────────────────────────────────────────────
|
||||
* The single chromatic move. CTAs, section numbers, link text,
|
||||
* the left rule of a quote, the W500 weight in a metric. Hard
|
||||
* cap of ≤5% of any surface area (DESIGN.md §2). */
|
||||
--accent: #1b365d; /* ink blue */
|
||||
--accent-on: #faf9f5; /* ivory — fg when accent is the bg (NOT pure white) */
|
||||
--accent-light: #2d5a8a; /* brighter variant — links on dark surfaces only */
|
||||
|
||||
/* ─── Accent states (#Gap 4) ────────────────────────────────────
|
||||
* kami treats --accent-hover and --accent-active as VALUE
|
||||
* bindings, not formula derivations. Ink blue is already deep;
|
||||
* mixing further black makes hover invisible. The brand instead
|
||||
* expresses hover through elevation (whisper shadow) and keeps
|
||||
* the color identical. Active darkens slightly via a hand-picked
|
||||
* value, not a formula.
|
||||
*
|
||||
* Schema rule: every brand provides --accent-hover and
|
||||
* --accent-active. Default's brand uses a black-mix formula;
|
||||
* kami uses identity / hand-picked. Both satisfy the contract. */
|
||||
--accent-hover: var(--accent); /* color-stable; hover via elevation */
|
||||
--accent-active: #142a48; /* hand-picked, ~12% darker ink */
|
||||
|
||||
/* ─── Semantic ───────────────────────────────────────────────────
|
||||
* kami's DESIGN.md doesn't specify success/warn/danger because the
|
||||
* system is print-first and rarely renders status. We bind them to
|
||||
* desaturated warm hues that survive parchment without breaking
|
||||
* the "single chromatic move" rule. Use sparingly; kami artifacts
|
||||
* almost never need these. */
|
||||
--success: #4a6b3a; /* warm forest — toned down for parchment */
|
||||
--warn: #8a6b1f; /* burnt sienna */
|
||||
--danger: #8a3a30; /* warm terracotta — never tailwind red */
|
||||
|
||||
/* ─── Typography ─────────────────────────────────────────────────
|
||||
* Default to English Charter stack on :root. The `:root[lang]`
|
||||
* blocks below override for CN and JA. `--font-body` and
|
||||
* `--font-display` are equal — kami uses a single serif weight
|
||||
* (500) and lets size carry hierarchy.
|
||||
*
|
||||
* Sans is reserved for eyebrows, switchers, small labels — it
|
||||
* literally equals the serif stack, so there is no separate
|
||||
* sans token. */
|
||||
--font-display:
|
||||
Charter, Georgia, Palatino, "Times New Roman", serif;
|
||||
--font-body:
|
||||
Charter, Georgia, Palatino, "Times New Roman", serif;
|
||||
--font-mono:
|
||||
"JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
|
||||
"TsangerJinKai02", "Source Han Serif SC", monospace;
|
||||
|
||||
/* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
|
||||
* kami runs lighter on the small end and heavier on the display
|
||||
* end than default's 12–64 — print rhythm needs both 11px captions
|
||||
* and 96px hero display.
|
||||
*
|
||||
* `--text-md` (15px) is a brand-specific extension — kami needs an
|
||||
* in-between size for ledes that the schema's --text-base (body)
|
||||
* and --text-lg (H3) ramp doesn't supply. Generic cross-brand
|
||||
* components must NOT reference --text-md; only kami's own
|
||||
* components.html consumes it. Promote to schema if a second
|
||||
* brand reports the same need. */
|
||||
--text-xs: 11px;
|
||||
--text-sm: 12px;
|
||||
--text-base: 14px; /* body — print-dense */
|
||||
--text-md: 15px; /* brand-specific — lede / large body */
|
||||
--text-lg: 17px; /* H3 */
|
||||
--text-xl: 22px; /* H2 */
|
||||
--text-2xl: 32px; /* section title */
|
||||
--text-3xl: 48px; /* CJK display ceiling */
|
||||
--text-4xl: 96px; /* EN hero / cover slide title */
|
||||
|
||||
/* kami's line-height envelope is 1.10–1.55, narrower than default's */
|
||||
--leading-display: 1.1; /* hero, H1, H2 */
|
||||
--leading-tight: 1.25; /* section title */
|
||||
--leading-body: 1.55; /* reading body */
|
||||
--leading-dense: 1.4; /* resume / one-pager */
|
||||
|
||||
/* Letter-spacing rules from DESIGN.md §3. EN body is 0; CN/JA
|
||||
* override below. Display tracking is negative (compresses
|
||||
* 96px hero); eyebrow tracking is positive (uppercase labels). */
|
||||
--tracking-display: -1.2px; /* applied to 96px hero only */
|
||||
--tracking-eyebrow: 1.2px; /* uppercase eyebrow / overline */
|
||||
--tracking-label: 0.4px; /* small uppercase labels */
|
||||
|
||||
/* ─── Spacing ────────────────────────────────────────────────────
|
||||
* kami is print-rooted; section gaps and card paddings come from
|
||||
* the layout grid in DESIGN.md §5, not the 4px web-grid that
|
||||
* default uses. We keep the same token names but rebind values
|
||||
* to kami's actual rhythm. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-7: 28px; /* card interior */
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
--space-18: 72px; /* section gap (web) */
|
||||
--space-22: 88px; /* page top padding (web) */
|
||||
|
||||
/* Web page geometry (DESIGN.md §5) */
|
||||
--section-y-desktop: 72px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ─────────────────────────────────────────────────────
|
||||
* `2px → 4px → 6px → 8px → 12px → 16px` per DESIGN.md §6. Tags
|
||||
* sit at 2–4px; buttons and cards at 8px; featured at 12–16px. */
|
||||
--radius-xs: 2px; /* tags */
|
||||
--radius-sm: 4px; /* small chips */
|
||||
--radius-md: 8px; /* default — buttons, cards */
|
||||
--radius-lg: 12px; /* featured cards */
|
||||
--radius-xl: 16px; /* hero containers */
|
||||
--radius-pill: 9999px; /* avatars (rare) */
|
||||
|
||||
/* ─── Elevation (3 levels — #Gap 5) ─────────────────────────────
|
||||
* kami forbids hard drop shadows. Three sanctioned levels:
|
||||
* flat / ring (1px hairline OR 1px brand ring) / whisper. The
|
||||
* shared schema gains `--elev-ring` so brands using ring shadows
|
||||
* as primary elevation (kami, paper, editorial) don't have to
|
||||
* rebind --elev-raised away from blur shadow.
|
||||
*
|
||||
* `--elev-ring-accent` is brand-specific — kami uses it as the
|
||||
* edge for primary buttons (`box-shadow: var(--elev-ring-accent)`
|
||||
* instead of border, to keep the rectangle perfectly aligned
|
||||
* with the fill). */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-ring-accent: 0 0 0 1px var(--accent); /* brand-specific */
|
||||
--elev-raised: 0 4px 24px rgba(0, 0, 0, 0.05); /* whisper */
|
||||
|
||||
/* ─── Focus ring ─────────────────────────────────────────────────
|
||||
* kami's focus is more restrained than default's — the brand
|
||||
* forbids cool-blue glows. We use a smaller ring with the active
|
||||
* variant of accent. */
|
||||
--focus-ring: 0 0 0 2px var(--accent-active);
|
||||
|
||||
/* ─── Motion ─────────────────────────────────────────────────────
|
||||
* kami's hover is a 200ms whisper-shadow lift only — no transform,
|
||||
* no brightness shift. Two durations, one easing. */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────────────
|
||||
* Web container: 1120px max, 64px gutter desktop. Print pages
|
||||
* have margin tokens specific to document type (resume / one-pager
|
||||
* / long-doc / letter / portfolio) — those live in the print
|
||||
* skill, not in this shared token block. */
|
||||
--container-max: 1120px;
|
||||
--container-gutter-desktop: 64px;
|
||||
--container-gutter-tablet: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
|
||||
/* ─── Brand-specific: tag tint scale (#Gap 6) ────────────────────
|
||||
* Print renderers double-paint alpha fills. kami pre-blends ink
|
||||
* blue over parchment as solid hex at 5 effective alphas. These
|
||||
* tokens are NOT part of the shared schema; they live here only
|
||||
* because kami's rendering target needs them. Other brands tint
|
||||
* with `color-mix(... transparent N%)` inline. */
|
||||
--tag-bg-faint: #eef2f7; /* ≈ ink at 0.08 */
|
||||
--tag-bg-soft: #e4ecf5; /* ≈ ink at 0.18 — DEFAULT tag */
|
||||
--tag-bg-base: #d6e1ee; /* ≈ ink at 0.30 */
|
||||
--tag-bg-strong: #d0dce9; /* ≈ ink at 0.22, denser */
|
||||
}
|
||||
|
||||
/* ─── i18n font overrides (#Gap 7) ──────────────────────────────────
|
||||
* Switch the dominant font stack based on the artifact's lang.
|
||||
* Apply ONLY ONE of these blocks — the one matching <html lang="...">
|
||||
* — and keep --font-mono on the EN stack since code labels stay Latin
|
||||
* regardless of the document language.
|
||||
*
|
||||
* For multi-language artifacts (e.g. a deck with one Japanese chapter),
|
||||
* keep the dominant stack on :root and scope the override on a
|
||||
* wrapper element instead:
|
||||
*
|
||||
* section[lang="ja"] { --font-display: <JA stack>; ... }
|
||||
*
|
||||
* Do NOT chain all three font families inside a single font-family
|
||||
* declaration — that dilutes the visual character of every page.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root[lang="zh-CN"],
|
||||
:root[lang="zh"] {
|
||||
--font-display:
|
||||
"TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
|
||||
"Songti SC", "STSong", Georgia, serif;
|
||||
--font-body:
|
||||
"TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
|
||||
"Songti SC", "STSong", Georgia, serif;
|
||||
}
|
||||
|
||||
:root[lang="ja"] {
|
||||
--font-display:
|
||||
"YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
|
||||
"Noto Serif CJK JP", "Source Han Serif JP",
|
||||
"TsangerJinKai02", Georgia, serif;
|
||||
--font-body:
|
||||
"YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
|
||||
"Noto Serif CJK JP", "Source Han Serif JP",
|
||||
"TsangerJinKai02", Georgia, serif;
|
||||
/* JA needs the lighter olive override — YuMincho strokes are thinner
|
||||
* and the standard olive looks anemic against parchment. */
|
||||
--muted: #4d4c48;
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Kraken
|
||||
description: "Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color."
|
||||
colors:
|
||||
palette: ["#7132f5", "#5741d8", "#5b1ecf", "#101114", "#149e61", "#686b82"]
|
||||
typography:
|
||||
fonts: "Helvetica, Helvetica Neue"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Kraken
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)
|
||||
- Kraken-Brand (display) + Kraken-Product (UI) dual font system
|
||||
- Near-black (`#101114`) text with cool blue-gray neutral scale
|
||||
- 12px radius buttons (rounded but not pill)
|
||||
- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level
|
||||
- Green accent (`#149e61`) for positive/success states
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links
|
||||
- **Purple Dark** (`#5741d8`): Button borders, outlined variants
|
||||
- **Purple Deep** (`#5b1ecf`): Deepest purple
|
||||
- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16% — subtle button backgrounds
|
||||
- **Near Black** (`#101114`): Primary text
|
||||
|
||||
### Neutral
|
||||
- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity
|
||||
- **Silver Blue** (`#9497a9`): Secondary text, muted elements
|
||||
- **White** (`#ffffff`): Primary surface
|
||||
- **Border Gray** (`#dedee5`): Divider borders
|
||||
|
||||
### Semantic
|
||||
- **Green** (`#149e61`): Success/positive at 16% opacity for badges
|
||||
- **Green Dark** (`#026b3f`): Badge text
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`
|
||||
- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing |
|
||||
|------|------|------|--------|-------------|----------------|
|
||||
| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |
|
||||
| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
|
||||
| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
|
||||
| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |
|
||||
| Body | Kraken-Product | 16px | 400 | 1.38 | normal |
|
||||
| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |
|
||||
| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |
|
||||
| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |
|
||||
| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |
|
||||
| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Purple**
|
||||
- Background: `#7132f5`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 13px 16px
|
||||
- Radius: 12px
|
||||
|
||||
**Purple Outlined**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#5741d8`
|
||||
- Border: `1px solid #5741d8`
|
||||
- Radius: 12px
|
||||
|
||||
**Purple Subtle**
|
||||
- Background: `rgba(133,91,251,0.16)`
|
||||
- Text: `#7132f5`
|
||||
- Padding: 8px
|
||||
- Radius: 12px
|
||||
|
||||
**White Button**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#101114`
|
||||
- Radius: 10px
|
||||
- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`
|
||||
|
||||
**Secondary Gray**
|
||||
- Background: `rgba(148,151,169,0.08)`
|
||||
- Text: `#101114`
|
||||
- Radius: 12px
|
||||
|
||||
### Badges
|
||||
- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius
|
||||
- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px
|
||||
### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%
|
||||
|
||||
## 6. Depth & Elevation
|
||||
- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`
|
||||
- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Kraken Purple (#7132f5) for CTAs and links
|
||||
- Apply 12px radius on all buttons
|
||||
- Use Kraken-Brand for headings, Kraken-Product for body
|
||||
|
||||
### Don't
|
||||
- Don't use pill buttons — 12px is the max radius for buttons
|
||||
- Don't use other purples outside the defined scale
|
||||
|
||||
## 8. Responsive Behavior
|
||||
Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand: Kraken Purple (`#7132f5`)
|
||||
- Dark variant: `#5741d8`
|
||||
- Text: Near Black (`#101114`)
|
||||
- Secondary text: `#9497a9`
|
||||
- Background: White (`#ffffff`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."
|
||||
@@ -0,0 +1,5 @@
|
||||
# Kraken Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/kraken/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,298 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Lamborghini
|
||||
description: "Lamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight."
|
||||
colors:
|
||||
palette: ["#000000", "#ffc000", "#ffffff", "#917300", "#ffce3e", "#29abe2"]
|
||||
typography:
|
||||
fonts: "Roboto, Helvetica Neue"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Lamborghini
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Lamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black — true, uncompromising black (`#000000`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (`#FFC000`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.
|
||||
|
||||
The hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a "MENU" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.
|
||||
|
||||
Typography is the voice of this darkness. LamboType — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.
|
||||
|
||||
**Key Characteristics:**
|
||||
- True black (`#000000`) dominant surfaces with white and gold as the only relief colors
|
||||
- LamboType custom Neo-Grotesk font with 12° angled terminals inspired by aerodynamic car lines
|
||||
- Lamborghini Gold (`#FFC000`) as the sole accent color — used exclusively for primary CTA buttons
|
||||
- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights
|
||||
- Full-viewport video heroes with cinematic event/vehicle content
|
||||
- Zero border-radius on buttons — sharp, angular, uncompromising rectangles
|
||||
- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry
|
||||
- Bootstrap grid system + Element Plus/UI 68 components underneath
|
||||
- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Lamborghini Gold** (`#FFC000`): The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons ("Discover More", "Tickets", "Start Configuration"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night
|
||||
- **Pure White** (`#FFFFFF`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice that speaks from the darkness
|
||||
|
||||
### Secondary & Accent
|
||||
- **Dark Gold** (`#917300`): Hover/pressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction
|
||||
- **Gold Text** (`#FFCE3E`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels
|
||||
- **Cyan Pulse** (`#29ABE2`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight
|
||||
- **Link Blue** (`#3860BE`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors
|
||||
|
||||
### Surface & Background
|
||||
- **Absolute Black** (`#000000`): The dominant surface color — used for page background, hero sections, header, footer, and most containers
|
||||
- **Charcoal** (`#202020`): Elevated dark surface (rgb 32, 32, 32) — the primary "dark gray" for cards, panels, and text containers sitting above the black canvas
|
||||
- **Dark Iron** (`#181818`): Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections
|
||||
- **Overlay Black** (`rgba(0,0,0,0.7)`): Semi-transparent overlay for modals and video dimming
|
||||
- **Near White** (`#F8F8F8`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections
|
||||
- **Mist** (`#E6E6E6`): Light gray surface for secondary light-mode containers
|
||||
|
||||
### Neutrals & Text
|
||||
- **Pure White** (`#FFFFFF`): Primary text on dark backgrounds — headlines, body, nav labels
|
||||
- **Smoke** (`#F5F5F5`): Secondary text on dark surfaces — slightly softer than pure white
|
||||
- **Graphite** (`#494949`): Dark gray text on light surfaces (rgb 73, 73, 73)
|
||||
- **Ash** (`#7D7D7D`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)
|
||||
- **Steel** (`#969696`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)
|
||||
- **Slate** (`#666666`): Alternative mid-gray for secondary content
|
||||
- **Iron** (`#555555`): Dark mid-gray for body text variants
|
||||
- **Shadow** (`#313131`): Very dark gray for text on dark surfaces where white is too strong
|
||||
|
||||
### Semantic & Accent
|
||||
- **Cyan Pulse** (`#29ABE2`): Used for informational highlights and interactive feedback
|
||||
- **Link Blue** (`#3860BE`): Universal hover state for all hyperlinks
|
||||
- **Teal Action** (`#1EAEDB`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)
|
||||
|
||||
### Gradient System
|
||||
- No explicit gradients in the color palette — the dark-to-light progression is achieved through surface layering: `#000000` → `#181818` → `#202020` → `#494949` → `#7D7D7D`
|
||||
- Video heroes use natural atmospheric gradients from the content itself
|
||||
- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display & UI**: `LamboType`, Roboto, Helvetica Neue, Arial — custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12° angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek
|
||||
- **Fallback/UI**: `Open Sans` — used for some button/form contexts as system fallback
|
||||
- **No italic variants** observed on the marketing site — the brand voice is always upright
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|--------|-------------|----------------|-------|
|
||||
| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |
|
||||
| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |
|
||||
| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |
|
||||
| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |
|
||||
| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |
|
||||
| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |
|
||||
| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |
|
||||
| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |
|
||||
| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |
|
||||
| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |
|
||||
| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |
|
||||
| Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |
|
||||
| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |
|
||||
| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |
|
||||
|
||||
### Principles
|
||||
- **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression
|
||||
- **Extreme scale range**: From 120px heroes to 10px micro labels — a 12:1 ratio that creates dramatic visual hierarchy
|
||||
- **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset
|
||||
- **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines — the typeface itself is so distinctive it doesn't need weight variation
|
||||
- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic
|
||||
- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes
|
||||
- **Single typeface discipline**: LamboType handles everything — the 12° angled terminals and hexagonal geometry provide visual coherence across all sizes
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
All buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.
|
||||
|
||||
**Gold Accent CTA** — The primary action:
|
||||
- Default: bg `#FFC000` (Lamborghini Gold), text `#000000`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border
|
||||
- Hover: bg `#917300` (Dark Gold), darkens significantly
|
||||
- Class: `btn-accent btn-large`
|
||||
- Used for: "Discover More", "Tickets", "Start Configuration"
|
||||
|
||||
**Transparent Ghost** — The secondary action on dark backgrounds:
|
||||
- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, padding 16px, opacity 0.5
|
||||
- Hover: bg `#1EAEDB` (Teal Action), text white, opacity 0.7
|
||||
- Focus: bg `#1EAEDB`, border 1px solid `#000000`, outline 2px solid `#000000`
|
||||
- Used for: secondary CTAs on hero sections and dark panels
|
||||
|
||||
**White Filled** — Light-mode primary:
|
||||
- Default: bg `#FFFFFF`, text `#202020`, no border
|
||||
- Used for: CTAs on dark sections where gold isn't appropriate
|
||||
|
||||
**Black Filled** — Dark filled variant:
|
||||
- Default: bg `#000000`, text `#202020`
|
||||
- Used for: Inverted CTA on light sections
|
||||
|
||||
**Gray Neutral** — Subtle action:
|
||||
- Default: bg `#969696`, text `#202020`
|
||||
- Used for: secondary/tertiary actions, badge-like buttons
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#202020` (Charcoal) on black canvas, or `#000000` on lighter sections
|
||||
- Border: `0px 1px solid #202020` bottom borders for section dividers
|
||||
- Border-radius: 0px (completely sharp corners)
|
||||
- Shadow: minimal, uses overlay opacity for depth
|
||||
- Content: full-bleed photography + overlaid text in white
|
||||
|
||||
### Inputs & Forms
|
||||
- Minimal form presence on the marketing site
|
||||
- Switch elements: border-radius 20px (the only rounded element), border 1px solid `#DDDDDD`
|
||||
- Cookie banner input style: white text on black with `#7D7D7D` borders
|
||||
|
||||
### Navigation
|
||||
- **Desktop**: Centered bull logo, "MENU" hamburger with icon on left, search icon + bookmarks icon on right
|
||||
- **Background**: Transparent (inherits black page background)
|
||||
- **Sticky**: Fixed to top, floats above content
|
||||
- **No visible borders or shadows** — elements float in the darkness
|
||||
- **"MENU" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon
|
||||
- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape
|
||||
|
||||
### Image Treatment
|
||||
- **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage
|
||||
- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events
|
||||
- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width
|
||||
- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel
|
||||
- **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility
|
||||
|
||||
### Distinctive Components
|
||||
- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections
|
||||
- **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress
|
||||
- **Badge/Tag**: bg `#969696`, text white, padding 8px, fontSize 10px, borderRadius 2px — tiny metallic pills
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px
|
||||
- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px
|
||||
- **Button padding**: 16px (ghost), 24px (gold accent)
|
||||
- **Section padding**: 48–56px vertical, 40px horizontal
|
||||
- **Small spacing**: 2–5px for fine adjustments (badge padding, border spacing)
|
||||
|
||||
### Grid & Container
|
||||
- **Framework**: Bootstrap grid system (container + row + col)
|
||||
- **Max width**: 1440px (largest breakpoint)
|
||||
- **Columns**: Standard 12-column Bootstrap grid
|
||||
- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge
|
||||
- **Content areas**: Centered within 1200px max-width containers
|
||||
|
||||
### Whitespace Philosophy
|
||||
Lamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.
|
||||
|
||||
### Border Radius Scale
|
||||
| Value | Context |
|
||||
|-------|---------|
|
||||
| 0px | Default for everything — buttons, cards, containers, images |
|
||||
| 1px | Subtle span elements |
|
||||
| 2px | Badges, close buttons, cookie elements — barely perceptible |
|
||||
| 20px | Toggle switches only — the sole rounded element |
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Level 0 (Abyss) | `#000000` flat | Page background, deepest layer |
|
||||
| Level 1 (Surface) | `#181818` or `#202020` | Cards, content panels, elevated sections |
|
||||
| Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrops, video dimming |
|
||||
| Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlays, hover states |
|
||||
| Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |
|
||||
|
||||
### Shadow Philosophy
|
||||
Lamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: `#000000` → `#181818` → `#202020` → `#494949`. This "darkness gradient" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.
|
||||
|
||||
### Decorative Depth
|
||||
- Full-bleed video provides atmospheric depth through cinematic lighting
|
||||
- The hexagonal pause button floats with a thin white outline stroke
|
||||
- Progress bars at hero section bottoms create a subtle horizon line
|
||||
- No gradients, glows, or blur effects on UI elements — the photography provides all visual richness
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use absolute black (`#000000`) as the primary background — never dark gray as a substitute
|
||||
- Apply Lamborghini Gold (`#FFC000`) exclusively for primary CTA buttons — never for decorative purposes
|
||||
- Set all display headings in uppercase with LamboType — the brand voice is always SHOUTING
|
||||
- Use zero border-radius on buttons and cards — sharp angles are non-negotiable
|
||||
- Maintain tight line-heights (0.92–1.19) on display type to create dense, architectural text blocks
|
||||
- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds
|
||||
- Let full-viewport video/photography carry emotional weight — UI is infrastructure, not decoration
|
||||
- Reserve hexagonal geometry for UI icons and the video control button
|
||||
- Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis
|
||||
- Keep the gray palette achromatic — all neutrals are pure gray without color tinting
|
||||
|
||||
### Don't
|
||||
- Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred
|
||||
- Apply border-radius to buttons or cards — curved edges contradict the angular vehicle aesthetic
|
||||
- Use LamboType in italic or decorative styles — the brand is always upright and direct
|
||||
- Add gradients to buttons or surfaces — depth comes from surface layering, not blending
|
||||
- Use light backgrounds as the primary canvas — darkness is the default state, light is the exception
|
||||
- Mix lowercase into display headings — the uppercase convention communicates authority and power
|
||||
- Add hover animations with scale or translate — interactions should be color-only (background/opacity shifts)
|
||||
- Use Open Sans for display text — LamboType must handle all visible typography
|
||||
- Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements
|
||||
- Apply shadows to elements — on a black canvas, shadows are meaningless; use surface color shifts instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |
|
||||
| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |
|
||||
| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |
|
||||
| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |
|
||||
| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |
|
||||
| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |
|
||||
| Wide | >1440px | Content centered, margins expand, hero fills viewport |
|
||||
|
||||
### Touch Targets
|
||||
- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44×44px)
|
||||
- Ghost buttons: 48px+ with 16px padding
|
||||
- Hamburger menu: large touch target (~48px square)
|
||||
- Hexagonal pause button: approximately 48px diameter
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Always hamburger-based ("MENU" + icon) — no horizontal nav expansion on any breakpoint
|
||||
- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit
|
||||
- **Display type**: Scales from 120px (desktop) → 80px (tablet) → 54px/40px (mobile)
|
||||
- **Button layout**: Side-by-side on desktop, stacks vertically on mobile
|
||||
- **Grid columns**: 3-column → 2-column → 1-column progression
|
||||
- **Section spacing**: Reduces from 56px → 40px → 24px vertical padding
|
||||
|
||||
### Image Behavior
|
||||
- Hero videos use `object-fit: cover` to maintain cinematic framing at all sizes
|
||||
- Vehicle images scale within their containers with maintained aspect ratios
|
||||
- Event photography crops to viewport width on narrow screens
|
||||
- Background images darken at edges to maintain text contrast on all viewports
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: "Lamborghini Gold (#FFC000)"
|
||||
- Background: "Absolute Black (#000000)"
|
||||
- Surface: "Charcoal (#202020)"
|
||||
- Heading text: "Pure White (#FFFFFF)"
|
||||
- Body text: "Ash (#7D7D7D)"
|
||||
- Link hover: "Link Blue (#3860BE)"
|
||||
- Accent: "Cyan Pulse (#29ABE2)"
|
||||
- Border: "Pure White (#FFFFFF) at 50% opacity"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below — sharp corners, 0px radius, 24px padding, black text"
|
||||
- "Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background — hover state changes to Teal Action (#1EAEDB) background with 70% opacity"
|
||||
- "Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right — all in white, sticky position"
|
||||
- "Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover"
|
||||
- "Design a section divider using a 1px solid bottom border in #202020 on a black canvas — the elevation difference is purely through surface color shift, not shadow"
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive
|
||||
2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors
|
||||
3. Use natural language descriptions, not CSS values — "sharp-cut golden rectangle" not "border-radius: 0px; background: #FFC000"
|
||||
4. Describe the desired "feel" alongside specific measurements — "floating in total darkness" communicates the black canvas better than "background: #000000"
|
||||
5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be
|
||||
@@ -0,0 +1,5 @@
|
||||
# Lamborghini Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/lamborghini/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,381 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Linear App
|
||||
description: "Project management. Ultra-minimal, precise, purple accent."
|
||||
category: "Productivity & SaaS"
|
||||
colors:
|
||||
palette: ["#08090a", "#f7f8f8", "#5e6ad2", "#7170ff", "#0f1011", "#191a1b"]
|
||||
typography:
|
||||
fonts: "Inter, Berkeley Mono, SF Pro Display, Roboto"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Linear
|
||||
|
||||
> Category: Productivity & SaaS
|
||||
> Project management. Ultra-minimal, precise, purple accent.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Linear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.
|
||||
|
||||
The typography system is built entirely on Inter Variable with OpenType features `"cv01"` and `"ss03"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.
|
||||
|
||||
The color system is almost entirely achromatic — dark backgrounds with white/gray text — punctuated by a single brand accent: Linear's signature indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) that create structure without visual noise, like wireframes drawn in moonlight.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Dark-mode-native: `#08090a` marketing background, `#0f1011` panel background, `#191a1b` elevated surfaces
|
||||
- Inter Variable with `"cv01", "ss03"` globally — geometric alternates for a cleaner aesthetic
|
||||
- Signature weight 510 (between regular and medium) for most UI text
|
||||
- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
|
||||
- Brand indigo-violet: `#5e6ad2` (bg) / `#7170ff` (accent) / `#828fff` (hover) — the only chromatic color in the system
|
||||
- Semi-transparent white borders throughout: `rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`
|
||||
- Button backgrounds at near-zero opacity: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
|
||||
- Multi-layered shadows with inset variants for depth on dark surfaces
|
||||
- Radix UI primitives as the component foundation (6 detected primitives)
|
||||
- Success green (`#27a644`, `#10b981`) used only for status indicators
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Background Surfaces
|
||||
- **Marketing Black** (`#010102` / `#08090a`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.
|
||||
- **Panel Dark** (`#0f1011`): Sidebar and panel backgrounds. One step up from the marketing black.
|
||||
- **Level 3 Surface** (`#191a1b`): Elevated surface areas, card backgrounds, dropdowns.
|
||||
- **Secondary Surface** (`#28282c`): The lightest dark surface — used for hover states and slightly elevated components.
|
||||
|
||||
### Text & Content
|
||||
- **Primary Text** (`#f7f8f8`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.
|
||||
- **Secondary Text** (`#d0d6e0`): Cool silver-gray for body text, descriptions, and secondary content.
|
||||
- **Tertiary Text** (`#8a8f98`): Muted gray for placeholders, metadata, and de-emphasized content.
|
||||
- **Quaternary Text** (`#62666d`): The most subdued text — timestamps, disabled states, subtle labels.
|
||||
|
||||
### Brand & Accent
|
||||
- **Brand Indigo** (`#5e6ad2`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.
|
||||
- **Accent Violet** (`#7170ff`): Brighter variant for interactive elements — links, active states, selected items.
|
||||
- **Accent Hover** (`#828fff`): Lighter, more saturated variant for hover states on accent elements.
|
||||
- **Security Lavender** (`#7a7fad`): Muted indigo used specifically for security-related UI elements.
|
||||
|
||||
### Status Colors
|
||||
- **Green** (`#27a644`): Primary success/active status. Used for "in progress" indicators.
|
||||
- **Emerald** (`#10b981`): Secondary success — pill badges, completion states.
|
||||
|
||||
### Border & Divider
|
||||
- **Border Primary** (`#23252a`): Solid dark border for prominent separations.
|
||||
- **Border Secondary** (`#34343a`): Slightly lighter solid border.
|
||||
- **Border Tertiary** (`#3e3e44`): Lightest solid border variant.
|
||||
- **Border Subtle** (`rgba(255,255,255,0.05)`): Ultra-subtle semi-transparent border — the default.
|
||||
- **Border Standard** (`rgba(255,255,255,0.08)`): Standard semi-transparent border for cards, inputs, code blocks.
|
||||
- **Line Tint** (`#141516`): Nearly invisible line for the subtlest divisions.
|
||||
- **Line Tertiary** (`#18191a`): Slightly more visible divider line.
|
||||
|
||||
### Light Mode Neutrals (for light theme contexts)
|
||||
- **Light Background** (`#f7f8f8`): Page background in light mode.
|
||||
- **Light Surface** (`#f3f4f5` / `#f5f6f7`): Subtle surface tinting.
|
||||
- **Light Border** (`#d0d6e0`): Visible border in light contexts.
|
||||
- **Light Border Alt** (`#e6e6e6`): Alternative lighter border.
|
||||
- **Pure White** (`#ffffff`): Card surfaces, highlights.
|
||||
|
||||
### Overlay
|
||||
- **Overlay Primary** (`rgba(0,0,0,0.85)`): Modal/dialog backdrop — extremely dark for focus isolation.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Inter Variable`, with fallbacks: `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`
|
||||
- **Monospace**: `Berkeley Mono`, with fallbacks: `ui-monospace, SF Mono, Menlo`
|
||||
- **OpenType Features**: `"cv01", "ss03"` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |
|
||||
| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |
|
||||
| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |
|
||||
| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |
|
||||
| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |
|
||||
| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |
|
||||
| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |
|
||||
| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |
|
||||
| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
|
||||
| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |
|
||||
| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |
|
||||
| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |
|
||||
| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |
|
||||
| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |
|
||||
| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |
|
||||
| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |
|
||||
| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |
|
||||
| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |
|
||||
| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |
|
||||
| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |
|
||||
| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |
|
||||
| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |
|
||||
| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |
|
||||
| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |
|
||||
| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |
|
||||
| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |
|
||||
| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |
|
||||
|
||||
### Principles
|
||||
- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.
|
||||
- **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.
|
||||
- **OpenType as identity**: `"cv01", "ss03"` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.
|
||||
- **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Ghost Button (Default)**
|
||||
- Background: `rgba(255,255,255,0.02)`
|
||||
- Text: `#e2e4e7` (near-white)
|
||||
- Padding: comfortable
|
||||
- Radius: 6px
|
||||
- Border: `1px solid rgb(36, 40, 44)`
|
||||
- Outline: none
|
||||
- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
|
||||
- Use: Standard actions, secondary CTAs
|
||||
|
||||
**Subtle Button**
|
||||
- Background: `rgba(255,255,255,0.04)`
|
||||
- Text: `#d0d6e0` (silver-gray)
|
||||
- Padding: 0px 6px
|
||||
- Radius: 6px
|
||||
- Use: Toolbar actions, contextual buttons
|
||||
|
||||
**Primary Brand Button (Inferred)**
|
||||
- Background: `#5e6ad2` (brand indigo)
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Hover: `#828fff` shift
|
||||
- Use: Primary CTAs ("Start building", "Sign up")
|
||||
|
||||
**Icon Button (Circle)**
|
||||
- Background: `rgba(255,255,255,0.03)` or `rgba(255,255,255,0.05)`
|
||||
- Text: `#f7f8f8` or `#ffffff`
|
||||
- Radius: 50%
|
||||
- Border: `1px solid rgba(255,255,255,0.08)`
|
||||
- Use: Close, menu toggle, icon-only actions
|
||||
|
||||
**Pill Button**
|
||||
- Background: transparent
|
||||
- Text: `#d0d6e0`
|
||||
- Padding: 0px 10px 0px 5px
|
||||
- Radius: 9999px
|
||||
- Border: `1px solid rgb(35, 37, 42)`
|
||||
- Use: Filter chips, tags, status indicators
|
||||
|
||||
**Small Toolbar Button**
|
||||
- Background: `rgba(255,255,255,0.05)`
|
||||
- Text: `#62666d` (muted)
|
||||
- Radius: 2px
|
||||
- Border: `1px solid rgba(255,255,255,0.05)`
|
||||
- Shadow: `rgba(0,0,0,0.03) 0px 1.2px 0px 0px`
|
||||
- Font: 12px weight 510
|
||||
- Use: Toolbar actions, quick-access controls
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (never solid — always translucent)
|
||||
- Border: `1px solid rgba(255,255,255,0.08)` (standard) or `1px solid rgba(255,255,255,0.05)` (subtle)
|
||||
- Radius: 8px (standard), 12px (featured), 22px (large panels)
|
||||
- Shadow: `rgba(0,0,0,0.2) 0px 0px 0px 1px` or layered multi-shadow stacks
|
||||
- Hover: subtle background opacity increase
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**Text Area**
|
||||
- Background: `rgba(255,255,255,0.02)`
|
||||
- Text: `#d0d6e0`
|
||||
- Border: `1px solid rgba(255,255,255,0.08)`
|
||||
- Padding: 12px 14px
|
||||
- Radius: 6px
|
||||
|
||||
**Search Input**
|
||||
- Background: transparent
|
||||
- Text: `#f7f8f8`
|
||||
- Padding: 1px 32px (icon-aware)
|
||||
|
||||
**Button-style Input**
|
||||
- Text: `#8a8f98`
|
||||
- Padding: 1px 6px
|
||||
- Radius: 5px
|
||||
- Focus shadow: multi-layer stack
|
||||
|
||||
### Badges & Pills
|
||||
|
||||
**Success Pill**
|
||||
- Background: `#10b981`
|
||||
- Text: `#f7f8f8`
|
||||
- Radius: 50% (circular)
|
||||
- Font: 10px weight 510
|
||||
- Use: Status dots, completion indicators
|
||||
|
||||
**Neutral Pill**
|
||||
- Background: transparent
|
||||
- Text: `#d0d6e0`
|
||||
- Padding: 0px 10px 0px 5px
|
||||
- Radius: 9999px
|
||||
- Border: `1px solid rgb(35, 37, 42)`
|
||||
- Font: 12px weight 510
|
||||
- Use: Tags, filter chips, category labels
|
||||
|
||||
**Subtle Badge**
|
||||
- Background: `rgba(255,255,255,0.05)`
|
||||
- Text: `#f7f8f8`
|
||||
- Padding: 0px 8px 0px 2px
|
||||
- Radius: 2px
|
||||
- Border: `1px solid rgba(255,255,255,0.05)`
|
||||
- Font: 10px weight 510
|
||||
- Use: Inline labels, version tags
|
||||
|
||||
### Navigation
|
||||
- Dark sticky header on near-black background
|
||||
- Linear logomark left-aligned (SVG icon)
|
||||
- Links: Inter Variable 13–14px weight 510, `#d0d6e0` text
|
||||
- Active/hover: text lightens to `#f7f8f8`
|
||||
- CTA: Brand indigo button or ghost button
|
||||
- Mobile: hamburger collapse
|
||||
- Search: command palette trigger (`/` or `Cmd+K`)
|
||||
|
||||
### Image Treatment
|
||||
- Product screenshots on dark backgrounds with subtle border (`rgba(255,255,255,0.08)`)
|
||||
- Top-rounded images: `12px 12px 0px 0px` radius
|
||||
- Dashboard/issue previews dominate feature sections
|
||||
- Subtle shadow beneath screenshots: `rgba(0,0,0,0.4) 0px 2px 4px`
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px
|
||||
- The 7px and 11px values suggest micro-adjustments for optical alignment
|
||||
- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px
|
||||
- Hero: centered single-column with generous vertical padding
|
||||
- Feature sections: 2–3 column grids for feature cards
|
||||
- Full-width dark sections with internal max-width constraints
|
||||
- Changelog: single-column timeline layout
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.
|
||||
- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.
|
||||
- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (2px): Inline badges, toolbar buttons, subtle tags
|
||||
- Standard (4px): Small containers, list items
|
||||
- Comfortable (6px): Buttons, inputs, functional elements
|
||||
- Card (8px): Cards, dropdowns, popovers
|
||||
- Panel (12px): Panels, featured cards, section containers
|
||||
- Large (22px): Large panel elements
|
||||
- Full Pill (9999px): Chips, filter pills, status tags
|
||||
- Circle (50%): Icon buttons, avatars, status dots
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, `#010102` bg | Page background, deepest canvas |
|
||||
| Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | Toolbar buttons, micro-elevation |
|
||||
| Surface (Level 2) | `rgba(255,255,255,0.05)` bg + `1px solid rgba(255,255,255,0.08)` border | Cards, input fields, containers |
|
||||
| Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | Recessed panels, inner shadows |
|
||||
| Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | Border-as-shadow technique |
|
||||
| Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | Floating elements, dropdowns |
|
||||
| Dialog (Level 5) | Multi-layer stack: `rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | Popovers, command palette, modals |
|
||||
| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + additional layers | Keyboard focus on interactive elements |
|
||||
|
||||
**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (`0.02` → `0.04` → `0.05`), creating a subtle stacking effect. The inset shadow technique (`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`) creates a unique "sunken" effect for recessed panels, adding dimensional depth that traditional dark themes lack.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Inter Variable with `"cv01", "ss03"` on ALL text — these features are fundamental to Linear's typeface identity
|
||||
- Use weight 510 as your default emphasis weight — it's Linear's signature between-weight
|
||||
- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
|
||||
- Build on near-black backgrounds: `#08090a` for marketing, `#0f1011` for panels, `#191a1b` for elevated surfaces
|
||||
- Use semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) instead of solid dark borders
|
||||
- Keep button backgrounds nearly transparent: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
|
||||
- Reserve brand indigo (`#5e6ad2` / `#7170ff`) for primary CTAs and interactive accents only
|
||||
- Use `#f7f8f8` for primary text — not pure `#ffffff`, which would be too harsh
|
||||
- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg
|
||||
|
||||
### Don't
|
||||
- Don't use pure white (`#ffffff`) as primary text — `#f7f8f8` prevents eye strain
|
||||
- Don't use solid colored backgrounds for buttons — transparency is the system (rgba white at 0.02–0.05)
|
||||
- Don't apply the brand indigo decoratively — it's reserved for interactive/CTA elements only
|
||||
- Don't use positive letter-spacing on display text — Inter at large sizes always runs negative
|
||||
- Don't use visible/opaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white
|
||||
- Don't skip the OpenType features (`"cv01", "ss03"`) — without them, it's generic Inter, not Linear's Inter
|
||||
- Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse
|
||||
- Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only
|
||||
- Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <600px | Single column, compact padding |
|
||||
| Mobile | 600–640px | Standard mobile layout |
|
||||
| Tablet | 640–768px | Two-column grids begin |
|
||||
| Desktop Small | 768–1024px | Full card grids, expanded padding |
|
||||
| Desktop | 1024–1280px | Standard desktop, full navigation |
|
||||
| Large Desktop | >1280px | Full layout, generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use comfortable padding with 6px radius minimum
|
||||
- Navigation links at 13–14px with adequate spacing
|
||||
- Pill tags have 10px horizontal padding for touch accessibility
|
||||
- Icon buttons at 50% radius ensure circular, easy-to-tap targets
|
||||
- Search trigger is prominently placed with generous hit area
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 72px → 48px → 32px display text, tracking adjusts proportionally
|
||||
- Navigation: horizontal links + CTAs → hamburger menu at 768px
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Product screenshots: maintain aspect ratio, may reduce padding
|
||||
- Changelog: timeline maintains single-column through all sizes
|
||||
- Footer: multi-column → stacked single column
|
||||
- Section spacing: 80px+ → 48px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Dashboard screenshots maintain border treatment at all sizes
|
||||
- Hero visuals simplify on mobile (fewer floating UI elements)
|
||||
- Product screenshots use responsive sizing with consistent radius
|
||||
- Dark background ensures screenshots blend naturally at any viewport
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Brand Indigo (`#5e6ad2`)
|
||||
- Page Background: Marketing Black (`#08090a`)
|
||||
- Panel Background: Panel Dark (`#0f1011`)
|
||||
- Surface: Level 3 (`#191a1b`)
|
||||
- Heading text: Primary White (`#f7f8f8`)
|
||||
- Body text: Silver Gray (`#d0d6e0`)
|
||||
- Muted text: Tertiary Gray (`#8a8f98`)
|
||||
- Subtle text: Quaternary Gray (`#62666d`)
|
||||
- Accent: Violet (`#7170ff`)
|
||||
- Accent Hover: Light Violet (`#828fff`)
|
||||
- Border (default): `rgba(255,255,255,0.08)`
|
||||
- Border (subtle): `rgba(255,255,255,0.05)`
|
||||
- Focus ring: Multi-layer shadow stack
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on `#08090a` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color `#f7f8f8`, font-feature-settings `'cv01', 'ss03'`. Subtitle at 18px weight 400, line-height 1.60, color `#8a8f98`. Brand CTA button (`#5e6ad2`, 6px radius, 8px 16px padding) and ghost button (`rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 6px radius)."
|
||||
- "Design a card on dark background: `rgba(255,255,255,0.02)` background, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color `#f7f8f8`. Body at 15px weight 400, color `#8a8f98`, letter-spacing -0.165px."
|
||||
- "Build a pill badge: transparent background, `#d0d6e0` text, 9999px radius, 0px 10px padding, `1px solid #23252a` border, 12px Inter Variable weight 510."
|
||||
- "Create navigation: dark sticky header on `#0f1011`. Inter Variable 13px weight 510 for links, `#d0d6e0` text. Brand indigo CTA `#5e6ad2` right-aligned with 6px radius. Bottom border: `1px solid rgba(255,255,255,0.05)`."
|
||||
- "Design a command palette: `#191a1b` background, `1px solid rgba(255,255,255,0.08)` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, `#f7f8f8` text. Results list with 13px weight 510 labels in `#d0d6e0` and 12px metadata in `#62666d`."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always set font-feature-settings `"cv01", "ss03"` on all Inter text — this is non-negotiable for Linear's look
|
||||
2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px
|
||||
3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)
|
||||
4. Surface elevation via background opacity: `rgba(255,255,255, 0.02 → 0.04 → 0.05)` — never solid backgrounds on dark
|
||||
5. Brand indigo (`#5e6ad2` / `#7170ff`) is the only chromatic color — everything else is grayscale
|
||||
6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds
|
||||
7. Berkeley Mono for any code or technical content, Inter Variable for everything else
|
||||
@@ -0,0 +1,370 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Linear — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/linear-app. Every visible
|
||||
value comes from tokens.css. Linear's signature moves: near-black
|
||||
canvas, Inter Variable with cv01+ss03, weight-510 emphasis, indigo
|
||||
accent, semi-transparent white borders, luminance stepping for depth."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #08090a;
|
||||
--surface: #191a1b;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #f7f8f8;
|
||||
--fg-2: #d0d6e0;
|
||||
--muted: #8a8f98;
|
||||
--meta: #62666d;
|
||||
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--accent: #5e6ad2;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #828fff;
|
||||
--accent-active: #4752c4;
|
||||
|
||||
--success: #27a644;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--font-display: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
||||
--font-body: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 72px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.00;
|
||||
--tracking-display: -0.022em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
rgba(0, 0, 0, 0.4) 0px 2px 4px,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
|
||||
--focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 30%), 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg-2);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
/* Linear's signature: cv01 (alternate 'a') + ss03 (geometric alternates). */
|
||||
font-feature-settings: "cv01", "ss03";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 510; /* Linear's signature between-weight */
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
font-feature-settings: "cv01", "ss03";
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-2xl);
|
||||
/* 32px heading 1: line-height 1.13, tracking -0.704px (-0.022em). */
|
||||
line-height: 1.13;
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-xl);
|
||||
/* 24px heading 2: line-height 1.33, tracking -0.288px (-0.012em).
|
||||
Overrides the shared 1.00 set on h1/h2/h3 above. */
|
||||
line-height: 1.33;
|
||||
letter-spacing: -0.012em;
|
||||
font-weight: 590;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.60;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.009em;
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); color: var(--muted); }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 510;
|
||||
color: var(--meta);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 510;
|
||||
font-feature-settings: "cv01", "ss03";
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-ghost {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: #e2e4e7;
|
||||
border-color: rgba(36, 40, 44, 1);
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); }
|
||||
|
||||
/* ─── Pill badges ───────────────────────────────────────────── */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px 0 5px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 510;
|
||||
color: var(--fg-2);
|
||||
border: 1px solid #23252a;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
transition: background-color var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover { background: rgba(255, 255, 255, 0.04); }
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 510;
|
||||
color: var(--fg-2);
|
||||
font-feature-settings: "cv01", "ss03";
|
||||
}
|
||||
.field input {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: var(--fg-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 12px 14px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-feature-settings: "cv01", "ss03";
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field input:focus { border-color: var(--accent); }
|
||||
|
||||
/* ─── Layout ────────────────────────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · linear</p>
|
||||
<h1>Built for the next era of product development.</h1>
|
||||
<p class="lead" style="max-width:50ch">
|
||||
Linear streamlines software projects, sprints, tasks, and bug
|
||||
tracking. Precision engineered — from the 510 between-weight to
|
||||
the semi-transparent white borders. Every value from tokens.css.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">Start building</a>
|
||||
<a href="./DESIGN.md" class="btn btn-ghost">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside style="display:flex;flex-direction:column;gap:var(--space-4)">
|
||||
<div class="card">
|
||||
<p class="eyebrow" style="margin-bottom:var(--space-3)">Issue tracker</p>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--fg-2)">
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:#27a644;flex-shrink:0"></span>
|
||||
Fix token channel drift in derive script
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--muted)">
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0"></span>
|
||||
Add 10 brand oracle fixtures
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--meta)">
|
||||
<span style="width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,0.1);flex-shrink:0"></span>
|
||||
Ship PR-B derive script
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width:28ch">Darkness as the native medium.</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid" style="margin-block-start:var(--space-6)">
|
||||
<article class="card stack-3">
|
||||
<h3>Dark-first</h3>
|
||||
<p class="body-sm">
|
||||
#08090a marketing black → #191a1b elevated surface. Luminance
|
||||
stepping, not color: each level increases white opacity by 0.02.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3>Weight 510</h3>
|
||||
<p class="body-sm">
|
||||
Inter Variable's between-weight. Not 500, not 600 — precisely 510.
|
||||
cv01+ss03 on all text transforms generic Inter into Linear's face.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-3">
|
||||
<h3>Indigo accent</h3>
|
||||
<p class="body-sm">
|
||||
#5e6ad2 for CTA backgrounds; #7170ff for interactive; #828fff
|
||||
on hover. The only chromatic color in an otherwise achromatic system.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div style="margin-block-start:var(--space-6);display:flex;gap:var(--space-2);flex-wrap:wrap">
|
||||
<span class="pill">All issues</span>
|
||||
<span class="pill">Active</span>
|
||||
<span class="pill">Backlog</span>
|
||||
<span class="pill">Done</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FORM -->
|
||||
<section data-od-id="form">
|
||||
<div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs on dark surfaces.</h2>
|
||||
<p class="lead" style="max-width:44ch">
|
||||
rgba(255,255,255,0.02) background, border: 1px solid rgba(255,255,255,0.08).
|
||||
Focus shifts border to --accent; no halo, no blue ring.
|
||||
</p>
|
||||
</div>
|
||||
<form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
|
||||
onsubmit="event.preventDefault()">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input id="email" type="email" placeholder="you@company.com" />
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
|
||||
<button type="submit" class="btn btn-primary">Sign up</button>
|
||||
<button type="button" class="btn btn-ghost">Learn more</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,130 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/linear-app/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "Linear" brand — the dark-mode-native
|
||||
* project management tool's precision engineering voice.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Darkness as the native medium — near-black canvas (#08090a) where
|
||||
* information density is managed through luminance steps rather than
|
||||
* color variation; semi-transparent white borders throughout.
|
||||
* 2. Inter Variable with OpenType "cv01","ss03" at all sizes, signature
|
||||
* weight 510 (between regular and medium), aggressive negative
|
||||
* letter-spacing at display sizes (-1.584px at 72px).
|
||||
* 3. Almost entirely achromatic — the single chromatic color is Linear's
|
||||
* indigo-violet (#5e6ad2 bg / #7170ff interactive), used only for
|
||||
* CTAs and active states; everything else is grayscale.
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #08090a (marketing black); --surface: #191a1b (elevated).
|
||||
* - --surface-warm aliases --surface (dark system, no warm tier).
|
||||
* - --fg: #f7f8f8 (near-white — not pure white, prevents eye strain).
|
||||
* - --fg-2: #d0d6e0 (silver-gray body text).
|
||||
* - --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.05).
|
||||
* - --accent: #5e6ad2 (brand indigo bg); --accent-hover: #828fff.
|
||||
* - --tracking-display: -0.022em (-1.584px / 72px normalized).
|
||||
* - --radius-sm: 6px (buttons/inputs); --radius-md: 8px (cards).
|
||||
* - --elev-raised: luminance stepping — no opaque shadow on dark.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #08090a; /* marketing black — hero canvas */
|
||||
--surface: #191a1b; /* elevated surface — cards, dropdowns */
|
||||
--surface-warm: var(--surface); /* no warm tier in dark achromatic system */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #f7f8f8; /* near-white primary text */
|
||||
--fg-2: #d0d6e0; /* silver-gray body / secondary text */
|
||||
--muted: #8a8f98; /* tertiary — placeholders, metadata */
|
||||
--meta: #62666d; /* quaternary — timestamps, disabled */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: rgba(255, 255, 255, 0.08); /* standard semi-transparent white */
|
||||
--border-soft: rgba(255, 255, 255, 0.05); /* ultra-subtle divider */
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
--accent: #5e6ad2; /* brand indigo — CTA backgrounds */
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #828fff; /* lighter saturated hover */
|
||||
--accent-active: #4752c4; /* darker pressed state */
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #27a644; /* Linear green */
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
--font-display: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
||||
--font-body: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §Typography Hierarchy.
|
||||
* Linear's display range 72px→10px; the 8 schema slots map the
|
||||
* key stops. 64px secondary-hero lives inline in components.html. */
|
||||
--text-xs: 12px; /* label / micro */
|
||||
--text-sm: 14px; /* caption large / link small */
|
||||
--text-base: 16px; /* body — standard reading */
|
||||
--text-lg: 18px; /* body large — feature descriptions */
|
||||
--text-xl: 24px; /* heading 2 */
|
||||
--text-2xl: 32px; /* heading 1 */
|
||||
--text-3xl: 48px; /* display — section headlines */
|
||||
--text-4xl: 72px; /* display XL — hero */
|
||||
|
||||
/* Leading + tracking.
|
||||
* --leading-tight=1.00: Linear's signature "engineered" compression.
|
||||
* h2 (32px) → 1.13; h3 (24px) → 1.33 per DESIGN.md spec.
|
||||
* --tracking-display: -0.022em = -1.584px / 72px normalized. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.00;
|
||||
--tracking-display: -0.022em;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — DESIGN.md §Whitespace Philosophy. */
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* 6px for buttons/inputs (comfortable), 8px cards, 12px panels. */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* On dark surfaces: luminance stepping, not opaque drop shadows.
|
||||
--elev-raised uses semi-transparent border-as-shadow technique. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised:
|
||||
rgba(0, 0, 0, 0.4) 0px 2px 4px,
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
/* Multi-layer stack per DESIGN.md §6 + §7: accent ring makes the
|
||||
indicator visible on the near-black #08090a canvas. */
|
||||
--focus-ring:
|
||||
0 0 0 2px color-mix(in oklab, var(--accent), transparent 30%),
|
||||
0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Loom
|
||||
description: "Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate."
|
||||
category: "Themed & Unique"
|
||||
colors:
|
||||
background: "#ffffff"
|
||||
surface: "#f7f7f8"
|
||||
border: "#e4e4e7"
|
||||
primary: "#625df5"
|
||||
primary-hover: "#5048e5"
|
||||
text: "#1f1f23"
|
||||
text-secondary: "#6b6d76"
|
||||
text-tertiary: "#9b9ca3"
|
||||
typography:
|
||||
fonts: "Inter, Helvetica"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Loom Design System
|
||||
|
||||
> Category: Themed & Unique
|
||||
> Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
A friendly, fast video-first async communication tool. Loom's design feels like a well-made productivity app — approachable, clean, and professional without being corporate. Purple accent (#625DF5) signals creativity and video without being loud. Information density is moderate, with generous whitespace that lets content breathe.
|
||||
|
||||
- **Visual style:** clean, friendly, content-first
|
||||
- **Color stance:** bright surfaces with purple accent
|
||||
- **Design intent:** keep outputs recognizable to this style family while preserving usability and readability
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Surface Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Background | `#FFFFFF` | Primary canvas |
|
||||
| Surface | `#F7F7F8` | Cards, sidebars, elevated panels |
|
||||
| Border | `#E4E4E7` | Dividers, input borders |
|
||||
|
||||
### Data Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Primary | `#625DF5` | CTAs, active states, video progress |
|
||||
| Primary Hover | `#5048E5` | Button hover state |
|
||||
| Text | `#1F1F23` | All text |
|
||||
| Text Secondary | `#6B6D76` | Timestamps, metadata, captions |
|
||||
| Text Tertiary | `#9B9CA3` | Placeholders, disabled states |
|
||||
| Error | `#D64770` | Error states |
|
||||
| Recording | `#EF440C` | Active recording indicator |
|
||||
|
||||
### Light Mode
|
||||
|
||||
Default. A content-first tool used in bright office environments.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-bg: #FFFFFF;
|
||||
--color-surface: #F7F7F8;
|
||||
--color-border: #E4E4E7;
|
||||
--color-primary: #625DF5;
|
||||
--color-primary-hover: #5048E5;
|
||||
--color-text: #1F1F23;
|
||||
--color-text-secondary: #6B6D76;
|
||||
--color-text-tertiary: #9B9CA3;
|
||||
--color-error: #D64770;
|
||||
--color-recording: #EF440C;
|
||||
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
--shadow-card: 0 1px 3px rgba(31, 31, 35, 0.08), 0 4px 12px rgba(31, 31, 35, 0.04);
|
||||
--shadow-card-hover: 0 4px 12px rgba(31, 31, 35, 0.12), 0 8px 24px rgba(31, 31, 35, 0.08);
|
||||
--shadow-overlay: 0 8px 32px rgba(31, 31, 35, 0.16), 0 2px 8px rgba(31, 31, 35, 0.08);
|
||||
--shadow-tooltip: 0 4px 12px rgba(31, 31, 35, 0.12);
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--transition-base: 200ms ease-out;
|
||||
--transition-fast: 100ms ease-out;
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
| Role | Size | Weight | Line Height |
|
||||
|------|------|--------|-------------|
|
||||
| Display | 28px | 700 | 1.2 |
|
||||
| H1 | 22px | 600 | 1.3 |
|
||||
| H2 | 18px | 600 | 1.4 |
|
||||
| Body | 14px | 400 | 1.5 |
|
||||
| Body Small | 13px | 400 | 1.5 |
|
||||
| Caption | 12px | 400 | 1.4 |
|
||||
| Button | 14px | 500 | 1.2 |
|
||||
| Micro | 11px | 500 | 1.2 |
|
||||
|
||||
**Font labels for catalog extraction:**
|
||||
|
||||
```
|
||||
Display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
H1: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
H2: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Body Small: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Caption: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Button: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Micro: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
```
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Video Thumbnail Card
|
||||
|
||||
```css
|
||||
.thumbnail-card {
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
.thumbnail-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.thumbnail-card:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
### Recording Indicator
|
||||
|
||||
```css
|
||||
@keyframes recording-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.recording-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-recording);
|
||||
animation: recording-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
```
|
||||
|
||||
### Input Field
|
||||
|
||||
```css
|
||||
.input-field {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.input-field:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(98, 93, 245, 0.15);
|
||||
}
|
||||
```
|
||||
|
||||
### Button Primary
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
```
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
Video-first layout. The video thumbnail dominates; metadata and actions cluster below. Clean horizontal rhythm with consistent 16px gaps between elements. Cards use 8px radius for a friendly but professional feel.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
Elevation is achieved through shadows only. `--shadow-card` for resting state, `--shadow-card-hover` for interactive lift, `--shadow-overlay` for modals and tooltips. No borders on cards — shadow conveys depth.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
- Do not use Tertiary `#9B9CA3` for body text — timestamps and metadata only
|
||||
- Do not use semantic colors directly as text — always pair with a sufficiently contrasting background
|
||||
- Do not mix button variants in a single CSS block — use separate selectors
|
||||
- Do not use `line-height: 1.0` on buttons — diacritics, emoji, and CJK glyphs clip; use `1.2` minimum
|
||||
- Do not use `#D64770` (Error) for small text under 18px on white — it is 4.2:1, below the 4.5:1 AA threshold for normal text (14px). Use `#D64770` only for large text (18px+) or pair with a darker background surface
|
||||
- Do not use white text on `#D64770` background for normal text — white on #D64770 is also 4.2:1 (fails AA). Use `#FDECEE` (light pink) background with dark red text instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
Video-first responsive layout. At narrower breakpoints, the video thumbnail stacks above metadata and actions. At ≥768px, a side-by-side layout (video left, actions right) activates. Touch targets minimum 44×44px at all breakpoints.
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
When generating a Loom-style interface, prompt the model to:
|
||||
- Use Inter for all UI text; ui-monospace for code snippets
|
||||
- Apply `--radius-lg` (8px) to cards, `--radius-md` (6px) to buttons, `--radius-sm` (4px) to inputs
|
||||
- Use 200ms ease-out for card hover transitions, 100ms for button press
|
||||
- Include a recording indicator dot with a 1.5s pulse animation
|
||||
- Primary color `#625DF5` for all CTAs and active states
|
||||
- Ensure secondary text (#6B6D76) passes 4.5:1 on white before use; tertiary text (#9B9CA3) is for timestamps/metadata only
|
||||
@@ -0,0 +1,306 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Lovable
|
||||
description: "Lovable's website radiates warmth through restraint."
|
||||
colors:
|
||||
palette: ["#f7f4ed", "#1c1c1c", "#eceae4", "#fcfbf8", "#5f5f5d", "#3b82f6"]
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Lovable
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (`#1c1c1c`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.
|
||||
|
||||
The custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal "tech company," Camera Plain has a humanist warmth — slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px–60px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses `ui-sans-serif, system-ui` as fallbacks, acknowledging that the custom typeface carries the brand personality.
|
||||
|
||||
What makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates `#1c1c1c` at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: `1px solid #eceae4` for light divisions and `1px solid rgba(28, 28, 28, 0.4)` for stronger interactive boundaries.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm parchment background (`#f7f4ed`) — not white, not beige, a deliberate cream that feels hand-selected
|
||||
- Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes
|
||||
- Opacity-driven color system: all grays derived from `#1c1c1c` at varying transparency levels
|
||||
- Inset shadow technique on buttons: `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset`
|
||||
- Warm neutral border palette: `#eceae4` for subtle, `rgba(28,28,28,0.4)` for interactive elements
|
||||
- Full-pill radius (`9999px`) used extensively for action buttons and icon containers
|
||||
- Focus state uses `rgba(0,0,0,0.1) 0px 4px 12px` shadow for soft, warm emphasis
|
||||
- shadcn/ui + Radix UI component primitives with Tailwind CSS utility styling
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Cream** (`#f7f4ed`): Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.
|
||||
- **Charcoal** (`#1c1c1c`): Primary text, headings, dark button backgrounds. Not pure black — organic warmth.
|
||||
- **Off-White** (`#fcfbf8`): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.
|
||||
|
||||
### Neutral Scale (Opacity-Based)
|
||||
- **Charcoal 100%** (`#1c1c1c`): Primary text, headings, dark surfaces.
|
||||
- **Charcoal 83%** (`rgba(28,28,28,0.83)`): Strong secondary text.
|
||||
- **Charcoal 82%** (`rgba(28,28,28,0.82)`): Body copy.
|
||||
- **Muted Gray** (`#5f5f5d`): Secondary text, descriptions, captions.
|
||||
- **Charcoal 40%** (`rgba(28,28,28,0.4)`): Interactive borders, button outlines.
|
||||
- **Charcoal 4%** (`rgba(28,28,28,0.04)`): Subtle hover backgrounds, micro-tints.
|
||||
- **Charcoal 3%** (`rgba(28,28,28,0.03)`): Barely-visible overlays, background depth.
|
||||
|
||||
### Surface & Border
|
||||
- **Light Cream** (`#eceae4`): Card borders, dividers, image outlines. The warm divider line.
|
||||
- **Cream Surface** (`#f7f4ed`): Card backgrounds, section fills — same as page background for seamless integration.
|
||||
|
||||
### Interactive
|
||||
- **Ring Blue** (`#3b82f6` at 50% opacity): `--tw-ring-color`, Tailwind focus ring.
|
||||
- **Focus Shadow** (`rgba(0,0,0,0.1) 0px 4px 12px`): Focus and active state shadow — soft, warm, diffused.
|
||||
|
||||
### Inset Shadows
|
||||
- **Button Inset** (`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`): The signature multi-layer inset shadow on dark buttons.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `Camera Plain Variable`, with fallbacks: `ui-sans-serif, system-ui`
|
||||
- **Weight range**: 400 (body/reading), 480 (special display), 600 (headings/emphasis)
|
||||
- **Feature**: Variable font with continuous weight axis — allows fine-tuned intermediary weights like 480.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00–1.10 (tight) | -1.5px | Maximum impact, editorial |
|
||||
| Display Alt | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (tight) | normal | Lighter hero variant |
|
||||
| Section Heading | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (tight) | -1.2px | Feature section titles |
|
||||
| Sub-heading | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (tight) | -0.9px | Sub-sections |
|
||||
| Card Title | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (tight) | normal | Card headings |
|
||||
| Body Large | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | Introductions |
|
||||
| Body | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
|
||||
| Button | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Button labels |
|
||||
| Button Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Compact buttons |
|
||||
| Link | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Underline decoration |
|
||||
| Link Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Footer links |
|
||||
| Caption | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Metadata, small text |
|
||||
|
||||
### Principles
|
||||
- **Warm humanist voice**: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.
|
||||
- **Variable weight as design tool**: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.
|
||||
- **Compression at scale**: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.
|
||||
- **Two weights, clear roles**: 400 (body/UI/links/buttons) and 600 (headings/emphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Dark (Inset Shadow)**
|
||||
- Background: `#1c1c1c`
|
||||
- Text: `#fcfbf8`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Shadow: `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`
|
||||
- Active: opacity 0.8
|
||||
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
|
||||
- Use: Primary CTA ("Start Building", "Get Started")
|
||||
|
||||
**Ghost / Outline**
|
||||
- Background: transparent
|
||||
- Text: `#1c1c1c`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- Border: `1px solid rgba(28,28,28,0.4)`
|
||||
- Active: opacity 0.8
|
||||
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
|
||||
- Use: Secondary actions ("Log In", "Documentation")
|
||||
|
||||
**Cream Surface**
|
||||
- Background: `#f7f4ed`
|
||||
- Text: `#1c1c1c`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 6px
|
||||
- No border
|
||||
- Active: opacity 0.8
|
||||
- Use: Tertiary actions, toolbar buttons
|
||||
|
||||
**Pill / Icon Button**
|
||||
- Background: `#f7f4ed`
|
||||
- Text: `#1c1c1c`
|
||||
- Radius: 9999px (full pill)
|
||||
- Shadow: same inset pattern as primary dark
|
||||
- Opacity: 0.5 (default), 0.8 (active)
|
||||
- Use: Additional actions, plan mode toggle, voice recording
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#f7f4ed` (matches page)
|
||||
- Border: `1px solid #eceae4`
|
||||
- Radius: 12px (standard), 16px (featured), 8px (compact)
|
||||
- No box-shadow by default — borders define boundaries
|
||||
- Image cards: `1px solid #eceae4` with 12px radius
|
||||
|
||||
### Inputs & Forms
|
||||
- Background: `#f7f4ed`
|
||||
- Text: `#1c1c1c`
|
||||
- Border: `1px solid #eceae4`
|
||||
- Radius: 6px
|
||||
- Focus: ring blue (`rgba(59,130,246,0.5)`) outline
|
||||
- Placeholder: `#5f5f5d`
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on cream background, fixed
|
||||
- Logo/wordmark left-aligned (128.75 x 22px)
|
||||
- Links: Camera Plain 14–16px weight 400, `#1c1c1c` text
|
||||
- CTA: dark button with inset shadow, 6px radius
|
||||
- Mobile: hamburger menu with 6px radius button
|
||||
- Subtle border or no border on scroll
|
||||
|
||||
### Links
|
||||
- Color: `#1c1c1c`
|
||||
- Decoration: underline (default)
|
||||
- Hover: primary accent (via CSS variable `hsl(var(--primary))`)
|
||||
- No color change on hover — decoration carries the interactive signal
|
||||
|
||||
### Image Treatment
|
||||
- Showcase/portfolio images with `1px solid #eceae4` border
|
||||
- Consistent 12px border radius on all image containers
|
||||
- Soft gradient backgrounds behind hero content (warm multi-color wash)
|
||||
- Gallery-style presentation for template/project showcases
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**AI Chat Input**
|
||||
- Large prompt input area with soft borders
|
||||
- Suggestion pills with `#eceae4` borders
|
||||
- Voice recording / plan mode toggle buttons as pill shapes (9999px)
|
||||
- Warm, inviting input area — not clinical
|
||||
|
||||
**Template Gallery**
|
||||
- Card grid showing project templates
|
||||
- Each card: image + title, `1px solid #eceae4` border, 12px radius
|
||||
- Hover: subtle shadow or border darkening
|
||||
- Category labels as text links
|
||||
|
||||
**Stats Bar**
|
||||
- Large metrics: "0M+" pattern in 48px+ weight 600
|
||||
- Descriptive text below in muted gray
|
||||
- Horizontal layout with generous spacing
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px
|
||||
- The scale expands generously at the top end — sections use 80px–208px vertical spacing for editorial breathing room
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px (centered)
|
||||
- Hero: centered single-column with massive vertical padding (96px+)
|
||||
- Feature sections: 2–3 column grids
|
||||
- Full-width footer with multi-column link layout
|
||||
- Showcase sections with centered card grids
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Editorial generosity**: Lovable's spacing is lavish at section boundaries (80px–208px). The warm cream background makes these expanses feel cozy rather than empty.
|
||||
- **Content-driven rhythm**: Tight internal spacing within cards (12–24px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.
|
||||
- **Section separation**: Footer uses `1px solid #eceae4` border and 16px radius container. Sections defined by generous spacing rather than border lines.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (4px): Small buttons, interactive elements
|
||||
- Standard (6px): Buttons, inputs, navigation menu
|
||||
- Comfortable (8px): Compact cards, divs
|
||||
- Card (12px): Standard cards, image containers, templates
|
||||
- Container (16px): Large containers, footer sections
|
||||
- Full Pill (9999px): Action pills, icon buttons, toggles
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, cream background | Page surface, most content |
|
||||
| Bordered (Level 1) | `1px solid #eceae4` | Cards, images, dividers |
|
||||
| Inset (Level 2) | `rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px` | Dark buttons, primary actions |
|
||||
| Focus (Level 3) | `rgba(0,0,0,0.1) 0px 4px 12px` | Active/focus states |
|
||||
| Ring (Accessibility) | `rgba(59,130,246,0.5)` 2px ring | Keyboard focus on inputs |
|
||||
|
||||
**Shadow Philosophy**: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders (`#eceae4`) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons — a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (`rgba(0,0,0,0.1) 0px 4px 12px`) is deliberately diffused and large, creating a soft glow rather than a sharp outline.
|
||||
|
||||
### Decorative Depth
|
||||
- Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero — atmospheric, barely visible
|
||||
- Footer: gradient background with warm tones transitioning to the bottom
|
||||
- No harsh section dividers — spacing and background warmth handle transitions
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use the warm cream background (`#f7f4ed`) as the page foundation — it's the brand's signature warmth
|
||||
- Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)
|
||||
- Derive all grays from `#1c1c1c` at varying opacity levels for tonal unity
|
||||
- Use the inset shadow technique on dark buttons for tactile depth
|
||||
- Use `#eceae4` borders instead of shadows for card containment
|
||||
- Keep the weight system narrow: 400 for body/UI, 600 for headings
|
||||
- Use full-pill radius (9999px) only for action pills and icon buttons
|
||||
- Apply opacity 0.8 on active states for responsive tactile feedback
|
||||
|
||||
### Don't
|
||||
- Don't use pure white (`#ffffff`) as a page background — the cream is intentional
|
||||
- Don't use heavy box-shadows for cards — borders are the containment mechanism
|
||||
- Don't introduce saturated accent colors — the palette is intentionally warm-neutral
|
||||
- Don't use weight 700 (bold) — 600 is the maximum weight in the system
|
||||
- Don't apply 9999px radius on rectangular buttons — pills are for icon/action toggles
|
||||
- Don't use sharp focus outlines — the system uses soft shadow-based focus indicators
|
||||
- Don't mix border styles — `#eceae4` for passive, `rgba(28,28,28,0.4)` for interactive
|
||||
- Don't increase letter-spacing on headings — Camera Plain is designed to run tight at scale
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <600px | Tight single column, reduced padding |
|
||||
| Mobile | 600–640px | Standard mobile layout |
|
||||
| Tablet Small | 640–700px | 2-column grids begin |
|
||||
| Tablet | 700–768px | Card grids expand |
|
||||
| Desktop Small | 768–1024px | Multi-column layouts |
|
||||
| Desktop | 1024–1280px | Full feature layout |
|
||||
| Large Desktop | 1280–1536px | Maximum content width, generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons: 8px 16px padding (comfortable touch)
|
||||
- Navigation: adequate spacing between items
|
||||
- Pill buttons: 9999px radius creates large tap-friendly targets
|
||||
- Menu toggle: 6px radius button with adequate sizing
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 60px → 48px → 36px headline scaling with proportional letter-spacing
|
||||
- Navigation: horizontal links → hamburger menu at 768px
|
||||
- Feature cards: 3-column → 2-column → single column stacked
|
||||
- Template gallery: grid → stacked vertical cards
|
||||
- Stats bar: horizontal → stacked vertical
|
||||
- Footer: multi-column → stacked single column
|
||||
- Section spacing: 128px+ → 64px on mobile
|
||||
|
||||
### Image Behavior
|
||||
- Template screenshots maintain `1px solid #eceae4` border at all sizes
|
||||
- 12px border radius preserved across breakpoints
|
||||
- Gallery images responsive with consistent aspect ratios
|
||||
- Hero gradient softens/simplifies on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Charcoal (`#1c1c1c`)
|
||||
- Background: Cream (`#f7f4ed`)
|
||||
- Heading text: Charcoal (`#1c1c1c`)
|
||||
- Body text: Muted Gray (`#5f5f5d`)
|
||||
- Border: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive)
|
||||
- Focus: `rgba(0,0,0,0.1) 0px 4px 12px`
|
||||
- Button text on dark: `#fcfbf8`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius)."
|
||||
- "Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d."
|
||||
- "Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening."
|
||||
- "Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius."
|
||||
- "Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always use cream (`#f7f4ed`) as the base — never pure white
|
||||
2. Derive grays from `#1c1c1c` at opacity levels rather than using distinct hex values
|
||||
3. Use `#eceae4` borders for containment, not shadows
|
||||
4. Letter-spacing scales with size: -1.5px at 60px, -1.2px at 48px, -0.9px at 36px, normal at 16px
|
||||
5. Two weights: 400 (everything except headings) and 600 (headings)
|
||||
6. The inset shadow on dark buttons is the signature detail — don't skip it
|
||||
7. Camera Plain Variable at weight 480 is for special display moments only
|
||||
@@ -0,0 +1,5 @@
|
||||
# Lovable Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/lovable/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,375 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Mastercard
|
||||
description: "Mastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange."
|
||||
colors:
|
||||
palette: ["#f3f0ee", "#141413", "#eb001b", "#f79e1b", "#cf4500", "#f37338"]
|
||||
typography:
|
||||
fonts: "Circular, Inter, Neue Haas, Geist"
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Mastercard
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Mastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange. The canvas is a muted putty-cream (`#F3F0EE`) — not white, not gray, but a color that feels like the paper of a premium annual report. On top of that canvas, everything that matters is shaped like a stadium, a pill, or a perfect circle. The dominant visual gesture is the **oversized radius**: heroes carry 40-point corners, cards go fully pill-shaped, service images are cropped into circular orbits, and buttons either complete the pill or fit snugly at 20 points. There are almost no sharp corners anywhere on the page.
|
||||
|
||||
The second gesture is **orbit and trajectory**. Circular image masks don't sit still — they're connected by thin, hand-drawn-feeling orange arcs that span entire viewport widths, implying a constellation of services rather than a list. Each circle has a small attached "satellite" — a white micro-CTA holding an arrow icon — docked onto its perimeter like a moon. This is the most distinctive thing about Mastercard's current design language: the circles feel like they're in motion even though the page is still.
|
||||
|
||||
Typography is rendered entirely in **MarkForMC**, Mastercard's proprietary geometric sans. Headlines are set at a medium weight (500) with tight negative letter-spacing (-2%), giving them confidence without shouting. Body copy runs at the same family in a slightly lighter weight (450) — a weight you rarely see on the web, chosen because it reads softer than regular 400 without feeling thin. The whole system — warm cream surfaces, pill shapes, circular portraits, traced-orange orbits, black CTAs — feels simultaneously institutional (a 60-year-old payments network) and editorial (a modern brand magazine), which is exactly the tension Mastercard wants to hold.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm cream canvas (`#F3F0EE`) replaces traditional white — every surface is tinted, never sterile
|
||||
- Extreme border-radius as design language: 40px, 99px, 1000px dominate; anything square is a cookie-banner third-party
|
||||
- Circular image portraits with attached white satellite-CTAs and traced-orange orbital paths
|
||||
- Ghost "watermark" headlines (cream-on-cream text at heading scale) layered behind circle portraits
|
||||
- Black primary CTAs with 20px radius in the body — the cookie-banner orange is kept to consent flows
|
||||
- Floating pill-shaped navigation that docks below the viewport top with rounded shoulders
|
||||
- Eyebrow labels with a tiny accent dot + uppercase bold tracking — used as the section-category signal
|
||||
- Dark warm-black footer (`#141413`) with four-column link layout and large conversational headline
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Mastercard Red** (`#EB001B`): The left circle of the Mastercard mark — used only in the brand logo, never as a UI color.
|
||||
- **Mastercard Yellow** (`#F79E1B`): The right circle of the Mastercard mark — used only in the brand logo, never as a UI color.
|
||||
- **Ink Black** (`#141413`): The warm near-black used for primary CTAs, headline text on cream, and the footer surface. Slightly warm (the `13` blue value pulls toward the cream) so it never feels jet-black on the warm canvas.
|
||||
|
||||
### Secondary & Accent
|
||||
- **Signal Orange** (`#CF4500`): The burnt/rust CTA orange used on consent actions and eyebrow dots. Deeper than the brand yellow, brighter than ink — it's the page's single aggressive color and must be used sparingly.
|
||||
- **Light Signal Orange** (`#F37338`): A lighter carroty orange used for carousel active indicators and decorative orbital arcs. Always acts as an attention cue, never as body color.
|
||||
- **Clay Brown** (`#9A3A0A`): The deep rust used for secondary link-style buttons (e.g., cookie details). Sits between ink and signal orange.
|
||||
|
||||
### Surface & Background
|
||||
- **Canvas Cream** (`#F3F0EE`): The page canvas. Warm, putty-toned, the default body background. All editorial sections sit on this.
|
||||
- **Lifted Cream** (`#FCFBFA`): One step lighter than canvas — used for nested "raised" sections that want to feel like paper laid on paper.
|
||||
- **White** (`#FFFFFF`): Reserved for the floating navigation pill, modal cards, secondary button fills, and small satellite-CTA circles attached to image portraits.
|
||||
- **Soft Bone** (`#F4F4F4`): A cool-gray alternative surface used inside a handful of component subregions.
|
||||
|
||||
### Neutrals & Text
|
||||
- **Ink Black** (`#141413`): Primary headline and body text color.
|
||||
- **Charcoal** (`#262627`): A slightly softer black used for some text alternates.
|
||||
- **Slate Gray** (`#696969`): Muted secondary text — eyebrow label alternative, disabled states, "Privacy Choices" bottom-row text.
|
||||
- **Granite** (`#555555`) and **Graphite** (`#565656`): Deeper gray for inline body accents and link alternates.
|
||||
- **Dust Taupe** (`#D1CDC7`): Very muted cream-gray used for disabled or "whisper" text (e.g., placeholder-like empty state labels). Low contrast on cream; use only for subdued content.
|
||||
|
||||
### Semantic & Accent
|
||||
- **Link Blue** (`#3860BE`): A deep, slightly dusty blue used for inline links and informational callouts. Saturated enough to read as a link without being neon.
|
||||
- **Priceless Red + Yellow**: The full-color Mastercard logo mark is the only place the brand's red and yellow appear together; they lock the identity to the page without acting as a UI palette.
|
||||
|
||||
### Gradient System
|
||||
Mastercard uses no programmatic gradients in the core UI. The visual impression of "gradient" comes from two places:
|
||||
- **Circular image portraits** where a warm-orange photo subject (a card, a sunflower, a beverage) fades to the cream canvas at its edge
|
||||
- **Deep card shadows** on elevated content (`rgba(0,0,0,0.08) 0px 24px 48px`) that create a soft halo beneath pill-shaped media
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `MarkForMC` — Mastercard's proprietary geometric sans. Every headline, body paragraph, button, nav link, and footer link on the page.
|
||||
- **Secondary**: `MarkOffcForMC` — an "Official" cut used in a minority of contexts (legal text, some forms).
|
||||
- **Fallback stack**: `SofiaSans, Arial, sans-serif` — Sofia Sans is a reasonable open-source stand-in; Arial is the final web-safe fallback.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|--------|-------------|----------------|-------|
|
||||
| H1 (hero) | 64px | 500 | 64px | -1.28px (-2%) | Set to `1:1` line-height for very tight vertical rhythm on multi-line hero |
|
||||
| H2 (section) | 36px | 500 | 44px | -0.72px (-2%) | Used in ghost-watermark headline treatments and section titles |
|
||||
| H3 (card title) | 24px | 500 | 28.8px (1.2) | -0.48px (-2%) | Titles inside service/solution cards |
|
||||
| H4 (subhead) | 14px | 700 | 18.2px (1.3) | normal | Rarely used in marketing surfaces |
|
||||
| Eyebrow (H5) | 14px | 700 | 14px | 0.56px (+4%) | Uppercase, paired with a tiny accent dot (e.g., "• SERVICES") |
|
||||
| Body paragraph | 16px | 450 | 22.4px (1.4) | normal | The half-step 450 weight is MarkForMC's signature — softer than 500, firmer than 400 |
|
||||
| Nav link / Button label | 16px | 500 | 16px | -0.48px (-3%) | Tight, compact, no text-transform |
|
||||
| Footer link | 14px | 450 | ~20px | normal | Lighter weight on dark footer for airier density |
|
||||
| Footer column header | 12–14px | 700 | 14px | 0.56px (+4%) | Uppercase, muted gray, short tracking |
|
||||
|
||||
### Principles
|
||||
- **Weight 450 is load-bearing**. Most brands use 400/500/700; Mastercard uses 450 for body copy, which creates an unusually soft reading tone. Replacing it with 400 flattens the identity.
|
||||
- **Tight negative tracking on headlines** (-2%) gives display text its editorial density — the words lock together rather than breathe.
|
||||
- **Uppercase tracking only on the eyebrow scale** (14px / 700 / +4% tracking). Don't use uppercase anywhere else; no shouty section titles.
|
||||
- **One-font system**. Resist the urge to add a second typeface for contrast. The contrast comes from scale, weight, and letter-spacing, not from a serif or display accent.
|
||||
- **Line-height ratio drops with size**. H1 is 1:1, H3 is 1.2, body is 1.4. Tight display, comfortable reading.
|
||||
|
||||
### Note on Font Substitutes
|
||||
MarkForMC is proprietary and licensed. When rebuilding a matching aesthetic without access to the original:
|
||||
- **Sofia Sans** (Google Fonts) is the closest open-source match — it's already in Mastercard's declared fallback stack.
|
||||
- **Inter** at weights 450/500/700 works as a generic stand-in; expect slightly taller x-height and looser letter shapes.
|
||||
- **Neue Haas Grotesk** or **Geist** can approximate the geometric feel for commercial projects.
|
||||
- Whichever substitute is used, preserve the **-2% letter-spacing on headlines** and the **450 body weight** (use `font-weight: 450` with variable fonts, or substitute `font-weight: 400` and tighten the letter-spacing by ~-0.5% to compensate).
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary — Ink Pill**
|
||||
- Background: Ink Black (`#141413`)
|
||||
- Text: Canvas Cream (`#F3F0EE`) — not pure white
|
||||
- Border: 1.5px solid Ink Black (same as bg, creates crisp edge)
|
||||
- Radius: 20px
|
||||
- Padding: 6px 24px
|
||||
- Font: MarkForMC 16px / weight 500 / letter-spacing -0.32px
|
||||
- Default: as above; solid warm-black pill on cream canvas
|
||||
- Active / pressed: subtle inward-shrink or 2px offset (not a hover variant)
|
||||
- Use for: all marketing CTAs in the page body ("Learn more", "Explore", "Discover")
|
||||
|
||||
**Secondary — Outlined Pill**
|
||||
- Background: White (`#FFFFFF`)
|
||||
- Text: Ink Black (`#141413`)
|
||||
- Border: 1.5px solid Ink Black
|
||||
- Radius: 20px
|
||||
- Padding: 6px 24px
|
||||
- Font: MarkForMC 16px / weight 450 / line-height 20.8px
|
||||
- Default: white-on-cream pill with crisp ink outline
|
||||
- Active / pressed: subtle compression
|
||||
- Use for: secondary actions paired with a primary, or standalone utility CTAs
|
||||
|
||||
**Consent / Signal — Orange Pill**
|
||||
- Background: Signal Orange (`#CF4500`)
|
||||
- Text: White (`#FFFFFF`)
|
||||
- Border: 0
|
||||
- Radius: 24px
|
||||
- Padding: 1px 30px (very tight vertical, wide horizontal)
|
||||
- Font: MarkForMC 13px / weight 400 / letter-spacing 0.13px
|
||||
- Default: as above; bright rust pill with white text
|
||||
- Use for: cookie consent, privacy preference, and other legally-distinct confirmations. **Do not** use this orange for marketing CTAs — it reads as a compliance color.
|
||||
|
||||
**Satellite — Circular Micro-CTA**
|
||||
- Background: White (`#FFFFFF`)
|
||||
- Icon: Ink Black arrow (`→`) at ~20px
|
||||
- Border: none
|
||||
- Radius: 50% (perfect circle)
|
||||
- Size: ~50–60px diameter
|
||||
- Shadow: none or very subtle (the portrait's shadow carries the elevation)
|
||||
- Default: docks onto the bottom-right edge of a circular portrait, protruding partway outside the portrait's circle
|
||||
- Use for: the primary entry point into service/solution cards; always paired with a circular portrait
|
||||
|
||||
**Icon-Only Circle Button (carousel, play/pause)**
|
||||
- Background: transparent or white
|
||||
- Icon: 10–20px centered
|
||||
- Border: 1px solid Ink Black (when on cream) or none (when over media)
|
||||
- Radius: 50%
|
||||
- Size: 40px diameter minimum for carousel controls; 80px for hero video play
|
||||
- Use for: carousel pagination/play-pause, hero video play, search toggle
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**Hero Media Frame (Stadium)**
|
||||
- Background: Dark video or full-bleed imagery (typically black `#000000` or `#2B2B2B` behind video)
|
||||
- Radius: 40px all corners (creates a stadium shape on wide viewports)
|
||||
- Width: ~full viewport minus ~48px gutter on each side
|
||||
- Height: ~60–70% of viewport
|
||||
- Shadow: none (sits directly on canvas)
|
||||
- Corners: the extreme 40px radius on a media element is the most iconic Mastercard gesture — do not round less
|
||||
|
||||
**Service / Solution Portrait Card**
|
||||
- Shape: Perfect circle (radius 50%) or ellipse (radius 999px / 1000px)
|
||||
- Diameter: 260–340px desktop; ~220px mobile
|
||||
- Image crop: square source, cropped to circle
|
||||
- Attached element: White satellite circular CTA (see above) docked bottom-right, ~40% outside the portrait
|
||||
- Eyebrow below: accent dot + uppercase label (e.g., "• SERVICES", "• SOLUTIONS")
|
||||
- Title below: H3 (24px / weight 500 / -2% tracking), 1–2 lines max
|
||||
- Decorative orbit: thin ~1px Light Signal Orange curved line spanning from this card outward to the next, implying connection
|
||||
|
||||
**Pill Carousel Card**
|
||||
- Radius: 1000px (full pill) or 40px corners (rounded stadium)
|
||||
- Width: ~40–60% of viewport
|
||||
- Height: ~380–420px (portrait-pill orientation)
|
||||
- Content: full-bleed photography with small overlaid chip labels
|
||||
- Chip inside: White pill (~ 999px radius), Ink Black text, padding 8px 20px, used for category tags like "Story"
|
||||
- Large inline CTA inside: Ink Pill button, oversized (padding 16px 40px, radius 40px)
|
||||
|
||||
**Ghost Watermark Text Block**
|
||||
- Font: MarkForMC 72–128px / weight 500 / tight -2% tracking
|
||||
- Color: Canvas Cream slightly darkened (`#E8E2DA` or similar — cream-on-cream)
|
||||
- Position: layered behind portrait circles, bleeding off the viewport edge
|
||||
- Purpose: sets section theme without competing with foreground copy
|
||||
|
||||
### Inputs & Forms
|
||||
Minimal form surface on the marketing page. The search input in the nav header is:
|
||||
- Initial state: a 48px circular button with a magnifier icon
|
||||
- Expanded state: horizontal input field, border `1px solid` Ink Black at ~50% opacity, radius 999px, padding 12px 24px, white background
|
||||
|
||||
**Country/language selector (footer)**
|
||||
- Background: Ink Black (same as footer)
|
||||
- Text: White
|
||||
- Border: 1px solid `rgba(255,255,255,0.4)`
|
||||
- Radius: 999px (full pill)
|
||||
- Icon: downward chevron on the right
|
||||
|
||||
### Navigation
|
||||
|
||||
**Floating Nav Pill (desktop)**
|
||||
- Container: white-to-translucent-white pill floating below the very top of the viewport with a ~24px top margin
|
||||
- Radius: 999px / 1000px (full pill)
|
||||
- Padding: ~16px 40px internal
|
||||
- Shadow: very soft (`rgba(0, 0, 0, 0.04) 0px 4px 24px 0px`) — just enough to lift it off the cream canvas
|
||||
- Content: Mastercard logo left, primary link group center ("For you", "For business", "For the world", "For innovators", "News and trends"), search icon right
|
||||
- Link spacing: ~48–56px gap between primary links
|
||||
- Link style: Ink Black, weight 500, 16px, no underline, no pill surround until active
|
||||
|
||||
**Mobile Nav**
|
||||
- The same pill shape but collapsed to: logo + hamburger menu button + search icon only
|
||||
- Menu opens into a full-screen overlay with the primary links stacked vertically
|
||||
|
||||
### Image Treatment
|
||||
|
||||
- **Aspect ratios used**: 1:1 (all service portraits — cropped to circle), ~3:4 or ~4:5 (carousel pill cards), 16:9 or wider (hero video frame)
|
||||
- **Full-bleed vs padded**: Hero is viewport-wide with gutters; service portraits are always centered in their column with generous whitespace around; footer imagery is rare
|
||||
- **Masking**: Aggressive circular masking is the defining treatment — square source images are cropped to perfect circles of matching diameter. Never use rectangular service imagery.
|
||||
- **Lazy loading**: Standard `loading="lazy"` with a soft blur-up transition from a cream-tinted placeholder, preserving the warm palette during load
|
||||
|
||||
### Decorative Orbital Lines
|
||||
|
||||
A signature motif: thin (~1–1.5px) single-weight curved lines in Light Signal Orange (`#F37338`) tracing arcs between circular portraits. These lines:
|
||||
- Imply connection between service cards without literal arrows
|
||||
- Span widths from ~200px up to full-viewport arcs
|
||||
- Feel hand-drawn (subtle irregularity) rather than perfect CSS curves
|
||||
- Appear only in sections with circular portrait content — never on pill sections, never in the footer
|
||||
|
||||
### Footer
|
||||
|
||||
- Background: Ink Black (`#141413`)
|
||||
- Text: White
|
||||
- Padding: 48px horizontal 100px / bottom 148px (very tall bottom space)
|
||||
- Structure: large conversational H2 ("We're always here when you need us") left-aligned, then a 4-column link grid below
|
||||
- Column headers: uppercase, muted, weight 700, letter-spacing +4%
|
||||
- Link rows: white, weight 450, 14px; entries prefixed with a small icon (support bubble, card, map pin, question mark) for the "NEED HELP?" column
|
||||
- External link marker: a small upper-right arrow (`↗`) after link text
|
||||
- Bottom row (below a 1px white-at-opacity divider): copyright + privacy small-print + country-language pill dropdown + four social icons (LinkedIn, Facebook, X, YouTube)
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px (confirmed by dembrandt extraction and computed styles)
|
||||
- **Scale**: 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 (powers of 8)
|
||||
- **Section vertical padding**: ~96–128px between major sections on desktop; ~48–64px on mobile
|
||||
- **Card internal padding**: 32–40px on desktop, ~24px on mobile
|
||||
- **Nav top margin**: ~24px from viewport top (the pill floats, doesn't touch)
|
||||
|
||||
### Grid & Container
|
||||
- **Max content width**: ~1200–1280px centered, with ~48–100px horizontal gutter
|
||||
- **Column pattern**: 12-column implied, but practical layouts use 2-up asymmetric (large headline left, supporting text right), 1-up full-bleed (hero, video), or staggered single-portrait placement (service cards sit in varying grid positions creating the "constellation" feel)
|
||||
- **Footer grid**: 4 equal columns on desktop, collapses to single column accordion on mobile
|
||||
|
||||
### Whitespace Philosophy
|
||||
Mastercard treats whitespace as structure, not absence. A typical service section has:
|
||||
- A ghost headline occupying the top ~40% of the section (mostly empty cream)
|
||||
- A single circular portrait positioned ~60% down, asymmetric to left or right
|
||||
- ~300–500px of blank canvas between the portrait and the next section
|
||||
This deliberate emptiness tells the eye "slow down, read one thing at a time" — the opposite of dense dashboard UIs.
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Radius | Use |
|
||||
|--------|-----|
|
||||
| 3–6px | Tiny decorative elements, cookie banner micro-chips |
|
||||
| 20px | Primary and secondary body CTAs (the signature button radius) |
|
||||
| 24px | Consent/orange pill buttons, modal inner chips |
|
||||
| 40px | Hero media frames, large section container corners, H2 pill labels |
|
||||
| 50% | Circular portraits, icon-only buttons, satellite CTAs |
|
||||
| 99px / 999px / 1000px | Full pill shapes — navigation, carousel cards, footer country selector, primary inline chips |
|
||||
|
||||
The scale is unusual: most systems use 4/8/12/16. Mastercard skips those and commits to **either small (≤6), medium-large (20–40), or full-pill (99+)**. The middle ground of 8–12 is absent, which is why the UI feels either "precise and utility" or "soft and editorial" with no in-between.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| 0 | No shadow | The default — 95% of surfaces sit directly on cream canvas |
|
||||
| 1 | `rgba(0, 0, 0, 0.04) 0px 4px 24px 0px` | Floating nav pill — barely-there lift |
|
||||
| 2 | `rgba(0, 0, 0, 0.08) 0px 24px 48px 0px` | Hero media frames, elevated cards — a soft large-radius halo rather than a hard drop |
|
||||
| 3 | `rgba(0, 0, 0, 0.25) 0px 70px 110px 0px` | Rare; dramatic elevation on a feature tile |
|
||||
|
||||
### Shadow Philosophy
|
||||
Mastercard uses shadows as **atmospheric cushioning**, not directional light. The Level 2 shadow has a 48px spread and only 8% opacity — it barely exists as dark pixels but creates a "the card is breathing above the canvas" feel. There are almost no hard-edged, tight shadows anywhere in the system. Border lines are preferred over shadows for functional delineation (form inputs, footer divider).
|
||||
|
||||
### Decorative Depth
|
||||
- **Orbital arcs** (Light Signal Orange, ~1px): trace connective paths across sections
|
||||
- **Ghost watermark headlines**: cream-on-cream text gives sections an almost-pressed-paper quality
|
||||
- **Circle-image fade**: warm-toned photography at the edge of circular portraits dissolves into the canvas, implying soft atmospheric depth
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use Canvas Cream (`#F3F0EE`) as the default body background — never pure white
|
||||
- Mask service/feature imagery as perfect circles, not rectangles or rounded rectangles
|
||||
- Attach a white satellite CTA to the bottom-right of each circular portrait
|
||||
- Set headlines in MarkForMC weight 500 with -2% letter-spacing
|
||||
- Use weight 450 (not 400) for body paragraphs
|
||||
- Keep primary CTAs as Ink Black pills (20px radius) with cream text
|
||||
- Use Signal Orange only on consent, legal, or compliance actions
|
||||
- Float the nav as a rounded white pill below the viewport top, not flush at y=0
|
||||
- Build page rhythm from three surface tones: canvas cream → lifted cream → ink footer
|
||||
- Use thin Light Signal Orange arcs between service cards to imply connection
|
||||
|
||||
### Don't
|
||||
- Don't use pure white as a page background — it breaks the warm editorial tone
|
||||
- Don't round image frames at 8–16px — Mastercard either uses full-pill, 40px, or full-circle. In-between radii look generic
|
||||
- Don't use Signal Orange for marketing CTAs — it reads as cookie-consent orange and dilutes the legal color signal
|
||||
- Don't mix typefaces — no serif accent, no script, no secondary display font
|
||||
- Don't crowd the nav with more than six top-level links — the pill is meant to feel airy
|
||||
- Don't drop hard shadows — all elevation should use 48px+ spread and ≤10% opacity
|
||||
- Don't use uppercase for anything larger than the 14px eyebrow label
|
||||
- Don't omit the tiny accent dot before eyebrow labels — it's the identity
|
||||
- Don't place circular portraits on a grid — their magic comes from asymmetric placement
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | ≤ 767px | Nav pill shows logo + menu + search only; primary links hide behind hamburger; service portraits stack single-column centered; hero headline drops from 64px to ~40px; footer columns collapse into a vertical accordion |
|
||||
| Tablet | 768–1023px | Nav pill shows 2–3 primary links truncated; service portraits arrange 2-up; hero headline ~48px |
|
||||
| Desktop | ≥ 1024px | Full nav with 5 primary links centered; service portraits asymmetrically placed with decorative orbital lines; hero headline 64px |
|
||||
| Wide | ≥ 1440px | Content max-width caps at ~1280px; gutters grow symmetrically; orbital lines extend further |
|
||||
|
||||
### Touch Targets
|
||||
All interactive elements comfortably exceed 44×44px. The satellite CTA (circle + arrow) is ~50–60px. The nav pill buttons are ~48px tall. Mobile hamburger and search are 48×48px. No link or button drops below 40px in any breakpoint.
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Nav**: full pill → compact pill with hamburger. Pill shape is preserved across breakpoints — always rounded, always floating.
|
||||
- **Service grid**: asymmetric constellation → 2-up → 1-up stack. Orbital arcs are removed on mobile (they only work with asymmetric placement).
|
||||
- **Spacing**: section vertical padding compresses from 128px to 48px on mobile.
|
||||
- **Content**: two-column hero (headline left / supporting text right) becomes stacked (headline on top, supporting text below).
|
||||
- **Footer**: 4 columns → 1 column accordion with chevron toggles per section.
|
||||
|
||||
### Image Behavior
|
||||
Circular portraits scale proportionally (maintaining the perfect circle at every size). Hero video frames maintain their 40px radius at every breakpoint, but the frame itself shrinks with the viewport. Lazy loading is standard with a cream-tinted blur-up placeholder, preserving the palette during load.
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: "Ink Black (`#141413`) — the warm near-black used for primary pill buttons and footer"
|
||||
- Background: "Canvas Cream (`#F3F0EE`) — warm putty body canvas, never pure white"
|
||||
- Lifted surface: "Lifted Cream (`#FCFBFA`) — one step lighter than canvas for nested sections"
|
||||
- Heading text: "Ink Black (`#141413`)"
|
||||
- Body text: "Ink Black (`#141413`) at weight 450"
|
||||
- Muted text: "Slate Gray (`#696969`)"
|
||||
- Signal / Consent: "Signal Orange (`#CF4500`) — reserve for cookie consent and legal actions"
|
||||
- Accent arc: "Light Signal Orange (`#F37338`) — orbital decorative lines only"
|
||||
- Border / Outline: "Ink Black at 1.5px for pill buttons; 1px at low opacity elsewhere"
|
||||
- Footer: "Ink Black (`#141413`) with White text"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a circular portrait card 300px in diameter, with a square photograph cropped to a perfect circle. Attach a 56px white satellite button with a dark arrow icon at the bottom-right, so it protrudes ~40% outside the portrait. Below the portrait, add an eyebrow label with a Light Signal Orange dot and uppercase 'SERVICES' text in MarkForMC weight 700 at 14px. Below the eyebrow, set a 24px / weight 500 title in Ink Black."
|
||||
- "Design a primary CTA button: Ink Black (`#141413`) background, Canvas Cream (`#F3F0EE`) text, 20px border-radius, 6px vertical and 24px horizontal padding, MarkForMC font at 16px weight 500 with -2% letter-spacing."
|
||||
- "Build a floating navigation pill: white background with `rgba(0, 0, 0, 0.04) 0px 4px 24px 0px` shadow, 999px border-radius, ~16px vertical and 40px horizontal internal padding. Position it 24px below the viewport top, centered, with the Mastercard logo at the left, five primary links centered with 48px gap, and a circular 48px search button at the right."
|
||||
- "Create a hero media frame: 40px border-radius on all corners, full viewport width minus 48px gutters, ~60% viewport height, dark background for video content. Place it directly on the cream canvas with no shadow."
|
||||
- "Design a footer: Ink Black (`#141413`) background, white text, 4-column link grid with uppercase muted column headers at 14px weight 700 +4% tracking. Include a large conversational H2 above the grid, a 1px white-at-30%-opacity horizontal divider below, and a bottom row with copyright, legal small-print links, a pill-shaped country selector, and four social icons."
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Focus on ONE component at a time — don't redesign multiple surfaces in parallel
|
||||
2. Reference specific color names AND hex codes from this document
|
||||
3. Use natural language ("warm putty cream", "stadium pill", "circular portrait with satellite CTA") alongside technical values
|
||||
4. Describe the desired "feel" (editorial, soft, institutional) alongside specific measurements
|
||||
5. When in doubt, reach for one of three radii: 20px (buttons), 40px (hero/stadium), or 999px (pill/nav)
|
||||
6. Default backgrounds to Canvas Cream (`#F3F0EE`), not white — this single change shifts the entire mood toward Mastercard
|
||||
|
||||
### Known Gaps
|
||||
- The live page uses MarkForMC, a proprietary licensed typeface. Sofia Sans is the closest open-source substitute and is listed in Mastercard's own fallback stack.
|
||||
- Tablet breakpoint specifics (768–1023px) were inferred from desktop and mobile captures; intermediate layouts may vary per section.
|
||||
- The exact "whisper" cream tone used for ghost-watermark headlines behind circular portraits reads between `#E8E2DA` and `#D1CDC7` in captures; the precise value varies per section.
|
||||
- Third-party consent orange (`#CF4500`) is Mastercard's documented consent signal and should not be confused with any marketing CTA color.
|
||||
- The Mastercard logo mark (red `#EB001B` + yellow `#F79E1B`) is a brand asset, not a UI palette entry.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Mastercard Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/mastercard/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,683 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Meta
|
||||
description: "Meta's design system spans hardware commerce (Quest VR, Ray-Ban Meta AI glasses) and brand surfaces with a confident product-merchandising voice. The system pairs a stark white canvas with full-bleed photographic product cards, a confident Optimistic VF wordmark/headline face, dual-CTA hero patterns (black primary + outlined secondary), and a saturated cobalt blue (#0064E0) for in-product purchase actions. Pill-shaped 100px-radius buttons, generous 24-32px card rounding, and tight three-tier text hierarchy carry across homepage, product detail (PDP), buy-now configurator, and accessory subpages."
|
||||
|
||||
colors:
|
||||
primary: "#0064e0"
|
||||
primary-deep: "#0457cb"
|
||||
primary-soft: "#0091ff"
|
||||
on-primary: "#ffffff"
|
||||
ink-button: "#000000"
|
||||
on-ink-button: "#ffffff"
|
||||
fb-blue: "#1876f2"
|
||||
meta-link: "#385898"
|
||||
oculus-purple: "#a121ce"
|
||||
success: "#31a24c"
|
||||
success-bg: "#24e400"
|
||||
attention: "#f2a918"
|
||||
warning: "#f7b928"
|
||||
warning-bg: "#ffe200"
|
||||
critical: "#e41e3f"
|
||||
critical-strong: "#f0284a"
|
||||
canvas: "#ffffff"
|
||||
surface-soft: "#f1f4f7"
|
||||
ink-deep: "#0a1317"
|
||||
ink: "#1c1e21"
|
||||
charcoal: "#444950"
|
||||
slate: "#4b4c4f"
|
||||
steel: "#5d6c7b"
|
||||
stone: "#8595a4"
|
||||
hairline: "#ced0d4"
|
||||
hairline-soft: "#dee3e9"
|
||||
disabled-text: "#bcc0c4"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 64px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.16
|
||||
fontFeature: "ss01, ss02"
|
||||
display-lg:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 48px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.17
|
||||
fontFeature: "ss01, ss02"
|
||||
heading-lg:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 36px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.28
|
||||
fontFeature: "ss01, ss02"
|
||||
heading-md:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 28px
|
||||
fontWeight: 300
|
||||
lineHeight: 1.21
|
||||
fontFeature: "ss01, ss02"
|
||||
heading-sm:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 24px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
fontFeature: "ss01, ss02"
|
||||
subtitle-lg:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 18px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.44
|
||||
subtitle-md:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.44
|
||||
body-md-bold:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 16px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.50
|
||||
letterSpacing: -0.16px
|
||||
body-md:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
letterSpacing: -0.16px
|
||||
body-sm-bold:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 14px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.43
|
||||
letterSpacing: -0.14px
|
||||
body-sm:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.43
|
||||
letterSpacing: -0.14px
|
||||
caption-bold:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 12px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.33
|
||||
caption:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.33
|
||||
button-md:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 14px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.43
|
||||
letterSpacing: -0.14px
|
||||
link-md:
|
||||
fontFamily: Optimistic VF
|
||||
fontSize: 16px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.50
|
||||
letterSpacing: -0.16px
|
||||
|
||||
rounded:
|
||||
xs: 2px
|
||||
sm: 4px
|
||||
md: 6px
|
||||
lg: 8px
|
||||
xl: 16px
|
||||
xxl: 24px
|
||||
xxxl: 32px
|
||||
feature: 40px
|
||||
full: 100px
|
||||
circle: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 10px
|
||||
md: 12px
|
||||
base: 16px
|
||||
lg: 20px
|
||||
xl: 24px
|
||||
xxl: 32px
|
||||
xxxl: 40px
|
||||
section-sm: 48px
|
||||
section: 64px
|
||||
section-lg: 80px
|
||||
hero: 120px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.ink-button}"
|
||||
textColor: "{colors.on-ink-button}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "14px 30px"
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.charcoal}"
|
||||
textColor: "{colors.on-ink-button}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.disabled-text}"
|
||||
textColor: "{colors.canvas}"
|
||||
button-buy-cta:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "14px 30px"
|
||||
button-buy-cta-pressed:
|
||||
backgroundColor: "{colors.primary-deep}"
|
||||
textColor: "{colors.on-primary}"
|
||||
button-secondary:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink-deep}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "12px 28px"
|
||||
border: "2px solid {colors.ink-deep}"
|
||||
button-ghost:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink-deep}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 22px"
|
||||
border: "2px solid rgba(10, 19, 23, 0.12)"
|
||||
button-pill-tab:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "8px 16px"
|
||||
border: "1px solid {colors.hairline}"
|
||||
button-pill-tab-active:
|
||||
backgroundColor: "{colors.ink-deep}"
|
||||
textColor: "{colors.canvas}"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.circle}"
|
||||
size: 40px
|
||||
card-product-feature:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
card-feature-photo:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "0"
|
||||
border: "none"
|
||||
card-promo-strip:
|
||||
backgroundColor: "{colors.ink-deep}"
|
||||
textColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.section}"
|
||||
card-icon-feature:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xl}"
|
||||
card-checkout-summary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
shadow: "rgba(20, 22, 26, 0.3) 0px 1px 4px 0px"
|
||||
product-thumbnail:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.base}"
|
||||
aspect-ratio: "1 / 1"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
height: 44px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "2px solid {colors.fb-blue}"
|
||||
text-input-error:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "1px solid {colors.critical-strong}"
|
||||
search-pill:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
height: 40px
|
||||
radio-option:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.lg}"
|
||||
border: "1px solid rgba(10, 19, 23, 0.12)"
|
||||
radio-option-selected:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
border: "2px solid #0143b5"
|
||||
color-swatch-circle:
|
||||
rounded: "{rounded.circle}"
|
||||
size: 32px
|
||||
border: "2px solid {colors.canvas}"
|
||||
badge-promo-yellow:
|
||||
backgroundColor: "{colors.warning}"
|
||||
textColor: "{colors.ink-deep}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-attention:
|
||||
backgroundColor: "{colors.attention}"
|
||||
textColor: "{colors.canvas}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-success:
|
||||
backgroundColor: "{colors.success}"
|
||||
textColor: "{colors.canvas}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-critical:
|
||||
backgroundColor: "{colors.critical}"
|
||||
textColor: "{colors.canvas}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
promo-banner:
|
||||
backgroundColor: "{colors.ink-deep}"
|
||||
textColor: "{colors.canvas}"
|
||||
typography: "{typography.body-sm-bold}"
|
||||
padding: "{spacing.md} {spacing.xl}"
|
||||
faq-accordion-item:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
why-buy-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xxl} {spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
warranty-card:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
rounded: "{rounded.xxl}"
|
||||
padding: "{spacing.xxl}"
|
||||
footer-region:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.section} {spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
hero-band-marketing:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.canvas}"
|
||||
typography: "{typography.hero-display}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.section-lg}"
|
||||
product-gallery-pdp:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.base}"
|
||||
color-sku-picker-row:
|
||||
backgroundColor: "{colors.surface-soft}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.base}"
|
||||
feature-icon-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
tech-specs-table:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.lg}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
testimonial-customer-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Meta's commerce surfaces (homepage, Quest configurator, Ray-Ban product detail, prescription page) read as a confident hardware merchandiser. The brand voice is photography-first: large, full-bleed product imagery dominates above-the-fold real estate, with white space and tight typographic hierarchy carrying the rest. The system has a recognizable dual-CTA pattern — a black pill-shaped primary on marketing surfaces shifting to a saturated cobalt blue ({colors.primary}) inside the buy-now flows, paired with an outlined ghost button for secondary navigation.
|
||||
|
||||
Optimistic VF — Meta's variable display face — anchors the entire system, ranging from a 64px hero display down to a 12px caption. The face's `ss01` and `ss02` stylistic sets are switched on across every heading role, contributing to the brand's slightly humanist, friendly geometric character. Below 768px the system collapses cleanly: hero stacks, pill nav becomes a hamburger, three-up feature grids flatten to a single column, and product configurators drop their right-rail summary into a sticky bottom bar.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Stark white canvas ({colors.canvas}) carrying full-bleed product photography with `{rounded.xxxl}` (32px) corner softening on showcase tiles
|
||||
- Two-tier primary button system: marketing CTAs use {colors.ink-button} pills; commerce CTAs use {colors.primary} cobalt pills inside buy-now panels
|
||||
- Optimistic VF as the universal display + body face with consistent `ss01, ss02` OpenType features
|
||||
- Pill-shaped buttons ({rounded.full}) and `{rounded.xxxl}`/`{rounded.feature}` cards as the dominant geometric signature
|
||||
- Saturated promotional banners (yellow {colors.warning}, dark {colors.ink-deep}) used sparingly above the nav for time-bound offers
|
||||
- Photographic feature cards with no card chrome (no border, no shadow) — the product imagery IS the surface treatment
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: meta.com/ (homepage), /ai-glasses/ray-ban-meta-skyler-gen-2/ (PDP), /quest/quest-3s/buy-now/ (configurator), /ai-glasses/prescription/ (lens upsell). Token coverage was identical across all four pages — the design system is genuinely unified.
|
||||
|
||||
### Brand & Accent
|
||||
- **Cobalt Primary** ({colors.primary}): The buy-now CTA color. Used on every "Add to cart", "Configure", "Pre-order" button inside the commerce flow and the right-rail purchase panel.
|
||||
- **Deep Cobalt** ({colors.primary-deep}): Pressed-state and dark-surface variant of the cobalt primary; also the active link color.
|
||||
- **Soft Cobalt** ({colors.primary-soft}): Translucent background tint for informational callouts (`{colors.primary-soft}` at 15% alpha).
|
||||
- **Facebook Blue** ({colors.fb-blue}): Selected radio/checkbox state and inline form-control activation color.
|
||||
- **Meta Link Blue** ({colors.meta-link}): Reserved for legacy navigation and footer link affordances.
|
||||
- **Oculus Purple** ({colors.oculus-purple}): VR product accent — used inside Quest-branded surfaces for category emphasis.
|
||||
|
||||
### Surface
|
||||
- **Canvas White** ({colors.canvas}): Page background and primary card surface.
|
||||
- **Soft Cloud** ({colors.surface-soft}): Subtle product-thumbnail and warranty-card background; also the search-pill rest state.
|
||||
- **Hairline Gray** ({colors.hairline}): 1px input border and form-control divider.
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Quieter divider used on cards, footer separators, and section breaks.
|
||||
|
||||
### Text
|
||||
- **Deep Ink** ({colors.ink-deep}): Primary headline and body text on light surfaces.
|
||||
- **Ink** ({colors.ink}): Standard body and secondary headline text.
|
||||
- **Charcoal** ({colors.charcoal}): Tertiary body text and form-button labels.
|
||||
- **Slate** ({colors.slate}): Section-header copy and supporting microcopy.
|
||||
- **Steel** ({colors.steel}): Quieter caption text and footer link hierarchy.
|
||||
- **Stone** ({colors.stone}): Disabled or de-emphasized labels.
|
||||
|
||||
### Semantic
|
||||
- **Success** ({colors.success}): "In stock", "Free returns" affirmations.
|
||||
- **Attention** ({colors.attention}): Mid-priority alerts and timed callouts.
|
||||
- **Warning** ({colors.warning}): Promotional banners ("Get 25% off…") and limited-time tags.
|
||||
- **Critical** ({colors.critical}): Validation errors, destructive feedback.
|
||||
- **Critical Strong** ({colors.critical-strong}): Form-input error border and inline error labels.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**Optimistic VF** is Meta's proprietary variable display face. Fallbacks: Montserrat, Helvetica, Arial, Noto Sans. The variable axes carry from 300 (light heading-md, used for editorial intro headlines like "Look forward") through 500 (display, hero, heading-sm) up to 700 (subtitle, body emphasis, button labels). Stylistic sets `ss01` and `ss02` are switched on across every heading role — they soften the geometry and give the type a slightly humanist breathing.
|
||||
|
||||
A secondary Helvetica fallback chain is used for technical microcopy (12px) inside spec sheets and footer fine print.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | OpenType | Use |
|
||||
|---|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 64px | 500 | 1.16 | 0 | ss01, ss02 | Homepage hero ("Get 25% off…", category opener) |
|
||||
| `{typography.display-lg}` | 48px | 500 | 1.17 | 0 | ss01, ss02 | Section-opener display ("Made for prescriptions. Built for comfort.") |
|
||||
| `{typography.heading-lg}` | 36px | 500 | 1.28 | 0 | ss01, ss02 | Subsection headlines ("Why buy from Meta", "Tech specs") |
|
||||
| `{typography.heading-md}` | 28px | 300 | 1.21 | 0 | ss01, ss02 | Editorial subheads in lighter weight ("Look forward", "Built for prescriptions") |
|
||||
| `{typography.heading-sm}` | 24px | 500 | 1.25 | 0 | ss01, ss02 | Card titles, feature-tile headers |
|
||||
| `{typography.subtitle-lg}` | 18px | 700 | 1.44 | 0 | — | Bold callouts, FAQ question titles |
|
||||
| `{typography.subtitle-md}` | 18px | 400 | 1.44 | 0 | — | Body lead and longer-line subtitles |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.50 | -0.16px | — | Primary body text |
|
||||
| `{typography.body-md-bold}` | 16px | 700 | 1.50 | -0.16px | — | Body emphasis and link-md |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.43 | -0.14px | — | Secondary body, helper text |
|
||||
| `{typography.body-sm-bold}` | 14px | 700 | 1.43 | -0.14px | — | Pill tab labels, footer headings |
|
||||
| `{typography.caption-bold}` | 12px | 700 | 1.33 | 0 | — | Badge labels, timestamps |
|
||||
| `{typography.caption}` | 12px | 400 | 1.33 | 0 | — | Footer fine print, legal microcopy |
|
||||
| `{typography.button-md}` | 14px | 700 | 1.43 | -0.14px | — | Pill button labels |
|
||||
| `{typography.link-md}` | 16px | 700 | 1.50 | -0.16px | — | Inline navigation links |
|
||||
|
||||
### Principles
|
||||
- Negative letter-spacing on body roles (`-0.14px` to `-0.16px`) tightens the type fractionally — Optimistic VF was designed for this snug-but-not-condensed setting.
|
||||
- Editorial subheads use the 300 weight to introduce visual rest between the 500-weight display headlines and the 400-weight body, creating a three-tier visual rhythm.
|
||||
- All headings carry `ss01, ss02` stylistic sets together — the design treats them as a paired alternates package, never one without the other.
|
||||
- Buttons, pill tabs, and footer headings share `{typography.body-sm-bold}` (14px / 700 / -0.14px), creating a tight visual relationship between interactive elements.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 4px increment with 8px as the dominant primary step.
|
||||
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (10px) · `{spacing.md}` (12px) · `{spacing.base}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (80px) · `{spacing.hero}` (120px).
|
||||
- **Section rhythm**: Marketing sections separate at `{spacing.section-lg}` (80px); product detail sections compress to `{spacing.section}` (64px); FAQ stacks tighten further to `{spacing.xxl}` (32px).
|
||||
- **Card internal padding**: Standard `{spacing.xxl}` (32px); icon-feature tiles compress to `{spacing.xl}` (24px); promo-strip cards expand to `{spacing.section}` (64px) for hero presence.
|
||||
|
||||
### Grid & Container
|
||||
- Marketing page max-width sits around 1280px with 32–48px gutters.
|
||||
- The PDP layout uses a 2-column split: hero gallery (~58% width) + sticky purchase rail (~42%, with `max-width: 380px` on the rail).
|
||||
- Three-up feature grids ("Why buy from Meta") use a 24px column gap; six-up product thumbnail rows (color/SKU pickers) use a 12px gap.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Whitespace is product-photography-first. Hero sections give product imagery 50–70% of the viewport height; copy is given oxygen to breathe in `{spacing.xxl}` to `{spacing.xxxl}` blocks above and below. Inside the configurator, whitespace tightens — the buy-now panel is information-dense, with `{spacing.base}` to `{spacing.lg}` rhythm between option groups.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system runs predominantly flat. Elevation is reserved for two interaction layers:
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow; `{rounded.xxxl}` rounding + `{colors.hairline-soft}` border | Default product cards, why-buy tiles |
|
||||
| 1 (subtle) | `rgba(0, 0, 0, 0.2) 1px 1px 0px 0px` | Pill-tab activation indicator |
|
||||
| 2 (sticky panel) | `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px` | PDP right-rail purchase summary, sticky mobile checkout bar |
|
||||
|
||||
### Decorative Depth
|
||||
- Photography-as-depth: full-bleed product imagery on `{rounded.xxxl}` cards creates atmospheric layering without shadows.
|
||||
- Translucent overlays (`rgba(255, 255, 255, 0.1)` to `rgba(10, 19, 23, 0.12)`) cover dark hero photography to lift legibility of overlaid text.
|
||||
- Decorative pastel tints inside accessory cards — soft pink, ice-blue, mint — appear briefly behind product cutouts but are NOT formalized as system tokens (treated as photographic content).
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 2px | Inline checkbox marks, fine UI corners |
|
||||
| `{rounded.sm}` | 4px | Tags, micro-controls |
|
||||
| `{rounded.md}` | 6px | Square thumbnail rounding |
|
||||
| `{rounded.lg}` | 8px | Form inputs, radio-option containers |
|
||||
| `{rounded.xl}` | 16px | Standard feature cards, FAQ accordion items |
|
||||
| `{rounded.xxl}` | 24px | Warranty / accessory tiles, ghost-style action cards |
|
||||
| `{rounded.xxxl}` | 32px | Photographic feature cards, big promo strips |
|
||||
| `{rounded.feature}` | 40px | Accessory hero panels, "Built for prescriptions" cards |
|
||||
| `{rounded.full}` | 100px | Pill buttons, tab chips, badges |
|
||||
| `{rounded.circle}` | 50% | Color swatches, circular icon buttons |
|
||||
|
||||
### Photography Geometry
|
||||
- Product hero photography sits in `{rounded.xxxl}` (32px) frames more often than rectangles.
|
||||
- Color/material swatches are perfect circles (`{rounded.circle}`, 32px diameter, 2px white border ring when selected).
|
||||
- Square product thumbnails (`aspect-ratio: 1/1`) use `{rounded.xl}` rounding.
|
||||
- Six-up "color & SKU" picker rows use 1:1 aspect tiles with `{rounded.lg}` (8px) corners — tighter than the hero photography frames to differentiate selection-grid context from showcase context.
|
||||
|
||||
## Components
|
||||
|
||||
> Per the no-hover policy, hover states are NOT documented for any component below. Default and pressed/active states only.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Black pill primary CTA for marketing surfaces ("Shop", "Pre-order").
|
||||
- Background `{colors.ink-button}`, text `{colors.on-ink-button}`, typography `{typography.button-md}`, padding `14px 30px`, rounded `{rounded.full}`.
|
||||
- Pressed state `button-primary-pressed` flips background to `{colors.charcoal}`.
|
||||
- Disabled state `button-primary-disabled` uses `{colors.disabled-text}` background.
|
||||
|
||||
**`button-buy-cta`** — Cobalt pill primary CTA for commerce flows ("Add to cart", "Configure", "Continue").
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `14px 30px`, rounded `{rounded.full}`.
|
||||
- Pressed state `button-buy-cta-pressed` deepens background to `{colors.primary-deep}`.
|
||||
- This variant ONLY appears inside the buy-now configurator and PDP purchase rail. Marketing surfaces use `button-primary` instead.
|
||||
|
||||
**`button-secondary`** — Outlined ghost CTA, often paired with primary in dual-CTA hero patterns.
|
||||
- Background transparent, text `{colors.ink-deep}`, border `2px solid {colors.ink-deep}`, typography `{typography.button-md}`, padding `12px 28px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-ghost`** — Quieter outlined variant used for tertiary CTAs.
|
||||
- Background transparent, text `{colors.ink-deep}`, border `2px solid rgba(10, 19, 23, 0.12)`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-pill-tab`** + **`button-pill-tab-active`** — Top-of-page category navigation pills ("Glasses / Quest / Apps").
|
||||
- Inactive: background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, padding `8px 16px`, rounded `{rounded.full}`.
|
||||
- Active: background `{colors.ink-deep}`, text `{colors.canvas}`. No border in active state — the dark fill replaces it.
|
||||
|
||||
**`button-icon-circular`** — 40×40px circular utility buttons (carousel arrows, share, favorite).
|
||||
- Background `{colors.canvas}`, icon color `{colors.ink}`, rounded `{rounded.circle}`.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`card-product-feature`** — White feature card with product photography and copy (homepage "Designed for sport", "Advanced. Inside and out.").
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`card-feature-photo`** — Edge-to-edge photographic showcase tile with NO chrome (homepage "Built for prescriptions" full-bleed glasses card).
|
||||
- Background `{colors.canvas}` (visible only at the corners), rounded `{rounded.xxxl}`, no padding, no border. The image fills the card; copy is overlaid bottom-left in white.
|
||||
|
||||
**`card-promo-strip`** — Dark full-width promo card with embedded copy + CTAs (homepage "Meta Quest brings the magic of virtual reality" wide strip).
|
||||
- Background `{colors.ink-deep}`, text `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.section}`.
|
||||
|
||||
**`card-icon-feature`** — Three-up feature tile with line icon, headline, and short copy ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`card-checkout-summary`** — PDP right-rail sticky summary with title, price, color picker, "Add to cart" button.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px`.
|
||||
|
||||
**`product-thumbnail`** — Square product image cell used in color/SKU pickers and "People also bought" rows.
|
||||
- Background `{colors.surface-soft}`, rounded `{rounded.xl}`, padding `{spacing.base}`, aspect-ratio `1 / 1`.
|
||||
|
||||
**`warranty-card`** — Promo callout for warranty + finance offers ("1y Warranty", "Meta Horizon+").
|
||||
- Background `{colors.surface-soft}`, rounded `{rounded.xxl}`, padding `{spacing.xxl}`. Uses pastel-tinted variants for additional perks.
|
||||
|
||||
**`why-buy-tile`** — 4-up reassurance tile row in the lower marketing zone.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl} {spacing.xl}`, border `1px solid {colors.hairline-soft}`. Heading in `{typography.subtitle-lg}`, body in `{typography.body-sm}`.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard form field (footer email subscribe, support form).
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.lg}`, padding `{spacing.md}`, height 44px.
|
||||
|
||||
**`text-input-focused`** — Activated state.
|
||||
- Border switches to `2px solid {colors.fb-blue}`.
|
||||
|
||||
**`text-input-error`** — Validation error state.
|
||||
- Border switches to `1px solid {colors.critical-strong}`; error label below in `{colors.critical-strong}` `{typography.body-sm}`.
|
||||
|
||||
**`search-pill`** — Top-nav search field.
|
||||
- Background `{colors.surface-soft}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.full}`, height 40px.
|
||||
|
||||
**`radio-option`** + **`radio-option-selected`** — Configurator option cards (storage, color variant, shipping option).
|
||||
- Inactive: background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid rgba(10, 19, 23, 0.12)`.
|
||||
- Selected: border switches to `2px solid #0143b5` (deep cobalt) — the cobalt theme persists into form-control selection signaling.
|
||||
|
||||
**`color-swatch-circle`** — Round color/material picker (Ray-Ban frame finishes, glass colors).
|
||||
- 32px diameter, `{rounded.circle}`, `2px solid {colors.canvas}` ring on selection over the swatch's own fill color.
|
||||
|
||||
### Badges & Status
|
||||
|
||||
**`badge-promo-yellow`** — Limited-time offer chip ("Limited time", "Sale").
|
||||
- Background `{colors.warning}`, text `{colors.ink-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-attention`** — Mid-priority status indicator ("Almost gone", "Selling fast").
|
||||
- Background `{colors.attention}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-success`** — Affirmative status ("In stock", "Verified", "Free shipping").
|
||||
- Background `{colors.success}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-critical`** — Urgent/destructive label ("Out of stock", "Discontinued", error chips).
|
||||
- Background `{colors.critical}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`promo-banner`** — Sticky full-width promotional strip ABOVE the top nav ("Get 25% off the #1 selling AI glasses").
|
||||
- Background `{colors.ink-deep}` (or `{colors.warning}` for yellow promo variants), text `{colors.canvas}` (or `{colors.ink-deep}` on yellow), typography `{typography.body-sm-bold}`, padding `{spacing.md} {spacing.xl}`. Carries one-line offer copy plus an inline CTA link.
|
||||
|
||||
### Navigation
|
||||
|
||||
**Top Navigation (Desktop)** — Sticky white bar with category pill tabs, search, account, cart.
|
||||
- Background `{colors.canvas}`, height ~64px with bottom `1px solid {colors.hairline-soft}`.
|
||||
- Left: Meta wordmark logo (61×14px). Center: pill-tab category nav. Right: search-pill + circular icon buttons (account, cart).
|
||||
|
||||
**Top Navigation (Mobile)** — Compressed to logo + hamburger + cart icon. Pill-tab nav slides into a full-screen drawer below 768px.
|
||||
|
||||
**Promo Banner** — Full-width strip ABOVE the nav for time-bound offers.
|
||||
- Background `{colors.ink-deep}` or `{colors.warning}` (yellow), text `{colors.canvas}` or `{colors.ink-deep}`, typography `{typography.body-sm-bold}`, padding `{spacing.md} {spacing.xl}`. Carries one-line offer copy + inline link.
|
||||
|
||||
**Breadcrumb (PDP)** — Inline path above the product hero ("Glasses › Ray-Ban Meta › Skyler (Gen 2)").
|
||||
- Typography `{typography.body-sm}`, separator dot in `{colors.stone}`, active leaf in `{colors.ink}`, parent links in `{colors.steel}`.
|
||||
|
||||
### Signature Components
|
||||
|
||||
**`hero-band-marketing`** — Full-bleed photographic hero with overlaid copy + dual-CTA pair.
|
||||
- Edge-to-edge product photography on a dark or photographic background. Overlay copy in `{typography.hero-display}` white. Below the title: 1-line subtitle in `{typography.subtitle-md}` then `button-primary` + `button-secondary` pair.
|
||||
|
||||
**`product-gallery-pdp`** — Product detail page main hero: 4-up vertical thumbnail strip on the left, large product image center, sticky purchase rail right.
|
||||
- Thumbnails: 80×80px, `{rounded.lg}`, `{colors.surface-soft}` background, 1px `{colors.hairline-soft}` border (active border switches to `{colors.ink-deep}`).
|
||||
- Main image area: ~720×720px on desktop, `{rounded.xxxl}` rounding, photographic surface.
|
||||
- Sticky rail uses `card-checkout-summary`.
|
||||
|
||||
**`color-sku-picker-row`** — Six-up grid of square product variants with name + price below each.
|
||||
- Tile background `{colors.surface-soft}`, rounded `{rounded.lg}`, image padded `{spacing.base}`. Active tile border switches to `2px solid {colors.ink-deep}`. Below the tile: variant name in `{typography.body-sm-bold}` and price in `{typography.body-sm}`.
|
||||
|
||||
**`feature-icon-row`** — Four reassurance benefits ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").
|
||||
- 4-column grid, each cell uses `card-icon-feature` chrome with a 32px line icon at top, headline `{typography.subtitle-lg}`, body `{typography.body-sm}`.
|
||||
|
||||
**`faq-accordion`** — Vertical stack of expandable Q&A items.
|
||||
- Each item uses `faq-accordion-item` chrome. Question in `{typography.subtitle-lg}` left, chevron icon (`{colors.steel}`, 20px) right. Expanded answer drops in `{typography.body-md}` text below with `{spacing.base}` top padding.
|
||||
|
||||
**`tech-specs-table`** — Two-column key/value table for product specifications.
|
||||
- Row layout: spec label (`{typography.body-sm-bold}` `{colors.ink}`) left, spec value (`{typography.body-sm}` `{colors.charcoal}`) right. Row separator `1px solid {colors.hairline-soft}`. Section headers in `{typography.heading-sm}` above each spec group.
|
||||
|
||||
**`testimonial-customer-card`** — Small editorial card with author + quote + photo.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`. Avatar circle 40px, byline in `{typography.body-sm-bold}`, quote in `{typography.body-md}`.
|
||||
|
||||
**`footer-region`** — Dense multi-column site footer.
|
||||
- Background `{colors.canvas}`, top border `1px solid {colors.hairline-soft}`, padding `{spacing.section} {spacing.xxl}`. Six column groups with section headings in `{typography.body-sm-bold}` `{colors.ink}` and link lists in `{typography.body-sm}` `{colors.steel}`. Bottom row contains language picker, region selector, legal links in `{typography.caption}` `{colors.stone}`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (cobalt) for buy-now CTAs only — its visual weight is meaningful precisely because it doesn't appear on marketing pages.
|
||||
- Use `{colors.ink-button}` (black) for marketing-surface primary CTAs. Pair with `{colors.button-secondary}` ghost outline for the secondary action.
|
||||
- Apply `{rounded.full}` to every button, every category pill, every badge, every chip — buttons are NEVER squared in Meta's system.
|
||||
- Apply `{rounded.xxxl}` to photographic product cards and `{rounded.xl}` to icon-feature tiles to maintain the visible card-hierarchy contrast.
|
||||
- Switch on `ss01, ss02` together for any Optimistic VF heading. Never one stylistic set without the other.
|
||||
- Use the 300-weight `{typography.heading-md}` for editorial subheads — it creates the brand's signature visual rhythm against the 500-weight displays.
|
||||
|
||||
### Don't
|
||||
- Don't use `{colors.primary}` (cobalt) for marketing-surface primary buttons — it conflicts with Meta's brand-history positioning of black-CTA-on-white-canvas marketing.
|
||||
- Don't introduce additional accent colors beyond cobalt + Oculus purple. The hardware brand is deliberately monochromatic outside its product photography.
|
||||
- Don't soften the corners of pill buttons below `{rounded.full}`. The pill is a brand signature.
|
||||
- Don't run feature cards without rounding — `{rounded.xxxl}` is the minimum for any photographic surface.
|
||||
- Don't reduce `{typography.body-md}` line-height below 1.50 — the negative letter-spacing already tightens the metric and any further compression breaks legibility.
|
||||
- Don't apply heavy shadows to marketing cards. Elevation is a commerce-flow signal, not a marketing flourish.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile (small) | < 480px | Single column. Hero text drops to `{typography.display-lg}` or smaller. Pill tabs collapse into hamburger drawer. PDP gallery stacks above purchase rail; rail becomes sticky bottom bar. |
|
||||
| Mobile (large) | 480 – 767px | Same as small but feature tiles render two-up. |
|
||||
| Tablet | 768 – 1023px | Two-column feature grids. Pill-tab nav returns. PDP gallery + purchase rail render side-by-side at compressed proportions (~60/40). |
|
||||
| Desktop | 1024 – 1359px | Full three- and four-up feature grids; full pill-tab category nav; PDP at standard 58/42 split. |
|
||||
| Wide Desktop | ≥ 1360px | Same as desktop with wider hero gutters and larger product photography. |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons render at 40–44px effective height (with the 14px button text + `14px 30px` padding). Above the WCAG AAA 44px floor.
|
||||
- Circular icon buttons are 40×40px — at the AA floor; bumps to 44×44px on mobile via override.
|
||||
- Color swatch circles are 32×32px. To hit AAA, the swatch carries a 12px clear hit zone around it (effective hit target ~56px).
|
||||
- Form inputs render at 44px height to align with primary button height.
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Promo banner** stays full-width on all breakpoints; truncates with ellipsis on small mobile, retains the inline link affordance.
|
||||
- **Pill-tab nav** below 768px collapses into a hamburger drawer; the active tab is rendered as a label inside the closed nav.
|
||||
- **PDP layout**: gallery stacks above the purchase summary at < 1024px; the summary becomes a sticky bottom bar with price + "Add to cart" button at < 768px. The full summary remains scrollable above the sticky bar.
|
||||
- **Feature grids** (3-up, 4-up) collapse to 2-up at 768–1023px and 1-up at < 768px. Card padding compresses from `{spacing.xxl}` to `{spacing.xl}` at the 1-up breakpoint.
|
||||
- **Hero typography**: `{typography.hero-display}` (64px) drops to `{typography.heading-lg}` (36px) at < 768px and `{typography.heading-sm}` (24px) at < 480px.
|
||||
- **Footer**: 6-column desktop layout reflows to 2-column at tablet and accordion-collapsed groups at mobile.
|
||||
|
||||
### Image Behavior
|
||||
- Product photography uses 1:1 (thumbnails, color pickers), 4:3 (PDP gallery), and 16:9 (homepage promo strips) ratios.
|
||||
- Hero photography is full-bleed with `{rounded.xxxl}` corners; lazy-loaded below the fold.
|
||||
- Product variant images preserve their `{rounded.lg}` thumbnails across all breakpoints — they never go full-width on mobile.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. The system has high internal consistency — small precision wins compound.
|
||||
2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.
|
||||
3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs, contrast issues, orphaned tokens.
|
||||
4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-focused`) — do not bury them inside prose.
|
||||
5. Default to `{typography.body-md}` for body and `{typography.subtitle-lg}` for emphasis. Headlines step down through `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
|
||||
6. Keep `{colors.primary}` (cobalt) scarce. If it appears outside the buy-now flow on a viewport, ask whether the surface really needs to look like a checkout panel.
|
||||
7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this design language and should be filtered out of any work surface.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Selected/checked states for non-button form controls (toggle, multi-select) were not visible on the captured surfaces — implement following the cobalt-on-white pattern from `radio-option-selected`.
|
||||
- Animation/transition timings are not extracted; recommend 150–250ms ease-out for primary surface transitions and 300ms ease-in-out for accordion expand/collapse.
|
||||
- Specific dark-mode token values for canvas, surface, ink, and hairline are not defined; the brand has not surfaced a published dark-mode token set on these commerce pages.
|
||||
- Pastel decorative tints inside accessory cards (soft pink, ice blue, mint) appear visually but are not formalized — treat them as photographic content, not as system colors.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Meta Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/meta/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,746 @@
|
||||
---
|
||||
version: alpha
|
||||
name: MiniMax
|
||||
description: "MiniMax presents itself as a premium AI infrastructure brand through a striking duality — bold black-pill CTAs and stark white canvas for marketing, paired with vibrant gradient product cards (orange-red, magenta-pink, purple, blue) that turn each model release into a distinctive visual identity. The system uses DM Sans across all surfaces, employs an oversized 80px hero display, anchors major actions in deep near-black pills, and layers content density via a 3-column documentation grid with sidebar nav, prose body, and TOC. Coverage spans the marketing homepage, model showcase pages, developer documentation, and platform pricing surfaces."
|
||||
|
||||
colors:
|
||||
primary: "#0a0a0a"
|
||||
on-primary: "#ffffff"
|
||||
primary-soft: "#181e25"
|
||||
brand-coral: "#ff5530"
|
||||
brand-magenta: "#ea5ec1"
|
||||
brand-blue: "#1456f0"
|
||||
brand-blue-mid: "#3b82f6"
|
||||
brand-blue-deep: "#1d4ed8"
|
||||
brand-blue-700: "#17437d"
|
||||
brand-cyan: "#3daeff"
|
||||
brand-blue-200: "#bfdbfe"
|
||||
brand-purple: "#a855f7"
|
||||
canvas: "#ffffff"
|
||||
surface: "#f7f8fa"
|
||||
surface-soft: "#f2f3f5"
|
||||
hairline: "#e5e7eb"
|
||||
hairline-soft: "#eaecf0"
|
||||
ink: "#0a0a0a"
|
||||
ink-strong: "#000000"
|
||||
charcoal: "#222222"
|
||||
slate: "#45515e"
|
||||
steel: "#5f5f5f"
|
||||
stone: "#8e8e93"
|
||||
muted: "#a8aab2"
|
||||
success-bg: "#e8ffea"
|
||||
success-text: "#1ba673"
|
||||
on-dark: "#ffffff"
|
||||
footer-bg: "#0a0a0a"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 80px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -2px
|
||||
display-lg:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 56px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1.5px
|
||||
heading-lg:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 40px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -1px
|
||||
heading-md:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 32px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.25
|
||||
letterSpacing: -0.5px
|
||||
heading-sm:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 24px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.30
|
||||
card-title:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 20px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
subtitle:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
body-md:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-md-bold:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 16px
|
||||
fontWeight: 700
|
||||
lineHeight: 1.50
|
||||
body-sm:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-sm-medium:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
caption:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.70
|
||||
caption-bold:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 13px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.50
|
||||
micro:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 12px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
button-md:
|
||||
fontFamily: DM Sans
|
||||
fontSize: 14px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 20px
|
||||
xxxl: 24px
|
||||
hero: 32px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 20px
|
||||
xl: 24px
|
||||
xxl: 32px
|
||||
xxxl: 40px
|
||||
section-sm: 48px
|
||||
section: 64px
|
||||
section-lg: 80px
|
||||
hero: 96px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "11px 24px"
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.charcoal}"
|
||||
textColor: "{colors.on-primary}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.hairline}"
|
||||
textColor: "{colors.muted}"
|
||||
button-secondary:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "11px 24px"
|
||||
border: "1px solid {colors.ink}"
|
||||
button-tertiary:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "11px 24px"
|
||||
border: "1px solid {colors.hairline}"
|
||||
button-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "8px 0"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 36px
|
||||
border: "1px solid {colors.hairline}"
|
||||
product-card-coral:
|
||||
backgroundColor: "{colors.brand-coral}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.hero}"
|
||||
padding: "{spacing.xxl}"
|
||||
product-card-magenta:
|
||||
backgroundColor: "{colors.brand-magenta}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.hero}"
|
||||
padding: "{spacing.xxl}"
|
||||
product-card-blue:
|
||||
backgroundColor: "{colors.brand-blue}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.hero}"
|
||||
padding: "{spacing.xxl}"
|
||||
product-card-purple:
|
||||
backgroundColor: "{colors.brand-purple}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.hero}"
|
||||
padding: "{spacing.xxl}"
|
||||
product-card-photo:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.hero}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-base:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-feature:
|
||||
backgroundColor: "{colors.surface}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-recommendation:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.lg}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
promo-cta-card:
|
||||
backgroundColor: "{colors.brand-coral}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.hero}"
|
||||
padding: "{spacing.section}"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
height: 40px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "2px solid {colors.brand-blue-deep}"
|
||||
text-input-error:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "1px solid #d45656"
|
||||
search-pill:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
height: 36px
|
||||
border: "1px solid {colors.hairline}"
|
||||
segmented-tab:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "0"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
border: "0 0 2px transparent solid"
|
||||
segmented-tab-active:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
border: "0 0 2px {colors.ink} solid"
|
||||
pill-tab:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pill-tab-active:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.full}"
|
||||
border: "1px solid {colors.primary}"
|
||||
badge-success:
|
||||
backgroundColor: "{colors.success-bg}"
|
||||
textColor: "{colors.success-text}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-new:
|
||||
backgroundColor: "{colors.brand-coral}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-beta:
|
||||
backgroundColor: "{colors.brand-blue-200}"
|
||||
textColor: "{colors.brand-blue-deep}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-code:
|
||||
backgroundColor: "{colors.brand-blue-200}"
|
||||
textColor: "{colors.brand-blue-deep}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 6px"
|
||||
promo-banner:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.lg}"
|
||||
data-table:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
data-table-header:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.caption-bold}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
data-table-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.md}"
|
||||
border: "0 0 1px {colors.hairline-soft} solid"
|
||||
sidebar-nav-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.charcoal}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
sidebar-nav-item-active:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
doc-toc-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.xs} 0"
|
||||
ai-product-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
footer-region:
|
||||
backgroundColor: "{colors.footer-bg}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.section} {spacing.xxl}"
|
||||
footer-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.xxs} 0"
|
||||
hero-band-marketing:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.hero-display}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.hero}"
|
||||
product-matrix-grid:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.hero}"
|
||||
padding: "{spacing.xxl}"
|
||||
ai-product-matrix:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
docs-prose-block:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.charcoal}"
|
||||
typography: "{typography.body-md}"
|
||||
padding: "{spacing.xxl}"
|
||||
models-comparison-table:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
testimonial-stat-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.heading-lg}"
|
||||
padding: "{spacing.xl}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
MiniMax stages itself as a Chinese AI infrastructure brand with a sophisticated dual identity. Marketing surfaces and platform pages anchor in stark white canvas with deep-black typographic emphasis — the brand voice is confident, technical, almost editorial. But each model release gets its own vibrant gradient identity card: M2.7 in volcanic coral-red, Music 2.6 in magenta-pink, Hailuo in deep blue, Speech 2.8 in saturated orange-purple. Together these vibrant tiles read like album covers laid out on the homepage — each one declaring its own product personality.
|
||||
|
||||
DM Sans anchors every surface from oversized 80px hero displays down to 12px micro labels. The geometric, slightly humanist character of the face suits both the dense documentation surfaces (where 14px body type carries 1.5 line-height for long-form prose) and the high-impact marketing displays (where -2px letter-spacing tightens 80px headlines). Buttons are universally pill-shaped (`rounded-full`) with a sharp two-tier system: black-pill primary (the dominant CTA) and outline-pill secondary. Cards split into two distinct families: vibrant gradient product showcases (32px corner softening) and quiet white documentation cards (16px corner softening).
|
||||
|
||||
**Key Characteristics:**
|
||||
- Stark monochrome palette — black ({colors.primary}) and white ({colors.canvas}) — broken open by saturated brand-color gradient cards
|
||||
- Distinct product-color encoding: each model line has its own vibrant brand color (coral M2.7, magenta Music 2.6, blue Hailuo, orange Speech 2.8)
|
||||
- DM Sans across the entire system; Inter as fallback
|
||||
- Pill-shaped buttons ({rounded.full}) and pill-shaped tabs everywhere; rectangular forms only inside data tables and dense docs
|
||||
- Hero typography uses tight 1.10 line-height with -2px letter-spacing for impact
|
||||
- Documentation surfaces use a 3-column layout: left sidebar nav, center prose body, right table-of-contents
|
||||
- Black promo banners ({colors.primary}) above the nav for time-bound brand moments
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: minimax.io/ (homepage), /models/text/m27 (product showcase), platform.minimax.io/docs/guides/models-intro (documentation), /subscribe/token-plan (pricing). Token coverage was identical across all four pages.
|
||||
|
||||
### Brand & Accent
|
||||
- **Brand Coral** ({colors.brand-coral}): Signature high-impact accent. Used on M2.7 product card, "Token Plan" hero band, promo CTA strips, and "NEW" badges. Carries the brand's most attention-grabbing energy.
|
||||
- **Brand Magenta** ({colors.brand-magenta}): Secondary product-card identity (Music 2.6); used for music/audio product encoding.
|
||||
- **Brand Blue** ({colors.brand-blue}): Hailuo video product identity; primary blue accent across the system.
|
||||
- **Brand Blue Deep** ({colors.brand-blue-deep}): Form-control activation, link emphasis.
|
||||
- **Brand Blue 700** ({colors.brand-blue-700}): Documentation tag and reference text color.
|
||||
- **Brand Cyan** ({colors.brand-cyan}): Atmospheric blue for product gradients and decorative wash.
|
||||
- **Brand Blue 200** ({colors.brand-blue-200}): Code badges, info-tag backgrounds.
|
||||
- **Brand Purple** ({colors.brand-purple}): Speech 2.8 and minor purple-product identity; gradient mate for magenta cards.
|
||||
|
||||
### Surface
|
||||
- **Canvas White** ({colors.canvas}): Primary page background and card surface.
|
||||
- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, sidebar-nav active state.
|
||||
- **Surface Soft** ({colors.surface-soft}): Quieter section divisions.
|
||||
- **Hairline** ({colors.hairline}): 1px input border and primary divider.
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Quieter table-row divider and secondary section break.
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): Primary headline and CTA text — the brand's near-black anchor.
|
||||
- **Ink Strong** ({colors.ink-strong}): Pure black used in promo banners and hero displays for maximum contrast.
|
||||
- **Charcoal** ({colors.charcoal}): Body text on light surfaces.
|
||||
- **Slate** ({colors.slate}): Secondary text, metadata.
|
||||
- **Steel** ({colors.steel}): Tertiary text, table headers, sidebar inactive items.
|
||||
- **Stone** ({colors.stone}): Muted captions and tab inactive labels.
|
||||
- **Muted** ({colors.muted}): Footer link text and de-emphasized labels.
|
||||
|
||||
### Semantic
|
||||
- **Success Background** ({colors.success-bg}): Pale-green wash for success badges and confirmations.
|
||||
- **Success Text** ({colors.success-text}): Deep-green ink for success badge labels.
|
||||
- Error tones derive from a `#d45656` red used in input border error states (not extracted as a top-level system token).
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**DM Sans** (primary): Geometric variable sans-serif. Used across every surface, every role. Fallbacks: Inter, Helvetica Neue, Helvetica, Arial.
|
||||
|
||||
DM Sans was chosen for its dual fluency: it scales cleanly from 80px hero displays (where -2px letter-spacing creates magazine-grade tightness) down to 12px micro labels (where the slightly humanist counters maintain legibility). The face has no italic variant in the brand's deployment — emphasis comes from weight (500/600/700) instead.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 80px | 600 | 1.10 | -2px | Homepage hero ("MiniMax Music 2.6") |
|
||||
| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.5px | Section openers, major page heroes |
|
||||
| `{typography.heading-lg}` | 40px | 600 | 1.20 | -1px | Sub-page headlines ("Token Plan", "Models Overview") |
|
||||
| `{typography.heading-md}` | 32px | 600 | 1.25 | -0.5px | Subsection headers ("Full-Stack Model Matrix") |
|
||||
| `{typography.heading-sm}` | 24px | 600 | 1.30 | 0 | Card titles, feature headers |
|
||||
| `{typography.card-title}` | 20px | 600 | 1.40 | 0 | Product-card titles, feature-tile headers |
|
||||
| `{typography.subtitle}` | 18px | 500 | 1.50 | 0 | Section subtitles, lead body |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |
|
||||
| `{typography.body-md-bold}` | 16px | 700 | 1.50 | 0 | Body emphasis |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells, navigation |
|
||||
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar nav, button labels |
|
||||
| `{typography.caption}` | 13px | 400 | 1.70 | 0 | Documentation captions, fine print |
|
||||
| `{typography.caption-bold}` | 13px | 600 | 1.50 | 0 | Badge labels, table-header text |
|
||||
| `{typography.micro}` | 12px | 400 | 1.50 | 0 | Footer microcopy, chip labels |
|
||||
| `{typography.button-md}` | 14px | 600 | 1.40 | 0 | Pill button labels |
|
||||
|
||||
### Principles
|
||||
- **Tight hero leading** (1.10) and aggressive negative letter-spacing on display sizes create a magazine-quality typographic display unique to MiniMax.
|
||||
- **Generous body leading** (1.50) keeps long-form documentation comfortable; captions push to 1.70 for scientific-paper-grade clarity.
|
||||
- **Weight discipline:** 400 (body), 500 (medium emphasis), 600 (headings/buttons), 700 (strong inline emphasis). Heavier weights are not used.
|
||||
- **Single typeface** strategy — never mix DM Sans with another sans-serif. Code samples (when shown) use a system monospace fallback, but no second typeface enters the brand canvas.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 4px (8px primary increment).
|
||||
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (80px) · `{spacing.hero}` (96px).
|
||||
- **Section rhythm**: Marketing pages separate at `{spacing.hero}` (96px) above-fold, then `{spacing.section-lg}` (80px) below; documentation tightens to `{spacing.section}` (64px); table rows compress to `{spacing.md}` (16px).
|
||||
- **Card internal padding**: Vibrant product cards use `{spacing.xxl}` (32px); documentation cards use `{spacing.lg}–{spacing.xl}` (20–24px); promo strips expand to `{spacing.section}` (64px).
|
||||
|
||||
### Grid & Container
|
||||
- Marketing pages use a 1280px max-width with 32px gutters.
|
||||
- Homepage product matrix renders as a 4-column row of 32px-rounded gradient cards, each ~280–320px wide.
|
||||
- AI Product Matrix below uses a 4-column grid with 16px-rounded white cards.
|
||||
- Documentation surfaces use a 3-column layout: left sidebar nav (~220px), center prose body (~720px max-width), right TOC (~180px). Sidebar persists on desktop; collapses to drawer below 1024px.
|
||||
- Token Plan / pricing pages use 2-column tabs above a 3-column tier card grid.
|
||||
|
||||
### Whitespace Philosophy
|
||||
Marketing pages give product photography and color cards generous breathing room — `{spacing.hero}` (96px) above-the-fold creates visual oxygen for the 80px hero display. Inside documentation, whitespace tightens dramatically: section gaps drop to `{spacing.xxl}` (32px), table rows pack down to `{spacing.md}` (16px), and the sidebar nav uses `{spacing.xs}` (8px) vertical rhythm.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system runs predominantly flat. Elevation is reserved for sticky panels, dropdowns, and the rare floating CTA.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows, form inputs |
|
||||
| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Card-recommendation, hover-elevated tiles |
|
||||
| 2 (card) | `rgba(0, 0, 0, 0.08) 0px 4px 6px 0px` | Standard feature cards, dropdowns |
|
||||
| 3 (atmospheric) | `rgba(0, 0, 0, 0.08) 0px 0px 22px 0px` | Diffuse glow on featured product cards |
|
||||
| 4 (modal) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Modals, confirmation dialogs, sticky panels |
|
||||
|
||||
### Decorative Depth
|
||||
- The vibrant gradient product cards carry their own atmospheric depth via internal radial gradients and silhouette imagery — no shadow needed; the color does the work.
|
||||
- Brand-tinted shadows (`rgba(44, 30, 116, 0.16) 0px 0px 15px`) appear under purple-themed cards for subtle ambient lift.
|
||||
- Dotted/grain textures occasionally appear inside product cards as photographic-content decoration; these are not formalized as system tokens.
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Code chips, micro-controls |
|
||||
| `{rounded.sm}` | 6px | Compact controls, table cells |
|
||||
| `{rounded.md}` | 8px | Inputs, secondary buttons, search pill |
|
||||
| `{rounded.lg}` | 12px | Documentation cards, recommendation tiles |
|
||||
| `{rounded.xl}` | 16px | Standard feature cards, AI product tiles |
|
||||
| `{rounded.xxl}` | 20px | Larger feature panels |
|
||||
| `{rounded.xxxl}` | 24px | AI product tile feature variants |
|
||||
| `{rounded.hero}` | 32px | Vibrant gradient product cards, promo CTA strip |
|
||||
| `{rounded.full}` | 9999px | All buttons, all pill tabs, badges |
|
||||
|
||||
### Photography Geometry
|
||||
- Vibrant product cards use 32px corner softening — distinct from the 16px used on quiet white cards. The doubled radius is the visual signature of "this is a featured product moment."
|
||||
- Product imagery inside cards is treated as photographic content (silhouettes, dark portrait studio lighting) without rounded internal frames.
|
||||
- Avatar circles (rare, in testimonials) are `{rounded.full}` — perfect circles.
|
||||
|
||||
## Components
|
||||
|
||||
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Black pill primary CTA, the dominant action across all surfaces.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
|
||||
- Pressed state `button-primary-pressed` lifts to `{colors.charcoal}`.
|
||||
- Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.
|
||||
|
||||
**`button-secondary`** — Outlined pill secondary action, paired with primary in dual-CTA hero patterns.
|
||||
- Background transparent, text `{colors.ink}`, border `1px solid {colors.ink}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-tertiary`** — White-fill quieter pill, used for tertiary nav and informational CTAs.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, typography `{typography.button-md}`, padding `11px 24px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-link`** — Inline text link styled as a subtle button.
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `8px 0`. Underline appears on activation.
|
||||
|
||||
**`button-icon-circular`** — 36×36px circular utility button (carousel arrows, share, copy).
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.
|
||||
|
||||
### Vibrant Product Cards
|
||||
|
||||
**`product-card-coral`** — M2.7 / Token Plan signature card.
|
||||
- Background `{colors.brand-coral}`, text `{colors.on-dark}`, rounded `{rounded.hero}` (32px), padding `{spacing.xxl}`.
|
||||
- Hosts the M2.7 wordmark in massive `{typography.display-lg}` with white tagline.
|
||||
|
||||
**`product-card-magenta`** — Music 2.6 product showcase.
|
||||
- Background `{colors.brand-magenta}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`product-card-blue`** — Hailuo Video product showcase.
|
||||
- Background `{colors.brand-blue}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`product-card-purple`** — Speech 2.8 / variant product showcase.
|
||||
- Background `{colors.brand-purple}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`product-card-photo`** — Dark portrait product card (homepage S2 placement, video-emotion product).
|
||||
- Background `{colors.primary}` (black with overlaid product photo), text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.xxl}`.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`card-base`** — Standard documentation/feature card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`card-feature`** — Quieter feature panel on light gray.
|
||||
- Background `{colors.surface}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-recommendation`** — "Recommended Reading" tile in documentation footer.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`promo-cta-card`** — Bright orange "Refunds of 10%..." promo strip with embedded CTA pill.
|
||||
- Background `{colors.brand-coral}`, text `{colors.on-dark}`, rounded `{rounded.hero}`, padding `{spacing.section}`. Embedded button uses `button-tertiary` (white pill on coral) for the "Join Now" action.
|
||||
|
||||
**`ai-product-tile`** — White card in the AI Product Matrix grid (Agent, Hailuo Video, MiniMax Audio).
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. Carries an icon/illustration top, title `{typography.card-title}`, description `{typography.body-sm}`.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text field.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 40px.
|
||||
|
||||
**`text-input-focused`** — Activated state.
|
||||
- Border switches to `2px solid {colors.brand-blue-deep}`.
|
||||
|
||||
**`text-input-error`** — Validation error state.
|
||||
- Border switches to `1px solid #d45656`; error label below in matching red `{typography.body-sm}`.
|
||||
|
||||
**`search-pill`** — Documentation top-bar search field.
|
||||
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 36px, border `1px solid {colors.hairline}`.
|
||||
|
||||
### Tabs
|
||||
|
||||
**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation (Benchmark / Self-Evaluation / Multi-Agent Collaboration on the M2.7 page).
|
||||
- Inactive: text `{colors.steel}`, transparent background, padding `{spacing.md} {spacing.lg}`. Active: text shifts to `{colors.ink}`, 2px bottom border in `{colors.ink}`.
|
||||
|
||||
**`pill-tab`** + **`pill-tab-active`** — Pricing-page tab nav (Token Plan / Audio Subscription / Video Package).
|
||||
- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
|
||||
- Active: background `{colors.primary}`, text `{colors.on-primary}`, no border (or matching black border).
|
||||
|
||||
### Badges & Status
|
||||
|
||||
**`badge-success`** — Pale-green confirmation badge ("Available", "Active").
|
||||
- Background `{colors.success-bg}`, text `{colors.success-text}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-new`** — Coral "NEW" / "Live" pill for fresh releases.
|
||||
- Background `{colors.brand-coral}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-beta`** — Pale-blue "BETA" / informational pill.
|
||||
- Background `{colors.brand-blue-200}`, text `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-code`** — Inline code-style chip ("Code", "API").
|
||||
- Background `{colors.brand-blue-200}`, text `{colors.brand-blue-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 6px`.
|
||||
|
||||
**`promo-banner`** — Sticky black promotional strip ABOVE the top nav ("Invite & Earn — Rewards for Both!").
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.lg}`. Carries one-line copy with optional inline link.
|
||||
|
||||
### Data Tables
|
||||
|
||||
**`data-table`** — Documentation models comparison table.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`data-table-header`** — Top header row of the data table.
|
||||
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.caption-bold}`, padding `{spacing.sm} {spacing.md}`.
|
||||
|
||||
**`data-table-row`** — Body rows.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, padding `{spacing.md}`, bottom border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
### Navigation
|
||||
|
||||
**Top Navigation (Marketing)** — Sticky white bar with logo, link list, and right-side CTAs.
|
||||
- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`.
|
||||
- Left: MiniMax wordmark + horizontal link list (Models, Product, API, Company).
|
||||
- Right: black-pill "Contact Us" + outlined-pill "Login".
|
||||
|
||||
**Top Navigation (Documentation/Platform)** — Compressed nav with center search-pill and right-side account/upgrade CTAs.
|
||||
- Background `{colors.canvas}`, height ~56px, with search-pill at center and "Documentation / Account / Subscribe" links + black-pill "Sign Up" right.
|
||||
|
||||
**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — Documentation left rail link entries.
|
||||
- Inactive: background transparent, text `{colors.charcoal}`, typography `{typography.body-sm}`, rounded `{rounded.sm}`, padding `{spacing.xs} {spacing.md}`.
|
||||
- Active: background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`.
|
||||
|
||||
**`doc-toc-item`** — Right-rail table-of-contents links.
|
||||
- Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xs} 0`. Active item color shifts to `{colors.ink}`.
|
||||
|
||||
### Signature Components
|
||||
|
||||
**`hero-band-marketing`** — Centered hero with massive 80px display + dual-CTA pair.
|
||||
- Layout: centered headline in `{typography.hero-display}` ({colors.ink}), centered subtitle in `{typography.subtitle}` ({colors.steel}), centered button row (`button-primary` + `button-secondary`).
|
||||
|
||||
**`product-matrix-grid`** — 4-column horizontal scroll of vibrant gradient product cards (homepage "Full-Stack Model Matrix").
|
||||
- Each tile uses one of the `product-card-*` variants (coral, magenta, blue, purple, photo).
|
||||
- Card title in `{typography.display-lg}` (M2.7 wordmark) or `{typography.heading-lg}` (Music 2.6).
|
||||
- Below the wordmark: thin tagline in `{typography.body-sm}` 80% white opacity.
|
||||
- Optional badge top-right: `badge-new`.
|
||||
- Card heights are uniform (~360–400px); the row scrolls horizontally on mobile.
|
||||
|
||||
**`ai-product-matrix`** — 4-column grid of white product tiles below the vibrant matrix (Agent / Hailuo Video / Audio / Video).
|
||||
- Each tile is `ai-product-tile` chrome.
|
||||
- Top: 100px-tall illustration zone (often line-art icon or 3D mark).
|
||||
- Below: title in `{typography.card-title}`, description in `{typography.body-sm}` `{colors.steel}`.
|
||||
|
||||
**`docs-prose-block`** — Documentation main content area.
|
||||
- Max-width ~720px, centered. Body in `{typography.body-md}` `{colors.charcoal}` line-height 1.6.
|
||||
- Inline code in `{typography.body-md}` monospace fallback with `{colors.surface}` background and `{rounded.xs}` corners.
|
||||
|
||||
**`models-comparison-table`** — Documentation table comparing model sizes and features.
|
||||
- Uses `data-table` chrome. Each row carries a model name (linkified, in `{colors.ink}` body-sm-medium), a description column (`{colors.charcoal}`), and a features bullet list column.
|
||||
|
||||
**`testimonial-stat-row`** — Stats strip ("214,000+ Enterprise Clients & Developers", "0+ Countries Served").
|
||||
- Horizontal row of 4 stat cells, each cell with a large number in `{typography.heading-lg}` `{colors.ink}` and a label below in `{typography.body-sm}` `{colors.steel}`.
|
||||
|
||||
**`footer-region`** — Dense black-canvas multi-column footer.
|
||||
- Background `{colors.footer-bg}`, padding `{spacing.section} {spacing.xxl}`.
|
||||
- Top row: MiniMax wordmark ("intelligence with everyone" tagline) and social icons (X, Twitter, GitHub, etc.).
|
||||
- Body: 4-column link grid (Research / Product / API / Company / News).
|
||||
- Section headers in `{typography.body-sm-medium}` `{colors.on-dark}`.
|
||||
|
||||
**`footer-link`** — Individual link entry inside the footer column.
|
||||
- Background transparent, text `{colors.muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`. Active/visited states do not change color — only opacity shifts on activation.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use `{colors.primary}` (black) as the dominant CTA — it's the brand's most recognizable interactive element.
|
||||
- Reserve product brand colors (`{colors.brand-coral}`, `{colors.brand-magenta}`, `{colors.brand-blue}`, `{colors.brand-purple}`) ONLY for product-identity moments — never for general buttons or text.
|
||||
- Pair `{rounded.hero}` (32px) gradient cards with `{rounded.xl}` (16px) white cards in the same viewport — the radius contrast is the visual signature.
|
||||
- Apply `{rounded.full}` to every button, every pill tab, every badge.
|
||||
- Use `{typography.hero-display}` (80px) with -2px letter-spacing for hero displays — never compromise the leading or letter-spacing.
|
||||
- Treat each model/product line as a distinct color identity. M2.7 is coral, Music is magenta, Hailuo is blue. These are brand assignments, not free choices.
|
||||
|
||||
### Don't
|
||||
- Don't use brand-coral or brand-magenta on body text or large surfaces — they lose meaning when overused.
|
||||
- Don't soften corners on buttons (anything less than `{rounded.full}`); the pill is a brand signature.
|
||||
- Don't introduce a second display typeface; DM Sans handles every role.
|
||||
- Don't reduce hero leading below 1.10 — the brand needs that breathing room on the 80px display.
|
||||
- Don't apply heavy shadows on white cards; flat-with-borders is the documentation default.
|
||||
- Don't put gradient backgrounds on standard buttons; gradients are reserved for product-card identity moments.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile (small) | < 480px | Single column. Hero drops to 40px. Pill nav collapses to hamburger. Product matrix horizontal-scroll. Footer 1-column accordion. |
|
||||
| Mobile (large) | 480 – 767px | Same as small but AI product matrix renders 2-up. |
|
||||
| Tablet | 768 – 1023px | 2-column AI product matrix. Pill-tab nav returns. Documentation sidebar collapses to drawer. |
|
||||
| Desktop | 1024 – 1279px | Full 4-column product matrix; 3-column docs grid (sidebar / body / TOC). |
|
||||
| Wide Desktop | ≥ 1280px | Wider hero gutters, larger product photography, fixed 220px sidebar. |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons render at 38–40px effective height — bumps to 44px on mobile via padding override.
|
||||
- Circular icon buttons: 36×36px desktop → 44×44px on mobile.
|
||||
- Form inputs render at 40px height; bumps to 44px on mobile.
|
||||
- Sidebar nav items render at ~32px tall — bumps to 44px on mobile drawers.
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Promo banner** stays full-width; collapses to single line at < 480px with truncation.
|
||||
- **Top nav** below 1024px collapses to hamburger; horizontal links move into drawer.
|
||||
- **Documentation grid**: 3-column desktop → sidebar-drawer at < 1024px → single-column with collapsible sidebar at < 768px.
|
||||
- **Product matrix**: 4-column desktop → horizontal-scroll at < 1024px (carousel-style with snap points).
|
||||
- **AI Product Matrix**: 4-column → 2-column at tablet → 1-column at mobile.
|
||||
- **Hero typography**: `{typography.hero-display}` (80px) → 56px at < 1024px → 40px at < 768px → 32px at < 480px.
|
||||
- **Stats strip**: 4-column → 2×2 at < 768px → 1-column at < 480px.
|
||||
|
||||
### Image Behavior
|
||||
- Product card imagery uses photographic content with internal gradient overlays; lazy-loaded below the fold.
|
||||
- AI product tile illustrations are SVG-based; remain crisp at all breakpoints.
|
||||
- Avatar imagery in testimonials uses 1:1 aspect ratio with `{rounded.full}` masking.
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. The system has high internal consistency.
|
||||
2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.
|
||||
3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs and contrast issues.
|
||||
4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-active`).
|
||||
5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Headlines step down `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
|
||||
6. Keep brand colors (coral, magenta, blue, purple) confined to product-card identity. If a brand color appears on a standard button or generic surface, ask whether it earned that surface.
|
||||
7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this language.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Specific dark-mode token values (canvas, surface, ink, hairline) are not surfaced on these pages; the brand has not yet shipped a published dark-mode palette.
|
||||
- Animation/transition timings are not extracted; recommend 150–200ms ease for hover/focus state transitions.
|
||||
- Form validation success state is not explicitly captured beyond defaults — implement following standard green-border + success badge patterns.
|
||||
- Code syntax highlighting palette inside docs is not formalized; documentation samples appear with system-default monospace and minimal coloring.
|
||||
@@ -0,0 +1,5 @@
|
||||
# Minimax Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/minimax/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,852 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Mintlify
|
||||
description: "Mintlify presents documentation infrastructure with a dual-mode aesthetic — atmospheric sky-gradient marketing heroes (cloud illustration backdrops, soft cream-to-blue washes) paired with dense developer-grade documentation surfaces. The system uses Inter for UI prose, Geist Mono for code, and a signature Mintlify green ({colors.brand-green}) reserved for accent CTAs and active states. Black-pill primary buttons dominate marketing, white-on-dark inversions appear on dark hero bands, and a 3-column documentation layout (sidebar / prose / TOC) anchors the developer experience. Coverage spans homepage, startups program, pricing comparison, and the live tabs documentation page."
|
||||
|
||||
colors:
|
||||
primary: "#0a0a0a"
|
||||
on-primary: "#ffffff"
|
||||
brand-green: "#00d4a4"
|
||||
brand-green-deep: "#00b48a"
|
||||
brand-green-soft: "#7cebcb"
|
||||
brand-tag: "#3772cf"
|
||||
brand-warn: "#c37d0d"
|
||||
brand-annotate: "#1ba673"
|
||||
brand-error: "#d45656"
|
||||
brand-cursor: "#888888"
|
||||
hero-sky-from: "#87a8c8"
|
||||
hero-sky-to: "#f5e9d8"
|
||||
hero-dark-from: "#1a3d4a"
|
||||
hero-dark-to: "#2d5a4f"
|
||||
testimonial-orange: "#f55a3c"
|
||||
testimonial-orange-deep: "#cc3a1f"
|
||||
canvas: "#ffffff"
|
||||
canvas-dark: "#0a0a0a"
|
||||
surface: "#f7f7f7"
|
||||
surface-soft: "#fafafa"
|
||||
surface-code: "#1c1c1e"
|
||||
hairline: "#e5e5e5"
|
||||
hairline-soft: "#ededed"
|
||||
hairline-dark: "#1f1f1f"
|
||||
ink: "#0a0a0a"
|
||||
charcoal: "#1c1c1e"
|
||||
slate: "#3a3a3c"
|
||||
steel: "#5a5a5c"
|
||||
stone: "#888888"
|
||||
muted: "#a8a8aa"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-muted: "#b3b3b3"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: Inter
|
||||
fontSize: 72px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -2px
|
||||
display-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 56px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1.5px
|
||||
heading-1:
|
||||
fontFamily: Inter
|
||||
fontSize: 48px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1px
|
||||
heading-2:
|
||||
fontFamily: Inter
|
||||
fontSize: 36px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.5px
|
||||
heading-3:
|
||||
fontFamily: Inter
|
||||
fontSize: 28px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.25
|
||||
heading-4:
|
||||
fontFamily: Inter
|
||||
fontSize: 22px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.30
|
||||
heading-5:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
subtitle:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-md-medium:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-sm-medium:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
caption:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
caption-bold:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
micro:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.40
|
||||
micro-uppercase:
|
||||
fontFamily: Inter
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
letterSpacing: 0.5px
|
||||
button-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
code-md:
|
||||
fontFamily: Geist Mono
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
code-sm:
|
||||
fontFamily: Geist Mono
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
code-inline:
|
||||
fontFamily: Geist Mono
|
||||
fontSize: 13px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 24px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 20px
|
||||
xl: 24px
|
||||
xxl: 32px
|
||||
xxxl: 40px
|
||||
section-sm: 48px
|
||||
section: 64px
|
||||
section-lg: 96px
|
||||
hero: 120px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 20px"
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.charcoal}"
|
||||
textColor: "{colors.on-primary}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.hairline}"
|
||||
textColor: "{colors.muted}"
|
||||
button-accent-green:
|
||||
backgroundColor: "{colors.brand-green}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 20px"
|
||||
button-on-dark:
|
||||
backgroundColor: "{colors.on-dark}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 20px"
|
||||
button-secondary:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "10px 20px"
|
||||
border: "1px solid {colors.hairline}"
|
||||
button-ghost:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "8px 12px"
|
||||
button-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "0"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 32px
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-base:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-feature:
|
||||
backgroundColor: "{colors.surface}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-help:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-startup-perk:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pricing-card-featured:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "2px solid {colors.brand-green}"
|
||||
shadow: "rgba(0, 212, 164, 0.08) 0px 8px 24px"
|
||||
testimonial-card-feature:
|
||||
backgroundColor: "{colors.testimonial-orange}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.section}"
|
||||
testimonial-card-quote:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
height: 40px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "2px solid {colors.brand-green}"
|
||||
search-pill:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
height: 36px
|
||||
border: "1px solid {colors.hairline}"
|
||||
segmented-tab:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "0 0 2px transparent solid"
|
||||
segmented-tab-active:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
border: "0 0 2px {colors.ink} solid"
|
||||
pill-tab:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "8px 16px"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pill-tab-active:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.full}"
|
||||
border: "1px solid {colors.primary}"
|
||||
toggle-monthly-yearly:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px"
|
||||
badge-discount:
|
||||
backgroundColor: "{colors.brand-green}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "2px 8px"
|
||||
badge-required:
|
||||
backgroundColor: "{colors.brand-error}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.micro-uppercase}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 6px"
|
||||
badge-type:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.code-sm}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 6px"
|
||||
badge-tag:
|
||||
backgroundColor: "rgba(55, 114, 207, 0.15)"
|
||||
textColor: "{colors.brand-tag}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 8px"
|
||||
promo-banner:
|
||||
backgroundColor: "{colors.canvas-dark}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
code-block:
|
||||
backgroundColor: "{colors.surface-code}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.code-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.md}"
|
||||
code-block-header:
|
||||
backgroundColor: "{colors.surface-code}"
|
||||
textColor: "{colors.on-dark-muted}"
|
||||
typography: "{typography.caption}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
border: "0 0 1px {colors.hairline-dark} solid"
|
||||
code-inline:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.charcoal}"
|
||||
typography: "{typography.code-inline}"
|
||||
rounded: "{rounded.xs}"
|
||||
padding: "2px 6px"
|
||||
border: "1px solid {colors.hairline}"
|
||||
property-row:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.md} 0"
|
||||
border: "0 0 1px {colors.hairline-soft} solid"
|
||||
feature-comparison-table:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
feature-comparison-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
border: "0 0 1px {colors.hairline-soft} solid"
|
||||
sidebar-nav-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
sidebar-nav-item-active:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
sidebar-section-header:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.micro-uppercase}"
|
||||
padding: "{spacing.md} {spacing.md} {spacing.xs}"
|
||||
doc-toc-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.xxs} 0"
|
||||
doc-toc-item-active:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
copy-code-button:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.on-dark-muted}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "{spacing.xxs} {spacing.xs}"
|
||||
border: "1px solid {colors.hairline-dark}"
|
||||
hero-band-sky:
|
||||
backgroundColor: "{colors.hero-sky-from}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "0"
|
||||
padding: "{spacing.hero}"
|
||||
hero-band-dark:
|
||||
backgroundColor: "{colors.hero-dark-from}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "0"
|
||||
padding: "{spacing.hero}"
|
||||
hero-product-mockup:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "0"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
shadow: "rgba(0, 0, 0, 0.12) 0px 24px 48px -8px"
|
||||
logo-wall-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-md-medium}"
|
||||
padding: "{spacing.lg}"
|
||||
faq-accordion-item:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
footer-region:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.section} {spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
footer-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.xxs} 0"
|
||||
startup-program-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
founder-quote-card:
|
||||
backgroundColor: "{colors.testimonial-orange}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Mintlify positions itself at the intersection of polished marketing presentation and developer-grade documentation density. The home and startups pages open with cinematic atmospheric heroes — soft sky-gradient backdrops with cloud illustrations on the homepage, dark teal-to-mint gradients with a rocket launch on the startups page — that feel more like a SaaS landing aesthetic than a developer tool. Then the deeper surfaces (pricing comparison, live documentation pages) collapse into dense, high-information layouts where Inter body type carries 14–16px copy across long-form prose, syntax-highlighted code blocks, and 3-column documentation grids.
|
||||
|
||||
The brand's signature mint green ({colors.brand-green}) appears sparingly but decisively — on the hero "Get started" pill button, the green checkmark icons inside feature lists, the "Featured" pricing tier border, and active state indicators inside docs UI. Black-pill primary buttons dominate the marketing flow; white-on-dark inversions appear on dark hero bands. The signature pairing of Inter (body, headings) with Geist Mono (code blocks, inline references, type signatures) reinforces the developer-tool DNA without requiring a third typeface.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Atmospheric gradient hero bands (sky-blue to cream on homepage; teal-to-mint on startups) provide cinematic marketing presentation
|
||||
- Signature Mintlify mint green ({colors.brand-green}) reserved for accent CTAs, active states, and feature confirmations
|
||||
- Black-pill primary buttons ({colors.primary} + `{rounded.full}`) for marketing CTAs
|
||||
- Inter for all UI prose; Geist Mono for code blocks, inline code, and type/property signatures
|
||||
- 3-column documentation layout (sidebar / prose / TOC) with dense 14px body type for long-form developer reading
|
||||
- Tightly-controlled radius scale: marketing uses `{rounded.lg}` (12px), pill buttons use `{rounded.full}` — no in-between corner softening
|
||||
- Vibrant testimonial card (`{colors.testimonial-orange}`) breaks color rhythm intentionally for emotional impact
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: mintlify.com/ (homepage), /startups (program page), /pricing (comparison), /docs/components/tabs (live documentation). Token coverage was identical across all four pages.
|
||||
|
||||
### Brand & Accent
|
||||
- **Mintlify Mint** ({colors.brand-green}): Signature accent — used on hero "Get started" pill button, green checkmarks in feature lists, featured pricing tier border accent, sidebar active indicator dots.
|
||||
- **Deep Mint** ({colors.brand-green-deep}): Pressed/active variant of the mint accent.
|
||||
- **Soft Mint** ({colors.brand-green-soft}): Subtle background tint for success states and confirmation surfaces.
|
||||
- **Brand Tag** ({colors.brand-tag}): Documentation tag and reference color (used in `<Tabs>` JSX-style annotations and code-tag chips).
|
||||
- **Brand Annotate** ({colors.brand-annotate}): Inline code annotation green (used in twoslash code annotation system).
|
||||
- **Brand Warn** ({colors.brand-warn}): Code warning highlight (deprecated, caution).
|
||||
- **Brand Error** ({colors.brand-error}): Red used for required-field labels and error highlight.
|
||||
- **Testimonial Orange** ({colors.testimonial-orange}): Warm coral-orange used on the "Cursor" testimonial card and warm callout surfaces.
|
||||
|
||||
### Surface
|
||||
- **Canvas White** ({colors.canvas}): Primary page and card background.
|
||||
- **Canvas Dark** ({colors.canvas-dark}): Promo banner, dark inversion surfaces, code editor wrapper.
|
||||
- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest, code-inline background, sidebar active state.
|
||||
- **Surface Soft** ({colors.surface-soft}): Quieter section backgrounds and FAQ accordion.
|
||||
- **Surface Code** ({colors.surface-code}): Dark code-block wrapper background.
|
||||
- **Hairline** ({colors.hairline}): 1px borders and primary dividers.
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Quieter table-row dividers and secondary section breaks.
|
||||
|
||||
### Hero Atmospheric
|
||||
- **Hero Sky From / To** ({colors.hero-sky-from}, {colors.hero-sky-to}): Atmospheric sky-blue to soft cream gradient on the homepage hero.
|
||||
- **Hero Dark From / To** ({colors.hero-dark-from}, {colors.hero-dark-to}): Dark teal to mint gradient on the startups hero.
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): Primary headlines and CTA text.
|
||||
- **Charcoal** ({colors.charcoal}): Body text, code-inline foreground.
|
||||
- **Slate** ({colors.slate}): Secondary text and metadata.
|
||||
- **Steel** ({colors.steel}): Tertiary text, table headers, sidebar inactive items, footer links.
|
||||
- **Stone** ({colors.stone}): Captions, twoslash cursor color, muted labels.
|
||||
- **Muted** ({colors.muted}): De-emphasized labels and disabled text.
|
||||
- **On Dark** ({colors.on-dark}): White text on dark surfaces (hero bands, code blocks, promo banner).
|
||||
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white for code-block headers and metadata on dark.
|
||||
|
||||
### Semantic
|
||||
- Error tones derive from `{colors.brand-error}` for input borders, required-field labels, and validation messaging.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**Inter** (primary): Variable typeface optimized for UI legibility. Used across every UI surface — body, headings, navigation, button labels, captions. Fallbacks: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif.
|
||||
|
||||
**Geist Mono** (code): Monospace typeface used inside code blocks, inline code references, type signatures (e.g. `string`, `number`, `boolean`), and property names in API documentation. Fallbacks: 'SF Mono', Menlo, Consolas, 'Geist Mono Fallback', monospace.
|
||||
|
||||
The brand uses no italic variants of either face — emphasis comes from weight (500/600), color shift, or background highlighting (in code references).
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 72px | 600 | 1.05 | -2px | Marketing hero display ("The intelligent Knowledge Platform") |
|
||||
| `{typography.display-lg}` | 56px | 600 | 1.10 | -1.5px | Major section opener ("Built for the intelligence age") |
|
||||
| `{typography.heading-1}` | 48px | 600 | 1.10 | -1px | Page-level headlines ("Pricing on your terms") |
|
||||
| `{typography.heading-2}` | 36px | 600 | 1.20 | -0.5px | Section headlines ("Apply to the Mintlify startup program") |
|
||||
| `{typography.heading-3}` | 28px | 600 | 1.25 | 0 | Subsection headers, "Tabs" docs page title |
|
||||
| `{typography.heading-4}` | 22px | 600 | 1.30 | 0 | Card titles, larger feature headers |
|
||||
| `{typography.heading-5}` | 18px | 600 | 1.40 | 0 | Smaller feature headers, FAQ question titles |
|
||||
| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle, lead body |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |
|
||||
| `{typography.body-md-medium}` | 16px | 500 | 1.50 | 0 | Body emphasis |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells, navigation |
|
||||
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Active sidebar nav, button labels, tab labels |
|
||||
| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Helper text, fine print, code-block headers |
|
||||
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels |
|
||||
| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Footer microcopy, label chips |
|
||||
| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 0.5px | Sidebar section headers, "REQUIRED" labels |
|
||||
| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Pill button labels |
|
||||
| `{typography.code-md}` | 14px | 400 | 1.50 | 0 | Code block content |
|
||||
| `{typography.code-sm}` | 13px | 400 | 1.40 | 0 | Smaller code, type signatures |
|
||||
| `{typography.code-inline}` | 13px | 500 | 1.30 | 0 | Inline `<Tabs>` references in body |
|
||||
|
||||
### Principles
|
||||
- **Tight hero leading** (1.05) creates magazine-grade display headlines on the 72px hero
|
||||
- **Negative letter-spacing** progresses inversely with size — display sizes use -2px to -1.5px; smaller headings relax to 0
|
||||
- **Documentation-grade body** (1.50 line-height on 14–16px) ensures comfortable long-form reading in dense docs surfaces
|
||||
- **Inter / Geist Mono pairing** — Inter for everything else, Geist Mono surgically for code references; the contrast between the two is the brand's developer-respect signal
|
||||
- **Uppercase micro labels** with +0.5px letter-spacing carry sidebar section headers and "REQUIRED" annotation tags
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 4px (8px primary increment)
|
||||
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (96px) · `{spacing.hero}` (120px)
|
||||
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px) between major bands; pricing comparison tightens to `{spacing.section}` (64px); documentation surfaces use `{spacing.xxl}` (32px) between subsections
|
||||
- **Card internal padding**: Standard `{spacing.xl}` (24px) for compact cards; `{spacing.xxl}` (32px) for pricing cards and feature panels; testimonial card pushes to `{spacing.section}` (64px) for hero-card presence
|
||||
|
||||
### Grid & Container
|
||||
- Marketing pages use a 1280px max-width with 32px gutters
|
||||
- Hero and feature bands often use 2-column splits (text left, illustration/mockup right)
|
||||
- Pricing page renders 3 tier cards in a row at desktop (FREE / Lift Off / Custom), then a comprehensive feature comparison table below
|
||||
- Documentation pages use a strict 3-column grid: left sidebar nav (~240px), center prose (~720px max-width), right TOC (~200px)
|
||||
- Logo walls use 6-up rows of customer logos at 80–100px height each
|
||||
|
||||
### Whitespace Philosophy
|
||||
Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) above-the-fold creates space for atmospheric gradient backdrops to read clearly. Documentation tightens dramatically: section gaps drop to `{spacing.xxl}` (32px), table rows pack to `{spacing.md}` (16px), sidebar nav compresses to `{spacing.xs}` (8px) vertical rhythm.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system runs predominantly flat with strategic atmospheric depth.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow; `{colors.hairline}` border | Default cards, table rows, form inputs |
|
||||
| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles, subtle highlights |
|
||||
| 2 (card) | `rgba(0, 0, 0, 0.08) 0px 4px 12px 0px` | Standard feature cards |
|
||||
| 3 (mockup) | `rgba(0, 0, 0, 0.12) 0px 24px 48px -8px` | Hero product mockup framing — the deep diffuse drop on the homepage hero docs preview |
|
||||
| 4 (brand-tinted) | `rgba(0, 212, 164, 0.08) 0px 8px 24px` | Featured pricing tier glow |
|
||||
|
||||
### Decorative Depth
|
||||
- The homepage hero uses an atmospheric photographic backdrop (cloud illustration on sky-gradient) for depth — no shadow needed; the imagery does the work
|
||||
- The startups hero uses a similar treatment with a rocket-launch illustration cutting across the dark teal gradient
|
||||
- Code blocks carry their own internal depth via syntax-highlighting color hierarchy on the dark surface; no shadow used
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Inline code chips, micro tags |
|
||||
| `{rounded.sm}` | 6px | Sidebar nav items, type badges |
|
||||
| `{rounded.md}` | 8px | Inputs, search pill, code blocks, secondary cards |
|
||||
| `{rounded.lg}` | 12px | Standard cards, pricing tiers, hero mockup, FAQ items |
|
||||
| `{rounded.xl}` | 16px | Larger feature panels |
|
||||
| `{rounded.xxl}` | 24px | Featured product showcase tiles |
|
||||
| `{rounded.full}` | 9999px | All buttons, pill tabs, badges |
|
||||
|
||||
The radius scale is tightly disciplined — the brand never uses a corner softening between `{rounded.md}` (8px) and `{rounded.lg}` (12px) for the same component family. Pill buttons (`{rounded.full}`) are used universally; rectangular cards use `{rounded.lg}` (12px) consistently.
|
||||
|
||||
### Photography Geometry
|
||||
- Hero illustrations (cloud, rocket) sit on full-bleed gradient backdrops with no internal framing
|
||||
- Customer logo walls use 1:1 ratio cells without rounding (logos are presented inline as wordmarks)
|
||||
- Testimonial photos use 1:1 aspect with `{rounded.md}` (8px) softening
|
||||
- Code editor mockup hero image uses `{rounded.lg}` (12px) corners on a hairline-bordered card with a deep diffuse drop shadow
|
||||
|
||||
## Components
|
||||
|
||||
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Black pill primary CTA, the dominant action across all surfaces.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.full}`.
|
||||
- Pressed state `button-primary-pressed` lifts to `{colors.charcoal}`.
|
||||
- Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.
|
||||
|
||||
**`button-accent-green`** — Mint green pill for brand-emphasis CTAs (hero "Get started", featured pricing CTA).
|
||||
- Background `{colors.brand-green}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-on-dark`** — White pill for use on dark hero bands (startups page "Get started").
|
||||
- Background `{colors.on-dark}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-secondary`** — Outlined pill for secondary actions.
|
||||
- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-ghost`** — Quieter rectangular ghost button (sidebar action, tertiary nav).
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-link`** — Inline text link styled as a subtle button.
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.body-sm-medium}`, padding `0`. Underline appears on activation.
|
||||
|
||||
**`button-icon-circular`** — 32×32px circular utility button (close, copy, arrow).
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`card-base`** — Standard documentation/feature card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`card-feature`** — Feature panel on light gray surface.
|
||||
- Background `{colors.surface}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-help`** — "Need help?" CTA cards below the pricing comparison ("Quickstart guide", "Guide to technical writing", "Founder", "Sales").
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`card-startup-perk`** — Startup-program perk grid item ("Discounts and credits", "Priority support", "Startup pack", "Founder community").
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline}`. Carries an icon at top, heading `{typography.heading-5}`, description `{typography.body-sm}` `{colors.steel}`.
|
||||
|
||||
**`pricing-card`** — Standard pricing tier card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
- Title `{typography.heading-3}`, price `{typography.display-lg}`, feature list `{typography.body-sm}` with green checkmark icons.
|
||||
|
||||
**`pricing-card-featured`** — Highlighted pricing tier (Lift Off / featured plan).
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.brand-green}`, soft brand-tinted shadow `rgba(0, 212, 164, 0.08) 0px 8px 24px`.
|
||||
|
||||
**`testimonial-card-feature`** — Bright orange large testimonial card with photo + quote ("Cursor — Every YC batch we consistently see the top performing startups use Mintlify to build their docs.").
|
||||
- Background `{colors.testimonial-orange}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.section}`. Photo on right, large quote in `{typography.heading-3}` left, attribution below in `{typography.body-sm-medium}`.
|
||||
|
||||
**`testimonial-card-quote`** — Smaller white testimonial card on the startups page.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`founder-quote-card`** — Cursor founder testimonial card variant on the orange surface.
|
||||
- Background `{colors.testimonial-orange}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`. Carries the specific founder portrait + quote treatment.
|
||||
|
||||
**`startup-program-card`** — Larger application/program card containing perks grid + apply CTA.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text field.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 40px.
|
||||
|
||||
**`text-input-focused`** — Activated state.
|
||||
- Border switches to `2px solid {colors.brand-green}` — focus uses the brand mint as the activation signal.
|
||||
|
||||
**`search-pill`** — Documentation top-bar search.
|
||||
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 36px, border `1px solid {colors.hairline}`.
|
||||
|
||||
### Tabs
|
||||
|
||||
**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation (used inside docs Tabs component for "First tab / Second tab / Third tab").
|
||||
- Inactive: text `{colors.steel}`, transparent background, padding `{spacing.sm} {spacing.md}`. Active: text `{colors.ink}`, 2px bottom border in `{colors.ink}`.
|
||||
|
||||
**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (top of pricing page: "Pricing / Roadmap").
|
||||
- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `8px 16px`, rounded `{rounded.full}`.
|
||||
- Active: background `{colors.primary}`, text `{colors.on-primary}`, no border.
|
||||
|
||||
**`toggle-monthly-yearly`** — Two-state pill toggle (Monthly / Annual on pricing page).
|
||||
- Background `{colors.surface}`, rounded `{rounded.full}`, padding `4px`. Active state moves a white pill thumb to the selected position.
|
||||
|
||||
### Badges & Status
|
||||
|
||||
**`badge-discount`** — Small green "Save 20%" badge attached to annual toggle.
|
||||
- Background `{colors.brand-green}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `2px 8px`.
|
||||
|
||||
**`badge-required`** — Red "REQUIRED" label on documentation property rows.
|
||||
- Background `{colors.brand-error}`, text `{colors.on-dark}`, typography `{typography.micro-uppercase}`, rounded `{rounded.sm}`, padding `2px 6px`.
|
||||
|
||||
**`badge-type`** — Type signature chip in documentation (e.g. `string`, `number`, `boolean`).
|
||||
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.code-sm}`, rounded `{rounded.sm}`, padding `2px 6px`.
|
||||
|
||||
**`badge-tag`** — Documentation tag chip (e.g. `<Tabs>` reference highlighted in body text).
|
||||
- Background `rgba(55, 114, 207, 0.15)`, text `{colors.brand-tag}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 8px`.
|
||||
|
||||
**`promo-banner`** — Sticky black promo strip ABOVE the top nav (when present).
|
||||
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`.
|
||||
|
||||
### Code
|
||||
|
||||
**`code-block`** — Syntax-highlighted code container.
|
||||
- Background `{colors.surface-code}`, text `{colors.on-dark}`, typography `{typography.code-md}`, rounded `{rounded.md}`, padding `{spacing.md}`.
|
||||
|
||||
**`code-block-header`** — Header bar above the code with language label + copy button.
|
||||
- Background `{colors.surface-code}`, text `{colors.on-dark-muted}`, typography `{typography.caption}`, padding `{spacing.xs} {spacing.md}`, bottom border `1px solid {colors.hairline-dark}`.
|
||||
|
||||
**`code-inline`** — Inline `<Tabs>` reference in body prose.
|
||||
- Background `{colors.surface}`, text `{colors.charcoal}`, typography `{typography.code-inline}`, rounded `{rounded.xs}`, padding `2px 6px`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`copy-code-button`** — "Copy code" button in code-block header.
|
||||
- Background transparent, text `{colors.on-dark-muted}`, typography `{typography.caption}`, rounded `{rounded.sm}`, padding `{spacing.xxs} {spacing.xs}`, border `1px solid {colors.hairline-dark}`.
|
||||
|
||||
### Documentation Components
|
||||
|
||||
**`property-row`** — API property documentation row (e.g. `defaultIndex` on the Tabs page).
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.body-sm}`, padding `{spacing.md} 0`, bottom border `1px solid {colors.hairline-soft}`.
|
||||
- Layout: property name in `{typography.code-inline}` + type badge + optional REQUIRED badge + description below in `{typography.body-sm}` `{colors.steel}`.
|
||||
|
||||
**`feature-comparison-table`** — Detailed pricing-page feature comparison table.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`feature-comparison-row`** — Individual row inside the comparison table.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`. Section dividers in `{typography.micro-uppercase}` `{colors.steel}`.
|
||||
|
||||
**`sidebar-nav-item`** + **`sidebar-nav-item-active`** — Documentation left rail link entries.
|
||||
- Inactive: background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.sm}`, padding `{spacing.xs} {spacing.md}`.
|
||||
- Active: background `{colors.surface}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`.
|
||||
|
||||
**`sidebar-section-header`** — Uppercase section header inside sidebar (e.g. "COMPONENTS", "PRIMITIVES").
|
||||
- Background transparent, text `{colors.steel}`, typography `{typography.micro-uppercase}`, padding `{spacing.md} {spacing.md} {spacing.xs}`.
|
||||
|
||||
**`doc-toc-item`** + **`doc-toc-item-active`** — Right-rail table-of-contents links.
|
||||
- Inactive: background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
|
||||
- Active: text `{colors.ink}`, typography `{typography.body-sm-medium}`, optional left-border accent in `{colors.brand-green}`.
|
||||
|
||||
### Navigation
|
||||
|
||||
**Top Navigation (Marketing)** — Sticky white bar with logo, link list, and right-side CTAs.
|
||||
- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`.
|
||||
- Left: Mintlify wordmark + horizontal link list (Solutions, Pricing, Customers, Documentation, Changelog).
|
||||
- Right: secondary "Talk to sales" + black-pill "Get Started".
|
||||
|
||||
**Top Navigation (Documentation)** — Compressed nav with center search-pill and right-side account/upgrade CTAs.
|
||||
- Background `{colors.canvas}`, height ~56px. Search-pill at center, "Documentation / Guides / API Reference / Changelog" links + "Talk to us" + green "Get started" right.
|
||||
|
||||
### Signature Components
|
||||
|
||||
**`hero-band-sky`** — Homepage hero with atmospheric sky-blue to cream gradient and cloud illustrations.
|
||||
- Background gradient `linear-gradient(180deg, {colors.hero-sky-from} 0%, {colors.hero-sky-to} 100%)`, text `{colors.on-dark}` (early portion of gradient) shifting to `{colors.ink}` further down, padding `{spacing.hero}`.
|
||||
- Layout: centered hero headline in `{typography.hero-display}`, centered subtitle in `{typography.subtitle}`, centered button row (`button-accent-green` "Get started" + `button-secondary` "Talk to us"), product mockup below the buttons.
|
||||
|
||||
**`hero-band-dark`** — Startups hero with dark teal-to-mint gradient and rocket launch illustration.
|
||||
- Background gradient `linear-gradient(135deg, {colors.hero-dark-from} 0%, {colors.hero-dark-to} 100%)`, text `{colors.on-dark}`, padding `{spacing.hero}`.
|
||||
- Layout: hero headline left in `{typography.hero-display}` `{colors.on-dark}`, illustration right (rocket cutting across the gradient), button row uses `button-on-dark` (white pill) + ghost link.
|
||||
|
||||
**`hero-product-mockup`** — Code-editor mockup framed inside the homepage hero.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, border `1px solid {colors.hairline-soft}`, deep shadow `rgba(0, 0, 0, 0.12) 0px 24px 48px -8px`.
|
||||
- Carries a documentation page preview inside (sidebar on left, prose body, mock UI controls).
|
||||
|
||||
**`logo-wall-item`** — Customer logo cell in 6-up trust-row grids ("Anthropic / Cognition / Mintlify / Vercel / react / Lovable", "Stripe / Block / PayPal / Compound / Auth").
|
||||
- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
|
||||
- Logos rendered as wordmarks with consistent vertical centering.
|
||||
|
||||
**`faq-accordion-item`** — Frequently-asked-questions panel item (visible on pricing page).
|
||||
- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
|
||||
- Question in `{typography.heading-5}`, expanded answer in `{typography.body-md}` `{colors.steel}`, chevron icon in `{colors.steel}` 16px.
|
||||
|
||||
**`footer-region`** — Multi-column site footer.
|
||||
- Background `{colors.canvas}`, top border `1px solid {colors.hairline}`, padding `{spacing.section} {spacing.xxl}`.
|
||||
- 5 column groups (Explore / Resources / Company / Legal + brand mark column).
|
||||
- Section headers in `{typography.body-sm-medium}` `{colors.ink}`, link items in `{typography.body-sm}` `{colors.steel}`.
|
||||
|
||||
**`footer-link`** — Individual link entry in the footer.
|
||||
- Background transparent, text `{colors.steel}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.brand-green}` (Mintlify mint) for accent CTAs and active state indicators only — even one accent button per viewport carries weight
|
||||
- Use `{colors.primary}` (black) as the dominant CTA on light backgrounds; switch to `button-on-dark` (white pill) on dark hero bands
|
||||
- Apply `{rounded.full}` to every button and pill; never soften pill corners
|
||||
- Pair Inter (UI prose) with Geist Mono (code) — never introduce a third typeface
|
||||
- Use atmospheric gradient hero bands sparingly (only the homepage and startups page); keep deeper surfaces flat and dense
|
||||
- Apply `{rounded.lg}` (12px) consistently on cards; use `{rounded.md}` (8px) only on compact UI like search pills and code blocks
|
||||
- Keep documentation prose at `{typography.body-md}` (16px) with 1.50 line-height — never compress
|
||||
|
||||
### Don't
|
||||
- Don't use `{colors.brand-green}` on body text or large surfaces — it loses signal
|
||||
- Don't introduce additional accent colors beyond mint, tag-blue, error-red, and the testimonial orange
|
||||
- Don't apply heavy shadows on flat documentation cards; reserve elevation for the hero product mockup
|
||||
- Don't reduce documentation line-height below 1.50 — long-form readability suffers
|
||||
- Don't combine atmospheric gradients with multiple competing color accents in the same hero — the sky/dark gradient is the brand mood; let it breathe
|
||||
- Don't use Inter for code or Geist Mono for prose — the typeface assignment IS the brand voice
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile (small) | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. Footer 1-column accordion. |
|
||||
| Mobile (large) | 480 – 767px | Same as small but feature tiles render 2-up. Hero scales to 44px. |
|
||||
| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Documentation sidebar collapses to drawer. Hero scales to 56px. |
|
||||
| Desktop | 1024 – 1279px | Full 3-column docs grid (sidebar / body / TOC). 3-tier pricing card row. Hero at 72px. |
|
||||
| Wide Desktop | ≥ 1280px | Wider hero gutters, larger product mockup, fixed 240px sidebar. |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons render at 36–40px effective height — bumps to 44px on mobile via padding override
|
||||
- Circular icon buttons: 32×32px desktop → 44×44px mobile
|
||||
- Form inputs render at 40px height; bumps to 44px mobile
|
||||
- Sidebar nav items render at ~32px tall — bump to 44px mobile drawers
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Promo banner** stays full-width; truncates at < 480px
|
||||
- **Top nav** below 1024px collapses to hamburger; horizontal links move into drawer
|
||||
- **Hero band**: 2-column hero (text + mockup) collapses to stacked at < 1024px; mockup rendered below text on mobile
|
||||
- **Documentation grid**: 3-column desktop → sidebar-drawer at < 1024px → single-column at < 768px
|
||||
- **Pricing comparison**: 3-column tiers → 1-column stacked at < 768px; comparison table becomes horizontal-scroll
|
||||
- **Hero typography**: `{typography.hero-display}` (72px) → 56px tablet → 44px mobile-large → 36px mobile-small
|
||||
- **Customer logo wall**: 6-up → 3-up at tablet → 2-up at mobile
|
||||
- **Footer**: 5-column desktop → 2-column tablet → accordion at mobile
|
||||
|
||||
### Image Behavior
|
||||
- Hero illustrations (cloud, rocket) lazy-load with the hero band; remain crisp at all breakpoints (SVG-based)
|
||||
- Product mockup retains its aspect ratio across breakpoints; scales proportionally
|
||||
- Customer logos use SVG wordmarks; remain crisp on retina displays
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time. The system has high internal consistency.
|
||||
2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.
|
||||
3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs and contrast issues.
|
||||
4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-focused`, `-active`).
|
||||
5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Headlines step down `hero-display → display-lg → heading-1 → heading-2 → heading-3 → heading-4 → heading-5`.
|
||||
6. Keep `{colors.brand-green}` confined to accent moments. If it appears on a generic surface, ask whether it earned that role.
|
||||
7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this language.
|
||||
8. Documentation prose belongs in `{typography.body-md}` 16px with 1.50 line-height — anything denser breaks the reading experience.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Specific dark-mode token values for canvas, surface, ink, and hairline are not surfaced on these pages; the brand has not yet shipped a published dark-mode palette
|
||||
- Animation/transition timings are not extracted; recommend 150–200ms ease for hover/focus state transitions
|
||||
- Form validation success state is not explicitly captured beyond defaults — implement following standard green-border + success badge patterns
|
||||
- Code syntax highlighting palette inside docs is not formalized; documentation samples carry their own twoslash-style annotation system tokens (e.g. `{colors.brand-tag}`, `{colors.brand-annotate}`, `{colors.brand-warn}`) but the full highlight scheme is not enumerated
|
||||
@@ -0,0 +1,5 @@
|
||||
# Mintlify Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/mintlify/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,825 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Miro
|
||||
description: "Miro presents itself as the AI-powered visual workspace through a confident, almost playful brand voice — anchored by its signature canary yellow ({colors.brand-yellow}) wordmark over white canvas, broken open by colorful pastel feature tints (rose, teal, coral, orange, mint) that echo the actual sticky-note color palette used on the live whiteboard. Black-pill primary buttons dominate marketing, real Miro-board mockups serve as feature illustrations, and a 4-tier pricing grid leads into a dense comparison table. Roobert PRO carries display headlines; the system supports homepage, pricing, AI Workflows product page, agile vertical, and customer stories surfaces."
|
||||
|
||||
colors:
|
||||
primary: "#1c1c1e"
|
||||
on-primary: "#ffffff"
|
||||
brand-yellow: "#ffd02f"
|
||||
brand-yellow-deep: "#fcb900"
|
||||
yellow-light: "#fff4c4"
|
||||
yellow-dark: "#746019"
|
||||
brand-blue: "#4262ff"
|
||||
blue-450: "#5b76fe"
|
||||
blue-pressed: "#2a41b6"
|
||||
brand-coral: "#ff9999"
|
||||
coral-light: "#ffc6c6"
|
||||
coral-dark: "#600000"
|
||||
brand-rose: "#ffd8f4"
|
||||
rose-light: "#fde0f0"
|
||||
brand-pink: "#fde0f0"
|
||||
brand-teal: "#0fbcb0"
|
||||
teal-light: "#c3faf5"
|
||||
moss-dark: "#187574"
|
||||
brand-orange-light: "#ffe6cd"
|
||||
brand-red: "#fbd4d4"
|
||||
brand-red-dark: "#e3c5c5"
|
||||
success-accent: "#00b473"
|
||||
canvas: "#ffffff"
|
||||
surface: "#f7f8fa"
|
||||
surface-soft: "#fafbfc"
|
||||
surface-yellow: "#fff8e0"
|
||||
surface-pricing-featured: "#f5f3ff"
|
||||
hairline: "#e0e2e8"
|
||||
hairline-soft: "#eef0f3"
|
||||
hairline-strong: "#c7cad5"
|
||||
ink-deep: "#050038"
|
||||
ink: "#1c1c1e"
|
||||
charcoal: "#2c2c34"
|
||||
slate: "#555a6a"
|
||||
steel: "#6b6f7e"
|
||||
stone: "#8e91a0"
|
||||
muted: "#a5a8b5"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-muted: "#a5a8b5"
|
||||
footer-bg: "#1c1c1e"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 80px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -2px
|
||||
display-lg:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 60px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1.5px
|
||||
heading-1:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 48px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -1px
|
||||
heading-2:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 36px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.5px
|
||||
heading-3:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 28px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
heading-4:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 22px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
heading-5:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.40
|
||||
subtitle:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-md:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-md-medium:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
body-sm:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-sm-medium:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
caption:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
caption-bold:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 13px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
micro:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.40
|
||||
micro-uppercase:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
letterSpacing: 0.5px
|
||||
button-md:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
stat-display:
|
||||
fontFamily: Roobert PRO
|
||||
fontSize: 64px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1.5px
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 20px
|
||||
xxxl: 28px
|
||||
feature: 32px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 20px
|
||||
xl: 24px
|
||||
xxl: 32px
|
||||
xxxl: 40px
|
||||
section-sm: 48px
|
||||
section: 64px
|
||||
section-lg: 96px
|
||||
hero: 120px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "12px 24px"
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.charcoal}"
|
||||
textColor: "{colors.on-primary}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.hairline}"
|
||||
textColor: "{colors.muted}"
|
||||
button-yellow:
|
||||
backgroundColor: "{colors.brand-yellow}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "12px 24px"
|
||||
button-blue:
|
||||
backgroundColor: "{colors.brand-blue}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "12px 24px"
|
||||
button-secondary:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "12px 24px"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
button-on-dark:
|
||||
backgroundColor: "{colors.on-dark}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "12px 24px"
|
||||
button-ghost:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "8px 12px"
|
||||
button-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.brand-blue}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "0"
|
||||
button-icon-circular:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
size: 36px
|
||||
border: "1px solid {colors.hairline}"
|
||||
card-base:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
card-feature:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
card-feature-yellow:
|
||||
backgroundColor: "{colors.brand-yellow}"
|
||||
textColor: "{colors.primary}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-feature-coral:
|
||||
backgroundColor: "{colors.coral-light}"
|
||||
textColor: "{colors.primary}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-feature-teal:
|
||||
backgroundColor: "{colors.teal-light}"
|
||||
textColor: "{colors.primary}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-feature-rose:
|
||||
backgroundColor: "{colors.rose-light}"
|
||||
textColor: "{colors.primary}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-customer-story:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xxxl}"
|
||||
padding: "0"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
card-stat:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.stat-display}"
|
||||
padding: "{spacing.lg}"
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pricing-card-featured:
|
||||
backgroundColor: "{colors.surface-pricing-featured}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "2px solid {colors.brand-blue}"
|
||||
pricing-card-enterprise:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xxl}"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
height: 44px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "2px solid {colors.brand-blue}"
|
||||
search-pill:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
height: 40px
|
||||
border: "1px solid {colors.hairline}"
|
||||
filter-dropdown:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
pill-tab:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pill-tab-active:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.full}"
|
||||
border: "1px solid {colors.primary}"
|
||||
toggle-monthly-yearly:
|
||||
backgroundColor: "{colors.surface}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px"
|
||||
badge-promo:
|
||||
backgroundColor: "{colors.brand-yellow}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-tag-yellow:
|
||||
backgroundColor: "{colors.surface-yellow}"
|
||||
textColor: "{colors.yellow-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-tag-purple:
|
||||
backgroundColor: "{colors.surface-pricing-featured}"
|
||||
textColor: "{colors.brand-blue}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-tag-coral:
|
||||
backgroundColor: "{colors.coral-light}"
|
||||
textColor: "{colors.coral-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-success:
|
||||
backgroundColor: "{colors.success-accent}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-discount:
|
||||
backgroundColor: "{colors.brand-yellow}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.sm}"
|
||||
padding: "2px 6px"
|
||||
promo-banner:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
comparison-table:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
rounded: "{rounded.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
comparison-row:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
padding: "{spacing.md} {spacing.lg}"
|
||||
border: "0 0 1px {colors.hairline-soft} solid"
|
||||
template-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
whiteboard-mockup:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "0"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
shadow: "rgba(5, 0, 56, 0.08) 0px 12px 32px -4px"
|
||||
faq-accordion-item:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "0 0 1px {colors.hairline} solid"
|
||||
logo-wall-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-md-medium}"
|
||||
padding: "{spacing.lg}"
|
||||
hero-band-marketing:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.hero-display}"
|
||||
rounded: "0"
|
||||
padding: "{spacing.hero}"
|
||||
cta-banner-dark:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "{rounded.feature}"
|
||||
padding: "{spacing.section}"
|
||||
industry-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.xl}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
capterra-badge:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
footer-region:
|
||||
backgroundColor: "{colors.footer-bg}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.section} {spacing.xxl}"
|
||||
footer-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.on-dark-muted}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.xxs} 0"
|
||||
app-store-badge:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Miro positions itself as the AI-powered visual workspace through a confident, slightly playful brand voice. The homepage opens with a stark white canvas anchored by a small canary-yellow Miro wordmark in the top-left, a black-pill primary CTA "Get started free" and a secondary "Book a demo" outline pill — then dramatic real-Miro-board mockup imagery (sticky notes, kanban, mind maps) carries the visual weight. Across deeper surfaces, the system breaks open: pastel feature cards (rose, teal, coral, yellow) echo the actual sticky-note color palette of the live whiteboard product, and customer story cards reuse those tints to differentiate brand vignettes.
|
||||
|
||||
Roobert PRO — Miro's custom display face — anchors every typographic surface, from the 80px hero display down to 11px micro labels. The face's slightly rounded, geometric character pairs naturally with the playful product photography and the friendly product positioning. Black-pill primary buttons (`{rounded.full}`) dominate marketing CTAs; the brand color, signature canary yellow ({colors.brand-yellow}), is reserved for the wordmark, top promo banners, and "yellow tag" feature pills — never as a primary CTA. The 4-tier pricing comparison (Free / Starter / Business / Enterprise) leads into the densest surface in the system: a feature comparison table that runs ~80 rows deep across multiple section dividers.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Stark white canvas + Miro wordmark in canary yellow ({colors.brand-yellow}) as the recognizable opening signature
|
||||
- Black-pill primary CTAs ({colors.primary} + `{rounded.full}`) as the dominant interactive element
|
||||
- Pastel feature cards (yellow, rose, coral, teal, mint) that echo the actual sticky-note palette
|
||||
- Roobert PRO across every UI surface; geometric, slightly rounded character
|
||||
- Real Miro-board mockup imagery used as feature illustrations
|
||||
- 4-tier pricing card grid + dense feature comparison table
|
||||
- Massive dark footer ({colors.footer-bg}) with multi-column links + app-store badges
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: miro.com/ (homepage), /pricing/ (4-tier comparison), /products/ai-workflows/ (AI product), /agile/ (vertical landing), /customers/ (story directory). Token coverage was identical across all five pages.
|
||||
|
||||
### Brand & Accent
|
||||
- **Miro Yellow** ({colors.brand-yellow}): The brand's recognizable canary yellow — wordmark color, top promo banner, "yellow tag" pills
|
||||
- **Yellow Deep** ({colors.brand-yellow-deep}): Darker variant for hover states and emphasis
|
||||
- **Yellow Light** ({colors.yellow-light}): Pale yellow background tint for tag chips
|
||||
- **Yellow Dark** ({colors.yellow-dark}): Yellow-tag text color (dark olive) for chip foreground
|
||||
- **Brand Blue** ({colors.brand-blue}): Action blue for inline links and featured-pricing-tier border
|
||||
- **Blue Pressed** ({colors.blue-pressed}): Pressed-state blue
|
||||
- **Brand Coral** ({colors.brand-coral}): Coral accent for warm callouts
|
||||
- **Coral Light** ({colors.coral-light}): Pale coral for feature card backgrounds
|
||||
- **Coral Dark** ({colors.coral-dark}): Coral-tag text color (deep wine)
|
||||
- **Brand Rose** ({colors.brand-rose}): Soft rose-pink for feature card variants
|
||||
- **Brand Teal** ({colors.brand-teal}): Brand teal
|
||||
- **Teal Light** ({colors.teal-light}): Pale teal for feature card backgrounds
|
||||
- **Moss Dark** ({colors.moss-dark}): Deep teal-green text color
|
||||
- **Brand Pink** ({colors.brand-pink}): Pale pink for soft callouts
|
||||
- **Brand Orange Light** ({colors.brand-orange-light}): Soft orange for feature card backgrounds
|
||||
|
||||
### Surface
|
||||
- **Canvas White** ({colors.canvas}): Page background and primary card surface
|
||||
- **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest
|
||||
- **Surface Soft** ({colors.surface-soft}): Quieter section divisions
|
||||
- **Surface Yellow** ({colors.surface-yellow}): Pale yellow-tinted surface for tag chip
|
||||
- **Surface Pricing Featured** ({colors.surface-pricing-featured}): Pale lavender for featured pricing tier
|
||||
- **Hairline** ({colors.hairline}): 1px borders and primary dividers
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Quieter table-row dividers
|
||||
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs
|
||||
|
||||
### Text
|
||||
- **Ink Deep** ({colors.ink-deep}): Headlines on lighter feature cards
|
||||
- **Ink** ({colors.ink}): Primary headlines and body text
|
||||
- **Charcoal** ({colors.charcoal}): Body emphasis text
|
||||
- **Slate** ({colors.slate}): Secondary text, metadata
|
||||
- **Steel** ({colors.steel}): Tertiary text, footer links
|
||||
- **Stone** ({colors.stone}): Captions, muted labels
|
||||
- **Muted** ({colors.muted}): Disabled labels, input placeholders
|
||||
- **On Dark** ({colors.on-dark}): White text on dark surfaces
|
||||
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white on dark
|
||||
|
||||
### Semantic
|
||||
- **Success Accent** ({colors.success-accent}): Confirmation/success indicator green
|
||||
- **Brand Red** ({colors.brand-red}): Soft red for error backgrounds
|
||||
- **Brand Red Dark** ({colors.brand-red-dark}): Stronger red for error borders
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**Roobert PRO** (primary): Miro's custom geometric sans-serif typeface. Used across every UI surface from oversized 80px hero displays to 11px micro labels. The face has a slightly rounded, friendly character that matches the brand's playful product positioning. Fallbacks: Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 80px | 500 | 1.05 | -2px | Marketing hero ("See how teams get great done with Miro") |
|
||||
| `{typography.display-lg}` | 60px | 500 | 1.10 | -1.5px | Major section openers |
|
||||
| `{typography.heading-1}` | 48px | 500 | 1.15 | -1px | Page-level headlines |
|
||||
| `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Subsection headlines |
|
||||
| `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Card titles |
|
||||
| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Feature tile titles |
|
||||
| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | FAQ questions, smaller cards |
|
||||
| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |
|
||||
| `{typography.body-md-medium}` | 16px | 500 | 1.50 | 0 | Logo wall labels |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells |
|
||||
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Filter dropdowns, button labels |
|
||||
| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Helper text |
|
||||
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels, tag chips |
|
||||
| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Footer microcopy |
|
||||
| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 0.5px | Section dividers in tables |
|
||||
| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Pill button labels |
|
||||
| `{typography.stat-display}` | 64px | 500 | 1.10 | -1.5px | "100M+ users" stat callouts |
|
||||
|
||||
### Principles
|
||||
- **Tight hero leading** (1.05) creates magazine-grade display headlines on the 80px hero
|
||||
- **Negative letter-spacing progression** — display sizes use -2px to -1.5px; smaller headings relax to 0
|
||||
- **Stat-display token** (64px / 500) for marketing stat callouts
|
||||
- **Single weight scale** — 400 (body), 500 (medium emphasis + headings), 600 (badges and uppercase). Roobert PRO does not use 700 in this system.
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 4px (8px primary increment)
|
||||
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (96px) · `{spacing.hero}` (120px)
|
||||
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing comparison tightens to `{spacing.section}` (64px); customer story stack uses `{spacing.xxl}` (32px)
|
||||
- **Card internal padding**: `{spacing.xl}` (24px) for compact cards; `{spacing.xxl}` (32px) for feature panels
|
||||
|
||||
### Grid & Container
|
||||
- Marketing pages use 1280px max-width with 32px gutters
|
||||
- Pricing page renders 4-tier card row at desktop (Free / Starter / Business / Enterprise)
|
||||
- Customer stories page uses 2-column grid with filter dropdowns
|
||||
- AI Workflows page uses 2-column hero, then 3-up feature grid
|
||||
|
||||
### Whitespace Philosophy
|
||||
Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding gives the small wordmark room to breathe. Pricing surfaces tighten dramatically.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system runs predominantly flat with strategic depth on hero mockups.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow; `{colors.hairline-soft}` border | Default cards, table rows, form inputs |
|
||||
| 1 (subtle) | `rgba(5, 0, 56, 0.04) 0px 1px 2px 0px` | Subtle hover-elevated tiles |
|
||||
| 2 (card) | `rgba(5, 0, 56, 0.06) 0px 4px 12px 0px` | Standard feature cards |
|
||||
| 3 (mockup) | `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px` | Hero whiteboard mockup framing |
|
||||
| 4 (modal) | `rgba(5, 0, 56, 0.12) 0px 16px 48px -8px` | Modals, dropdowns |
|
||||
|
||||
### Decorative Depth
|
||||
- The atmospheric depth on Miro's hero comes from the live-product-board mockup illustrations — sticky notes layered at z-offsets, color-block tints behind whiteboard frames
|
||||
- Pastel feature cards carry their own visual weight via saturated background color
|
||||
- Customer-story cards layer dark photographic content with overlay scrims
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Small chips, micro-controls |
|
||||
| `{rounded.sm}` | 6px | Discount badges |
|
||||
| `{rounded.md}` | 8px | Inputs, search-pill |
|
||||
| `{rounded.lg}` | 12px | Standard cards, table containers |
|
||||
| `{rounded.xl}` | 16px | Pricing cards, feature panels |
|
||||
| `{rounded.xxl}` | 20px | Larger feature cards |
|
||||
| `{rounded.xxxl}` | 28px | Pastel feature cards (yellow, rose, coral, teal) |
|
||||
| `{rounded.feature}` | 32px | Hero CTA banner cards |
|
||||
| `{rounded.full}` | 9999px | All buttons, pill tabs, badges |
|
||||
|
||||
### Photography Geometry
|
||||
- Real Miro board mockups render with `{rounded.xl}` (16px) corners and a subtle drop shadow
|
||||
- Customer story cards use `{rounded.xxxl}` (28px) corners with full-bleed photography
|
||||
- Template card thumbnails use `{rounded.xl}` (16px) with photographic content
|
||||
- Customer logos wall presents wordmarks inline at consistent 100px height
|
||||
|
||||
## Components
|
||||
|
||||
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Black pill primary CTA, the dominant action ("Get started free").
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
|
||||
- Pressed state `button-primary-pressed` lifts to `{colors.charcoal}`.
|
||||
- Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.
|
||||
|
||||
**`button-yellow`** — Brand-yellow pill for moments of brand emphasis.
|
||||
- Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-blue`** — Brand-blue pill for inline action callouts.
|
||||
- Background `{colors.brand-blue}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-secondary`** — Outlined pill for secondary actions ("Book a demo").
|
||||
- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-on-dark`** — White pill for dark CTA banners.
|
||||
- Background `{colors.on-dark}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
|
||||
|
||||
**`button-ghost`** — Quieter rectangular ghost button.
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-link`** — Inline text link.
|
||||
- Background transparent, text `{colors.brand-blue}`, typography `{typography.body-sm-medium}`, padding `0`.
|
||||
|
||||
**`button-icon-circular`** — 36×36px circular utility button.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`card-base`** — Standard content card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`card-feature`** — White feature card with larger 28px corners.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`card-feature-yellow`** — Pastel-yellow feature card.
|
||||
- Background `{colors.brand-yellow}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-feature-coral`** — Pastel-coral feature card variant.
|
||||
- Background `{colors.coral-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-feature-teal`** — Pastel-teal feature card variant.
|
||||
- Background `{colors.teal-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-feature-rose`** — Pastel-rose feature card variant.
|
||||
- Background `{colors.rose-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-customer-story`** — Customer story card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `0` (image fills the card), border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`card-stat`** — Stat-row cell for "100M+ users".
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.stat-display}`, padding `{spacing.lg}`.
|
||||
|
||||
**`pricing-card`** — Standard pricing tier card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`pricing-card-featured`** — Featured pricing tier (Business — lavender background + blue border).
|
||||
- Background `{colors.surface-pricing-featured}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `2px solid {colors.brand-blue}`.
|
||||
|
||||
**`pricing-card-enterprise`** — Dark-canvas enterprise tier card.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text field.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.
|
||||
|
||||
**`text-input-focused`** — Activated state.
|
||||
- Border switches to `2px solid {colors.brand-blue}`.
|
||||
|
||||
**`search-pill`** — Search bar.
|
||||
- Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 40px, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`filter-dropdown`** — Pill-shaped filter dropdown ("Company use" / "Industry" / "Use case").
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`, rounded `{rounded.full}`, padding `{spacing.xs} {spacing.md}`, border `1px solid {colors.hairline-strong}`.
|
||||
|
||||
### Tabs
|
||||
|
||||
**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav.
|
||||
- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
|
||||
- Active: background `{colors.primary}`, text `{colors.on-primary}`.
|
||||
|
||||
**`toggle-monthly-yearly`** — Two-state pill toggle (Monthly / Annual on pricing).
|
||||
- Background `{colors.surface}`, rounded `{rounded.full}`, padding `4px`.
|
||||
|
||||
### Badges & Status
|
||||
|
||||
**`badge-promo`** — Yellow promo banner badge.
|
||||
- Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-tag-yellow`** — Soft-yellow feature tag chip ("Yellow" tag on AI Workflows page).
|
||||
- Background `{colors.surface-yellow}`, text `{colors.yellow-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-tag-purple`** — Lavender feature tag chip ("AI agent" tag).
|
||||
- Background `{colors.surface-pricing-featured}`, text `{colors.brand-blue}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-tag-coral`** — Coral feature tag chip variant.
|
||||
- Background `{colors.coral-light}`, text `{colors.coral-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-success`** — Green success indicator.
|
||||
- Background `{colors.success-accent}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-discount`** — Yellow rectangular discount pill ("Save 15%").
|
||||
- Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 6px`.
|
||||
|
||||
**`promo-banner`** — Sticky black promo strip ABOVE the top nav.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. Carries inline yellow "GET YOUR SPOT" pill.
|
||||
|
||||
### Tables
|
||||
|
||||
**`comparison-table`** — Pricing feature comparison table.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`comparison-row`** — Individual feature row.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
### Documentation Components
|
||||
|
||||
**`whiteboard-mockup`** — Real Miro-board UI rendered as feature illustration.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px`.
|
||||
|
||||
**`template-card`** — Template thumbnail card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`industry-tile`** — Industry-vertical tile.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`faq-accordion-item`** — FAQ panel item.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.
|
||||
|
||||
**`logo-wall-item`** — Customer logo wordmark cell.
|
||||
- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
|
||||
|
||||
**`capterra-badge`** — Review/rating badge in the footer.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.caption}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, border `1px solid {colors.hairline}`.
|
||||
|
||||
**`app-store-badge`** — App store / Google Play download pill.
|
||||
- Background `{colors.canvas}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`.
|
||||
|
||||
### Navigation
|
||||
|
||||
**Top Navigation (Marketing)** — Sticky white bar with yellow Miro wordmark + horizontal links + right-side CTAs.
|
||||
- Background `{colors.canvas}`, height ~64px.
|
||||
- Left: Yellow square Miro wordmark + horizontal link list (Product, Solutions, Resources).
|
||||
- Right: "Login / Pricing / Contact sales" links + black-pill "Get started free".
|
||||
|
||||
### Signature Components
|
||||
|
||||
**`hero-band-marketing`** — Marketing hero band.
|
||||
- Background `{colors.canvas}`, padding `{spacing.hero}`.
|
||||
- Layout: centered headline in `{typography.hero-display}`, centered subtitle, centered button row, then whiteboard mockup illustration below.
|
||||
|
||||
**`cta-banner-dark`** — Dark CTA banner at the bottom of feature pages.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, rounded `{rounded.feature}`, padding `{spacing.section}`. Centered headline + subtitle + `button-on-dark` "Get started free".
|
||||
|
||||
**`footer-region`** — Massive multi-column dark footer.
|
||||
- Background `{colors.footer-bg}`, padding `{spacing.section} {spacing.xxl}`.
|
||||
- 6-column link grid (Product / Solutions / Tools / Resources / Company / Plans & Pricing).
|
||||
- Section headings in `{typography.body-md-medium}` `{colors.on-dark}`.
|
||||
|
||||
**`footer-link`** — Individual link in the footer.
|
||||
- Background transparent, text `{colors.on-dark-muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.brand-yellow}` for the wordmark, top promo banner, and "yellow tag" chips
|
||||
- Use `{colors.primary}` (black) as the dominant CTA on all surfaces
|
||||
- Pair pastel feature cards (yellow, rose, coral, teal) with white feature cards in the same viewport
|
||||
- Apply `{rounded.full}` to every button, every pill tab, every status badge
|
||||
- Apply `{rounded.xxxl}` (28px) to pastel feature cards
|
||||
- Use real Miro-board mockups as feature illustrations
|
||||
- Maintain Roobert PRO across every UI surface
|
||||
|
||||
### Don't
|
||||
- Don't use `{colors.brand-yellow}` on standard CTAs or large background surfaces
|
||||
- Don't introduce additional accent colors beyond yellow + brand pastels
|
||||
- Don't soften corners on buttons; the pill is a brand signature
|
||||
- Don't reduce hero leading below 1.05
|
||||
- Don't apply heavy shadows on flat documentation cards; reserve elevation for whiteboard mockups
|
||||
- Don't use stock photography — show the live product board UI
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile (small) | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. |
|
||||
| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 48px. |
|
||||
| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. |
|
||||
| Desktop | 1024 – 1279px | 4-tier pricing card row. Customer story grid 2-up. Hero at 64px. |
|
||||
| Wide Desktop | ≥ 1280px | Full hero presentation, 80px hero display. |
|
||||
|
||||
### Touch Targets
|
||||
- Pill buttons render at 40–44px effective height — at WCAG AAA floor
|
||||
- Circular icon buttons: 36×36px desktop → 44×44px mobile
|
||||
- Form inputs render at 44px height
|
||||
- Filter dropdowns render at ~36px tall — bumps to 44px on mobile
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Promo banner** stays full-width; truncates at < 480px
|
||||
- **Top nav** below 1024px collapses to hamburger
|
||||
- **Hero band**: 2-column hero collapses to stacked at < 1024px
|
||||
- **Pricing comparison**: 4-column tiers → 2-column tablet → 1-column mobile; comparison table becomes horizontal-scroll
|
||||
- **Customer story grid**: 2-up → 1-up at < 768px
|
||||
- **Hero typography**: 80px → 60px tablet → 48px mobile-large → 36px mobile-small
|
||||
- **Footer**: 6-column desktop → 3-column tablet → 2-column mobile → accordion at small mobile
|
||||
|
||||
### Image Behavior
|
||||
- Whiteboard mockups maintain aspect ratio; lazy-loaded below the fold
|
||||
- Customer story photography uses 16:9 ratio with full-bleed scaling
|
||||
- Logo wall presents wordmarks at consistent 100px height
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time
|
||||
2. Reference component names and tokens directly
|
||||
3. Run `npx @google/design.md lint DESIGN.md` after edits
|
||||
4. Add new variants as separate `components:` entries
|
||||
5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis
|
||||
6. Keep `{colors.brand-yellow}` confined to wordmark, promo banner, and yellow-tag chips
|
||||
7. Pill-shaped buttons (`{rounded.full}`) always
|
||||
8. When showing the product, use a real Miro-board mockup with sticky-note color tints
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Specific dark-mode token values not surfaced
|
||||
- Animation/transition timings not extracted; recommend 150–200ms ease
|
||||
- Form validation success state not explicitly captured beyond defaults
|
||||
- Sticky note color tints inside the actual whiteboard product are richer than what marketing surfaces capture
|
||||
@@ -0,0 +1,5 @@
|
||||
# Miro Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/miro/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
@@ -0,0 +1,273 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Mistral Ai
|
||||
description: "Open-weight LLM provider. French-engineered minimalism, purple-toned."
|
||||
category: "AI & LLM"
|
||||
colors:
|
||||
palette: ["#fa520f", "#ffd900", "#ffa110", "#fffaeb", "#fb6424", "#ff8105"]
|
||||
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
|
||||
---
|
||||
# Design System Inspired by Mistral AI
|
||||
|
||||
> Category: AI & LLM
|
||||
> Open-weight LLM provider. French-engineered minimalism, purple-toned.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Mistral AI's interface is a sun-drenched landscape rendered in code — a warm, bold, unapologetically European design that trades the typical blue-screen AI aesthetic for golden amber, burnt orange, and the feeling of late-afternoon light in southern France. Every surface glows with warmth: backgrounds fade from pale cream to deep amber, shadows carry golden undertones (`rgba(127, 99, 21, ...)`), and the brand's signature orange (`#fa520f`) burns through the page like a signal fire.
|
||||
|
||||
The design language is maximalist in its warmth but minimalist in its structure. Huge display headlines (82px) crash into the viewport with aggressive negative tracking (-2.05px), creating text blocks that feel like billboards or protest posters — declarations rather than descriptions. The typography uses Arial (likely a custom font with Arial as fallback) at extreme sizes, creating a raw, unadorned voice that says "we build frontier AI" with no decoration needed.
|
||||
|
||||
What makes Mistral distinctive is the complete commitment to a warm color temperature. The signature "block" identity — a gradient system flowing from bright yellow (`#ffd900`) through amber (`#ffa110`) to burnt orange (`#fa520f`) — creates a visual identity that's immediately recognizable. Even the shadows are warm, using amber-tinted blacks instead of cool grays. Combined with dramatic landscape photography in golden tones, the design feels less like a tech company and more like a European luxury brand that happens to build language models.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Golden-amber color universe: every tone from pale cream (#fffaeb) to burnt orange (#fa520f)
|
||||
- Massive display typography (82px) with aggressive negative letter-spacing (-2.05px)
|
||||
- Warm golden shadow system using amber-tinted rgba values
|
||||
- The Mistral "M" block identity — a gradient from yellow to orange
|
||||
- Dramatic landscape photography in warm golden tones
|
||||
- Uppercase typography used strategically for section labels and CTAs
|
||||
- Near-zero border-radius — sharp, architectural geometry
|
||||
- French-European confidence: bold, warm, declarative
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Mistral Orange** (`#fa520f`): The core brand color — a vivid, saturated orange-red that anchors the entire identity. Used for primary emphasis, the brand block, and the highest-signal moments.
|
||||
- **Mistral Flame** (`#fb6424`): A slightly warmer, lighter variant of the brand orange used for secondary brand moments and hover states.
|
||||
- **Block Orange** (`#ff8105`): A pure orange used in the gradient block system — warmer and less red than Mistral Orange.
|
||||
|
||||
### Secondary & Accent
|
||||
- **Sunshine 900** (`#ff8a00`): Deep golden amber — the darkest sunshine tone, used for strong accent moments.
|
||||
- **Sunshine 700** (`#ffa110`): Warm amber-gold — the core sunshine accent for backgrounds and interactive elements.
|
||||
- **Sunshine 500** (`#ffb83e`): Medium golden — balanced warmth for mid-level emphasis.
|
||||
- **Sunshine 300** (`#ffd06a`): Light golden — for subtle warm tints and secondary backgrounds.
|
||||
- **Block Gold** (`#ffe295`): Pale gold — soft background accents and gentle warmth.
|
||||
- **Bright Yellow** (`#ffd900`): The brightest tone in the gradient — used at the "top" of the block identity.
|
||||
|
||||
### Surface & Background
|
||||
- **Warm Ivory** (`#fffaeb`): The lightest page background — barely tinted with warmth, the foundation canvas.
|
||||
- **Cream** (`#fff0c2`): The primary warm surface and secondary button background — noticeably golden.
|
||||
- **Pure White** (`#ffffff`): Used for maximum contrast elements and popover surfaces.
|
||||
- **Mistral Black** (`#1f1f1f`): The primary dark surface for buttons, text, and dark sections.
|
||||
- **Accent Orange** (defined as `hsl(17, 96%, 52%)`): The functional accent color for interactive states.
|
||||
|
||||
### Neutrals & Text
|
||||
- **Mistral Black** (`#1f1f1f`): Primary text color and dark button backgrounds — a near-black that's warmer than pure #000.
|
||||
- **Black Tint** (defined as `hsl(0, 0%, 24%)`): A medium dark gray for secondary text on light backgrounds.
|
||||
- **Pure White** (`#ffffff`): Text on dark surfaces and CTA labels.
|
||||
|
||||
### Semantic & Accent
|
||||
- **Input Border** (defined as `hsl(240, 5.9%, 90%)`): A cool-tinted light gray for form borders — one of the few cool tones in the system.
|
||||
- **White Overlay** (`oklab(1, 0, 0 / 0.088–0.1)`): Semi-transparent white for frosted glass effects and button overlays.
|
||||
|
||||
### Gradient System
|
||||
- **Mistral Block Gradient**: The signature identity — a multi-step gradient flowing through Yellow (`#ffd900`) → Gold (`#ffe295`) → Amber (`#ffa110`) → Orange (`#ff8105`) → Flame (`#fb6424`) → Mistral Orange (`#fa520f`). This gradient appears in the logo blocks, section backgrounds, and decorative elements.
|
||||
- **Golden Landscape Wash**: Photography and backgrounds use warm amber overlays creating a consistent golden temperature across the page.
|
||||
- **Warm Shadow Cascade**: Multi-layered golden shadows that build depth with amber-tinted transparency rather than gray.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: Likely a custom font (Font Source detected) with `Arial` as fallback, and extended stack: `ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display / Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | Maximum impact, billboard scale |
|
||||
| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | Feature section anchors |
|
||||
| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | Secondary section titles |
|
||||
| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | Card headings, feature names |
|
||||
| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | Mid-level headings |
|
||||
| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | Small headings |
|
||||
| Body / Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
|
||||
| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | Uppercase CTA labels |
|
||||
| Caption / Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, secondary links |
|
||||
|
||||
### Principles
|
||||
- **Single weight, maximum impact**: The entire system uses weight 400 (regular) — even at 82px. This creates a surprisingly elegant effect where the size alone carries authority without needing bold weight.
|
||||
- **Ultra-tight at scale**: Line-heights of 0.95–1.00 at display sizes create text blocks where ascenders nearly touch descenders from the line above — creating dense, poster-like composition.
|
||||
- **Aggressive tracking on display**: -2.05px letter-spacing at 82px compresses the hero text into a monolithic block.
|
||||
- **Uppercase as emphasis**: Strategic `text-transform: uppercase` on button labels and section markers creates a formal, European signage quality.
|
||||
- **No weight variation**: Unlike most systems that use 300–700 weight range, Mistral uses 400 everywhere. Hierarchy comes from size and color, never weight.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Cream Surface**
|
||||
- Background: Cream (`#fff0c2`)
|
||||
- Text: Mistral Black (`#1f1f1f`)
|
||||
- No visible border
|
||||
- The warm, inviting secondary CTA
|
||||
|
||||
**Dark Solid**
|
||||
- Background: Mistral Black (`#1f1f1f`)
|
||||
- Text: Pure White (`#ffffff`)
|
||||
- Padding: 12px (all sides)
|
||||
- No visible border
|
||||
- The primary action button — dark on warm
|
||||
|
||||
**Ghost / Transparent**
|
||||
- Background: transparent with slight dark overlay (`oklab(0, 0, 0 / 0.1)`)
|
||||
- Text: Mistral Black (`#1f1f1f`)
|
||||
- Opacity: 0.4
|
||||
- For secondary/de-emphasized actions
|
||||
|
||||
**Text / Underline**
|
||||
- Background: transparent
|
||||
- Text: Mistral Black (`#1f1f1f`)
|
||||
- Padding: 8px 0px 0px (top-only)
|
||||
- Minimal styling — text link as button
|
||||
- For tertiary navigation actions
|
||||
|
||||
### Cards & Containers
|
||||
- Background: Warm Ivory (`#fffaeb`), Cream (`#fff0c2`), or Pure White
|
||||
- Border: minimal to none — containers defined by background color
|
||||
- Radius: near-zero — sharp, architectural corners
|
||||
- Shadow: warm golden multi-layer (`rgba(127, 99, 21, 0.12) -8px 16px 39px, rgba(127, 99, 21, 0.1) -33px 64px 72px, rgba(127, 99, 21, 0.06) -73px 144px 97px, ...`) — a dramatic, cascading warm shadow
|
||||
- Distinctive: the golden shadow creates a "golden hour" lighting effect
|
||||
|
||||
### Inputs & Forms
|
||||
- Border: `hsl(240, 5.9%, 90%)` — the sole cool-toned element
|
||||
- Focus: accent color ring
|
||||
- Minimal styling consistent with sparse aesthetic
|
||||
|
||||
### Navigation
|
||||
- Transparent nav overlaying the warm hero
|
||||
- Logo: Mistral "M" wordmark
|
||||
- Links: Dark text (white on dark sections)
|
||||
- CTA: Dark solid button or cream surface button
|
||||
- Minimal, wide-spaced layout
|
||||
|
||||
### Image Treatment
|
||||
- Dramatic landscape photography in warm golden tones
|
||||
- The winding road through golden hills — a recurring visual motif
|
||||
- The Mistral "M" rendered at large scale on golden backgrounds
|
||||
- Warm color grading on all photography
|
||||
- Full-bleed sections with photography
|
||||
|
||||
### Distinctive Components
|
||||
|
||||
**Mistral Block Identity**
|
||||
- A row of colored blocks forming the gradient: yellow → amber → orange → burnt orange
|
||||
- Each block gets progressively more orange/red
|
||||
- The visual DNA of the brand — recognizable at any size
|
||||
|
||||
**Golden Shadow Cards**
|
||||
- Cards elevated with warm amber multi-layered shadows
|
||||
- 5 layers of shadow from 16px to 400px offset
|
||||
- Creates a "floating in golden light" effect unique to Mistral
|
||||
|
||||
**Dark Footer Gradient**
|
||||
- Footer transitions from warm amber to dark through a dramatic gradient
|
||||
- Creates a "sunset" effect as the page ends
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 98px, 100px
|
||||
- Button padding: 12px or 8px 0px (compact)
|
||||
- Section vertical spacing: very generous (80px–100px)
|
||||
|
||||
### Grid & Container
|
||||
- Max container width: approximately 1280px, centered
|
||||
- Hero: full-width with massive typography overlaying warm backgrounds
|
||||
- Feature sections: wide-format layouts with dramatic imagery
|
||||
- Card grids: 2–3 column layouts
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Bold declarations**: Huge headlines surrounded by generous whitespace create billboard-like impact — each statement gets its own breathing space.
|
||||
- **Warm void**: Empty space itself feels warm because the backgrounds are tinted ivory/cream rather than pure white.
|
||||
- **Photography as space-filler**: Large landscape images serve double duty as content and decorative whitespace.
|
||||
|
||||
### Border Radius Scale
|
||||
- Near-zero: The dominant radius — sharp, architectural corners on most elements
|
||||
- This extreme sharpness contrasts with the warmth of the colors, creating a tension between soft color and hard geometry.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page backgrounds, text blocks |
|
||||
| Golden Float (Level 1) | Multi-layer warm shadow (5 layers, 12%→0% opacity, amber-tinted) | Feature cards, product showcases, elevated content |
|
||||
|
||||
**Shadow Philosophy**: Mistral uses a single but extraordinarily complex shadow — **five cascading layers** of amber-tinted shadow (`rgba(127, 99, 21, ...)`) that build from a close 16px offset to a distant 400px offset. The result is a rich, warm, "golden hour" lighting effect that makes elevated elements look like they're bathed in afternoon sunlight. This is the most distinctive shadow system in any major AI brand.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use the warm color spectrum exclusively: ivory, cream, amber, gold, orange
|
||||
- Keep display typography at 82px+ with -2.05px letter-spacing for hero sections
|
||||
- Use the Mistral block gradient (yellow → amber → orange) for brand moments
|
||||
- Apply warm golden shadows (amber-tinted rgba) for elevated elements
|
||||
- Use Mistral Black (#1f1f1f) for text — never pure #000000
|
||||
- Keep font weight at 400 throughout — let size and color carry hierarchy
|
||||
- Use sharp, architectural corners — near-zero border-radius
|
||||
- Apply uppercase on button labels and section markers for European formality
|
||||
- Use warm landscape photography with golden color grading
|
||||
|
||||
### Don't
|
||||
- Don't introduce cool colors (blue, green, purple) — the palette is exclusively warm
|
||||
- Don't use bold (700+) weight — 400 is the only weight
|
||||
- Don't round corners — the sharp geometry is intentional
|
||||
- Don't use cool-toned shadows — shadows must carry amber warmth
|
||||
- Don't use pure white as a page background — always warm-tinted (#fffaeb minimum)
|
||||
- Don't reduce hero text below 48px on desktop — the billboard scale is core
|
||||
- Don't use more than 2 font weights — size variation replaces weight variation
|
||||
- Don't add gradients outside the warm spectrum — no blue-to-purple, no cool transitions
|
||||
- Don't use generic gray for text — even neutrals should be warm-tinted
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, stacked everything, hero text reduces to ~32px |
|
||||
| Tablet | 640–768px | Minor layout adjustments |
|
||||
| Small Desktop | 768–1024px | 2-column layouts begin |
|
||||
| Desktop | 1024–1280px | Full layout with maximum typography scale |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use generous padding (12px minimum)
|
||||
- Navigation elements adequately spaced
|
||||
- Cards serve as large touch targets
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Collapses to hamburger on mobile
|
||||
- **Hero text**: 82px → 56px → 48px → 32px progressive scaling
|
||||
- **Feature sections**: Multi-column → stacked
|
||||
- **Photography**: Scales proportionally, may crop on mobile
|
||||
- **Block identity**: Scales down proportionally
|
||||
|
||||
### Image Behavior
|
||||
- Landscape photography scales proportionally
|
||||
- Warm color grading maintained at all sizes
|
||||
- Block gradient elements resize fluidly
|
||||
- No art direction changes — same warm composition at all sizes
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Brand Orange: "Mistral Orange (#fa520f)"
|
||||
- Page Background: "Warm Ivory (#fffaeb)"
|
||||
- Warm Surface: "Cream (#fff0c2)"
|
||||
- Primary Text: "Mistral Black (#1f1f1f)"
|
||||
- Sunshine Amber: "Sunshine 700 (#ffa110)"
|
||||
- Bright Gold: "Bright Yellow (#ffd900)"
|
||||
- Text on Dark: "Pure White (#ffffff)"
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on Warm Ivory (#fffaeb) with a massive headline at 82px Arial weight 400, line-height 1.0, letter-spacing -2.05px. Mistral Black (#1f1f1f) text. Add a dark solid CTA button (#1f1f1f bg, white text, 12px padding, sharp corners) and a cream secondary button (#fff0c2 bg)."
|
||||
- "Design a feature card on Cream (#fff0c2) with sharp corners (no border-radius). Apply the golden shadow system: rgba(127, 99, 21, 0.12) -8px 16px 39px as the primary layer. Title at 32px weight 400, body at 16px."
|
||||
- "Build the Mistral block identity: a row of colored blocks from Bright Yellow (#ffd900) through Sunshine 700 (#ffa110) to Mistral Orange (#fa520f). Sharp corners, no gaps."
|
||||
- "Create a dark footer section on Mistral Black (#1f1f1f) with Pure White (#ffffff) text. Footer links at 14px. Add a warm gradient from Sunshine 700 (#ffa110) at the top fading to Mistral Black."
|
||||
|
||||
### Iteration Guide
|
||||
1. Keep the warm temperature — "shift toward amber" not "shift toward gray"
|
||||
2. Use size for hierarchy — 82px → 56px → 48px → 32px → 24px → 16px
|
||||
3. Never add border-radius — sharp corners only
|
||||
4. Shadows are always warm: "golden shadow with amber tones"
|
||||
5. Font weight is always 400 — describe emphasis through size and color
|
||||
@@ -0,0 +1,773 @@
|
||||
---
|
||||
version: alpha
|
||||
name: Mistral AI
|
||||
description: "Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal \"sunset stripe\" bar that closes every page. The system pairs warm cream-yellow surfaces ({colors.cream}) with a saturated orange primary CTA ({colors.primary}) and uses an elegant near-serif voice for hero displays. Coverage spans homepage (Frontier AI hero), Le Studio product page, Coding solutions, news article surfaces, contact form, and services tier page — all anchored by the signature gradient closing band."
|
||||
|
||||
colors:
|
||||
primary: "#fa520f"
|
||||
primary-deep: "#cc3a05"
|
||||
on-primary: "#ffffff"
|
||||
sunshine-300: "#ffd06a"
|
||||
sunshine-500: "#ffb83e"
|
||||
sunshine-700: "#ffa110"
|
||||
sunshine-800: "#ff8105"
|
||||
sunshine-900: "#ff8a00"
|
||||
yellow-saturated: "#ffd900"
|
||||
cream: "#fff8e0"
|
||||
cream-light: "#fffaeb"
|
||||
cream-deeper: "#fff0c2"
|
||||
beige-deep: "#e6d5a8"
|
||||
block-5: "#ffe295"
|
||||
block-6: "#ffd900"
|
||||
block-7: "#ff8105"
|
||||
ink: "#1f1f1f"
|
||||
ink-tint: "#3d3d3d"
|
||||
charcoal: "#2c2c2c"
|
||||
slate: "#4a4a4a"
|
||||
steel: "#6a6a6a"
|
||||
stone: "#8a8a8a"
|
||||
muted: "#a8a8a8"
|
||||
hairline: "#e5e5e5"
|
||||
hairline-soft: "#ededed"
|
||||
hairline-strong: "#c7c7c7"
|
||||
canvas: "#ffffff"
|
||||
surface: "#fafafa"
|
||||
surface-cream: "#fff8e0"
|
||||
surface-cream-soft: "#fffaeb"
|
||||
surface-code: "#1c1c1e"
|
||||
on-dark: "#ffffff"
|
||||
on-dark-muted: "#a8a8a8"
|
||||
on-cream: "#1f1f1f"
|
||||
footer-cream: "#fff8e0"
|
||||
link: "#fa520f"
|
||||
|
||||
typography:
|
||||
hero-display:
|
||||
fontFamily: PP Editorial Old
|
||||
fontSize: 84px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.05
|
||||
letterSpacing: -1.5px
|
||||
display-lg:
|
||||
fontFamily: PP Editorial Old
|
||||
fontSize: 64px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1px
|
||||
heading-1:
|
||||
fontFamily: PP Editorial Old
|
||||
fontSize: 52px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.15
|
||||
letterSpacing: -0.5px
|
||||
heading-2:
|
||||
fontFamily: Inter
|
||||
fontSize: 36px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.20
|
||||
letterSpacing: -0.5px
|
||||
heading-3:
|
||||
fontFamily: Inter
|
||||
fontSize: 28px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.25
|
||||
heading-4:
|
||||
fontFamily: Inter
|
||||
fontSize: 22px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
heading-5:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.40
|
||||
subtitle:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.55
|
||||
body-md-medium:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.55
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
body-sm-medium:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.50
|
||||
caption:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.40
|
||||
caption-bold:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
micro:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.40
|
||||
micro-uppercase:
|
||||
fontFamily: Inter
|
||||
fontSize: 11px
|
||||
fontWeight: 600
|
||||
lineHeight: 1.40
|
||||
letterSpacing: 1px
|
||||
button-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: 500
|
||||
lineHeight: 1.30
|
||||
stat-display:
|
||||
fontFamily: PP Editorial Old
|
||||
fontSize: 56px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.10
|
||||
letterSpacing: -1px
|
||||
code-md:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 14px
|
||||
fontWeight: 400
|
||||
lineHeight: 1.50
|
||||
|
||||
rounded:
|
||||
xs: 4px
|
||||
sm: 6px
|
||||
md: 8px
|
||||
lg: 12px
|
||||
xl: 16px
|
||||
xxl: 20px
|
||||
full: 9999px
|
||||
|
||||
spacing:
|
||||
xxs: 4px
|
||||
xs: 8px
|
||||
sm: 12px
|
||||
md: 16px
|
||||
lg: 20px
|
||||
xl: 24px
|
||||
xxl: 32px
|
||||
xxxl: 40px
|
||||
section-sm: 48px
|
||||
section: 64px
|
||||
section-lg: 96px
|
||||
hero: 120px
|
||||
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "10px 20px"
|
||||
button-primary-pressed:
|
||||
backgroundColor: "{colors.primary-deep}"
|
||||
textColor: "{colors.on-primary}"
|
||||
button-primary-disabled:
|
||||
backgroundColor: "{colors.hairline}"
|
||||
textColor: "{colors.muted}"
|
||||
button-cream:
|
||||
backgroundColor: "{colors.cream}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "10px 20px"
|
||||
border: "1px solid {colors.beige-deep}"
|
||||
button-dark:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "10px 20px"
|
||||
button-secondary:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "10px 20px"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
button-on-cream:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.button-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "10px 20px"
|
||||
border: "1px solid {colors.beige-deep}"
|
||||
button-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "0"
|
||||
card-base:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
card-feature:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
card-cream:
|
||||
backgroundColor: "{colors.cream}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.beige-deep}"
|
||||
card-cream-soft:
|
||||
backgroundColor: "{colors.surface-cream-soft}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
card-feature-product:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
shadow: "rgba(0, 0, 0, 0.04) 0px 4px 12px"
|
||||
card-photographic:
|
||||
backgroundColor: "{colors.surface-code}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "0"
|
||||
pricing-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
pricing-card-featured:
|
||||
backgroundColor: "{colors.cream}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "2px solid {colors.primary}"
|
||||
text-input:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
height: 44px
|
||||
text-input-focused:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
border: "2px solid {colors.primary}"
|
||||
text-area:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.md}"
|
||||
border: "1px solid {colors.hairline-strong}"
|
||||
contact-form-panel:
|
||||
backgroundColor: "{colors.cream}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.beige-deep}"
|
||||
pill-tab:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
border: "1px solid {colors.hairline}"
|
||||
pill-tab-active:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
rounded: "{rounded.full}"
|
||||
border: "1px solid {colors.ink}"
|
||||
segmented-tab:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
border: "0 0 2px transparent solid"
|
||||
segmented-tab-active:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
border: "0 0 2px {colors.primary} solid"
|
||||
badge-orange:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-cream:
|
||||
backgroundColor: "{colors.cream-deeper}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
badge-dark:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.full}"
|
||||
padding: "4px 10px"
|
||||
promo-banner:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.body-sm-medium}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
hero-band-sunset:
|
||||
backgroundColor: "{colors.sunshine-700}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "0"
|
||||
padding: "{spacing.hero}"
|
||||
sunset-stripe-band:
|
||||
backgroundColor: "{colors.primary}"
|
||||
textColor: "{colors.on-primary}"
|
||||
rounded: "0"
|
||||
padding: "{spacing.lg} 0"
|
||||
cta-banner-cream:
|
||||
backgroundColor: "{colors.cream}"
|
||||
textColor: "{colors.ink}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.section}"
|
||||
code-block:
|
||||
backgroundColor: "{colors.surface-code}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.code-md}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.md}"
|
||||
code-block-header:
|
||||
backgroundColor: "{colors.surface-code}"
|
||||
textColor: "{colors.on-dark-muted}"
|
||||
typography: "{typography.caption}"
|
||||
padding: "{spacing.xs} {spacing.md}"
|
||||
border: "0 0 1px rgba(255,255,255,0.08) solid"
|
||||
feature-icon-tile:
|
||||
backgroundColor: "{colors.cream}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.md}"
|
||||
border: "1px solid {colors.beige-deep}"
|
||||
industry-tile:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
stat-cell:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.stat-display}"
|
||||
padding: "{spacing.lg}"
|
||||
customer-testimonial-card:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.lg}"
|
||||
padding: "{spacing.xxl}"
|
||||
border: "1px solid {colors.hairline-soft}"
|
||||
logo-wall-item:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.steel}"
|
||||
typography: "{typography.body-md-medium}"
|
||||
padding: "{spacing.lg}"
|
||||
faq-accordion-item:
|
||||
backgroundColor: "{colors.canvas}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.xl}"
|
||||
border: "0 0 1px {colors.hairline} solid"
|
||||
footer-region:
|
||||
backgroundColor: "{colors.footer-cream}"
|
||||
textColor: "{colors.ink}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.section} {spacing.xxl}"
|
||||
footer-link:
|
||||
backgroundColor: "transparent"
|
||||
textColor: "{colors.primary}"
|
||||
typography: "{typography.body-sm}"
|
||||
padding: "{spacing.xxs} 0"
|
||||
app-store-badge:
|
||||
backgroundColor: "{colors.ink}"
|
||||
textColor: "{colors.on-dark}"
|
||||
typography: "{typography.caption-bold}"
|
||||
rounded: "{rounded.md}"
|
||||
padding: "{spacing.sm} {spacing.md}"
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Mistral AI carries itself with a singular, almost cinematographic visual signature — the homepage opens with "Frontier AI. In your hands." rendered in elegant near-serif display type over a photographic mountain landscape bathed in mustard-orange sunset light. Below the hero, every page closes with the same recognizable element: a horizontal "sunset stripe" gradient band running red→orange→yellow→cream that wraps the foot of the page just above the footer. This stripe is THE brand recognizer — it appears on the homepage, products/studio, solutions/coding, news articles, contact form, and services tier page without exception.
|
||||
|
||||
The system pairs PP Editorial Old (a near-serif elegant display face) for hero displays with Inter for everything else (body, headings, UI). Cream-yellow surfaces ({colors.cream}, {colors.surface-cream-soft}) anchor form panels and feature cards; saturated orange ({colors.primary}) carries primary CTAs; the deep mountain photography on the homepage and the dark code mockups inside Le Studio create photographic depth. Cards are rectangular with `{rounded.lg}` (12px) corners — distinctly less playful than Miro's or Mintlify's pill-buttons-everywhere approach. Buttons are also `{rounded.md}` (8px), not pills — Mistral's geometry is more sober and editorial than its peers.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Atmospheric mountain-sunset hero photography (orange-red-yellow gradient sky)
|
||||
- Horizontal "sunset stripe" band ({colors.primary} → {colors.sunshine-700} → {colors.yellow-saturated} → {colors.cream}) at every page bottom
|
||||
- Cream-yellow surfaces ({colors.cream}, {colors.cream-soft}) for form panels and feature cards
|
||||
- PP Editorial Old (or similar near-serif) for hero displays; Inter for everything else
|
||||
- `{rounded.md}` (8px) buttons and `{rounded.lg}` (12px) cards — less playful, more editorial geometry
|
||||
- Saturated orange primary CTA ({colors.primary}) carries every action call
|
||||
|
||||
## Colors
|
||||
|
||||
> Source pages: mistral.ai/ (homepage), /products/studio (Le Studio product), /solutions/coding (coding solution), /news/vibe-remote-agents-mistral-medium-3-5 (news), /contact (contact form), /services (services tiers). Token coverage was identical across all six pages.
|
||||
|
||||
### Brand & Accent
|
||||
- **Mistral Orange** ({colors.primary}): Primary CTA color, brand orange
|
||||
- **Orange Deep** ({colors.primary-deep}): Pressed-state and emphasis variant
|
||||
- **Sunshine 300** ({colors.sunshine-300}): Atmospheric light orange-yellow
|
||||
- **Sunshine 500** ({colors.sunshine-500}): Mid-spectrum sunset orange
|
||||
- **Sunshine 700** ({colors.sunshine-700}): Saturated mid sunset gradient stop
|
||||
- **Sunshine 800** ({colors.sunshine-800}): Deep sunset gradient stop
|
||||
- **Sunshine 900** ({colors.sunshine-900}): Deepest sunset orange
|
||||
- **Yellow Saturated** ({colors.yellow-saturated}): Pure brand yellow used in the sunset stripe gradient
|
||||
- **Block 5/6/7** ({colors.block-5}, {colors.block-6}, {colors.block-7}): Spectrum stops along the sunset gradient (light-yellow → mid-yellow → deep-orange)
|
||||
|
||||
### Cream / Neutral Warm
|
||||
- **Cream** ({colors.cream}): Warm yellow-cream surface for form panels, feature cards, footer
|
||||
- **Cream Soft** ({colors.cream-soft}): Lighter cream variant
|
||||
- **Cream Deeper** ({colors.cream-deeper}): More-saturated cream for badge/tag chips
|
||||
- **Beige Deep** ({colors.beige-deep}): Cream surface 1px border color
|
||||
|
||||
### Surface
|
||||
- **Canvas White** ({colors.canvas}): Page background and card surface
|
||||
- **Surface** ({colors.surface}): Subtle quieter background
|
||||
- **Surface Cream** ({colors.surface-cream}): Cream-yellow tinted surface
|
||||
- **Surface Code** ({colors.surface-code}): Dark code-block / IDE mockup surface
|
||||
- **Hairline** ({colors.hairline}): 1px borders
|
||||
- **Hairline Soft** ({colors.hairline-soft}): Quieter dividers
|
||||
- **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs
|
||||
|
||||
### Text
|
||||
- **Ink** ({colors.ink}): Primary headlines and body text
|
||||
- **Ink Tint** ({colors.ink-tint}): Slightly softer black for hero overlay text
|
||||
- **Charcoal** ({colors.charcoal}): Body emphasis
|
||||
- **Slate** ({colors.slate}): Secondary text
|
||||
- **Steel** ({colors.steel}): Tertiary text, captions
|
||||
- **Stone** ({colors.stone}): Muted labels
|
||||
- **Muted** ({colors.muted}): Disabled, placeholders
|
||||
- **On Dark** ({colors.on-dark}): White text on dark surfaces
|
||||
- **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white
|
||||
- **On Cream** ({colors.on-cream}): Ink text on cream surfaces
|
||||
|
||||
### Semantic
|
||||
- **Link** ({colors.link}): Inline link color (matches primary orange)
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Family
|
||||
**PP Editorial Old** (display): Mistral's signature near-serif elegant display typeface used for hero displays, large numbers, and editorial section openers. Carries a slightly classical, intelligent character that contrasts the contemporary product positioning. Fallbacks: 'Times New Roman', Georgia, serif.
|
||||
|
||||
**Inter** (UI prose): Variable typeface for body, navigation, buttons, labels, captions. Fallbacks: ui-sans-serif, system-ui, -apple-system, sans-serif.
|
||||
|
||||
**JetBrains Mono** (code): Monospace for code blocks and IDE mockups. Fallbacks: 'SF Mono', Menlo, Consolas, monospace.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Family | Use |
|
||||
|---|---|---|---|---|---|---|
|
||||
| `{typography.hero-display}` | 84px | 400 | 1.05 | -1.5px | PP Editorial Old | Hero ("Frontier AI. In your hands.") |
|
||||
| `{typography.display-lg}` | 64px | 400 | 1.10 | -1px | PP Editorial Old | Section openers |
|
||||
| `{typography.heading-1}` | 52px | 400 | 1.15 | -0.5px | PP Editorial Old | Page headlines ("Get in touch with the team.") |
|
||||
| `{typography.stat-display}` | 56px | 400 | 1.10 | -1px | PP Editorial Old | Stat callouts ("75%") |
|
||||
| `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Inter | Subsection headlines |
|
||||
| `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Inter | Card titles |
|
||||
| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Inter | Feature tile titles |
|
||||
| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | Inter | Smaller card titles |
|
||||
| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Inter | Hero subtitle, lead body |
|
||||
| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Inter | Primary body text |
|
||||
| `{typography.body-md-medium}` | 16px | 500 | 1.55 | 0 | Inter | Body emphasis |
|
||||
| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Inter | Secondary body |
|
||||
| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Inter | Active sidebar, button labels |
|
||||
| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Inter | Helper text |
|
||||
| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Inter | Badge labels |
|
||||
| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Inter | Footer microcopy |
|
||||
| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 1px | Inter | Section eyebrows |
|
||||
| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Inter | Button labels |
|
||||
| `{typography.code-md}` | 14px | 400 | 1.50 | 0 | JetBrains Mono | Code blocks |
|
||||
|
||||
### Principles
|
||||
- **Editorial / sans pairing** — PP Editorial Old (near-serif, classical) anchors hero displays; Inter (geometric sans) carries everything else. The contrast IS the brand voice.
|
||||
- **Generous body leading** (1.55 on body-md) for editorial readability across long-form pages
|
||||
- **Tight hero leading** (1.05 on 84px display) creates magazine-grade typographic display
|
||||
- **Negative letter-spacing** progresses with size — display sizes use -1.5px to -0.5px; smaller heads relax to 0
|
||||
- **Stat-display token** (56px Editorial) for marketing stat callouts ("75% / 80% / 100%")
|
||||
|
||||
## Layout
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 4px (8px primary increment)
|
||||
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (96px) · `{spacing.hero}` (120px)
|
||||
- **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); content pages tighten to `{spacing.section}` (64px)
|
||||
- **Card internal padding**: `{spacing.xl}` (24px) for compact cards; `{spacing.xxl}` (32px) for feature panels and form panels
|
||||
|
||||
### Grid & Container
|
||||
- Marketing pages use 1280px max-width with 32px gutters
|
||||
- Hero band uses 2-column split (text left, sunset photography right) on desktop
|
||||
- Le Studio product page uses 3-up feature grid below the hero
|
||||
- Contact page uses 1-column layout with cream form panel centered (~520px max-width)
|
||||
- Services page uses 4-tier card layout with cream feature panel separator strip
|
||||
|
||||
### Whitespace Philosophy
|
||||
Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding lets the mountain-sunset photography fill the frame. Form pages tighten dramatically: contact form panel uses `{spacing.xxl}` (32px) internal padding, fields stack on `{spacing.md}` (16px) gap.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
The system runs predominantly flat with strategic atmospheric depth from photography.
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| 0 (flat) | No shadow; `{colors.hairline-soft}` border | Default cards, table rows, form inputs |
|
||||
| 1 (subtle) | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Hover-elevated tiles |
|
||||
| 2 (card) | `rgba(0, 0, 0, 0.04) 0px 4px 12px 0px` | Standard feature cards |
|
||||
| 3 (mockup) | `rgba(0, 0, 0, 0.08) 0px 12px 24px -4px` | IDE mockup, code editor frames |
|
||||
| 4 (modal) | `rgba(0, 0, 0, 0.12) 0px 16px 48px -8px` | Modals, dropdowns |
|
||||
|
||||
### Decorative Depth
|
||||
- The atmospheric depth on Mistral's hero comes from the photographic mountain-sunset imagery — natural light gradient does the work
|
||||
- The "sunset stripe" closing band carries depth via its multi-stop gradient (red → orange → yellow → cream)
|
||||
- IDE / code mockups use dark-canvas backgrounds with subtle drop shadow
|
||||
|
||||
## Shapes
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| `{rounded.xs}` | 4px | Small chips, micro-controls |
|
||||
| `{rounded.sm}` | 6px | Discount badges, compact UI |
|
||||
| `{rounded.md}` | 8px | Buttons, inputs, search-pill, code blocks |
|
||||
| `{rounded.lg}` | 12px | Cards, modals, panels (the dominant card radius) |
|
||||
| `{rounded.xl}` | 16px | Larger feature panels |
|
||||
| `{rounded.xxl}` | 20px | Featured emphasis cards |
|
||||
| `{rounded.full}` | 9999px | Status badges, pill tabs (used sparingly — most buttons are NOT pills) |
|
||||
|
||||
The radius scale is sober and editorial — Mistral does NOT use pill buttons. `{rounded.md}` (8px) for buttons, `{rounded.lg}` (12px) for cards, `{rounded.full}` reserved for badges and the rare pill tab.
|
||||
|
||||
### Photography Geometry
|
||||
- Hero photography is full-bleed atmospheric mountain-sunset imagery with no internal framing
|
||||
- IDE/code mockups render with `{rounded.lg}` (12px) corners on dark canvas
|
||||
- Customer logos wall presents wordmarks inline at consistent 60–80px height
|
||||
- Product imagery (Le Studio mockup, agent UI mockups) sits in `{rounded.lg}` panels with subtle border
|
||||
|
||||
## Components
|
||||
|
||||
> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
|
||||
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Saturated-orange primary CTA, the dominant action.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
|
||||
- Pressed state `button-primary-pressed` deepens to `{colors.primary-deep}`.
|
||||
- Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.
|
||||
|
||||
**`button-cream`** — Warm cream-yellow secondary action, common on cream-surface sections.
|
||||
- Background `{colors.cream}`, text `{colors.ink}`, border `1px solid {colors.beige-deep}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-dark`** — Dark/black primary CTA on cream surfaces.
|
||||
- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-secondary`** — Outlined secondary action.
|
||||
- Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-on-cream`** — White button on cream-tinted backgrounds.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.beige-deep}`, typography `{typography.button-md}`, padding `10px 20px`, rounded `{rounded.md}`.
|
||||
|
||||
**`button-link`** — Inline orange text link.
|
||||
- Background transparent, text `{colors.primary}`, typography `{typography.body-sm-medium}`, padding `0`. Underline on activation.
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
**`card-base`** — Standard content card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`card-feature`** — White feature card with larger padding.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid `{colors.hairline-soft}`.
|
||||
|
||||
**`card-cream`** — Warm cream-yellow feature card (services tiers, perk callouts).
|
||||
- Background `{colors.cream}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.beige-deep}`.
|
||||
|
||||
**`card-cream-soft`** — Lighter cream variant.
|
||||
- Background `{colors.surface-cream-soft}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`.
|
||||
|
||||
**`card-feature-product`** — Product showcase card with subtle elevation.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(0, 0, 0, 0.04) 0px 4px 12px`.
|
||||
|
||||
**`card-photographic`** — Photographic product card with dark background.
|
||||
- Background `{colors.surface-code}`, text `{colors.on-dark}`, rounded `{rounded.lg}`, padding `0` (image fills the card).
|
||||
|
||||
**`pricing-card`** — Standard pricing tier card.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`pricing-card-featured`** — Featured pricing tier (cream background + orange border).
|
||||
- Background `{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `2px solid {colors.primary}`.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** — Standard text field.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.
|
||||
|
||||
**`text-input-focused`** — Activated state.
|
||||
- Border switches to `2px solid {colors.primary}`.
|
||||
|
||||
**`text-area`** — Multi-line text area for contact form.
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.md}`.
|
||||
|
||||
**`contact-form-panel`** — Cream-tinted form container on the contact page.
|
||||
- Background `{colors.cream}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.beige-deep}`. Hosts text-inputs, text-area, submit `button-dark`.
|
||||
|
||||
### Tabs
|
||||
|
||||
**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav (used sparingly on product pages).
|
||||
- Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
|
||||
- Active: background `{colors.ink}`, text `{colors.on-dark}`.
|
||||
|
||||
**`segmented-tab`** + **`segmented-tab-active`** — Underline-style tab navigation.
|
||||
- Inactive: text `{colors.steel}`, transparent background, padding `{spacing.sm} {spacing.md}`, no bottom border.
|
||||
- Active: text `{colors.primary}`, 2px bottom border in `{colors.primary}`.
|
||||
|
||||
### Badges & Status
|
||||
|
||||
**`badge-orange`** — Saturated orange badge.
|
||||
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-cream`** — Cream-tinted tag chip.
|
||||
- Background `{colors.cream-deeper}`, text `{colors.ink}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`badge-dark`** — Dark/black status badge.
|
||||
- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
|
||||
|
||||
**`promo-banner`** — Sticky black promo strip ABOVE the top nav.
|
||||
- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. Carries one-line copy + inline CTA.
|
||||
|
||||
### Code
|
||||
|
||||
**`code-block`** — Syntax-highlighted IDE-style code block (Le Studio page mockup, agent demos).
|
||||
- Background `{colors.surface-code}`, text `{colors.on-dark}`, typography `{typography.code-md}`, rounded `{rounded.md}`, padding `{spacing.md}`.
|
||||
|
||||
**`code-block-header`** — Header bar above the code block.
|
||||
- Background `{colors.surface-code}`, text `{colors.on-dark-muted}`, typography `{typography.caption}`, padding `{spacing.xs} {spacing.md}`, bottom border `1px solid rgba(255,255,255,0.08)`.
|
||||
|
||||
### Documentation Components
|
||||
|
||||
**`feature-icon-tile`** — Cream-yellow feature icon callout.
|
||||
- Background `{colors.cream}`, rounded `{rounded.md}`, padding `{spacing.md}`, border `1px solid {colors.beige-deep}`.
|
||||
|
||||
**`industry-tile`** — Industry-vertical tile in solutions page grid.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
|
||||
|
||||
**`stat-cell`** — Stat-row cell ("75% more / 80% better").
|
||||
- Background transparent, text `{colors.ink}`, typography `{typography.stat-display}`, padding `{spacing.lg}`.
|
||||
|
||||
**`customer-testimonial-card`** — Customer quote card (used inside Le Studio and Solutions pages).
|
||||
- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`. Quote in `{typography.body-md}`, attribution in `{typography.body-sm}` `{colors.steel}`.
|
||||
|
||||
**`logo-wall-item`** — Customer logo wordmark cell.
|
||||
- Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.
|
||||
|
||||
**`faq-accordion-item`** — FAQ panel.
|
||||
- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.
|
||||
|
||||
**`app-store-badge`** — App Store / Google Play download badge.
|
||||
- Background `{colors.ink}`, text `{colors.on-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`.
|
||||
|
||||
### Navigation
|
||||
|
||||
**Top Navigation (Marketing)** — Sticky white bar.
|
||||
- Background `{colors.canvas}`, height ~64px, bottom border `1px solid {colors.hairline-soft}`.
|
||||
- Left: Mistral M-mark logo + "MISTRAL AI_" wordmark + horizontal link list (Products, Solutions, Research, Blog, Customers, Company).
|
||||
- Right: "Contact Sales" link + black-pill "Try Studio" CTA.
|
||||
|
||||
### Signature Components
|
||||
|
||||
**`hero-band-sunset`** — Atmospheric sunset hero band.
|
||||
- Background gradient `linear-gradient(135deg, {colors.sunshine-700} 0%, {colors.sunshine-900} 60%, {colors.primary} 100%)` overlaid on photographic mountain landscape.
|
||||
- Layout: hero headline left in `{typography.hero-display}` ({colors.ink}), subtitle in `{typography.subtitle}` ({colors.ink-tint}), button row (`button-dark` + `button-secondary`), atmospheric mountain photography right.
|
||||
|
||||
**`sunset-stripe-band`** — Horizontal closing band at the foot of every page.
|
||||
- Multi-stop gradient: `{colors.primary}` → `{colors.sunshine-700}` → `{colors.sunshine-500}` → `{colors.yellow-saturated}` → `{colors.cream}`.
|
||||
- Padding `{spacing.lg} 0`. Spans full width, sits above the footer. THIS IS THE BRAND'S MOST RECOGNIZABLE SIGNATURE ELEMENT.
|
||||
|
||||
**`cta-banner-cream`** — Page-bottom CTA band on cream surface.
|
||||
- Background `{colors.cream}`, text `{colors.ink}`, rounded `{rounded.lg}`, padding `{spacing.section}`. "The next chapter of AI is yours." headline in `{typography.heading-1}` (PP Editorial Old), button row below.
|
||||
|
||||
**`footer-region`** — Cream-tinted multi-column footer.
|
||||
- Background `{colors.footer-cream}`, padding `{spacing.section} {spacing.xxl}`.
|
||||
- 5-column link grid (Why Mistral / Explore / Build / Legal + brand mark column).
|
||||
- Bottom: language picker + social icons.
|
||||
|
||||
**`footer-link`** — Individual footer link.
|
||||
- Background transparent, text `{colors.primary}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Reserve `{colors.primary}` (saturated orange) for primary CTAs and active states only
|
||||
- Use the **sunset stripe band** at the foot of every page — it's the brand's most recognizable signature
|
||||
- Pair PP Editorial Old (display) with Inter (UI) — never substitute either with a generic alternative
|
||||
- Apply `{rounded.md}` (8px) to buttons and `{rounded.lg}` (12px) to cards consistently
|
||||
- Use cream-yellow surfaces ({colors.cream}) for form panels, feature cards, and footer
|
||||
- Anchor heroes with photographic mountain-sunset imagery (or its visual equivalent — atmospheric gradient sky)
|
||||
- Use stat-display token (PP Editorial 56px) for stat callouts to maintain editorial character
|
||||
|
||||
### Don't
|
||||
- Don't use pill-shaped buttons (`{rounded.full}`) — Mistral's geometry is sober and editorial, not playful
|
||||
- Don't introduce additional accent colors beyond the orange/yellow/cream sunset palette
|
||||
- Don't reduce hero leading below 1.05 — the editorial display needs that magazine-grade tightness
|
||||
- Don't replace PP Editorial Old hero displays with Inter — the editorial / sans contrast IS the brand
|
||||
- Don't apply heavy shadows on flat documentation cards; reserve elevation for IDE mockups
|
||||
- Don't drop the sunset stripe band from any page bottom — it's the brand's continuity element
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| Mobile (small) | < 480px | Single column. Hero scales to 40px (PP Editorial). Pill nav collapses to hamburger. Pricing tiers stack 1-up. |
|
||||
| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 52px. |
|
||||
| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 64px. |
|
||||
| Desktop | 1024 – 1279px | Multi-column layouts. Hero 76px. Stat row at full width. |
|
||||
| Wide Desktop | ≥ 1280px | Full 84px hero presentation. |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons render at 40–44px effective height — at WCAG AAA floor with `10px 20px` padding
|
||||
- Form inputs render at 44px height
|
||||
- Pill tabs render at ~32px tall — bumps to 44px on mobile
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Promo banner** stays full-width; truncates at < 480px
|
||||
- **Top nav** below 1024px collapses to hamburger
|
||||
- **Hero band**: 2-column hero (text + photography) collapses to stacked at < 1024px
|
||||
- **Pricing tiers**: 4-column desktop → 2-column tablet → 1-column mobile
|
||||
- **Stat row**: 3-column → stacked at < 768px
|
||||
- **Hero typography**: 84px → 64px → 52px → 40px
|
||||
- **Footer**: 5-column desktop → 3-column tablet → 1-column accordion mobile
|
||||
- **Sunset stripe band** stays full-width on all breakpoints
|
||||
|
||||
### Image Behavior
|
||||
- Mountain-sunset photography uses 16:9 ratio with full-bleed scaling
|
||||
- IDE mockup images maintain aspect ratio across breakpoints
|
||||
- Customer logo wall presents wordmarks at consistent 60–80px height
|
||||
|
||||
## Iteration Guide
|
||||
|
||||
1. Focus on ONE component at a time
|
||||
2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`)
|
||||
3. Run `npx @google/design.md lint DESIGN.md` after edits
|
||||
4. Add new variants as separate `components:` entries
|
||||
5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis. Hero displays use `{typography.hero-display}` (PP Editorial Old).
|
||||
6. Keep `{colors.primary}` confined to primary CTAs, active states, and the sunset stripe band
|
||||
7. Cards use `{rounded.lg}` (12px), buttons use `{rounded.md}` (8px). Pills (`{rounded.full}`) reserved for badges only.
|
||||
8. Always include the sunset-stripe-band component at the foot of every page mockup.
|
||||
|
||||
## Known Gaps
|
||||
|
||||
- Specific dark-mode token values not surfaced; the brand has not shipped a published dark-mode palette
|
||||
- Animation/transition timings not extracted; recommend 150–200ms ease for hover/focus state transitions
|
||||
- Form validation success state not explicitly captured beyond defaults
|
||||
- Sunset stripe band gradient stops are approximations — the actual values may vary slightly across pages but the visual rhythm is consistent
|
||||
@@ -0,0 +1,5 @@
|
||||
# Mistral AI Inspired Design System
|
||||
|
||||
Design system details have been moved to: https://getdesign.md/mistral.ai/design-md
|
||||
|
||||
You can also view previews, dark mode examples, and download options on getdesign.md.
|
||||
Loaded 100 of 1089 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user