Style Guide

这里汇集了文章排版样式：字体、图片、图库、卡片、视频和页头布局。你可以比较实际示例，选择合适的样式，并复制对应的对话指令。每个示例都有固定代码；注明代码及其在文章中的位置，即可将样式应用到指定段落或图片。

有时“宽一点”意味着800像素，有时意味着几乎整个屏幕。在这里，您可以将手指指向所需的选项并复制其代码。这些词终于有了共同的大小。

选择一个样本，复制命令并指定材料中的位置。每种技术都有一个恒定的代码： QUOTE.RULE, IMAGE.WIDE 或者，例如， GALLERY.TWO-ONE.

文字与节奏

TEXT.H1

第一级标题

文本区域内的 H1 大小。页面标题以单独的标题显示 —— 其选项如下所示。

每个故事都有自己的规模

TEXT.H2

章节标题

一个新的想法有了明显的开始。这是本文的主要级别。

标题给出了文字方向

TEXT.H3

副标题

该部分已经增长 —— 让我们将其划分为易于理解的部分。

现在您可以看到详细信息

TEXT.H4

小字幕

另一个层次是，如果没有它，读者会更难以导航。

部分内有轻微扭曲

TEXT.H5

紧凑型接头

罕见的额外级别。不能替代正常的油性分泌物。

安静的澄清

TEXT.H6

最小标头

层次结构的最后一级；在大多数文章中我们都没有涉及到它。

最后一步

TEXT.PARAGRAPH

常规款

文章的基础。这里文字可以冷静地解释、联系和讲述。

当你不再注意到设计时，它就会发挥作用。该段落保持舒适的行宽，链接知道它的位置，并且下一个标题恰好在需要更改主题时出现。

TEXT.BOLD

油性分泌物

突出显示重要的单词，同时保持正常的段落。

这句话中重要的是 一种解决方案。其余的话不需要大声说。

TEXT.UNDERLINE

下划线

行内的一个小技巧。每个选择都有其自己的任务。

示例：带下划线的片段

TEXT.STRIKE

删除线

行内的一个小技巧。每个选择都有其自己的任务。

示例：~~旧的措辞~~

TEXT.CODE

代码上线

行内的一个小技巧。每个选择都有其自己的任务。

示例： image.wide

TEXT.SUP

上标

行内的一个小技巧。每个选择都有其自己的任务。

面积 —— 米²

TEXT.SUB

下标

行内的一个小技巧。每个选择都有其自己的任务。

公式-H₂O

TEXT.LINK

文字链接

常规链接仍然是优惠的一部分。

当您需要一组颜色和按钮时，打开设计系统。

QUOTE.RULE

带竖线的引用

Geist Mono 和垂直条纹。在保持文本宽度的同时突出一个想法。

一句好的引言会给读者留下一个想法，而设计只是突出它的工作。

QUOTE.ACCENT

口音引言

大线无条纹。进行介绍或值得深思的想法。

读者首先注意到节奏。然后——他们想告诉他的话。

LIST.BULLET

项目符号列表

几个相同的想法，包括嵌套点。

首先我们选择含义
然后——表格
- 宽度
- 节奏和口音
然后我们看结果

LIST.NUMBER

编号列表

顺序很重要：步骤、顺序、一致性。

Find an example in the catalog
复制他的代码
注明发表地点

TEXT.DIVIDER

分离器

故事各部分之间的停顿，没有新标题。

TEXT.CODE-BLOCK

代码块

Commands and examples get their own place.

Стиль: IMAGE.WIDE
Пропорция: RATIO.4X5
Место: после второго абзаца
Текст: без изменений

TEXT.TABLE

表

当多个选项更容易并排比较时。

任务	样式
突出一个想法	带竖线的引用
显示剧集	画廊
继续对话	带链接的卡片

比例

对于新材质，我们保留了五个主要预设：9:16、16:9、4:5、5:4 和 1:1。其余的是摄影和预览的附加选项。比例是来源形式； “常规/宽/全宽”-页面上的块大小。

对于 Instagram，我们区分照片源和垂直视频。 9:16 准备故事/卷轴；对于相片来说，基本的人像比例是4:5。应用程序、API 和广告格式可能会有所不同。对于博客来说，所有这些比例都被保留而没有裁剪；在转移到 Instagram 之前，我们会为特定展示位置选择适当的预设。

RATIO.9X16

9:16

垂直屏幕 · 1080 × 1920。Stories 和 Reels 的主要画布。对于提要中的照片，您将需要一个单独的框架。

