基础

本风格指南汇集了应用了品牌色彩和字体的各类元素与组件。如需更改任何颜色或数值,请使用“变量”(V)面板。

使用以下工具构建:
Flowkit 是 Webflow 的一款以实用性为先的 CSS 框架,通过在 Webflow 中应用预设的 CSS,帮助您快速构建网站。

颜色

基础颜色是一组应用于元素类的变量。您可以通过选择元素(样式面板)或在变量面板中更新颜色

核心颜色
重点小学
悬停
重点二
悬停
重音·第三音级
悬停
中立初选
中学
中性逆向

背景色

分节类和背景实用类正在使用变量来调整嵌套文本元素的背景色和字体颜色。

主要(默认)

标题

一篇精心撰写的段落,绝不仅仅是一堆字母的堆砌
中学

标题

一篇精心撰写的段落,绝不仅仅是一堆字母的堆砌
重点小学

标题

一篇精心撰写的段落,绝不仅仅是一堆字母的堆砌
重点二

标题

一篇精心撰写的段落,绝不仅仅是一堆字母的堆砌
重音·第三音级

标题

一篇精心撰写的段落,绝不仅仅是一堆字母的堆砌

标题

一篇精心撰写的段落,绝不仅仅是一堆字母的堆砌

排版

标题标签和类通过变量相互关联,这有助于保持它们的一致性。

阅读文档

标题

标题
预览
标题英雄

品牌之声

一级标题

标题体现了品牌的调性

二级标题

标题体现了品牌的调性

三级标题

标题体现了品牌的调性

小标题

标题体现了品牌的调性

标题 xsmall
标题体现了品牌的调性
标题 xxsmall
标题体现了品牌的调性
语义标签
标题
预览
所有 H1 标题

标题体现了品牌的调性

所有 H2 标题

标题体现了品牌的调性

所有 H3 标题

标题体现了品牌的调性

所有 H4 标题

标题体现了品牌的调性

所有 H5 标题
标题体现了品牌的调性
所有 H6 标题
标题体现了品牌的调性
段落
标题
预览
段落 xxlarge

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

段落 xlarge

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

大段落

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

段落(默认)

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

小段落

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

其他文本元素
标题
预览
副标题
一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。
引用
前所未有地,如此多的人能够如此便捷地接触到这一强大的媒介,借此来发展业务、分享知识、见解和创意,并建立社区。
眉毛
冒险正等着你
无序列表
  • 利用留白来提高文本的可读性。
  • 确保排版在所有屏幕尺寸下都能自适应。
  • 请使用适当的行距,以便于阅读。
列表按顺序排列
  1. 利用留白来提高文本的可读性。
  2. 确保排版在所有屏幕尺寸下都能自适应。
  3. 请使用适当的行距,以便于阅读。

间距

诸如边距、内边距和间距等间距样式,均采用基于 REM 的预定义变量集,并直接应用于组件类。

阅读文档
Gap

用于网格和弹性布局的一组变量。
请阅读文档以获取更多信息。

变量
预览
XXS 尺码
XS 尺码
SM Gap
MD Gap
LG Gap
XL Gap
XXL Gap
间距

为了保持间距的一致性,大多数文本元素和组件都采用了边距或内边距来设置间距。

预览
冒险正等着你

标题体现了品牌的调性

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

组件

按钮

每种按钮都有两个属性:颜色和大小。

阅读文档

文本按钮

小学
小型中学
关于Accent Primary
关于“重音”的补充说明
关于重音三音级

链接

主要链接
次要链接(小)
关于Accent Primary
关于“重音”的补充说明
关于重音三音级

标签

每种标签都有两个属性:颜色和大小。

阅读文档
小学
标签
Inerse
标签
在 Inverse 上
标签
关于Accent Primary
标签
关于“重音”的补充说明
标签
关于重音三音级
标签
图片

图片被包裹在一个类名为ratio_(value)的 div 标签中。这有助于控制图片的宽高比,处理溢出情况,并应用了圆角效果。

阅读文档
宽高比 16:9
比例 3:2
宽高比 4:3
比例 1:1
比例 3:4
比例 2:3
阿凡达

头像大小可以通过组合类进行调整。

阅读文档

图标

图标大小可以通过组合类进行调整。

阅读文档
超小号
默认
特大号
默认
在 Inverse 上
关于Accent Primary
关于“重音”的补充说明
关于重音三音级

表单

所有表单元素都能适应不同的屏幕尺寸。

阅读文档
关于原色
谢谢!我们已收到您的提交!
哎呀!提交表单时出现了一些问题。
关于反色
谢谢!我们已收到您的提交!
哎呀!提交表单时出现了一些问题。
关于重音
谢谢!我们已收到您的提交!
哎呀!提交表单时出现了一些问题。
关于重音(次要)
谢谢!我们已收到您的提交!
哎呀!提交表单时出现了一些问题。
关于重音三度
谢谢!我们已收到您的提交!
哎呀!提交表单时出现了一些问题。