灰色占位图，比例 9:16 · Geist Mono — 1080 × 1920 · 9:16

RATIO.16X9

16:9

水平视频 · 1920 × 1080。适合 YouTube、截屏视频和宽幅插图。

灰色占位图，比例 16:9 · Geist Mono — 1920 × 1080 · 16:9

RATIO.4X5

4:5

肖像 · 1080 × 1350。照片和卡片的主要垂直格式。

灰色占位图，比例 4:5 · Geist Mono — 1080 × 1350 · 4:5

RATIO.5X4

5:4

平静的横框·1350×1080。同一对边，旋转90°。

灰色占位图，比例 5:4 · Geist Mono — 1350 × 1080 · 5:4

RATIO.1X1

1:1

正方形 · 1080 × 1080。通用卡片、封面或紧凑情节。

1080 × 1080 · 1:1

RATIO.3X4

3:4

附加肖像 · 1080 × 1440。另存为单独的预设；在发布之前，我们会检查 Instagram 上特定上传方法的兼容性。

灰色占位图，比例 3:4 · Geist Mono — 1080 × 1440 · 3:4

RATIO.4X3

4:3

Classic horizontal frame · 1440 × 1080. Good for photographs and detailed diagrams.

灰色占位图，比例 4:3 · Geist Mono — 1440 × 1080 · 4:3

RATIO.3X2

3:2

Photographic horizontal frame · 1620 × 1080. Natural format of many cameras.

灰色占位图，比例 3:2 · Geist Mono — 1620 × 1080 · 3:2

RATIO.2X3

2:3

竖版照片·1080×1620。整张照片保存为博客； For the Instagram feed we are preparing a separate 4:5 crop.

灰色占位图，比例 2:3 · Geist Mono — 1080 × 1620 · 2:3

RATIO.191X100

1.91:1

宽卡·1910×1000，或1200×630，比例几乎相同。对于链接预览很有用。

图片

IMAGE.REGULAR

正常图像

保留在文本列中：最大 800 像素。

IMAGE.WIDE

宽幅图像

Extends beyond the text but retains the side margins.最大 1400 像素。

IMAGE.FULL

全宽

到达出版区域的边缘。侧边栏保持原位。

IMAGE.CAPTION

图片下方的标题

图片说明是图片下方的单独一行。没有终点； alt 为那些看不到图像的人描述图像。

画廊

连续一到三张图像。画廊有一个共同的标志：每张图片都有自己的 alt。单个标签不会显示在当前网格中。在电话上，可以根据主题的规则重新排列行。

GALLERY.TWO

附近有两个

行的总宽度、原始比例和整个系列的一个图片说明。图像的顺序对于所有语言都是通用的。

GALLERY.THREE

附近三个

行的总宽度、原始比例和整个系列的一个图片说明。图像的顺序对于所有语言都是通用的。

该系列有一种节奏和一个共同的图片说明

GALLERY.TWO-TWO

二加二

行的总宽度、原始比例和整个系列的一个图片说明。图像的顺序对于所有语言都是通用的。

GALLERY.TWO-ONE

两个在上面，一个在下面

行的总宽度、原始比例和整个系列的一个图片说明。图像的顺序对于所有语言都是通用的。

GALLERY.ONE-TWO

一个在上面，两个在下面

行的总宽度、原始比例和整个系列的一个图片说明。图像的顺序对于所有语言都是通用的。

GALLERY.MIXED

一个系列中的不同比例

行的总宽度、原始比例和整个系列的一个图片说明。图像的顺序对于所有语言都是通用的。

GALLERY.REGULAR

按文字宽度排列的画廊

同样的技术，收集在常规专栏中。

GALLERY.FULL

全宽画廊

该系列已到达出版区域的边缘。

该系列有一种节奏和一个共同的图片说明

卡片

以下是当前出版物中找到的所有卡片，以及单独标记的现成主题选项。新的铭文解释了该技术本身，图像被占位符取代。

CARD.BOOKMARK

链接卡

当一个链接值得一点封面、标题和解释时。

以下故事从此链接开始

该卡片可帮助您在点击之前了解链接的走向。

Style Guide

CARD.CALLOUT

旁注提示框

灰色背景将澄清内容与主要故事分开。

一个小小的澄清。并非每个评论都需要一个新部分：有时，保留在所需段落旁边的气球就足够了。

CARD.FILE

文件供下载

标题、说明和文件本身位于一个块中。

所有设计规范

JSON 格式的该目录的字典