卡片

所有卡片及其元素都会根据不同的表面进行适配。

阅读文档
默认卡片

换个标题,以免显得重复。

阅读帖子
副卡

换个标题,以免显得重复。

阅读帖子
反向卡

换个标题,以免显得重复。

阅读帖子
重点小学

换个标题,以免显得重复。

阅读帖子
重点二

换个标题,以免显得重复。

阅读帖子
重音·第三音级

换个标题,以免显得重复。

阅读帖子
关于中学

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

在 Inverse 上

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

关于Accent Primary

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

关于“重音”的补充说明

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

关于重音三音级

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

换个标题,以免显得重复。

Aenean 通过黑色和正色的路径,将内容显示在浅灰色区域中。现在,使用浅色背景,将内容以黑色和灰色为基调进行排版。

标签

每个选项卡按钮都使用一个基类,并可通过样式设置来呈现不同的背景或界面变体。

阅读文档
关于初选
这是标签块内的部分文本。
这是标签块内的部分文本。
制表符下划线样式
这是标签块内的部分文本。
这是标签块内的部分文本。
在 Inverse 上
这是标签块内的部分文本。
这是标签块内的部分文本。
关于Accent Primary
这是标签块内的部分文本。
这是标签块内的部分文本。
关于“重音”的补充说明
这是标签块内的部分文本。
这是标签块内的部分文本。
关于重音三音级
这是标签块内的部分文本。
这是标签块内的部分文本。

滑块

滑块使用箭头进行导航。这些箭头通过一个基类进行样式设置,并可添加表面修饰符以适应不同的背景。

阅读文档
默认

手风琴

折叠组件用于以垂直堆叠的形式切换内容的可见性。

阅读文档
标题
预览
手风琴
折叠标签
折叠标签
折叠标签
折叠框已展开
折叠标签

下拉菜单

下拉组件用于显示在交互时出现的选项列表。

阅读文档
标题
预览
下拉菜单

富文本

富文本组件用于长篇内容,例如博客文章、CMS 字段或文档。它可确保标题、段落、链接和列表等文本元素的格式保持一致。

阅读文档
预览

标题 1

二级标题

三级标题

标题 4

第5节
标题 6

富文本组件让您能够在一个地方创建并格式化标题、段落、引用块、图片和视频,而无需逐一添加和格式化。只需双击即可轻松创建内容。

  1. 富文本元素可用于静态或动态内容。
  2. 富文本元素允许您创建和格式化元素
富文本组件可用于静态或动态内容。对于静态内容,只需将其拖放到任意页面中即可开始编辑。对于动态内容,请在任意集合中添加一个富文本字段,然后在设置面板中将富文本组件与该字段关联。大功告成!

分隔线

分隔符分为两种类型:水平分隔符和垂直分隔符

阅读文档
水平初级
水平二次
水平重音
垂直初级
垂直二次
垂直装饰

标题体现了品牌的调性

标题体现了品牌的调性

标题体现了品牌的调性

标题体现了品牌的调性

标题体现了品牌的调性

标题体现了品牌的调性
标题体现了品牌的调性
标题
标题
标题
Aa
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
Aa
Aa
Aa
Aa
Aa
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
您的网站不应仅仅是外观好看
您的网站不应仅仅是外观好看
您的网站不应仅仅是外观好看
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
标签
引用块

标题 1

二级标题

三级标题

标题 4

第5节
标题 6

富文本组件让您能够在一个地方创建并格式化标题、段落、引用块、图片和视频,而无需逐一添加和格式化。只需双击即可轻松创建内容。

  • 富文本元素可用于静态或动态内容。
  • 富文本元素允许您创建和格式化元素
    • 标题
    • 段落
    • 媒体
      • 视频
      • 图片
  1. 富文本元素可用于静态或动态内容。
  2. 富文本元素允许您创建和格式化元素
    • 标题
    • 段落
    • 媒体
      • 视频
      • 图片
富文本组件可用于静态或动态内容。对于静态内容,只需将其拖放到任意页面中即可开始编辑。对于动态内容,请在任意集合中添加一个富文本字段,然后在设置面板中将富文本组件与该字段关联。大功告成!
Vlad Magdalin,Webflow 首席执行官

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。

一款精心设计的字体不仅仅是一组字母的集合——它是卓越设计的独特印记,承载着品牌精髓、传达着信息,并传递着一种氛围。
冒险正等着你
标题体现了品牌的调性
标题体现了品牌的调性
标题体现了品牌的调性
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。
按钮文字按钮文字按钮文字按钮文字按钮文字按钮文字按钮文字按钮文字按钮文字按钮文字按钮文字按钮文字
文本链接文本链接文本链接文本链接文本链接文本链接文本链接文本链接文本链接文本链接文本链接文本链接
谢谢!我们已收到您的提交!
哎呀!提交表单时出现了一些问题。
折叠标签
这是div块内的部分文本。
这是div块内的部分文本。
这是div块内的部分文本。