style-guide-codes.json

JSON

Style Guide · nevsky.ae

CARD.BUTTON

文本中的按钮

当常规链接不够时单独执行操作。

通过链接继续

CARD.CTA.MINIMAL-IMAGE

带图像的紧凑型 CTA

该选项已在出版物中找到。这里的文字和图片被教育样本所取代。

故事在这里暂停并暗示下一步。图片支持这个想法，按钮清楚地告诉你要去哪里。

选择下一步

CARD.CTA.MINIMAL

无图像的紧凑型 CTA

该选项已在出版物中找到。这里的文字和图片被教育样本所取代。

故事在这里暂停并暗示下一步。图片支持这个想法，按钮清楚地告诉你要去哪里。

选择下一步

CARD.CTA.IMMERSIVE

带图像的大型 CTA

该选项已在出版物中找到。这里的文字和图片被教育样本所取代。

故事在这里暂停并暗示下一步。图片支持这个想法，按钮清楚地告诉你要去哪里。

选择下一步

CARD.CTA.CENTERED

位于中心的大型 CTA

该选项已在出版物中找到。这里的文字和图片被教育样本所取代。

故事在这里暂停并暗示下一步。图片支持这个想法，按钮清楚地告诉你要去哪里。

选择下一步

CARD.HEADER-SPLIT

侧面有图像的大横幅

两个领域：插图和短信。全角选项已在博客中使用。

这个想法有它自己的掩饰

大块会改变页面的节奏。您可以在这里介绍一个项目或用清晰的句子结束一个故事。

查看示例

CARD.TOGGLE

下拉块

简短的问题立即可见。点击它即可显示详细答案。

披露之下可以隐藏什么？

并非对每个读者都有用的补充：详细的组成、解释或长答案。

CARD.PRODUCT

产品卡

准备好主题设计。当前出版物中未使用；我们仅根据真实数据添加价格和评级。

产品名称将显示在此处

这是一个简短的描述。样品显示的成分没有虚构的价格或评级。

到产品

CARD.BUTTON.CENTER

中心按钮

同样的动作，位于柱子的中央。

查看示例

CARD.BUTTON.SECONDARY

平静按钮

二次设计的二次动作。

查看详情

CARD.CALLOUT.ACCENT

强调提示框

用强调色侧边线突出说明。文字保持页面背景，不使用按钮式填充。

这里有一个重要的警告。标注使其接近与其相关的想法。

CARD.CTA.WHITE

白色背景上的号召性用语

轻卡版；在深色主题中颜色也很明显。

可以平静地建议下一步。所需要的只是一个简短的解释和一个清晰的链接。

打开示例

CARD.HEADER.ACCENT

带强调色的横幅

以大标题和强调色形成简洁的阅读停顿。

可见的暂停

文本的两个平静部分之间有一个重音

CARD.CALLOUT.EMOJI

表情符号标注

左边的表情符号决定语调，右边的文字揭示这个想法。

💡

您可以在这里留下发现、建议或重要说明。小纸条也有声音。

CARD.CALLOUT.BLUE

蓝色标注

主题调色板中的就绪颜色。背景颜色和表情符号可以单独选择。

🌊

蓝色标注突出显示了一个简短的想法。选择适合材料氛围的色调。

CARD.CALLOUT.GREEN

绿色标注

主题调色板中的就绪颜色。背景颜色和表情符号可以单独选择。

🌱

绿色气球突出了一个简短的想法。选择适合材料氛围的色调。

CARD.CALLOUT.YELLOW

黄色标注

主题调色板中的就绪颜色。背景颜色和表情符号可以单独选择。

☀️

黄色标注突出显示了一个简短的想法。选择适合材料氛围的色调。

CARD.CALLOUT.RED

红色标注

主题调色板中的就绪颜色。背景颜色和表情符号可以单独选择。

📍

红色气球突出了一个简短的想法。选择适合材料氛围的色调。

CARD.CALLOUT.PINK

粉色标注

主题调色板中的就绪颜色。背景颜色和表情符号可以单独选择。

🌸

粉红色的气球突出了一个简短的想法。选择适合材料氛围的色调。

CARD.CALLOUT.PURPLE

紫色标注

主题调色板中的就绪颜色。背景颜色和表情符号可以单独选择。

🔮

紫色标注突出了一个简短的想法。选择适合材料氛围的色调。

CARD.CALLOUT.WHITE

光之领袖

主题调色板中的就绪颜色。背景颜色和表情符号可以单独选择。

💭

浅色标注突出显示了一个简短的想法。选择适合材料氛围的色调。

视频

VIDEO.FILE.PORTRAIT

垂直视频

档案9:16，常规专栏。该视频是由读者自己启动的。

来自已发表材料的真实视频 · Cursor 中的 Grok 4.6：已经能承担真实工作的前沿级模型

VIDEO.FILE.LANDSCAPE

横向视频

宽格式 16:9 文件。适用于截屏和界面演示。

来自已发表材料的真实视频 · Framer 年终报告：让我跻身前列的一年

VIDEO.FILE.FULL

全宽视频

同一文件到出版区域的边缘。块大小不会改变视频的宽高比。

来自已发表材料的真实视频 · Framer 年终报告：让我跻身前列的一年

VIDEO.FILE.SQUARE

方形视频

来自出版物的真实方形文件。您不必将其切割成正方形。

来自已发表材料的真实视频 · Threshold

VIDEO.LOOP.MUTED

循环播放无声音

视频循环播放并静音。通过单击启动该目录；文章的自动播放被指定为单独的命令。

来自已发表材料的真实视频 · Framer 年终报告：让我跻身前列的一年

嵌入内容与音频

EMBED.YOUTUBE

YouTube 内部出版物

使用设计和房地产出版物的真实链接。如果视频不可用，您仍然可以转到来源。

打开 YouTube

EMBED.INSTAGRAM

Instagram 帖子

Instagram 原生嵌入和保存在本站 CDN 上的视频。切换标签页，比较两种展示方式。

AUDIO.PLAYER

音频

音频卡的设计是主题；在已发布的库中找不到音频文件。这是一个没有录音的示例播放器。

此处添加实际的音频文件 —— 示例中没有录音

文章页头与内容列表

七个标题选项对应于站点模板的常规列表和当前编辑器。更改标题不会更改文本、块顺序或语言版本。材质设置保存为草稿；出版是单独进行的。

全屏示例显示在目录内的单独窗口中，因此其背景和导航样式不会更改整个样式指南页面。

POST.HEADER.STANDARD

标题在图片上方

标题和简介位于封面图上方，图片保持原始比例。

咖啡馆里的两小时：我们如何用 ChatGPT 和 Codex 搭建工业情报系统

在迪拜咖啡馆的两小时里，我和“秘密商业顾问”安娜，从想法走到了 B2B 产品：ChatGPT 梳理行业逻辑与数据，Codex 搭建网页服务，Cloudflare 将它上线生产环境

神经网络与氛围编程 AI 项目2026年8月21日5 分钟

咖啡馆里的两小时：我们如何用 ChatGPT 和 Codex 搭建工业情报系统 — 两杯咖啡、一台 MacBook、几个小时——第一版 PromPulse 就这样诞生

POST.HEADER.LEFT

封面图在左侧

封面图在左侧，标题和简介在右侧。窄屏下按主题规则重新排列。

咖啡馆里的两小时：我们如何用 ChatGPT 和 Codex 搭建工业情报系统

神经网络与氛围编程 AI 项目2026年8月21日5 分钟

POST.HEADER.RIGHT

封面图在右侧

标题和简介在左侧，封面图在右侧。窄屏下按主题规则重新排列。

咖啡馆里的两小时：我们如何用 ChatGPT 和 Codex 搭建工业情报系统

神经网络与氛围编程 AI 项目2026年8月21日5 分钟

POST.HEADER.TOP

图片在标题上方

封面图位于标题和简介之前，保持原始比例。

咖啡馆里的两小时：我们如何用 ChatGPT 和 Codex 搭建工业情报系统

神经网络与氛围编程 AI 项目2026年8月21日5 分钟

POST.HEADER.WIDE

标题下方的宽幅图片

标题和简介保持正文栏宽度，下方显示宽幅封面图。

咖啡馆里的两小时：我们如何用 ChatGPT 和 Codex 搭建工业情报系统

神经网络与氛围编程 AI 项目2026年8月21日5 分钟

POST.HEADER.TEXT-ONLY

纯文字

页头只显示标题和简介。封面图被隐藏，但不会从文章中删除。

咖啡馆里的两小时：我们如何用 ChatGPT 和 Codex 搭建工业情报系统

神经网络与氛围编程 AI 项目2026年8月21日5 分钟

POST.HEADER.FULLSCREEN

全屏封面

封面图作为背景铺满视口高度，标题和简介叠加在图片上，并以深色遮罩保证可读性。

POST.CARD.VERTICAL